/* Theme Name: Flatsome Child Description: This is a child theme for Flatsome Theme Author: UX Themes Template: flatsome Version: 3.0 */ /*************** ADD CUSTOM CSS HERE. ***************/ .copyright-footer{ line-height: 50px; } /* ========================================================= FLATSOME HOMEPAGE BASE CSS — V7.2 FINAL Phương án C — Minimal GMC (5-6 sections / homepage) + Layer 9 Test Mode showcase support. Setup: paste 1 LẦN vào child theme style.css. Mỗi shop chỉ cần đổi Primary Color trong CMC Settings → plugin tự inject vào qua CMC_Public::print_root_vars() — KHÔNG sửa file CSS này. Token override per-instance: bọc bất kỳ block nào trong
để test nhiều màu trên cùng 1 page (Token Swatch Test S11). ========================================================= */ /* ───────────────────────────────────────────────────────── 1. THEME VARIABLES ───────────────────────────────────────────────────────── */ :root { --nt-primary: #1a1a1a; --nt-radius: 24px; --nt-dark: #1a1a1a; --nt-muted: #555; --nt-soft: #faf6ef; --nt-fallback: #e8ecef; } /* ───────────────────────────────────────────────────────── 2. BROKEN-IMAGE GUARD ───────────────────────────────────────────────────────── */ .nt-hero-media img, .nt-story-media img, .nt-cta-media img, .nt-intent-card img, .nt-mosaic img { text-indent: -9999px; color: transparent; font-size: 0; } /* ───────────────────────────────────────────────────────── 3. HERO (Split + FullBleed) ───────────────────────────────────────────────────────── */ .nt-hero-slide .section-content { min-height: 620px; display: flex; align-items: center; } .nt-hero-slide .row { width: 100%; } .nt-hero-media { aspect-ratio: 4/3; width: 100%; overflow: hidden; border-radius: var(--nt-radius); background: var(--nt-fallback) url("data:image/svg+xml;utf8,Image") center/cover no-repeat; } .nt-hero-media.is-portrait { aspect-ratio: 3/4; } .nt-hero-media.on-dark { background: var(--nt-dark); box-shadow: 0 0 0 1px rgba(255,255,255,.06); } .nt-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; } /* ───────────────────────────────────────────────────────── 4. BRAND STORY ───────────────────────────────────────────────────────── */ .nt-story-media { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--nt-radius); background: var(--nt-fallback); } .nt-story-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ───────────────────────────────────────────────────────── 5. INTENT 4 CARDS ───────────────────────────────────────────────────────── */ .nt-intent-card { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--nt-radius); background: var(--nt-fallback); } .nt-intent-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .5s ease; } .nt-intent-card:hover img { transform: scale(1.04); } .nt-intent-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); pointer-events: none; } .nt-intent-card .nt-intent-label { position: absolute; left: 20px; bottom: 20px; color: #fff; font-weight: 700; font-size: 1.1em; letter-spacing: .3px; z-index: 1; } /* ───────────────────────────────────────────────────────── 6. MOOD MOSAIC (5 tiles, 3×2 grid) + wpautop guard ───────────────────────────────────────────────────────── */ .nt-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 16/9; } .nt-mosaic > br, .nt-mosaic > p, .nt-mosaic > *:not(a) { display: none !important; } .nt-mosaic > a { position: relative; display: block; overflow: hidden; border-radius: var(--nt-radius); background: var(--nt-fallback); min-height: 180px; } .nt-mosaic > a:nth-of-type(1) { grid-row: span 2; } .nt-mosaic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .5s ease; } .nt-mosaic a:hover img { transform: scale(1.04); } .nt-mosaic > a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(0,0,0,.5), transparent); pointer-events: none; } .nt-mosaic .tile-label { position: absolute; left: 20px; bottom: 20px; color: #fff; font-weight: 700; font-size: 1.2em; letter-spacing: .3px; z-index: 1; } .nt-mosaic .tile-label small { display: block; font-weight: 500; font-size: .75em; opacity: .9; margin-top: 4px; } .nt-mosaic:has(> a:only-of-type), .nt-mosaic:not(:has(> a:nth-of-type(5))) { display: block; aspect-ratio: auto; } .nt-mosaic:has(> a:only-of-type) > a, .nt-mosaic:not(:has(> a:nth-of-type(5))) > a { grid-row: auto; aspect-ratio: 4/3; width: 100%; margin-bottom: 14px; } /* ───────────────────────────────────────────────────────── 7. SECTION HEADING ───────────────────────────────────────────────────────── */ .nt-feat-heading { text-align: center; max-width: 720px; margin: 0 auto 30px; } .nt-feat-heading h2 { margin-bottom: 10px; } .nt-feat-heading p { color: var(--nt-muted); font-size: 1.02em; line-height: 1.7; } /* ───────────────────────────────────────────────────────── 8. TESTIMONIAL CARD ───────────────────────────────────────────────────────── */ .nt-testimonial-card { background: var(--nt-soft); border-radius: var(--nt-radius); padding: 28px 26px; height: 100%; border: 1px solid color-mix(in srgb, var(--nt-primary) 15%, transparent); } .nt-testimonial-card .stars { color: var(--nt-primary); letter-spacing: 2px; font-size: 1em; margin-bottom: 14px; } .nt-testimonial-card blockquote { margin: 0 0 18px; padding: 0; border: 0; color: var(--nt-dark); font-size: 1.02em; line-height: 1.7; font-style: normal; } .nt-testimonial-card .author { color: var(--nt-muted); font-size: .88em; letter-spacing: .3px; text-transform: uppercase; } /* ───────────────────────────────────────────────────────── 9. CTA SPLIT ───────────────────────────────────────────────────────── */ .nt-cta-media { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--nt-radius); background: var(--nt-fallback); } .nt-cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ───────────────────────────────────────────────────────── 10. CTA FLAT ───────────────────────────────────────────────────────── */ .nt-section-primary { background-color: var(--nt-primary); color: var(--nt-dark); } .nt-section-primary h1, .nt-section-primary h2, .nt-section-primary h3, .nt-section-primary p { color: var(--nt-dark); } /* ───────────────────────────────────────────────────────── 11. DARK SECTION HELPER ───────────────────────────────────────────────────────── */ .nt-section-dark { background-color: var(--nt-dark); color: #f3efe7; } .nt-section-dark h1, .nt-section-dark h2, .nt-section-dark h3 { color: #fff; } .nt-section-dark p { color: #cfcfcf; } /* ───────────────────────────────────────────────────────── 12. MOBILE BREAKPOINT ───────────────────────────────────────────────────────── */ @media (max-width: 849px) { .nt-hero-slide .section-content { min-height: 480px; } .nt-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 180px); aspect-ratio: auto; } .nt-mosaic > a:nth-of-type(1) { grid-column: span 2; grid-row: span 1; } .nt-mosaic > a:nth-of-type(5) { grid-column: span 2; } .nt-intent-card { aspect-ratio: 4/3; } } /* ───────────────────────────────────────────────────────── 13. UX_PRODUCTS GRID FALLBACK (V7.4 FIX) Flatsome [ux_products] mặc định render slider mode (Flickity). Khi Flickity JS không init xong (defer plugin / cache / JS conflict), slider giữ nguyên DOM nhưng KHÔNG có class .flickity-enabled → tất cả product cell đứng nguyên width 100% → mỗi product 1 dòng full-width. Rule này force grid khi Flickity chưa init: dùng flex-wrap, chia % theo class large-columns-N do Flatsome inject. Khi Flickity init xong (hoặc shortcode có type="row"), class .flickity-enabled xuất hiện → rule tự nhường, không xung đột. ───────────────────────────────────────────────────────── */ .row-slider:not(.flickity-enabled) { display: flex !important; flex-wrap: wrap; margin-left: -7px; margin-right: -7px; } .row-slider:not(.flickity-enabled) > .col { flex: 0 0 auto; padding-left: 7px; padding-right: 7px; width: 25%; /* default fallback */ } /* Map theo class column Flatsome inject */ .row-slider:not(.flickity-enabled).large-columns-2 > .col { width: 50%; } .row-slider:not(.flickity-enabled).large-columns-3 > .col { width: 33.3333%; } .row-slider:not(.flickity-enabled).large-columns-4 > .col { width: 25%; } .row-slider:not(.flickity-enabled).large-columns-5 > .col { width: 20%; } .row-slider:not(.flickity-enabled).large-columns-6 > .col { width: 16.6667%; } @media (max-width: 849px) { .row-slider:not(.flickity-enabled).medium-columns-2 > .col { width: 50%; } .row-slider:not(.flickity-enabled).medium-columns-3 > .col { width: 33.3333%; } .row-slider:not(.flickity-enabled).medium-columns-4 > .col { width: 25%; } } @media (max-width: 549px) { .row-slider:not(.flickity-enabled).small-columns-1 > .col { width: 100%; } .row-slider:not(.flickity-enabled).small-columns-2 > .col { width: 50%; } .row-slider:not(.flickity-enabled).small-columns-3 > .col { width: 33.3333%; } } /* Ẩn Flickity slider buttons khi chưa init (tránh hiện rỗng) */ .row-slider:not(.flickity-enabled) .flickity-prev-next-button, .row-slider:not(.flickity-enabled) .flickity-page-dots { display: none !important; }