/* assets/css/polish.css — sinh bởi Forgekit (DES-01/DES-02/DES-03/DES-04). * * Lớp tương tác: chuyển động + focus. Màu/bóng lúc hover nằm trong theme.json * (lõi WordPress chỉ cho :hover trên link/button, xem docblock polish-css.ts). * + Bố cục: header dính đầu trang khi cuộn — theme.json/hệ block-support * không làm được đúng chỗ (xem docblock polish-css.ts), nên cũng nằm ở đây. * + Bóng thẻ trong lưới lặp — lớp kiểm cấm khai preset bóng thẳng trong * pattern khi site chọn phong cách phẳng, xem docblock hàm bongThe. * + Skip-to-content nhuộm lại theo palette — lõi WordPress tự chèn link này * nhưng CSS đi kèm dùng màu xám cứng, xem docblock ngay trên rule đó. * Mọi giá trị đi qua preset — khách đổi palette là tự đúng theo. */ /* ── Nút ────────────────────────────────────────────────────────────────── */ .wp-block-button__link { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } .wp-block-button__link:hover, .wp-block-button__link:focus-visible { transform: translateY(-2px); } /* Nhấn xuống: bỏ hẳn độ nhấc để cảm giác "bấm" rõ ràng, không lửng lơ. */ .wp-block-button__link:active { transform: translateY(0); } /* Focus bàn phím đổi nền GIỐNG HỆT hover — xem docblock NEN_FOCUS: chỗ này * KHÔNG ở theme.json được vì schema 6.7 ghim chưa biết :focus-visible. */ .wp-block-button__link:focus-visible { background-color: color-mix(in srgb, var(--wp--preset--color--primary) 82%, var(--wp--preset--color--foreground)); color: var(--wp--preset--color--surface); } .wp-block-button__link:hover, .wp-block-button__link:focus-visible { box-shadow: var(--wp--preset--shadow--float); } /* ── Link trong nội dung + điều hướng ───────────────────────────────────── */ a { transition: color .2s ease; } /* ── Bàn phím: viền focus thấy rõ trên mọi nền ────────────────────────────── * Dùng outline (KHÔNG phải border) để không đẩy layout, và offset để viền * không dính sát chữ. on-page-seo.md §15 tính đây là mục khả dụng bắt buộc. */ :focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } /* ── Skip-to-content: nhuộm lại theo palette site (DES-04) ─────────────────── * Lõi WordPress TỰ chèn link này vào MỌI block theme (không cần theme khai * gì) — _block_template_add_skip_link(), wp-includes/block-template.php — * kèm sẵn CSS riêng (wp-block-template-skip-link.css) chỉ hiện khi focus. * CSS đó dùng màu XÁM CỨNG (nền xám nhạt, chữ xám đậm) không theo palette site nào — * hợp lý cho core (không biết theme dùng preset gì), nhưng làm link trông * như một mảnh trình duyệt dán vào, không phải một phần của site. Class * .skip-link.screen-reader-text là tên THẬT lõi dùng, không phải suy đoán. * * ★ Rule dưới đây THẮNG rule gốc của core nhờ THỨ TỰ ENQUEUE (polish.css in * ra SAU CSS lõi trong ), KHÔNG PHẢI vì specificity cao hơn — cả hai * cùng "2 class + 1 pseudo-class" = (0,3,0) hệt nhau, tie theo source order. * Đừng đổi cách enqueue polish.css trong functions-php.ts (thêm priority * sớm hơn hook mặc định, hay chuyển sang wp_register_style với dependency * đứng trước) — làm vậy override này im lặng mất tác dụng, không báo lỗi gì. */ .skip-link.screen-reader-text:focus { background-color: var(--wp--preset--color--surface); color: var(--wp--preset--color--foreground); border-radius: 8px; box-shadow: var(--wp--preset--shadow--float); } /* ── Header dính đầu trang khi cuộn (DES-02) ───────────────────────────────── * Nhắm header.wp-block-template-part — wrapper NGOÀI CÙNG do wp:template-part * (tagName header) sinh ra, KHÔNG phải khối wp:group bên trong (xem docblock * đầu file: containing block của khối bên trong cao đúng bằng chính nó nên * CSS sticky đặt ở đó không có tác dụng). Chọn bằng thẻ header để không đụng * .wp-block-template-part của footer (footer khai tagName:"footer", xem * templates.ts). */ header.wp-block-template-part { position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 16px color-mix(in srgb, var(--wp--preset--color--foreground) 8%, transparent); } /* ── Thẻ trong lưới lặp (DES-03) ────────────────────────────────────────────── * Nhắm .wp-block-column > .wp-block-group.has-surface-background-color — CHỮ * KÝ cấu trúc riêng của "thẻ" trong 4 pattern lưới lặp lõi (dịch vụ/lý do/ * cảm nhận/quy trình): một wp:group nền surface nằm TRỰC TIẾP trong một * wp:column, bên trong {{REPEAT}}. Đã grep hết 22 pattern lõi xác nhận chữ ký * này CHỈ khớp đúng 4 pattern đó — không lặp lại cảnh báo DES-01 * (".wp-block-group.has-background:hover" khớp cả section nền tràn màn * hình). Child-combinator (>) giữ đúng ý định: nhóm con lồng sâu hơn bên * trong thẻ (vd nhóm avatar+tên trong cam-nhan-the-3-01) không có nền surface * nên vốn không khớp nhầm, nhưng viết tường minh cho người đọc sau. * * Bóng NGHỈ dùng preset "card" — ĐÃ có sẵn trong theme.json từ GEN-05 (đúng * công thức ui-demo --shadow-card) nhưng CHƯA từng có nơi nào tham chiếu. * ★ Vì sao đặt Ở ĐÂY, không phải trong chính pattern (patterns/*.php): lớp * 2 (CHK-03) quét MỌI var:preset|shadow|X trong templates/parts/patterns và * báo lỗi cứng nếu preset không tồn tại — site chọn shadow:'none' thì * theme.json có 0 preset bóng, đặt tham chiếu trong pattern sẽ bị forgekit * check chặn ngay. Lớp 2 KHÔNG quét assets/css/*.css nên đặt ở polish.css né * được rủi ro đó — cùng lý do var(--wp--preset--shadow--float) của nút/header * (DES-01/02) đã an toàn ở đây từ đầu. */ .wp-block-column > .wp-block-group.has-surface-background-color { transition: transform .2s ease, box-shadow .2s ease; box-shadow: var(--wp--preset--shadow--card); } .wp-block-column > .wp-block-group.has-surface-background-color:hover, .wp-block-column > .wp-block-group.has-surface-background-color:focus-within { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--float); } /* ── Tôn trọng người tắt hiệu ứng chuyển động ─────────────────────────────── * prefers-reduced-motion là thiết lập trợ năng của hệ điều hành (người dễ * chóng mặt/tiền đình bật nó). Thêm chuyển động mà không có nhánh này là gây * hại thật, không phải chi tiết làm cho đẹp. */ /* ── Link trong vùng nền TỐI kế thừa màu chữ của vùng đó ─────────────────── * theme.json đặt màu link toàn site = preset "primary". Đúng trên nền sáng, * nhưng SAI trên vùng nền tối (footer khai backgroundColor "foreground"): * Lighthouse đo thật 9 link footer có tương phản 2.71 (nâu primary trên nền * foreground gần đen của chính site đo), * dưới xa ngưỡng 4.5 của WCAG AA — đủ để rớt điểm Accessibility của PRD ⑥. * * Dùng inherit: lấy đúng màu chữ mà chính vùng đó đã đặt (footer dùng preset * "background", sáng) nên tương phản tự bám theo palette, KHÔNG chốt cứng màu * nào — đổi palette ở Global Styles vẫn đúng. * * Loại trừ .wp-element-button: nút có nền riêng, màu chữ của nó do preset * nút quyết định, không được kéo theo màu vùng. */ .has-foreground-background-color a:not(.wp-element-button), .has-foreground-background-color .wp-block-navigation-item__content { color: inherit; } /* ── Vùng chạm tối thiểu 24×24px (WCAG 2.2 AA — 2.5.8 Target Size) ───────── * Lighthouse đo thật trên site sinh ra: link menu và link footer chỉ cao 18px * ("Target has insufficient size (67.5px by 18px, should be at least 24px by * 24px)"), làm rớt điểm Accessibility xuống dưới ngưỡng 90 của PRD ⑥. Chiều * cao 18px là chiều cao DÒNG CHỮ — không có padding dọc nào. * * Đặt min-height + căn giữa thay vì padding: padding sẽ đội chiều cao * header/footer lên, còn min-height chỉ nới vùng bấm khi chữ thấp hơn 24px. * Người dùng chuột không thấy khác gì; người dùng cảm ứng bấm trúng dễ hơn hẳn. */ .wp-block-navigation .wp-block-navigation-item__content, .wp-block-navigation-link a, footer.wp-block-template-part a { min-height: 24px; display: inline-flex; align-items: center; } /* ── Cỡ icon Lucide ─────────────────────────────────────────────────────── * icons.ts CỐ Ý strip width/height khỏi SVG (SVGO removeDimensions, có * test khoá hành vi đó) với lý do "để CSS co giãn" — nhưng TRƯỚC luật này * KHÔNG có luật CSS nào làm việc đó. SVG chỉ còn viewBox thì trình duyệt cho * nó chiếm trọn bề ngang ô chứa: đo thật trên trang chủ sinh ra, icon trong * lưới 4 cột render 236×236px — to gấp 6 lần tiêu đề thẻ nó đứng cạnh. * * ★ PHẠM VI: luật này nhắm svg.lucide TOÀN CỤC, không có selector cha thu hẹp. * Hôm nay đúng vì cả 2/2 pattern dùng icon (dich-vu-luoi-3-01, ly-do-icon-4-01) * đều là icon lớn đứng đầu thẻ trong lưới. Pattern TƯƠNG LAI dùng icon nhỏ * inline (icon tích trong danh sách, icon cạnh nhãn) sẽ bị ép về 40×40 ngoài ý * muốn — lúc đó phải thu hẹp selector theo ngữ cảnh, đừng chỉnh con số ở đây. * * flex:none để icon không bị co/giãn khi nằm trong nhóm layout flex. * stroke-width 1.5 thay 2: nét 2px của Lucide vẽ cho cỡ 24px, phóng lên 40px * thành nét thô. */ svg.lucide { width: 2.5rem; height: 2.5rem; flex: none; stroke-width: 1.5; color: var(--wp--preset--color--primary); } /* ── Khối chia đôi: ảnh tràn viền một nửa, panel màu một nửa ─────────────── * Khuôn lấy từ 4 site thật đang chạy (Heath Ceramics, Maison Marou, Hasami * Porcelain, Cocoon Vietnam) — cả bốn đặt ảnh SÁT MÉP, không chừa lề, và * KHÔNG site nào canh giữa chữ trong khối này (đo: 0/4 tiêu đề canh giữa ở * Cocoon, 1/12 ở Heath). * * Phần core/columns tự lo được: chia 50/50, xếp chồng dưới 782px, nền màu cho * cột phải. Phần nó KHÔNG lo được và phải viết tay ở đây: kéo ẢNH cao bằng * đúng cột chữ bên cạnh. core/image có aspectRatio + scale:cover nhưng cả hai * neo theo BỀ RỘNG ảnh, không theo chiều cao anh em cùng hàng — nên cột chữ * dài hơn là lòi ra một dải nền trống dưới ảnh. */ .fk-nua-anh { align-self: stretch; } .fk-nua-anh .fk-anh-tran, .fk-nua-anh .fk-anh-tran img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; } /* Nút trong panel: rộng bằng nhau, không co lại thành hai mẩu lệch nhau. */ .fk-nut-rong .wp-block-button__link { padding-left: var(--wp--preset--spacing--40); padding-right: var(--wp--preset--spacing--40); } /* Link footer dài (email, địa chỉ) trong cột hẹp: cho xuống dòng ở BẤT KỲ chỗ * nào thay vì tràn ra ngoài cột. Đo thật ở viewport 1440: cột "Liên hệ" rộng * 192px, "xinchao@gomsuantho.vn" đứt giữa chữ thành "xinchao@gomsuant / ho.vn" * — vẫn xấu, nhưng tràn ra ngoài cột thì hỏng hẳn bố cục. overflow-wrap để * trình duyệt chọn chỗ ngắt hợp lý hơn word-break tuỳ tiện. */ footer.wp-block-template-part a, footer.wp-block-template-part li { overflow-wrap: anywhere; } @media (prefers-reduced-motion: reduce) { .wp-block-button__link, a, .wp-block-column > .wp-block-group.has-surface-background-color { transition: none; } .wp-block-button__link:hover, .wp-block-button__link:focus-visible, .wp-block-button__link:active, .wp-block-column > .wp-block-group.has-surface-background-color:hover, .wp-block-column > .wp-block-group.has-surface-background-color:focus-within { transform: none; } }