/* Theme Name: Loyup Theme URI: datvu.me/loyup Author: DATVU Description: A minimal block theme (Full Site Editing). Version: 2.1.9 Requires at least: 6.4 Tested up to: 6.5 Requires PHP: 7.4 Text Domain: loyup */ /* @import phải đứng trước mọi rule. Font Inter từ Google Fonts (variable 100..900). */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); /* ponytail: layout/colors/typography live in theme.json — keep only what blocks can't express */ body, html { margin: 0 !important; } /* ===== Typography utilities (text-{weight}-{size}) — map từ text style Figma ===== Size cố định px theo Figma; mobile (≤781px) override ở cuối file. */ .text-bold-5xl { /* Figma H1 64px (mobile 48px) */ font-size: 64px; font-weight: 700; line-height: 1.1; letter-spacing: -0.64px; } .text-bold-3xl { /* Figma section H2 36px (giữ nguyên trên mobile) */ font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: 0.36px; } .text-regular-md { /* Figma body 16px / lh 24 */ font-size: 16px; font-weight: 400; line-height: 1.5; } .text-regular-sm { /* Figma nav & footer meta 14px */ font-size: 14px; font-weight: 400; line-height: 1.4; } /* ===== Sticky footer: footer luôn ở đáy khi nội dung ngắn ===== */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 96vh; } footer { border-top: 1px solid var(--wp--preset--color--border); margin-top: auto; } .wp-site-blocks > main { flex: 1 0 auto; margin-block-start: 0; /* bo gap 24px mac dinh WP giua header va main (footer giu margin-top:auto) */ } /* ===== Header ===== */ .wp-block-site-title { margin: 0; } .wp-block-site-title a { color: var(--wp--preset--color--azure-17); text-decoration: none; } .wp-block-navigation a { text-decoration: none; } .wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--azure-17); transition: color 0.15s ease; } .wp-block-navigation .wp-block-navigation-item__content:hover, .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--muted); } /* Nav: giu hamburger toi 781px cho khop breakpoint mobile (core mac dinh doi o 600px). Trong 600-781: hien nut hamburger, an menu ngang (scope .wp-block-navigation de thang specificity core). */ @media (min-width: 600px) and (max-width: 781px) { .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } /* ===== Footer ===== */ footer.wp-block-group a { color: inherit; text-decoration: none; transition: color 0.15s ease; } footer.wp-block-group a:hover { color: var(--wp--preset--color--azure-17); text-decoration: underline; } /* Email signup form */ .email-form { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px; padding: 6px 6px 6px 20px; border: 1px solid var(--wp--preset--color--azure-17); border-radius: 999px; } .email-form__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; color: inherit; } .email-form__input::placeholder { color: var(--wp--preset--color--muted); } .email-form__btn { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--wp--preset--color--azure-17); border-radius: 999px; background: transparent; color: var(--wp--preset--color--azure-17); font-size: 18px; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .email-form__btn:hover { background: var(--wp--preset--color--azure-17); color: var(--wp--preset--color--white-solid); } /* ===== Static page templates (page-*.html) ===== Scope 'section.page' — KHONG dung '.page' vi WordPress them class 'page' vao cho moi Page, se leak (h1/padding...) ra toan trang. */ section.page { padding-block: 56px; } section.page h1 { font-size: 32px; font-weight: 700; margin: 0 0 12px; } section.page h2 { font-size: 20px; font-weight: 700; margin: 32px 0 8px; } section.page p { margin: 0 0 16px; color: var(--wp--preset--color--azure-17); } .contact-list { list-style: none; padding: 0; margin: 0; line-height: 2.2; } .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; margin-top: 24px; } .catalog-item { display: flex; flex-direction: column; gap: 8px; } .catalog-thumb { aspect-ratio: 4 / 3; border-radius: 8px; background: var(--wp--preset--color--border); } .catalog-item h3 { margin: 0; font-size: 17px; font-weight: 600; } .catalog-item .price { margin: 0; color: var(--wp--preset--color--muted); } /* ===== Privacy / legal page — spacing chuan Figma (font tu utility class text-bold-*) ===== */ .privacy { padding-block: 80px; /* desktop; mobile 40px o media query cuoi file */ font-size: 16px; /* Figma body 16px (heading override bang utility class) */ line-height: 1.5; /* Figma lh 24/16 */ } .privacy h1 { margin: 0 0 40px; /* title -> body (Figma) */ text-align: center; } .privacy h2 { margin: 40px 0 16px; /* section gap 40 + heading -> body 16 (Figma) */ } .privacy h3 { margin: 0 0 16px; /* Figma sub-heading 24px trong section (vd Content, Copyright Policy) */ font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: 0.36px; } .privacy p { margin: 0 0 16px; line-height: 1.5; /* Figma body lh 24/16 */ color: var(--wp--preset--color--azure-17); } .privacy ul { margin: 0 0 16px; padding-inline-start: 24px; /* Figma list indent ms-24 */ list-style: disc; } .privacy li { margin: 0; line-height: 1.5; color: var(--wp--preset--color--azure-17); } .privacy a { color: inherit; /* bo mau accent, link theo mau chu */ } /* ===== Homepage: Hero ===== */ .hero { /* gradient token hero-mist fade → trong suốt (biến rgba trong suốt của cùng màu) để liền features */ background: linear-gradient(to bottom, var(--wp--preset--color--hero-mist) 0%, rgba(226, 230, 243, 0) 40%); } .hero__image { max-width: 905px; margin-inline: auto; } .hero__image img { width: 100%; height: auto; aspect-ratio: 937 / 732; /* giu ty le, tranh CLS (da bo width/height tren img) */ } /* ===== Homepage: Feature rows ===== */ .feature-row { gap: 133px; /* Figma gap anh/text 133px (mobile override o media query) */ } .feature-row--reverse { flex-direction: row-reverse; } .feature-row__image { flex: 1.2 1 360px; /* Figma ảnh 612 : chữ 503 */ margin: 0; } .feature-row__image img { width: 100%; height: auto; aspect-ratio: 1224 / 960; /* giu ty le, tranh CLS */ border-radius: 24px; /* Figma card radius 24px */ } .feature-row__text { flex: 1 1 320px; max-width: 503px; } @media (max-width: 781px) { /* Root padding 2 ben: 96px desktop -> 16px mobile (Figma) */ body { --wp--style--root--padding-left: 16px; --wp--style--root--padding-right: 16px; } /* Figma mobile: text tren, anh duoi, canh giua (DOM anh->text nen column-reverse) */ .feature-row, .feature-row--reverse { flex-direction: column-reverse; gap: 40px; /* Figma: gap text/anh mobile */ } .feature-row__text { max-width: none; text-align: center; flex-basis: auto; } .feature-row__image { flex-basis: auto; } /* Gap giua cac feature row: 160px -> 80px (Figma) */ .features > .feature-row + .feature-row { margin-block-start: 80px; } /* H1 mobile 48px (Figma); H2 giu 36px */ .text-bold-5xl { font-size: 48px; letter-spacing: -0.48px; } /* Padding tren/duoi section: 80px -> 40px (Figma mobile). !important de de inline block-style. */ .hero, .features { padding-top: 40px !important; padding-bottom: 40px !important; } /* Feature: tieu de -> mo ta 12px -> 16px (Figma mobile) */ .feature-row__text .text-regular-md { margin-block-start: 16px; } /* Privacy page: padding tren/duoi 80 -> 40 (Figma mobile) */ .privacy { padding-block: 40px; } } /* ===== Featured Cards ===== */ .featured-cards .card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; } .featured-cards .card__title, .featured-cards .card h3 { font-weight: 600; }