/* ========================================================================== VietPatch – refine.css Lớp tinh chỉnh cuối cùng (nạp sau home.css). Mục tiêu: 1) Nâng độ dễ đọc: sàn cỡ chữ cho nhãn mono, tăng tương phản chữ phụ. 2) Sửa các chi tiết lệch: watermark trailer, specs hero mobile, giá trong modal. 3) Vi tinh chỉnh card thư viện, dải thống kê, modal thanh toán. Không đổi cấu trúc HTML ngoài phần đã ghi chú trong index.html/app.js. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Font & token nhỏ - Dùng Be Vietnam Pro (đã được tải trong nhưng trước đây không dùng) để dấu tiếng Việt hiển thị đồng nhất trên mọi hệ điều hành. -------------------------------------------------------------------------- */ :root { --sans: "Be Vietnam Pro", "Segoe UI Variable", "Segoe UI", Arial, sans-serif; --font-primary: var(--sans); --label-min: 0.62rem; /* sàn cỡ chữ cho nhãn mono viết hoa */ --body-min: 0.78rem; /* sàn cỡ chữ cho chữ phụ */ } .detail-video-card[hidden] { display: none !important; } .detail-video-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #050505; } .detail-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Hướng dẫn lần đầu — ba cảnh ngắn, có mô phỏng thao tác thay vì khối chữ. */ .first-use-guide[hidden] { display: none !important; } .first-use-guide { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 22px; background: rgba(7,7,6,.78); backdrop-filter: blur(12px) saturate(.72); opacity: 0; transition: opacity .22s ease; } .first-use-guide.active { opacity: 1; } .first-use-guide-card { position: relative; overflow: hidden; width: min(920px, 100%); color: #11110f; border: 1px solid rgba(255,255,255,.24); border-top: 5px solid #e63d2f; background: #f8f4ea; box-shadow: 22px 24px 0 rgba(0,0,0,.25), 0 35px 100px rgba(0,0,0,.38); outline: 0; transform: translateY(14px) scale(.985); transition: transform .28s cubic-bezier(.2,.8,.2,1); } .first-use-guide-card::before { position: absolute; right: -50px; bottom: -120px; color: rgba(17,17,15,.035); font: 900 26rem/.7 var(--sans); content: "V"; pointer-events: none; } .first-use-guide.active .first-use-guide-card { transform: none; } .first-use-guide-header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 76px 22px 30px; border-bottom: 1px solid #d5cdbf; } .first-use-guide-brand { display: flex; align-items: center; gap: 14px; } .first-use-guide-brand img { flex: 0 0 auto; filter: drop-shadow(3px 4px 0 rgba(230,61,47,.16)); } .first-use-guide-brand span { color: #e63d2f; font: 800 .61rem/1.2 ui-monospace, monospace; letter-spacing: .15em; } .first-use-guide-brand h3 { margin: 4px 0 0; font-size: clamp(1.35rem, 3vw, 2.05rem); line-height: 1; letter-spacing: -.045em; } .first-use-guide-counter { display: flex; align-items: baseline; gap: 6px; font-family: ui-monospace, monospace; } .first-use-guide-counter b { font-size: 1.6rem; } .first-use-guide-counter span { color: #8b857a; font-size: .68rem; } .first-use-guide-close { position: absolute; z-index: 5; top: 20px; right: 20px; width: 40px; height: 40px; border: 1px solid #c9c1b2; color: #11110f; background: rgba(248,244,234,.86); transition: color .18s ease, background .18s ease, transform .18s ease; } .first-use-guide-close:hover { color: #fff; background: #11110f; transform: rotate(4deg); } .first-use-guide-track { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); padding: 0 30px; border-bottom: 1px solid #d5cdbf; } .first-use-guide-track button { position: relative; display: flex; align-items: center; gap: 9px; min-height: 55px; padding: 0; border: 0; color: #8a8479; background: transparent; font: 800 .65rem/1 var(--sans); text-align: left; } .first-use-guide-track button::after { position: absolute; right: 20px; bottom: -1px; left: 0; height: 3px; background: transparent; content: ""; } .first-use-guide-track button span { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; } .first-use-guide-track button.active { color: #11110f; } .first-use-guide-track button.active::after { background: #e63d2f; } .first-use-guide-track button.active span { border-color: #e63d2f; background: #e63d2f; box-shadow: 0 0 0 5px rgba(230,61,47,.11); } .first-use-guide-scenes { position: relative; z-index: 1; min-height: 350px; } .first-use-guide-scene { display: none; grid-template-columns: minmax(220px,.68fr) minmax(340px,1.32fr); gap: clamp(28px,5vw,70px); align-items: center; min-height: 350px; padding: 34px 30px; } .first-use-guide-scene.active { display: grid; animation: guide-scene-in .32s cubic-bezier(.2,.8,.2,1) both; } .first-use-guide-copy > span { color: #e63d2f; font: 800 .62rem/1.2 ui-monospace, monospace; letter-spacing: .13em; } .first-use-guide-copy h4 { margin: 13px 0 12px; font-size: clamp(2rem,4.7vw,3.55rem); line-height: .9; letter-spacing: -.065em; } .first-use-guide-copy p { max-width: 290px; margin: 0; color: #756f65; font-size: .82rem; line-height: 1.65; } .guide-demo { position: relative; overflow: hidden; min-height: 240px; border: 1px solid #bdb5a7; background: rgba(255,255,255,.58); box-shadow: 11px 12px 0 rgba(17,17,15,.08); } .guide-demo::after { position: absolute; inset: 0; border-top: 3px solid #e63d2f; content: ""; pointer-events: none; } .guide-search-demo { display: grid; align-content: center; gap: 12px; padding: 28px; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(236,230,217,.72)); } .guide-demo-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 48px; padding: 0 15px; border: 1px solid #11110f; background: #fff; } .guide-demo-top i { color: #e63d2f; } .guide-demo-top span { font-weight: 700; } .guide-demo-top b { font: 800 .65rem ui-monospace, monospace; } .guide-demo-result { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 13px; color: #fff; background: #11110f; } .guide-demo-result > i { color: #ff6b5e; } .guide-demo-cover { display: grid; width: 46px; height: 46px; place-items: center; color: #fff; background: #e63d2f; font-weight: 900; } .guide-demo-result strong,.guide-demo-result small { display: block; } .guide-demo-result small { margin-top: 4px; color: #aaa69c; font-size: .62rem; } .guide-demo-tags { display: flex; gap: 7px; } .guide-demo-tags span { padding: 6px 9px; border: 1px solid #c8c0b2; color: #736d63; font: 700 .56rem ui-monospace, monospace; } .guide-version-demo { display: grid; grid-template-columns: 1fr auto 1fr; align-content: center; align-items: center; gap: 18px; padding: 28px; text-align: center; } .guide-version-demo > div { padding: 25px 12px; border: 1px solid #cbc3b5; background: #fff; } .guide-version-demo span,.guide-version-demo strong { display: block; } .guide-version-demo span { margin-bottom: 9px; color: #817b70; font: 800 .55rem ui-monospace, monospace; letter-spacing: .08em; } .guide-version-demo strong { font-size: 1.55rem; } .guide-version-demo > i { color: #e63d2f; } .guide-version-demo > b { grid-column: 1 / -1; justify-self: center; padding: 8px 13px; color: #216744; background: #e4f3e9; font: 800 .6rem ui-monospace, monospace; letter-spacing: .08em; } .guide-save-demo { display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 13px; padding: 28px; background: linear-gradient(135deg,#11110f 0 72%,#e63d2f 72%); } .guide-save-card { grid-row: 1 / 3; display: grid; align-content: end; min-height: 174px; padding: 20px; color: #fff; border: 1px solid #4a4842; background: linear-gradient(150deg,rgba(255,255,255,.08),transparent); } .guide-save-card span { color: #ff7c70; font: 800 .57rem ui-monospace, monospace; letter-spacing: .1em; } .guide-save-card strong { margin: 38px 0 5px; font-size: 1.25rem; } .guide-save-card small { color: #aaa69c; } .guide-save-signal { display: flex; align-items: center; gap: 10px; padding: 13px; background: #fff; } .guide-save-signal > i { color: #e63d2f; } .guide-save-signal b,.guide-save-signal small { display: block; white-space: nowrap; } .guide-save-signal b { font-size: .72rem; } .guide-save-signal small { margin-top: 3px; color: #817b70; font-size: .57rem; } .guide-save-check { display: grid; min-height: 62px; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.45); font-size: 1.15rem; } .first-use-guide-actions { position: relative; z-index: 1; display: flex; justify-content: space-between; min-height: 68px; border-top: 1px solid #d5cdbf; } .first-use-guide-actions button { min-width: 154px; padding: 0 24px; border: 0; font-weight: 800; } .first-use-guide-back { color: #5f5a52; background: transparent; } .first-use-guide-back:disabled { opacity: .32; } .first-use-guide-next,.first-use-guide-done { margin: 8px; color: #fff; background: #11110f; } .first-use-guide-next:hover,.first-use-guide-done:hover { background: #e63d2f; } .first-use-guide-actions button[hidden] { display: none !important; } @keyframes guide-scene-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } @media (max-width: 720px) { .first-use-guide { align-items: end; padding: 8px; } .first-use-guide-card { max-height: 94vh; overflow: auto; box-shadow: none; } .first-use-guide-header { padding: 20px 58px 17px 17px; } .first-use-guide-counter { display: none; } .first-use-guide-close { top: 13px; right: 12px; } .first-use-guide-track { padding: 0 17px; } .first-use-guide-track button { min-height: 49px; font-size: .58rem; } .first-use-guide-track button::after { right: 10px; } .first-use-guide-scene { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 24px 17px; } .first-use-guide-copy h4 { margin: 9px 0 7px; font-size: 2.25rem; } .guide-demo { min-height: 205px; box-shadow: 6px 7px 0 rgba(17,17,15,.08); } .guide-search-demo,.guide-version-demo,.guide-save-demo { padding: 18px; } .first-use-guide-actions { position: sticky; bottom: 0; background: #f8f4ea; } .first-use-guide-actions button { min-width: 0; padding: 0 17px; } } @media (prefers-reduced-motion: reduce) { .first-use-guide-scene.active { animation: none; } } /* -------------------------------------------------------------------------- 1. Sàn dễ đọc – các nhãn mono đang ở 0.46–0.58rem (7–9px) -------------------------------------------------------------------------- */ #tab-home .release-specs dt, .catalog-specs dt, .catalog-status small, .catalog-identity p, #tab-home .feature-name > span, .home-hero-signature small, .brand-entry-kicker { font-size: var(--label-min); } #tab-home .feature-name p { color: rgba(255, 253, 247, 0.76); font-size: var(--body-min); } #tab-home .release-specs dt { color: rgba(255, 253, 247, 0.62); } /* -------------------------------------------------------------------------- 2. Hero – desktop -------------------------------------------------------------------------- */ #tab-home .feature-name h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); } #tab-home .feature-name > span { letter-spacing: 0.18em; } #tab-home .primary-action { max-width: 200px; font-size: 0.74rem; letter-spacing: 0.06em; } /* -------------------------------------------------------------------------- 3. Trailer tuần - Watermark "WEEKLY / SCREENING": trước đây đè lên tiêu đề và bị cắt. Chuyển thành chữ viền mảnh nằm dưới đáy phải, không va chạm nội dung. -------------------------------------------------------------------------- */ .weekly-trailer-caption::before { top: auto; right: 30px; bottom: 22px; color: transparent; -webkit-text-stroke: 1px rgba(17, 17, 15, 0.14); font-size: clamp(1.8rem, 3vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; } #tab-home .weekly-trailer-caption p { font-size: 0.88rem; color: #44413a; } .weekly-trailer-meta { display: flex; align-items: center; gap: 14px; } .weekly-trailer-meta a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--rule); color: var(--ink); font-family: var(--mono); font-size: var(--label-min); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } .weekly-trailer-meta a:hover { color: var(--paper-white); background: var(--ink); border-color: var(--ink); } /* -------------------------------------------------------------------------- 4. Dải thống kê thư viện (catalog-overview) -------------------------------------------------------------------------- */ .catalog-overview { border-bottom-width: 3px; } .catalog-overview > div { padding: 18px 22px 15px; border-left: 1px solid rgba(243, 239, 229, 0.14); } .catalog-overview > div:first-child { border-left: 0; } .catalog-overview span { font-size: var(--label-min); letter-spacing: 0.1em; } .catalog-overview small { color: #9a948a; font-size: 0.6rem; } /* -------------------------------------------------------------------------- 5. Card thư viện -------------------------------------------------------------------------- */ .games-grid .game-card.catalog-row { transition: transform 200ms ease, box-shadow 200ms ease; } .games-grid .game-card.catalog-row:hover, .games-grid .game-card.catalog-row:focus-within { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(17, 17, 15, 0.16); } .catalog-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .catalog-specs dd { font-size: 0.72rem; } .catalog-specs dd.spec-price { color: var(--vermilion); font-weight: 800; } .catalog-specs dd.spec-price.is-free { color: var(--tested); } .catalog-status strong { font-size: 0.76rem; } /* -------------------------------------------------------------------------- 6. Modal chi tiết game -------------------------------------------------------------------------- */ .detail-header-banner { min-height: clamp(190px, 28vh, 260px); } .price-section .price-val { font-family: var(--condensed); font-size: 1.6rem; font-weight: 800; letter-spacing: 0.01em; } .price-val .text-success { display: inline-flex; align-items: center; padding: 4px 12px; color: var(--tested); border: 1.5px solid var(--tested); font-family: var(--condensed); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .detail-state-note { color: var(--muted); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; } .progress-details-bar { position: relative; overflow: hidden; height: 24px; background: #e6dfd2; border: 1px solid var(--rule); } .progress-details-bar .progress-fill { background: var(--vermilion); } .progress-details-bar .progress-num { position: absolute; top: 50%; left: auto; right: 8px; transform: translateY(-50%); padding: 2px 8px; color: var(--ink); background: var(--paper-white); border: 1px solid var(--rule); font-family: var(--mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 7. Modal thanh toán / nạp tiền / tài khoản -------------------------------------------------------------------------- */ .checkout-details .detail-row > span:first-child { font-size: var(--label-min); } .checkout-details .code { font-family: var(--mono); font-weight: 700; letter-spacing: 0.06em; } .qr-box { border: 1px solid var(--ink); border-radius: 0; box-shadow: 8px 8px 0 rgba(17, 17, 15, 0.16); } .qr-box canvas, .qr-code-svg-mock { border-radius: 0; } /* Nút "Kiểm tra thanh toán": gom icon + chữ vào giữa thay vì dàn hai mép (collection.css dùng selector ID nên phải lặp lại đúng selector đó) */ .payment-action-row .action-btn-main, .transaction-card #btn-verify-payment { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .payment-safety-note { font-size: 0.7rem; } .auth-tip { font-size: 0.68rem; } /* -------------------------------------------------------------------------- 8. Mobile -------------------------------------------------------------------------- */ @media (max-width: 760px) { /* Hero gọn hơn để lộ mép khu trailer, tăng tín hiệu cuộn trang */ #tab-home .hero-carousel { min-height: clamp(520px, 78svh, 640px); } /* Sửa hàng specs vỡ bố cục: nhãn/giá trị xếp dọc, không cắt chữ */ #tab-home .release-specs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 26px; } #tab-home .release-specs div { display: grid; gap: 4px; } #tab-home .release-specs dt { margin: 0; font-size: 0.54rem; white-space: nowrap; } #tab-home .release-specs dd { overflow: visible; font-size: 0.8rem; white-space: nowrap; } #tab-home .feature-name p { font-size: 0.74rem; } .catalog-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .catalog-specs dt { font-size: 0.56rem; } .catalog-specs dd { font-size: 0.68rem; } .catalog-overview > div { padding: 13px 16px 11px; } .detail-header-banner { min-height: clamp(150px, 24vh, 210px); } } /* ========================================================================== BOLD PASS – các điểm nhấn "hồ sơ lưu trữ / bản in" tạo cá tính riêng ========================================================================== */ /* -------------------------------------------------------------------------- B1. Vân giấy toàn trang (grain tĩnh, rất nhẹ – chất bản in) -------------------------------------------------------------------------- */ html::after { content: ""; position: fixed; inset: 0; z-index: 11990; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection { color: #fffdf7; background: var(--vermilion); } /* -------------------------------------------------------------------------- B2. Thanh tiến trình đọc trang (đỏ, mảnh, trên cùng) -------------------------------------------------------------------------- */ .vp-scroll-progress { position: fixed; top: 0; left: 0; z-index: 12010; width: 0%; height: 3px; background: var(--vermilion); box-shadow: 0 0 8px rgba(223, 63, 47, 0.5); } /* -------------------------------------------------------------------------- B3. Hero: số thứ tự slide khổ lớn kiểu chữ viền + kicker dạng tem đỏ -------------------------------------------------------------------------- */ .hero-slide-index { position: absolute; z-index: 3; right: clamp(70px, 6.5vw, 120px); bottom: clamp(26px, 5vh, 58px); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 253, 247, 0.24); font-family: var(--condensed); font-size: clamp(7rem, 15vw, 15rem); font-weight: 900; line-height: 0.8; letter-spacing: -0.04em; pointer-events: none; user-select: none; } #tab-home .feature-name > span { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 5px 12px; color: #fffdf7; background: var(--vermilion); letter-spacing: 0.18em; } #tab-home .feature-name > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fffdf7; animation: vp-live-dot 1.6s ease-in-out infinite; } @keyframes vp-live-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.72); } } /* Dấu định vị bản in (crop marks) quanh khối thông tin hero */ #tab-home .hero-carousel .feature-sheet { position: absolute; } #tab-home .feature-sheet::before, #tab-home .feature-sheet::after { content: "" !important; position: absolute; width: 22px; height: 22px; display: block !important; pointer-events: none; opacity: 0.85; } #tab-home .feature-sheet::before { top: -16px; left: -20px; border-top: 2px solid var(--vermilion); border-left: 2px solid var(--vermilion); background: none; } #tab-home .feature-sheet::after { right: -20px; bottom: -14px; border-right: 2px solid var(--vermilion); border-bottom: 2px solid var(--vermilion); background: none; } /* -------------------------------------------------------------------------- B4. ARCHIVE WIRE – dải tin chạy ngang (tạm dừng khi rê chuột) -------------------------------------------------------------------------- */ .vp-ticker { order: 1; display: flex; align-items: stretch; min-height: 46px; overflow: hidden; color: var(--ivory); background: var(--ink); border-top: 1px solid #2e2d28; border-bottom: 3px solid var(--vermilion); } .vp-ticker-label { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 0 18px; color: #fffdf7; background: var(--vermilion); font-family: var(--mono); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.15em; white-space: nowrap; } .vp-ticker-viewport { flex: 1; display: flex; align-items: center; overflow: hidden; } .vp-ticker-track { display: flex; flex: none; animation: vp-ticker-scroll var(--vp-ticker-duration, 38s) linear infinite; } .vp-ticker:hover .vp-ticker-track { animation-play-state: paused; } .vp-ticker-group { flex: none; display: flex; align-items: center; } .vp-ticker-item { padding: 0 22px; color: #d8d2c6; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; white-space: nowrap; } .vp-ticker-sep { color: var(--vermilion); font-size: 0.55rem; } @keyframes vp-ticker-scroll { to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- B5. Trailer tuần: viền phim đục lỗ hai mép khung video -------------------------------------------------------------------------- */ #tab-home .weekly-trailer-media { position: relative; } #tab-home .weekly-trailer-media::before, #tab-home .weekly-trailer-media::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 3; width: 15px; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(243, 239, 229, 0.85) 9px 17px) 50% 0 / 7px 100% no-repeat, #0b0c0b; } #tab-home .weekly-trailer-media::before { left: 0; } #tab-home .weekly-trailer-media::after { right: 0; } /* -------------------------------------------------------------------------- B6. Tiêu đề thư viện: vạch gạch chéo đỏ kiểu biên tập -------------------------------------------------------------------------- */ #catalog-heading::before { content: ""; display: inline-block; width: 46px; height: 10px; margin-right: 18px; vertical-align: 0.08em; background: repeating-linear-gradient(-45deg, var(--vermilion) 0 3px, transparent 3px 7px); } /* -------------------------------------------------------------------------- B7. Card thư viện: duotone → màu khi hover, lưới halftone, góc gấp đỏ, tem "ĐÃ KIỂM THỬ", mã vạch trên nút -------------------------------------------------------------------------- */ .games-grid .game-card.catalog-row { position: relative; } .games-grid .game-card.catalog-row::before { content: ""; position: absolute; top: 0; right: 0; z-index: 5; border-style: solid; border-width: 0 26px 26px 0; border-color: transparent var(--vermilion) transparent transparent; } .games-grid .card-header-img { position: relative; overflow: hidden; } .games-grid .card-header-img img { filter: grayscale(0.3) sepia(0.08) contrast(1.04); transform: scale(1.001); transition: filter 350ms ease, transform 450ms ease; } .games-grid .game-card:hover .card-header-img img, .games-grid .game-card:focus-within .card-header-img img { filter: none; transform: scale(1.045); } .games-grid .card-header-img::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.2; background-image: radial-gradient(rgba(17, 17, 15, 0.5) 1px, transparent 1.4px); background-size: 5px 5px; mix-blend-mode: multiply; transition: opacity 350ms ease; } .games-grid .game-card:hover .card-header-img::before, .games-grid .game-card:focus-within .card-header-img::before { opacity: 0; } .games-grid .card-detail-btn span::after { content: ""; display: inline-block; width: 34px; height: 11px; margin-left: 12px; vertical-align: -1px; opacity: 0.5; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px, currentColor 3px 5px, transparent 5px 6px); } /* -------------------------------------------------------------------------- B8. Nút bấm "bản in": đổ bóng khối, nhấc lên khi hover, dập xuống khi bấm -------------------------------------------------------------------------- */ #tab-home .primary-action, .games-grid .card-detail-btn, .detail-panel .action-btn-main, .modal-card .action-btn-main { transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease; } #tab-home .primary-action { box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4); } #tab-home .primary-action:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.45); } #tab-home .primary-action:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4); } .games-grid .card-detail-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 rgba(17, 17, 15, 0.28); } .games-grid .card-detail-btn:active { transform: translate(1px, 1px); box-shadow: none; } .detail-panel .action-btn-main:not(:disabled):hover, .modal-card .action-btn-main:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 rgba(17, 17, 15, 0.3); } .detail-panel .action-btn-main:not(:disabled):active, .modal-card .action-btn-main:not(:disabled):active { transform: translate(1px, 1px); box-shadow: none; } /* -------------------------------------------------------------------------- B9. Modal chi tiết: tem lưu trữ trên banner -------------------------------------------------------------------------- */ .detail-header-banner { position: relative; } .detail-header-banner::before { content: "VIETPATCH ★ HỒ SƠ LƯU TRỮ"; position: absolute; right: 26px; bottom: 24px; z-index: 2; padding: 7px 12px; transform: rotate(-5deg); color: #f3efe5; background: rgba(17, 17, 15, 0.3); border: 2px solid rgba(243, 239, 229, 0.85); outline: 1px solid rgba(243, 239, 229, 0.4); outline-offset: 3px; font-family: var(--mono); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; } /* -------------------------------------------------------------------------- B10. Mobile cho bold pass -------------------------------------------------------------------------- */ @media (max-width: 760px) { .hero-slide-index { top: 66px; right: 16px; bottom: auto; -webkit-text-stroke-width: 1px; font-size: 5.4rem; } #tab-home .feature-sheet::before, #tab-home .feature-sheet::after { display: none !important; } .vp-ticker { min-height: 40px; } .vp-ticker-label { padding: 0 12px; font-size: 0.54rem; } .vp-ticker-item { padding: 0 16px; font-size: 0.6rem; } #catalog-heading::before { width: 30px; height: 8px; margin-right: 12px; } #tab-home .weekly-trailer-media::before, #tab-home .weekly-trailer-media::after { width: 11px; } .detail-header-banner::before { right: 16px; bottom: 14px; font-size: 0.5rem; } } /* -------------------------------------------------------------------------- B11. Tôn trọng prefers-reduced-motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .vp-ticker-track, #tab-home .feature-name > span::before, .games-grid .catalog-badge, .games-grid .catalog-badge::before, .games-grid .catalog-badge::after, .games-grid .catalog-badge > i, .games-grid .catalog-signal-track::after, .games-grid .catalog-signal-track > i { animation: none !important; } .games-grid .card-header-img img, .games-grid .game-card.catalog-row, #tab-home .primary-action, .games-grid .card-detail-btn { transition: none !important; } .games-grid .game-card:hover .card-header-img img { transform: none; } } /* -------------------------------------------------------------------------- B11.1 Nhãn card: hệ tem tín hiệu VietPatch Nhãn nằm trong một đường tín hiệu riêng dưới cover nên không che ảnh game. -------------------------------------------------------------------------- */ .games-grid .catalog-signal-row { --signal-accent: #706d65; --signal-speed: 3.8s; min-height: 38px; padding: 4px 14px; display: flex; align-items: center; gap: 12px; overflow: hidden; color: #fdf9ef; background: #151513; border-top: 3px solid var(--signal-accent); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .games-grid .catalog-signal-row.signal-new { --signal-accent: #ef4937; --signal-speed: 2.4s; } .games-grid .catalog-signal-row.signal-hot { --signal-accent: #ffc657; --signal-speed: 2.9s; } .games-grid .catalog-signal-row.signal-verified { --signal-accent: #5cb77d; --signal-speed: 4.1s; } .games-grid .catalog-signal-row.signal-progress { --signal-accent: #e4ad32; --signal-speed: 1.8s; } .games-grid .catalog-signal-row.signal-community { --signal-accent: #78b9f2; --signal-speed: 3.2s; } .games-grid .catalog-signal-row.signal-free { --signal-accent: #65c89a; --signal-speed: 3.6s; } .games-grid .catalog-signal-code { flex: 0 0 auto; color: #aaa69e; font-family: var(--mono); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.1em; } .games-grid .catalog-signal-track { position: relative; min-width: 28px; height: 12px; flex: 1 1 auto; overflow: hidden; } .games-grid .catalog-signal-track::before { position: absolute; top: 50%; right: 0; left: 0; height: 1px; content: ""; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--signal-accent) 76%, transparent) 0 7px, transparent 7px 12px); } .games-grid .catalog-signal-track::after { position: absolute; top: 3px; left: 0; width: 6px; height: 6px; content: ""; border: 1px solid #151513; border-radius: 50%; background: var(--signal-accent); box-shadow: 0 0 9px color-mix(in srgb, var(--signal-accent) 82%, transparent); animation: vp-signal-run var(--signal-speed) cubic-bezier(0.45, 0, 0.55, 1) infinite; } .games-grid .catalog-signal-track > i { position: absolute; top: 3px; right: 0; width: 6px; height: 6px; border: 1px solid var(--signal-accent); border-radius: 50%; animation: vp-signal-receiver var(--signal-speed) ease-in-out infinite; } .games-grid .catalog-badge { --badge-a: #171714; --badge-b: #302f29; --badge-accent: #f04a3a; --badge-ink: #fffaf0; position: relative; top: auto; left: auto; z-index: 1; min-height: 27px; max-width: 72%; gap: 7px; padding: 0 16px 0 9px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--badge-accent) 72%, #111 28%); border-radius: 2px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.32)); color: var(--badge-ink); background: linear-gradient(112deg, var(--badge-a) 0 58%, var(--badge-b) 100%); font-family: var(--mono); font-size: 0.54rem; font-weight: 900; letter-spacing: 0.085em; line-height: 1; white-space: nowrap; isolation: isolate; transform-origin: left center; animation: vp-badge-arrive 560ms cubic-bezier(0.18, 0.82, 0.2, 1.12) both; } .games-grid .catalog-badge::before { position: absolute; inset: 4px auto 4px 3px; z-index: 0; width: 3px; content: ""; background: var(--badge-accent); box-shadow: 0 0 9px color-mix(in srgb, var(--badge-accent) 75%, transparent); } .games-grid .catalog-badge::after { position: absolute; z-index: 0; content: ""; pointer-events: none; } .games-grid .catalog-badge > i, .games-grid .catalog-badge > span { position: relative; z-index: 1; } .games-grid .catalog-badge > i { display: grid; width: 17px; height: 17px; place-items: center; flex: 0 0 17px; border: 1px solid currentColor; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 0.62rem; } .games-grid .catalog-badge > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .games-grid .game-card:hover .catalog-badge, .games-grid .game-card:focus-within .catalog-badge { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4)); } /* Cập nhật mới: tín hiệu điện quét nhanh qua nhãn. */ .games-grid .catalog-badge.badge-new { --badge-a: #ef4937; --badge-b: #9f2027; --badge-accent: #ffd29a; --badge-ink: #fffdf7; } .games-grid .catalog-badge.badge-new::after { inset: -20% auto -20% -34%; width: 24%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent); transform: skewX(-18deg); animation: vp-badge-wipe 3.6s ease-in-out infinite; } .games-grid .catalog-badge.badge-new > i { animation: vp-badge-bolt 2.4s ease-in-out infinite; } /* Nổi bật: ánh kim dịch chuyển và vương miện nổi lên. */ .games-grid .catalog-badge.badge-hot { --badge-a: #15130f; --badge-b: #7c321f; --badge-accent: #ffc657; --badge-ink: #fff8e7; background-size: 180% 100%; animation: vp-badge-arrive 560ms cubic-bezier(0.18, 0.82, 0.2, 1.12) both, vp-badge-hot-flow 5.4s ease-in-out infinite; } .games-grid .catalog-badge.badge-hot::after { inset: -20% auto -20% -36%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 216, 126, 0.78), transparent); transform: skewX(-18deg); animation: vp-badge-wipe 3.1s ease-in-out infinite; } .games-grid .catalog-badge.badge-hot > i { color: #ffe18f; animation: vp-badge-crown 2.7s ease-in-out infinite; } /* Đã kiểm thử: dấu kiểm đóng xuống như con dấu QA. */ .games-grid .catalog-badge.badge-verified { --badge-a: #e3f3e8; --badge-b: #9bcbaa; --badge-accent: #167345; --badge-ink: #123824; } .games-grid .catalog-badge.badge-verified::after { top: 50%; left: 6px; width: 24px; height: 24px; border: 1px solid rgba(22, 115, 69, 0.5); border-radius: 50%; animation: vp-badge-verified-ring 3.8s ease-out infinite; } .games-grid .catalog-badge.badge-verified > i { color: #167345; animation: vp-badge-stamp 3.8s ease-in-out infinite; } /* Đang hoàn thiện: sọc tiến độ liên tục chạy về phía trước. */ .games-grid .catalog-badge.badge-progress { --badge-a: #e2aa2d; --badge-b: #f3d16f; --badge-accent: #4a3411; --badge-ink: #2a1e0b; background: repeating-linear-gradient(135deg, #e4ad32 0 10px, #f0ca62 10px 20px); background-size: 30px 30px; animation: vp-badge-arrive 560ms cubic-bezier(0.18, 0.82, 0.2, 1.12) both, vp-badge-progress-lines 2.2s linear infinite; } .games-grid .catalog-badge.badge-progress > i { animation: vp-badge-progress-icon 2.2s linear infinite; } /* Cộng đồng chọn: cụm tín hiệu chấm lan sang phải. */ .games-grid .catalog-badge.badge-community { --badge-a: #233b67; --badge-b: #426ba5; --badge-accent: #9ed7ff; --badge-ink: #f7fbff; } .games-grid .catalog-badge.badge-community::after { top: 6px; right: 10px; width: 34px; height: 18px; opacity: 0.5; background: radial-gradient(circle at 15% 50%, #c6eaff 0 2px, transparent 2.8px), radial-gradient(circle at 50% 50%, #c6eaff 0 2px, transparent 2.8px), radial-gradient(circle at 85% 50%, #c6eaff 0 2px, transparent 2.8px); animation: vp-badge-community-signal 2.8s ease-in-out infinite; } .games-grid .catalog-badge.badge-community > i { animation: vp-badge-community-icon 2.8s ease-in-out infinite; } /* Miễn phí: dải ngọc lục bảo và hộp quà bật nhẹ. */ .games-grid .catalog-badge.badge-free { --badge-a: #15563d; --badge-b: #2d8a67; --badge-accent: #b9f0d7; --badge-ink: #effff6; } .games-grid .catalog-badge.badge-free::after { inset: 0 auto 0 -28%; width: 18%; background: linear-gradient(90deg, transparent, rgba(211, 255, 235, 0.74), transparent); transform: skewX(-16deg); animation: vp-badge-gift-ribbon 4.6s ease-in-out infinite; } .games-grid .catalog-badge.badge-free > i { animation: vp-badge-gift-hop 3.2s ease-in-out infinite; } @keyframes vp-badge-arrive { 0% { opacity: 0; transform: translateX(-14px) scaleX(0.9); } 72% { opacity: 1; transform: translateX(2px) scaleX(1.02); } 100% { opacity: 1; transform: translateX(0) scaleX(1); } } @keyframes vp-badge-wipe { 0%, 52% { opacity: 0; transform: translateX(-140%) skewX(-18deg); } 62% { opacity: 1; } 78%, 100% { opacity: 0; transform: translateX(680%) skewX(-18deg); } } @keyframes vp-badge-bolt { 0%, 72%, 100% { transform: scale(1) rotate(0deg); filter: none; } 78% { transform: scale(1.18) rotate(-7deg); filter: drop-shadow(0 0 5px #ffe5b5); } 84% { transform: scale(0.94) rotate(4deg); } } @keyframes vp-badge-hot-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes vp-badge-crown { 0%, 100% { transform: translateY(1px) rotate(-4deg); filter: none; } 48% { transform: translateY(-2px) rotate(4deg); filter: drop-shadow(0 0 5px rgba(255, 205, 99, 0.9)); } } @keyframes vp-badge-stamp { 0%, 68%, 100% { transform: scale(1); } 74% { transform: scale(1.28); } 82% { transform: scale(0.9); } } @keyframes vp-badge-verified-ring { 0%, 68% { opacity: 0; transform: translateY(-50%) scale(0.55); } 78% { opacity: 0.7; } 96%, 100% { opacity: 0; transform: translateY(-50%) scale(1.6); } } @keyframes vp-badge-progress-lines { to { background-position: 30px 0; } } @keyframes vp-badge-progress-icon { to { transform: rotate(360deg); } } @keyframes vp-badge-community-signal { 0%, 100% { opacity: 0.28; transform: translateX(-3px) scaleX(0.82); } 50% { opacity: 0.78; transform: translateX(3px) scaleX(1); } } @keyframes vp-badge-community-icon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } @keyframes vp-badge-gift-ribbon { 0%, 58% { opacity: 0; transform: translateX(-120%) skewX(-16deg); } 68% { opacity: 1; } 82%, 100% { opacity: 0; transform: translateX(760%) skewX(-16deg); } } @keyframes vp-badge-gift-hop { 0%, 70%, 100% { transform: translateY(0) rotate(0deg); } 77% { transform: translateY(-3px) rotate(-6deg); } 84% { transform: translateY(0) rotate(5deg); } } @keyframes vp-signal-run { 0% { left: 0; opacity: 0; transform: scale(0.65); } 12% { opacity: 1; } 78% { opacity: 1; } 92%, 100% { left: calc(100% - 6px); opacity: 0; transform: scale(1.18); } } @keyframes vp-signal-receiver { 0%, 72%, 100% { opacity: 0.34; transform: scale(0.75); } 84% { opacity: 1; transform: scale(1.35); box-shadow: 0 0 8px var(--signal-accent); } } @media (max-width: 620px) { .games-grid .game-card.catalog-row, .games-grid .game-card.catalog-row:hover, .games-grid .game-card.catalog-row:focus-within { grid-template-areas: "cover signal" "cover identity" "cover status" "cover specs" "action action"; grid-template-rows: auto auto auto 1fr auto; } .games-grid .catalog-signal-row { grid-area: signal; min-height: 31px; padding: 3px 12px; gap: 8px; border-top-width: 2px; } .games-grid .catalog-badge { min-height: 23px; max-width: calc(100% - 26px); gap: 5px; padding: 0 12px 0 7px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); font-size: 0.46rem; letter-spacing: 0.055em; } .games-grid .catalog-badge > i { width: 13px; height: 13px; flex-basis: 13px; font-size: 0.47rem; } .games-grid .catalog-signal-track { min-width: 18px; } .games-grid .catalog-signal-code { font-size: 0.44rem; } } /* -------------------------------------------------------------------------- B11.2 Metadata biên tập: nhãn hòa vào phần nội dung, không tạo thêm dải UI. Chuyển động chỉ chạy khi người dùng tương tác với card. -------------------------------------------------------------------------- */ .games-grid .catalog-identity > .catalog-badge { --badge-accent: #d23b30; position: relative; top: auto; left: auto; z-index: 1; width: max-content; min-height: 0; max-width: 100%; margin: 0 0 10px; padding: 0 0 7px; gap: 7px; overflow: visible; border: 0; border-radius: 0; clip-path: none; filter: none; color: #5f5b53; background: transparent; font-size: 0.54rem; font-weight: 900; letter-spacing: 0.085em; line-height: 1.15; isolation: auto; animation: vp-inline-label-in 420ms ease-out both; } .games-grid .catalog-identity > .catalog-badge::before { position: absolute; inset: auto 0 0 25px; width: auto; height: 1px; content: ""; background: color-mix(in srgb, var(--badge-accent) 25%, transparent); box-shadow: none; transform: scaleX(0.25); transform-origin: left center; transition: transform 320ms ease, background-color 320ms ease; animation: none; } .games-grid .catalog-identity > .catalog-badge::after { position: absolute; inset: auto auto -1px 25px; width: 18px; height: 2px; content: ""; opacity: 1; background: var(--badge-accent); transform: none; transition: width 320ms cubic-bezier(0.2, 0.75, 0.25, 1); animation: none; } .games-grid .catalog-identity > .catalog-badge > i { width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid color-mix(in srgb, var(--badge-accent) 62%, #625e56 38%); border-radius: 0; color: var(--badge-accent); background: transparent; font-size: 0.58rem; transition: color 200ms ease, background-color 200ms ease, transform 200ms ease; animation: none !important; } .games-grid .catalog-identity > .catalog-badge > span { color: inherit; } .games-grid .catalog-identity > .catalog-badge.badge-new { --badge-accent: #df3f32; color: #6c332d; background: transparent; border: 0; } .games-grid .catalog-identity > .catalog-badge.badge-hot { --badge-accent: #b66b19; color: #69471f; background: transparent; border: 0; } .games-grid .catalog-identity > .catalog-badge.badge-verified { --badge-accent: #26764d; color: #315e47; background: transparent; border: 0; } .games-grid .catalog-identity > .catalog-badge.badge-progress { --badge-accent: #9a711d; color: #655424; background: transparent; border: 0; } .games-grid .catalog-identity > .catalog-badge.badge-community { --badge-accent: #356896; color: #3a5974; background: transparent; border: 0; } .games-grid .catalog-identity > .catalog-badge.badge-free { --badge-accent: #247a58; color: #315f4e; background: transparent; border: 0; } .games-grid .game-card:hover .catalog-identity > .catalog-badge::before, .games-grid .game-card:focus-within .catalog-identity > .catalog-badge::before { background: color-mix(in srgb, var(--badge-accent) 55%, transparent); transform: scaleX(1); } .games-grid .game-card:hover .catalog-identity > .catalog-badge::after, .games-grid .game-card:focus-within .catalog-identity > .catalog-badge::after { width: calc(100% - 25px); } .games-grid .game-card:hover .catalog-identity > .catalog-badge > i, .games-grid .game-card:focus-within .catalog-identity > .catalog-badge > i { color: #fffdf6; background: var(--badge-accent); } .games-grid .game-card:hover .catalog-identity > .badge-new > i, .games-grid .game-card:focus-within .catalog-identity > .badge-new > i { animation: vp-inline-bolt 620ms ease-out both !important; } .games-grid .game-card:hover .catalog-identity > .badge-hot > i, .games-grid .game-card:focus-within .catalog-identity > .badge-hot > i { animation: vp-inline-crown 760ms ease-out both !important; } .games-grid .game-card:hover .catalog-identity > .badge-verified > i, .games-grid .game-card:focus-within .catalog-identity > .badge-verified > i { animation: vp-inline-stamp 600ms ease-out both !important; } .games-grid .game-card:hover .catalog-identity > .badge-progress > i, .games-grid .game-card:focus-within .catalog-identity > .badge-progress > i { animation: vp-inline-progress 720ms ease-in-out both !important; } .games-grid .game-card:hover .catalog-identity > .badge-community > i, .games-grid .game-card:focus-within .catalog-identity > .badge-community > i { animation: vp-inline-community 720ms ease-out both !important; } .games-grid .game-card:hover .catalog-identity > .badge-free > i, .games-grid .game-card:focus-within .catalog-identity > .badge-free > i { animation: vp-inline-gift 720ms ease-out both !important; } @keyframes vp-inline-label-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @keyframes vp-inline-bolt { 0% { transform: scale(1) rotate(0deg); } 42% { transform: scale(1.22) rotate(-12deg); } 72% { transform: scale(0.94) rotate(6deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes vp-inline-crown { 0% { transform: translateY(0) rotate(0deg); } 48% { transform: translateY(-3px) rotate(-7deg); } 72% { transform: translateY(-1px) rotate(5deg); } 100% { transform: translateY(0) rotate(0deg); } } @keyframes vp-inline-stamp { 0% { transform: scale(1.18); opacity: 0.4; } 58% { transform: scale(0.88); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes vp-inline-progress { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } @keyframes vp-inline-community { 0%, 100% { transform: scaleX(1); } 48% { transform: scaleX(1.22) translateY(-1px); } } @keyframes vp-inline-gift { 0%, 100% { transform: translateY(0) rotate(0deg); } 42% { transform: translateY(-3px) rotate(-6deg); } 68% { transform: translateY(0) rotate(5deg); } } @media (max-width: 620px) { .games-grid .game-card.catalog-row, .games-grid .game-card.catalog-row:hover, .games-grid .game-card.catalog-row:focus-within { grid-template-areas: "cover identity" "cover status" "cover specs" "action action"; grid-template-rows: auto auto 1fr auto; } .games-grid .catalog-identity > .catalog-badge { margin-bottom: 7px; padding-bottom: 5px; gap: 5px; font-size: 0.47rem; letter-spacing: 0.055em; } .games-grid .catalog-identity > .catalog-badge > i { width: 16px; height: 16px; flex-basis: 16px; font-size: 0.5rem; } .games-grid .catalog-identity > .catalog-badge::before, .games-grid .catalog-identity > .catalog-badge::after { left: 21px; } } @media (prefers-reduced-motion: reduce) { .games-grid .catalog-identity > .catalog-badge, .games-grid .catalog-identity > .catalog-badge::before, .games-grid .catalog-identity > .catalog-badge::after, .games-grid .catalog-identity > .catalog-badge > i { animation: none !important; transition: none !important; } } /* ========================================================================== V3 HOME – Hero "phòng triển lãm sáng" + ARCHIVE WIRE nổi bắc cầu (phương án được chọn: V1 + ticker nổi của V2) ========================================================================== */ /* ---- Desktop ---- */ @media (min-width: 761px) { #tab-home .hero-carousel { min-height: clamp(600px, 74vh, 800px); background: var(--ivory); border-bottom: 1px solid var(--ink); } #tab-home .hero-carousel::before { display: none !important; } #tab-home .hero-slide-bg { position: absolute; inset: auto; top: 50%; right: clamp(40px, 5.5vw, 110px); width: min(47vw, 710px); height: auto; aspect-ratio: 16 / 10; transform: translateY(-50%); object-fit: cover; border: 3px solid var(--ink); box-shadow: 22px 22px 0 rgba(17, 17, 15, 0.16); filter: none; } #tab-home .feature-sheet { color: var(--ink); } #tab-home .feature-name h2 { color: var(--ink); font-family: var(--condensed); font-size: clamp(2.6rem, 4.6vw, 4.9rem); font-weight: 900; letter-spacing: -0.02em; line-height: 0.92; text-transform: uppercase; text-shadow: none; } #tab-home .feature-name p { color: #5a564d; } #tab-home .release-specs { border-top: 1px solid var(--ink); } #tab-home .release-specs dt { color: #8a8478; } #tab-home .release-specs dd { color: var(--ink); } #tab-home .photo-note { color: #8a8478; } .hero-slide-index { right: auto; left: clamp(28px, 3.6vw, 72px); bottom: 18px; -webkit-text-stroke-color: rgba(17, 17, 15, 0.13); } #tab-home .primary-action { box-shadow: 5px 5px 0 var(--ink); } #tab-home .primary-action:hover { box-shadow: 7px 7px 0 var(--ink); } #tab-home .primary-action:active { box-shadow: 2px 2px 0 var(--ink); } #tab-home .hero-carousel .carousel-nav button { color: var(--ink); background: var(--paper-white); border: 1px solid var(--ink); opacity: 1; } #tab-home .hero-carousel .carousel-nav button:hover { color: var(--paper-white); background: var(--ink); border-color: var(--ink); } #tab-home .hero-carousel .carousel-dot { background: rgba(17, 17, 15, 0.25); } #tab-home .hero-carousel .carousel-dot:hover, #tab-home .hero-carousel .carousel-dot.active { background: var(--vermilion); } /* Ticker thu thành thanh nổi bắc cầu giữa hero và khu trailer */ .vp-ticker { position: relative; z-index: 6; width: min(1240px, calc(100% - 56px)); margin: -23px auto 0; border: 1px solid #33322c; border-bottom: 3px solid var(--vermilion); box-shadow: 0 16px 34px rgba(17, 17, 15, 0.28); } } /* ---- Mobile: cùng ngôn ngữ "triển lãm sáng" ---- */ @media (max-width: 760px) { #tab-home .hero-carousel { min-height: calc(min(52vw, 240px) + 350px); background: var(--ivory); border-bottom: 1px solid var(--ink); } #tab-home .hero-carousel::before { display: none !important; } #tab-home .hero-slide-bg { position: absolute; inset: auto 16px auto 16px; top: 18px; width: calc(100% - 32px); height: min(52vw, 240px); object-fit: cover; border: 3px solid var(--ink); box-shadow: 10px 10px 0 rgba(17, 17, 15, 0.16); filter: none; } #tab-home .feature-sheet { top: calc(18px + min(52vw, 240px) + 24px); bottom: auto; color: var(--ink); } #tab-home .feature-name h2 { color: var(--ink); font-family: var(--condensed); font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; text-shadow: none; } #tab-home .feature-name p { color: #5a564d; } #tab-home .release-specs { border-top: 1px solid rgba(17, 17, 15, 0.35); } #tab-home .release-specs dt { color: #8a8478; } #tab-home .release-specs dd { color: var(--ink); } .hero-slide-index { display: none; } #tab-home .primary-action { box-shadow: 4px 4px 0 var(--ink); } #tab-home .hero-carousel .carousel-nav button { color: var(--ink); background: var(--paper-white); border: 1px solid var(--ink); } #tab-home .hero-carousel .carousel-dots { top: auto; bottom: 14px; left: 18px; } #tab-home .hero-carousel .carousel-dot { background: rgba(17, 17, 15, 0.25); } #tab-home .hero-carousel .carousel-dot.active { background: var(--vermilion); } .vp-ticker { position: relative; z-index: 6; width: calc(100% - 28px); margin: -18px auto 0; border: 1px solid #33322c; border-bottom: 3px solid var(--vermilion); box-shadow: 0 12px 24px rgba(17, 17, 15, 0.26); } } /* ---- Dải đầu khu trailer chuyển sáng (mọi kích thước màn hình) ---- */ #tab-home .weekly-trailer { border-top: 0; } #tab-home .weekly-trailer-head { color: var(--ink); background: var(--ivory); border-bottom: 1px solid var(--ink); } #tab-home .weekly-trailer-head span, #tab-home .weekly-trailer-head small, #tab-home .weekly-trailer-head time { color: var(--ink); } /* ========================================================================== V5 MASTHEADS – Tiến độ / Đề xuất / Bộ sưu tập đồng bộ ngôn ngữ sáng (trước đây là các khối đen lớn, lệch với hero "triển lãm sáng" mới) ========================================================================== */ .archive-masthead { min-height: 0; align-items: center; color: var(--ink); background: var(--ivory); border-bottom: 3px solid var(--ink); } .archive-masthead.request-masthead, .archive-masthead.library-masthead { border-bottom: 3px solid var(--ink); } /* Vòng tròn trang trí chuyển thành nét chìm trên nền giấy */ .archive-masthead::after { border-color: rgba(17, 17, 15, 0.12); box-shadow: 0 0 0 46px transparent, 0 0 0 47px rgba(17, 17, 15, 0.07), 0 0 0 96px transparent, 0 0 0 97px rgba(17, 17, 15, 0.05); } /* Chỉ mục mục lục thành tem đỏ có chấm nhịp — giống kicker của hero */ .archive-section-index { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 5px 12px; color: #fffdf7; background: var(--vermilion); font-size: var(--label-min); letter-spacing: 0.18em; } .archive-section-index::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fffdf7; animation: vp-live-dot 1.6s ease-in-out infinite; } .archive-masthead h1 { color: var(--ink); font-family: var(--condensed); font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; } .archive-masthead-copy p { color: #5a564d; } /* Bảng chỉ số thành khối đóng khung như bản in trưng bày */ .archive-metrics { background: var(--paper-white); border: 1px solid var(--ink); box-shadow: 12px 12px 0 rgba(17, 17, 15, 0.12); } .archive-metrics > div { border-right-color: var(--rule); border-bottom-color: var(--rule); } .archive-metrics dt { color: #8a8478; } .archive-metrics dd { color: var(--ink); } .archive-metrics dd small { color: #8a8478; } /* ========================================================================== V6 TYPOGRAPHY – cân tiêu đề theo độ dài, tránh dòng mồ côi ========================================================================== */ #tab-home .feature-name h2, .archive-masthead h1, .catalog-heading h2, .weekly-trailer-caption h1 { hyphens: none; overflow-wrap: normal; word-break: normal; text-wrap: balance; } .archive-masthead-copy { min-width: 0; } .archive-masthead h1 { max-width: 100%; font-family: var(--sans); font-size: clamp(2.35rem, 3.2vw, 3.55rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.08; text-transform: none; } .archive-metrics dd { display: flex; align-items: baseline; gap: 0.3em; } .archive-metrics dd small { display: inline-block; margin-left: 0; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; line-height: 1.2; vertical-align: baseline; } .archive-metrics .metric-wide dd { overflow: visible; font-size: clamp(1.35rem, 2.2vw, 2.35rem); line-height: 1.04; text-overflow: clip; white-space: normal; text-wrap: balance; } .catalog-heading h2 { max-width: 18ch; font-family: var(--sans); font-size: clamp(2.15rem, 3.2vw, 3.45rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; text-transform: none; } .weekly-trailer-caption h1 { max-width: 24ch; font-family: var(--sans); font-size: clamp(1.9rem, 2.5vw, 2.8rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; text-transform: none; } @media (min-width: 761px) { #tab-home .feature-name h2 { max-width: 16ch; font-family: var(--sans); font-size: clamp(2.2rem, 3.2vw, 3.45rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; text-transform: none; } #tab-home .feature-name h2.is-medium { max-width: 18ch; font-size: clamp(2rem, 2.85vw, 3.05rem); } #tab-home .feature-name h2.is-long { max-width: 20ch; font-size: clamp(1.75rem, 2.45vw, 2.65rem); line-height: 1.08; } } @media (max-width: 760px) { #tab-home .feature-name h2, #tab-home .feature-name h2.is-medium, #tab-home .feature-name h2.is-long { max-width: 100%; font-family: var(--sans); font-size: clamp(1.55rem, 6.8vw, 2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; text-transform: none; } .archive-masthead h1 { max-width: 100%; font-size: clamp(1.9rem, 8vw, 2.45rem); line-height: 1.08; } .catalog-heading h2 { max-width: 100%; font-size: clamp(1.9rem, 8.5vw, 2.45rem); letter-spacing: -0.04em; } .weekly-trailer-caption h1 { max-width: 100%; font-size: clamp(1.75rem, 7.6vw, 2.2rem); } } /* Thẻ mời đăng nhập ở tab Hồ sơ: đóng khung cùng ngôn ngữ */ .profile-guest-card { background: var(--paper-white); border: 1px solid var(--ink); border-left: 4px solid var(--vermilion); box-shadow: 10px 10px 0 rgba(17, 17, 15, 0.1); } @media (prefers-reduced-motion: reduce) { .archive-section-index::before { animation: none !important; } } /* ========================================================================== B12 CARD TABS + CONTENT BOOT Nhãn nằm ngoài mép trên card, không che artwork. Nội dung động chỉ xuất hiện sau khi CMS hoàn tất lần đồng bộ đầu tiên để tránh nháy dữ liệu mẫu. ========================================================================== */ .vp-content-boot { min-height: calc(100vh - 88px); padding: 40px 24px; display: none; place-content: center; grid-template-columns: auto minmax(0, 290px); grid-template-areas: "mark copy" "track track"; align-items: center; gap: 15px 17px; color: var(--ink); background: linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(17, 17, 15, 0.055) calc(50% - 0.5px), rgba(17, 17, 15, 0.055) calc(50% + 0.5px), transparent calc(50% + 0.5px)), var(--ivory); } html.cms-booting .vp-content-boot { display: grid; } html.cms-booting .main-content { display: none; } html.cms-ready .vp-content-boot { display: none; } .vp-content-boot-mark { grid-area: mark; width: 54px; height: 54px; display: grid; place-items: center; background: var(--ink); border-left: 4px solid var(--vermilion); box-shadow: 5px 5px 0 rgba(17, 17, 15, 0.16); } .vp-content-boot-mark img { width: 34px; height: 34px; object-fit: contain; } .vp-content-boot-copy { grid-area: copy; display: grid; gap: 4px; } .vp-content-boot-copy strong { font-size: 0.86rem; font-weight: 850; } .vp-content-boot-copy small { color: #777168; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; } .vp-content-boot-track { grid-area: track; height: 2px; overflow: hidden; background: rgba(17, 17, 15, 0.13); } .vp-content-boot-track i { width: 36%; height: 100%; display: block; background: var(--vermilion); animation: vp-content-boot-scan 1.05s cubic-bezier(0.45, 0, 0.25, 1) infinite; } @keyframes vp-content-boot-scan { 0% { transform: translateX(-115%); } 100% { transform: translateX(320%); } } @media (min-width: 621px) { .games-grid { padding-top: 36px; row-gap: 50px; } .games-grid .game-card.catalog-row, .games-grid .game-card.catalog-row:hover, .games-grid .game-card.catalog-row:focus-within { overflow: visible; } .games-grid .catalog-identity > .catalog-badge { position: absolute; top: -32px; left: 14px; z-index: 7; min-height: 30px; max-width: calc(100% - 28px); margin: 0; padding: 0 18px 0 9px; gap: 7px; overflow: hidden; color: #4f4a43; background: linear-gradient(180deg, #fffdf7 0%, #f5efe3 100%); border: 1px solid #24231f; border-top: 2px solid var(--badge-accent); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); filter: drop-shadow(4px 4px 0 rgba(17, 17, 15, 0.18)); font-size: 0.5rem; letter-spacing: 0.075em; line-height: 1; pointer-events: none; isolation: isolate; animation: vp-card-tab-enter 520ms cubic-bezier(0.2, 0.78, 0.24, 1) both; } .games-grid .catalog-identity > .catalog-badge.badge-new, .games-grid .catalog-identity > .catalog-badge.badge-hot, .games-grid .catalog-identity > .catalog-badge.badge-verified, .games-grid .catalog-identity > .catalog-badge.badge-progress, .games-grid .catalog-identity > .catalog-badge.badge-community, .games-grid .catalog-identity > .catalog-badge.badge-free { background: linear-gradient(180deg, #fffdf7 0%, #f5efe3 100%); border: 1px solid #24231f; border-top: 2px solid var(--badge-accent); } .games-grid .catalog-identity > .catalog-badge::before { position: absolute; inset: auto 8px 0 0; z-index: 0; width: auto; height: 2px; content: ""; background: var(--badge-accent); transform: scaleX(0.32); transform-origin: left center; animation: vp-card-tab-rail 3.8s ease-in-out infinite; } .games-grid .catalog-identity > .catalog-badge::after { position: absolute; inset: -45% auto -45% -22%; z-index: 0; width: 20px; height: auto; content: ""; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent); transform: skewX(-18deg); animation: vp-card-tab-sheen 4.8s ease-in-out infinite; } .games-grid .catalog-identity > .catalog-badge > i, .games-grid .catalog-identity > .catalog-badge > span { position: relative; z-index: 1; } .games-grid .catalog-identity > .catalog-badge > i { width: 17px; height: 17px; flex-basis: 17px; color: var(--badge-accent); background: color-mix(in srgb, var(--badge-accent) 9%, #fffdf7); border-color: color-mix(in srgb, var(--badge-accent) 52%, #6f6a61 48%); font-size: 0.54rem; } } .games-grid .catalog-identity > .badge-new > i { animation: vp-card-bolt-auto 3.5s ease-in-out infinite !important; } .games-grid .catalog-identity > .badge-hot > i { animation: vp-card-crown-auto 4.1s ease-in-out infinite !important; } .games-grid .catalog-identity > .badge-verified > i { animation: vp-card-check-auto 4.4s ease-in-out infinite !important; } .games-grid .catalog-identity > .badge-progress > i { animation: vp-card-progress-auto 3.2s ease-in-out infinite !important; } .games-grid .catalog-identity > .badge-community > i { animation: vp-card-community-auto 4.6s ease-in-out infinite !important; } .games-grid .catalog-identity > .badge-free > i { animation: vp-card-gift-auto 4s ease-in-out infinite !important; } @keyframes vp-card-tab-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } @keyframes vp-card-tab-rail { 0%, 28%, 100% { opacity: 0.7; transform: scaleX(0.32); } 48%, 68% { opacity: 1; transform: scaleX(1); } } @keyframes vp-card-tab-sheen { 0%, 58% { left: -22%; opacity: 0; } 64% { opacity: 0.55; } 78%, 100% { left: 112%; opacity: 0; } } @keyframes vp-card-bolt-auto { 0%, 70%, 100% { transform: scale(1) rotate(0); } 78% { transform: scale(1.18) rotate(-10deg); } 86% { transform: scale(0.94) rotate(5deg); } } @keyframes vp-card-crown-auto { 0%, 68%, 100% { transform: translateY(0) rotate(0); } 76% { transform: translateY(-2px) rotate(-6deg); } 84% { transform: translateY(-1px) rotate(5deg); } } @keyframes vp-card-check-auto { 0%, 72%, 100% { transform: scale(1); } 78% { transform: scale(0.82); } 86% { transform: scale(1.13); } } @keyframes vp-card-progress-auto { 0%, 64% { transform: rotate(0); } 84%, 100% { transform: rotate(180deg); } } @keyframes vp-card-community-auto { 0%, 70%, 100% { transform: scaleX(1) translateY(0); } 80% { transform: scaleX(1.18) translateY(-1px); } 88% { transform: scaleX(0.96) translateY(0); } } @keyframes vp-card-gift-auto { 0%, 68%, 100% { transform: translateY(0) rotate(0); } 76% { transform: translateY(-2px) rotate(-5deg); } 85% { transform: translateY(0) rotate(5deg); } } @media (max-width: 620px) { .vp-content-boot { min-height: calc(100vh - 64px); grid-template-columns: auto minmax(0, 1fr); padding-inline: 22px; } .games-grid .catalog-identity > .catalog-badge::before { animation: vp-card-tab-rail 3.8s ease-in-out infinite; } } @media (prefers-reduced-motion: reduce) { .vp-content-boot-track i, .games-grid .catalog-identity > .catalog-badge, .games-grid .catalog-identity > .catalog-badge::before, .games-grid .catalog-identity > .catalog-badge::after, .games-grid .catalog-identity > .catalog-badge > i { animation: none !important; transition: none !important; } } /* B13.1 — Chốt vị trí: nhãn là một phần của nội dung card, không nằm ngoài lưới. */ @media (min-width: 621px) { .games-grid { padding-top: 14px; row-gap: 34px; } } .games-grid .catalog-identity > .catalog-badge, .games-grid .catalog-identity > .catalog-badge.badge-new, .games-grid .catalog-identity > .catalog-badge.badge-hot, .games-grid .catalog-identity > .catalog-badge.badge-verified, .games-grid .catalog-identity > .catalog-badge.badge-progress, .games-grid .catalog-identity > .catalog-badge.badge-community, .games-grid .catalog-identity > .catalog-badge.badge-free { position: relative; top: auto; left: auto; z-index: 2; display: inline-flex; width: max-content; min-height: 27px; max-width: 100%; margin: 0 0 12px; padding: 0 12px 0 8px; gap: 7px; overflow: hidden; color: #27241f; background: linear-gradient(180deg, #fffdf8 0%, #f2ecdf 100%); border: 1px solid #8f887c; border-left: 3px solid var(--badge-accent); border-radius: 0; clip-path: none; filter: none; box-shadow: 3px 3px 0 rgba(17, 17, 15, 0.08); font-size: 0.52rem; font-weight: 900; letter-spacing: 0.085em; line-height: 1; pointer-events: none; isolation: isolate; animation: vp-card-tab-enter 480ms cubic-bezier(0.2, 0.78, 0.24, 1) both; } .games-grid .catalog-identity > .catalog-badge::before { position: absolute; inset: auto 0 0 0; z-index: 0; width: auto; height: 2px; content: ""; background: var(--badge-accent); transform: scaleX(0.2); transform-origin: left center; animation: vp-card-tab-rail 3.8s ease-in-out infinite; } .games-grid .catalog-identity > .catalog-badge::after { position: absolute; inset: -35% auto -35% -18%; z-index: 0; width: 18px; height: auto; content: ""; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.84), transparent); transform: skewX(-18deg); animation: vp-card-tab-sheen 5.2s ease-in-out infinite; } .games-grid .catalog-identity > .catalog-badge > i, .games-grid .catalog-identity > .catalog-badge > span { position: relative; z-index: 1; } .games-grid .catalog-identity > .catalog-badge > i { width: 15px; height: 15px; flex: 0 0 15px; color: #fffdf7; background: var(--badge-accent); border: 0; border-radius: 50%; font-size: 0.47rem; } .games-grid .catalog-identity > .catalog-badge > span { overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 620px) { .games-grid .catalog-identity > .catalog-badge, .games-grid .catalog-identity > .catalog-badge.badge-new, .games-grid .catalog-identity > .catalog-badge.badge-hot, .games-grid .catalog-identity > .catalog-badge.badge-verified, .games-grid .catalog-identity > .catalog-badge.badge-progress, .games-grid .catalog-identity > .catalog-badge.badge-community, .games-grid .catalog-identity > .catalog-badge.badge-free { min-height: 23px; margin-bottom: 8px; padding: 0 9px 0 6px; gap: 5px; font-size: 0.45rem; letter-spacing: 0.055em; box-shadow: 2px 2px 0 rgba(17, 17, 15, 0.07); } .games-grid .catalog-identity > .catalog-badge > i { width: 13px; height: 13px; flex-basis: 13px; font-size: 0.41rem; } } /* ========================================================================== COMMUNITY DATA — số liệu thật, đánh giá và báo phiên bản ========================================================================== */ .game-card.catalog-row .card-footer { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .card-title-link { color: inherit; text-decoration: none; text-decoration-thickness: 2px; text-underline-offset: 4px; } .card-title-link:hover, .card-title-link:focus-visible { color: var(--accent-red, #e63d2f); text-decoration: underline; } a.card-header-img, a.card-detail-btn, a.primary-action, a.action-btn-secondary.profile-page-link { text-decoration: none; } a.card-header-img:focus-visible, a.card-detail-btn:focus-visible, a.primary-action:focus-visible, a.action-btn-secondary.profile-page-link:focus-visible { outline: 3px solid var(--vermilion, #e63d2f); outline-offset: 3px; } .game-card.catalog-row .card-review-btn { min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--vermilion); background: transparent; border: 1px solid var(--vermilion); font: 800 0.62rem var(--sans); white-space: nowrap; transition: color 160ms ease, background 160ms ease, transform 160ms ease; } .game-card.catalog-row .card-review-btn:hover, .game-card.catalog-row .card-review-btn:focus-visible { color: var(--paper-white); background: var(--vermilion); } .game-card.catalog-row .card-review-btn:active { transform: translateY(1px); } .detail-feedback-card.review-board:focus { outline: 2px solid var(--vermilion); outline-offset: 4px; } .catalog-community-stats { margin: 13px 18px 0; padding: 9px 0; display: grid; grid-template-columns: 0.8fr 0.9fr 1.3fr; gap: 8px; color: #5e594f; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .catalog-community-stats > span { min-width: 0; display: flex; align-items: center; gap: 5px; font: 700 0.62rem var(--mono); } .catalog-community-stats > span + span { padding-left: 8px; border-left: 1px solid var(--rule); } .catalog-community-stats i { color: var(--vermilion); font-size: 0.65rem; } .catalog-community-stats strong { color: var(--ink); font-size: 0.66rem; } .catalog-community-stats small { min-width: 0; overflow: hidden; color: #8a8479; font-size: 0.49rem; text-overflow: ellipsis; white-space: nowrap; } .detail-community { margin-top: clamp(28px, 5vw, 54px); padding-top: clamp(22px, 4vw, 38px); border-top: 2px solid var(--ink); } .detail-community-heading { margin-bottom: 18px; display: flex; align-items: end; justify-content: space-between; gap: 24px; } .detail-community-heading span, .feedback-card-heading span { color: var(--vermilion); font: 800 0.61rem var(--mono); letter-spacing: 0.09em; } .detail-community-heading h3, .feedback-card-heading h4 { margin: 5px 0 0; color: var(--ink); font-family: var(--condensed); font-weight: 850; } .detail-community-heading h3 { font-size: clamp(1.35rem, 2.5vw, 2.05rem); } .detail-community-heading > p { max-width: 480px; margin: 0; color: var(--muted); font-size: 0.75rem; line-height: 1.65; } .detail-live-stats { margin-bottom: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); box-shadow: 7px 7px 0 rgba(17, 17, 15, 0.1); } .detail-live-stats article { min-height: 96px; padding: 17px 19px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 5px 10px; background: var(--paper-white); } .detail-live-stats article + article { border-left: 1px solid var(--rule); } .detail-live-stats article > i { grid-row: 1 / 3; margin-top: 3px; color: var(--vermilion); } .detail-live-stats article > span { color: var(--muted); font: 700 0.56rem var(--mono); letter-spacing: 0.07em; text-transform: uppercase; } .detail-live-stats article > strong { align-self: end; color: var(--ink); font-family: var(--condensed); font-size: 1.35rem; } .detail-live-stats article > strong b { display: block; font: inherit; } .detail-live-stats article > strong small { display: block; margin-top: 2px; color: var(--muted); font: 500 0.55rem var(--sans); } .detail-community-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr); gap: 20px; align-items: start; } .detail-feedback-card { min-width: 0; padding: clamp(18px, 3vw, 26px); background: var(--paper-white); border: 1px solid var(--rule); } .update-report-card { border-top: 4px solid var(--vermilion); } .feedback-card-heading { margin-bottom: 17px; padding-bottom: 15px; display: flex; align-items: start; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--rule); } .feedback-card-heading h4 { font-size: 1.2rem; } .feedback-card-heading > i { color: #c9c2b7; font-size: 1.6rem; } .detail-review-list { max-height: 440px; margin-bottom: 20px; overflow: auto; display: grid; gap: 10px; } .detail-review-item { padding: 14px; background: var(--ivory); border-left: 3px solid var(--ink); } .review-author-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; } .review-avatar { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--ink); font: 800 0.58rem var(--mono); } .review-author-row strong, .review-author-row time, .review-stars-display { display: block; } .review-author-row strong { color: var(--ink); font-size: 0.72rem; } .review-author-row time { color: var(--muted); font: 600 0.52rem var(--mono); } .review-stars-display { margin-top: 3px; color: #d88c18; font-size: 0.58rem; } .detail-review-item > p { margin: 11px 0 0 44px; color: #4f4a42; font-size: 0.72rem; line-height: 1.65; overflow-wrap: anywhere; } .community-empty, .community-loading { min-height: 92px; margin: 0; padding: 18px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); background: var(--ivory); text-align: center; font-size: 0.7rem; } .community-empty i { color: var(--vermilion); font-size: 1.1rem; } .detail-community-form { display: grid; gap: 12px; } .detail-community-form label, .review-stars { min-width: 0; margin: 0; padding: 0; display: grid; gap: 6px; border: 0; } .detail-community-form label > span, .review-stars legend { color: #6c665c; font: 700 0.56rem var(--mono); letter-spacing: 0.055em; text-transform: uppercase; } .detail-community-form input, .detail-community-form textarea { width: 100%; padding: 11px 12px; color: var(--ink); background: #fffdf8; border: 1px solid #bfb8ac; border-radius: 0; font: 500 0.72rem var(--sans); line-height: 1.55; } .detail-community-form textarea { resize: vertical; } .detail-community-form input:focus, .detail-community-form textarea:focus { outline: 2px solid var(--vermilion); outline-offset: 1px; border-color: var(--ink); } .detail-community-form > button { min-height: 44px; padding: 0 16px; justify-self: start; color: #fff; background: var(--ink); border: 1px solid var(--ink); font: 800 0.67rem var(--sans); } .detail-community-form > button:hover:not(:disabled) { background: var(--vermilion); border-color: var(--vermilion); } .detail-community-form input:disabled, .detail-community-form textarea:disabled, .detail-community-form button:disabled { cursor: not-allowed; opacity: 0.56; } .community-form-note, .report-explainer { margin: 0; color: var(--muted); font-size: 0.66rem; line-height: 1.55; } .report-explainer { margin-bottom: 16px; } .review-star-options { width: max-content; display: flex; flex-direction: row-reverse; gap: 4px; } .review-star-options input { position: absolute; width: 1px; height: 1px; opacity: 0; } .review-star-options label { display: block; color: #bbb4a8; cursor: pointer; font-size: 1.15rem; } .review-star-options label:hover, .review-star-options label:hover ~ label, .review-star-options input:checked ~ label { color: #d88c18; } .review-star-options input:focus-visible + label { outline: 2px solid var(--vermilion); outline-offset: 2px; } @media (max-width: 760px) { .detail-community-heading { align-items: start; flex-direction: column; gap: 8px; } .detail-live-stats { grid-template-columns: 1fr; box-shadow: 4px 4px 0 rgba(17, 17, 15, 0.1); } .detail-live-stats article { min-height: 74px; } .detail-live-stats article + article { border-top: 1px solid var(--rule); border-left: 0; } .detail-community-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .games-grid .game-card.catalog-row, .games-grid .game-card.catalog-row:hover, .games-grid .game-card.catalog-row:focus-within { grid-template-areas: "cover identity" "cover status" "cover specs" "community community" "action action"; grid-template-rows: auto auto 1fr auto auto; } .catalog-community-stats { grid-area: community; margin: 10px 14px 0; } .catalog-community-stats small { display: none; } .detail-feedback-card { padding: 16px; } .review-author-row { grid-template-columns: 32px 1fr; } .review-author-row time { grid-column: 2; } .detail-review-item > p { margin-left: 42px; } } /* V2 — hồ sơ tương tác bớt cảm giác modal mẫu, ưu tiên nhịp đọc và nội dung. */ .detail-overlay { padding: clamp(10px, 2vw, 26px); } .detail-panel { width: min(1380px, 100%); max-height: calc(100vh - clamp(20px, 4vw, 52px)); border-top: 5px solid var(--vermilion); box-shadow: 0 34px 90px rgba(0,0,0,.38); } .detail-header-banner { min-height: clamp(250px, 36vh, 390px); background-position: center 38%; } .detail-header-banner::before { content: none !important; display: none !important; } .detail-body { padding: clamp(25px, 4vw, 54px); } .detail-main-info { align-items: end; margin-bottom: 28px; padding-bottom: 27px; border-bottom: 1px solid var(--rule); } .detail-main-info h2 { max-width: 900px; font-size: clamp(2rem, 4.2vw, 4.2rem); line-height: .94; } .price-section { min-width: 220px; } .detail-progress-section { margin-bottom: clamp(34px, 5vw, 58px); padding: 0; border: 0; background: transparent; } .detail-layout { grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr); gap: clamp(28px, 4vw, 58px); } .detail-layout .section-card { padding: 25px 0; border: 0; border-top: 1px solid var(--rule); background: transparent; } .detail-layout .section-card h3 { font-size: 1.1rem; } .detail-layout .section-card p { max-width: 760px; font-size: .85rem; line-height: 1.75; } .detail-layout .quick-note { padding: 21px; border: 1px solid var(--rule); border-left: 4px solid var(--vermilion); background: rgba(255,255,255,.42); } .detail-layout .detail-video-card { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(210px,.75fr); overflow: hidden; padding: 0; color: #fff; border: 0; border-top: 5px solid var(--vermilion); background: var(--ink); } .detail-video-stage { position: relative; align-self: stretch; padding: 18px; background: #050505; } .detail-video-stage .detail-video-frame { height: 100%; min-height: 250px; border: 1px solid #3b3934; } .detail-video-screen-code { position: absolute; z-index: 2; top: 28px; left: 28px; padding: 7px 9px; color: #fff; background: rgba(0,0,0,.72); font: 800 .52rem/1 ui-monospace, monospace; letter-spacing: .11em; pointer-events: none; } .detail-video-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px,3vw,40px); border-left: 1px solid #3b3934; } .detail-video-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; } .detail-video-heading > span { color: #ff7a6e; font: 800 .58rem/1.3 ui-monospace, monospace; letter-spacing: .1em; } .detail-video-heading > a { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; border: 1px solid #4d4a43; text-decoration: none; } .detail-video-copy h3 { margin: 0 0 13px; color: #fff; font-size: clamp(1.45rem,2.2vw,2.25rem); line-height: 1.03; } .detail-video-copy > p { margin: 0; color: #aaa69c !important; font-size: .76rem !important; line-height: 1.7 !important; } .detail-video-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; padding: 14px 16px; color: #fff; background: var(--vermilion); font-size: .72rem; font-weight: 800; text-decoration: none; } .detail-video-cta:hover { background: #ff5546; } .detail-layout .credits-grid { gap: 8px; } .detail-layout .credit-item { border-color: var(--rule); background: rgba(255,255,255,.42); } .detail-layout .screenshots-gallery { gap: 10px; } @media (max-width: 900px) { .detail-main-info { align-items: stretch; flex-direction: column; } .price-section { min-width: 0; justify-items: stretch; } .detail-layout { grid-template-columns: 1fr; } .detail-layout .detail-video-card { grid-template-columns: 1fr; } .detail-video-copy { border-top: 1px solid #3b3934; border-left: 0; } } @media (max-width: 620px) { .detail-overlay { padding: 0; } .detail-panel { width: 100%; max-height: 100vh; min-height: 100vh; border-right: 0; border-bottom: 0; border-left: 0; box-shadow: none; } .detail-header-banner { min-height: 220px; } .detail-body { padding: 22px 15px 36px; } .detail-main-info h2 { font-size: clamp(2rem, 12vw, 3.25rem); } .detail-video-stage { padding: 8px; } .detail-video-stage .detail-video-frame { min-height: 0; } .detail-video-screen-code { top: 17px; left: 17px; } .detail-video-copy { padding: 22px 18px; } } /* ========================================================================== V8 ULTRAWIDE — dùng thêm chiều ngang mà không kéo giãn chữ và biểu mẫu. Các mốc tương ứng 1920, 2560, 21:9 và 32:9; màn hình thường giữ nguyên. ========================================================================== */ .production-profile-link { min-height: 44px; margin-top: 20px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--paper-white); background: var(--ink); border: 1px solid var(--ink); font-size: 0.68rem; font-weight: 800; text-decoration: none; } .production-profile-link:hover, .production-profile-link:focus-visible { background: var(--vermilion); border-color: var(--vermilion); } .progress-empty-linked { min-height: 330px; padding: clamp(34px, 5vw, 72px); display: grid; align-content: center; justify-items: start; background: var(--paper-white); border: 1px solid var(--ink); border-top: 5px solid var(--vermilion); } .progress-empty-linked > span { color: var(--vermilion); font: 800 var(--label-min)/1.2 var(--mono); letter-spacing: 0.12em; } .progress-empty-linked h2 { max-width: 720px; margin: 18px 0 12px; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.04; letter-spacing: -0.045em; } .progress-empty-linked p { max-width: 640px; margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.7; } .progress-empty-linked a { margin-top: 26px; padding: 13px 16px; display: inline-flex; align-items: center; gap: 22px; color: var(--paper-white); background: var(--ink); font-size: 0.7rem; font-weight: 800; text-decoration: none; } .progress-empty-linked a:hover, .progress-empty-linked a:focus-visible { background: var(--vermilion); } @media (min-width: 1800px) { :root { --vp-ultra-canvas: 2200px; --vp-ultra-page: 2040px; } .main-header, .main-content { width: min(var(--vp-ultra-canvas), calc(100% - 64px)); } .header-container { grid-template-columns: 330px minmax(400px, max-content) minmax(0, 1fr); } .header-actions > .search-box { width: clamp(260px, 15vw, 400px); margin: auto 18px; display: block; } .header-actions > .search-box input { min-height: 40px; color: var(--ink); background: var(--paper-white); border: 1px solid var(--rule); border-radius: 0; } .header-actions > .search-box:focus-within input { border-color: var(--ink); } .header-actions > .search-box kbd { display: none; } #tab-home .hero-carousel { min-height: clamp(650px, 34vw, 780px); } #tab-home .feature-sheet { width: min(1420px, 72%); right: clamp(48px, 4vw, 96px); bottom: 46px; } #tab-home .weekly-trailer { min-height: 480px; grid-template-columns: minmax(620px, 0.9fr) minmax(0, 1.1fr); } .catalog-section { padding-right: clamp(56px, 4vw, 104px); padding-left: clamp(56px, 4vw, 104px); } .games-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .page-container.archive-page-shell { width: min(var(--vp-ultra-page), calc(100% - 96px)); max-width: none; } .archive-masthead { grid-template-columns: minmax(0, 1.45fr) minmax(430px, 0.55fr); gap: clamp(64px, 6vw, 130px); } .archive-masthead-copy { max-width: 1120px; } .progress-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 24px; } .progress-card.production-card { grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr); border: 1px solid var(--rule); } .production-body { padding: clamp(24px, 2vw, 36px); } .production-card-head h2 { font-size: clamp(1.45rem, 1.75vw, 2.35rem); } .requests-layout { grid-template-columns: minmax(370px, 0.56fr) minmax(0, 1.44fr); } .library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .detail-panel { width: min(1760px, calc(100% - 112px)); max-width: none; } } @media (min-width: 2320px) { :root { --vp-ultra-canvas: 2740px; --vp-ultra-page: 2540px; } #tab-home .hero-carousel { min-height: clamp(720px, 31vw, 840px); } #tab-home .feature-sheet { width: min(1540px, 64%); } #tab-home .weekly-trailer { grid-template-columns: minmax(760px, 0.88fr) minmax(0, 1.12fr); } .games-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .library-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .detail-panel { width: min(2140px, calc(100% - 144px)); } } @media (min-width: 2800px) { :root { --vp-ultra-canvas: 3180px; --vp-ultra-page: 2980px; } .main-header, .main-content { width: min(var(--vp-ultra-canvas), calc(100% - 112px)); } .games-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .library-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .archive-masthead { grid-template-columns: minmax(0, 1.6fr) minmax(480px, 0.4fr); } .detail-panel { width: min(2520px, calc(100% - 176px)); } } @media (min-width: 3320px) { :root { --vp-ultra-canvas: 3400px; --vp-ultra-page: 3200px; } .main-header, .main-content { width: min(var(--vp-ultra-canvas), calc(100% - 128px)); } .games-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .progress-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================================== V9 CATALOG CARDS — ảnh bìa nguyên vẹn, phân cấp gọn, dữ liệu dễ quét. Khối này chốt lại các thử nghiệm card cũ để thư viện có một hệ thống duy nhất. ========================================================================== */ .games-grid { align-items: stretch; gap: clamp(14px, 1.15vw, 22px); padding-top: 18px; border: 0; } .games-grid .game-card.catalog-row, .games-grid .game-card.catalog-row:hover, .games-grid .game-card.catalog-row:focus-within { position: relative; min-width: 0; min-height: 100%; padding: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); background: #fffdf7; border: 1px solid #c9c2b7; box-shadow: none; } .games-grid .game-card.catalog-row { transition: transform 220ms cubic-bezier(0.2, 0.72, 0.25, 1), border-color 220ms ease, box-shadow 220ms ease; } .games-grid .game-card.catalog-row:hover, .games-grid .game-card.catalog-row:focus-within { transform: translateY(-4px); border-color: #292722; box-shadow: 0 14px 32px rgba(24, 22, 18, 0.12); } .games-grid .game-card.catalog-row::before { display: none; } .games-grid .game-card.catalog-row::after { top: 0; right: auto; bottom: auto; left: 0; z-index: 7; width: 100%; height: 3px; display: block !important; background: var(--vermilion); transform: scaleX(0.14); transform-origin: left center; transition: transform 320ms cubic-bezier(0.2, 0.72, 0.25, 1); } .games-grid .game-card.catalog-row:hover::after, .games-grid .game-card.catalog-row:focus-within::after { transform: scaleX(1); } .games-grid .game-card.catalog-row .card-header-img { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; display: block; flex: 0 0 auto; background: #171713; border-bottom: 1px solid #aaa397; } .games-grid .card-header-img::before, .games-grid .card-header-img::after { display: none; } .games-grid .card-art-stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; isolation: isolate; } .games-grid .card-header-img img, .games-grid .game-card:hover .card-header-img img, .games-grid .game-card:focus-within .card-header-img img { margin: 0; border: 0; } .games-grid .game-card.catalog-row .card-header-img .card-art-backdrop { position: absolute; inset: -18px; z-index: 0; width: calc(100% + 36px); height: calc(100% + 36px); object-fit: cover; opacity: 0.62; filter: blur(15px) brightness(0.55) saturate(0.86); transform: scale(1.05); transition: transform 500ms ease, opacity 300ms ease; } .games-grid .game-card.catalog-row .card-header-img .card-art-primary { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: none; transform: scale(1.001); transition: transform 500ms cubic-bezier(0.2, 0.72, 0.25, 1); } .games-grid .game-card.catalog-row:hover .card-header-img .card-art-backdrop, .games-grid .game-card.catalog-row:focus-within .card-header-img .card-art-backdrop { opacity: 0.76; filter: blur(15px) brightness(0.55) saturate(0.86); transform: scale(1.1); } .games-grid .game-card.catalog-row:hover .card-header-img .card-art-primary, .games-grid .game-card.catalog-row:focus-within .card-header-img .card-art-primary { filter: none; transform: scale(1.018); } .games-grid .catalog-identity { min-width: 0; padding: 15px 16px 0; } .games-grid .catalog-eyebrow { min-height: 22px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .games-grid .catalog-kind, .games-grid .catalog-saved { min-width: 0; display: inline-flex; align-items: center; gap: 5px; color: #777167; font: 800 0.52rem/1.2 var(--mono); letter-spacing: 0.075em; text-transform: uppercase; } .games-grid .catalog-kind::before { width: 14px; height: 2px; flex: 0 0 14px; content: ""; background: var(--vermilion); } .games-grid .catalog-saved { flex: 0 0 auto; color: #28724e; white-space: nowrap; } .games-grid .catalog-eyebrow > .catalog-badge, .games-grid .catalog-eyebrow > .catalog-badge.badge-new, .games-grid .catalog-eyebrow > .catalog-badge.badge-hot, .games-grid .catalog-eyebrow > .catalog-badge.badge-verified, .games-grid .catalog-eyebrow > .catalog-badge.badge-progress, .games-grid .catalog-eyebrow > .catalog-badge.badge-community, .games-grid .catalog-eyebrow > .catalog-badge.badge-free { --badge-accent: #7b756b; position: relative; inset: auto; z-index: 1; width: max-content; min-height: 22px; max-width: 100%; margin: 0; padding: 0 8px; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; color: #37342f; background: #f2ede3; border: 1px solid #b8b0a4; border-left: 3px solid var(--badge-accent); border-radius: 0; clip-path: none; filter: none; box-shadow: none; font: 850 0.51rem/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; pointer-events: none; isolation: auto; animation: none; } .games-grid .catalog-eyebrow > .catalog-badge::before, .games-grid .catalog-eyebrow > .catalog-badge::after { display: none; } .games-grid .catalog-eyebrow > .catalog-badge > i { width: auto; height: auto; flex: 0 0 auto; display: inline-block; color: var(--badge-accent); background: transparent; border: 0; border-radius: 0; font-size: 0.55rem; animation: none !important; } .games-grid .catalog-eyebrow > .catalog-badge > span { min-width: 0; overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; } .games-grid .catalog-eyebrow > .badge-new { --badge-accent: #d83b30; } .games-grid .catalog-eyebrow > .badge-hot { --badge-accent: #b96f1d; } .games-grid .catalog-eyebrow > .badge-verified { --badge-accent: #26744d; } .games-grid .catalog-eyebrow > .badge-progress { --badge-accent: #9b731f; } .games-grid .catalog-eyebrow > .badge-community { --badge-accent: #356a98; } .games-grid .catalog-eyebrow > .badge-free { --badge-accent: #267b59; } .games-grid .catalog-identity .card-title { min-height: 0; margin: 0; display: block; overflow: visible; font-family: var(--condensed); font-size: clamp(1rem, 1.1vw, 1.22rem); font-weight: 850; line-height: 1.14; letter-spacing: -0.035em; overflow-wrap: anywhere; white-space: normal; -webkit-line-clamp: unset; } .games-grid .catalog-identity p { min-height: 2.9em; margin: 7px 0 0; color: #777167; font-size: 0.61rem; line-height: 1.45; overflow-wrap: anywhere; } .games-grid .catalog-status { margin-top: 13px; padding: 11px 16px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; border-top: 1px solid #ddd6ca; } .games-grid .catalog-status strong { min-width: 0; margin: 0; display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 0.68rem; line-height: 1.25; } .games-grid .catalog-status strong > span { width: 7px; height: 7px; flex: 0 0 7px; background: #2b7a52; } .games-grid .catalog-status.status-in-progress strong > span, .games-grid .catalog-status.status-preparing strong > span { background: #c27c22; } .games-grid .catalog-status small { min-width: 0; color: #8b857b; font: 600 0.5rem/1.3 var(--mono); text-align: right; } .games-grid .catalog-progress { grid-column: 1 / -1; height: 2px; margin: 7px 0 0; overflow: hidden; background: #e4ded3; } .games-grid .catalog-progress i { height: 100%; display: block; background: var(--vermilion); } .games-grid .catalog-specs { margin: 0; padding: 13px 16px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .games-grid .catalog-specs div { min-width: 0; padding: 0; border: 0; } .games-grid .catalog-specs div + div { padding-left: 10px; border-left: 1px solid #ddd6ca; } .games-grid .catalog-specs dt { margin-bottom: 5px; color: #8c857a; font: 750 0.47rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } .games-grid .catalog-specs dd { margin: 0; overflow: hidden; color: var(--ink); font-size: 0.68rem; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .games-grid .catalog-community-stats { margin: 14px 16px 0; padding: 8px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid #ddd6ca; border-bottom: 1px solid #ddd6ca; } .games-grid .catalog-community-stats > span { min-width: 0; padding: 0 7px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 6px; color: #716b62; font: 700 0.54rem/1.15 var(--mono); } .games-grid .catalog-community-stats > span:first-child { padding-left: 0; } .games-grid .catalog-community-stats > span + span { padding-left: 8px; border-left: 1px solid #ddd6ca; } .games-grid .catalog-community-stats i { grid-row: 1 / 3; color: var(--vermilion); font-size: 0.62rem; } .games-grid .catalog-community-stats strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; } .games-grid .catalog-community-stats small { min-width: 0; overflow: hidden; color: #928b81; font-size: 0.43rem; text-overflow: ellipsis; white-space: nowrap; } .games-grid .game-card.catalog-row .card-footer { margin: auto 16px 16px; padding-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .games-grid .game-card.catalog-row .card-detail-btn, .games-grid .game-card.catalog-row .card-review-btn { min-height: 40px; margin: 0; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 0; box-shadow: none; font-size: 0.6rem; font-weight: 850; text-decoration: none; transition: color 170ms ease, background-color 170ms ease, border-color 170ms ease; } .games-grid .game-card.catalog-row .card-detail-btn { justify-content: space-between; color: #fffdf7; background: var(--ink); border: 1px solid var(--ink); } .games-grid .game-card.catalog-row .card-detail-btn span::after { display: none; } .games-grid .game-card.catalog-row .card-detail-btn:hover, .games-grid .game-card.catalog-row .card-detail-btn:focus-visible { color: #fffdf7; background: var(--vermilion); border-color: var(--vermilion); transform: none; box-shadow: none; } .games-grid .game-card.catalog-row .card-review-btn { color: #38352f; background: transparent; border: 1px solid #9f988d; } .games-grid .game-card.catalog-row .card-review-btn:hover, .games-grid .game-card.catalog-row .card-review-btn:focus-visible { color: var(--vermilion); background: #f4eee4; border-color: var(--vermilion); } @supports (content-visibility: auto) { .games-grid .game-card.catalog-row { content-visibility: auto; contain-intrinsic-size: auto 540px; } } @media (max-width: 1440px) { .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .games-grid { grid-template-columns: 1fr; gap: 14px; padding-top: 12px; } .games-grid .game-card.catalog-row, .games-grid .game-card.catalog-row:hover, .games-grid .game-card.catalog-row:focus-within { display: flex; transform: none; box-shadow: none; } .games-grid .game-card.catalog-row .card-header-img { aspect-ratio: 16 / 9; } .games-grid .catalog-identity { padding: 14px 14px 0; } .games-grid .catalog-identity .card-title { font-size: 1.08rem; } .games-grid .catalog-identity p { min-height: 0; } .games-grid .catalog-status { margin-top: 12px; padding: 10px 14px 0; } .games-grid .catalog-status small { max-width: 130px; } .games-grid .catalog-specs { padding: 12px 14px 0; } .games-grid .catalog-community-stats { margin: 13px 14px 0; } .games-grid .catalog-community-stats small { display: block; } .games-grid .game-card.catalog-row .card-footer { margin: auto 14px 14px; padding-top: 13px; } } @media (max-width: 380px) { .games-grid .catalog-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .games-grid .catalog-specs div:nth-child(3) { grid-column: 1 / -1; padding-top: 10px; padding-left: 0; border-top: 1px solid #ddd6ca; border-left: 0; } .games-grid .catalog-community-stats small { display: none; } .games-grid .game-card.catalog-row .card-review-btn span { display: none; } } @media (min-width: 1800px) { .games-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 2320px) { .games-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 2800px) { .games-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } } @media (min-width: 3320px) { .games-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .games-grid .game-card.catalog-row, .games-grid .game-card.catalog-row::after, .games-grid .card-art-backdrop, .games-grid .card-art-primary { transition: none !important; } }