/* Theme Name: BHC Style Theme Theme URI: https://example.com Author: Fubao Dev Author URI: https://example.com Description: Theme WordPress tuỳ chỉnh lấy cảm hứng phong cách thương hiệu gà rán (vàng - nâu), xây dựng lại từ style guide riêng (font Pretendard, bảng màu vàng/nâu). Không sao chép logo/hình ảnh gốc của bất kỳ thương hiệu nào — cần thay thế bằng nội dung/hình ảnh của bạn trước khi dùng thật. Version: 1.0.2 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: bhc-style-theme */ /* ========================================================= 0. DESIGN TOKENS — lấy từ style guide (xem bhc-style-guide.md) ========================================================= */ :root { /* Fonts */ --font-primary: "Pretendard", "NanumSquareNeo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif; /* Brand Yellow */ --color-brand-yellow: #FFC62D; --color-brand-yellow-alt: #FFC700; --color-brand-yellow-deep: #FDBB11; --color-brand-yellow-light: #FFF7E2; /* Brand Brown (text/heading) */ --color-brown-primary: #4E352A; --color-brown-dark: #3C1D0E; --color-brown-darker: #341C0C; --color-brown-light: #5D4A3D; --color-footer-bg: #49371F; /* Neutral */ --color-gray-border: #D9D9D9; --color-gray-text: #646464; --color-gray-muted: #959595; --color-gray-bg: #F5F5F5; --color-btn-secondary-bg: #E1E1E1; --color-black: #000000; --color-white: #FFFFFF; /* Radius / Shadow */ --radius-pill: 999px; --radius-card: 16px; --shadow-card: 0 4px 16px rgba(78, 53, 42, 0.08); /* Layout */ --container-width: 1280px; --header-height: 90px; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; } /* ========================================================= 1. RESET ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-primary); font-size: 16px; line-height: 1.5; color: var(--color-brown-dark); background: var(--color-white); -webkit-font-smoothing: antialiased; } /* Nền riêng cho Trang chủ — WordPress tự gắn class "front-page" vào khi ở trang chủ. */ body.front-page { background: var(--color-brand-yellow-light); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 900; color: var(--color-brown-primary); } p { margin: 0; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } /* ========================================================= 2. LAYOUT HELPERS ========================================================= */ .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-4); } .section { padding-block: var(--space-7); } .section-title { font-size: 32px; font-weight: 900; color: var(--color-brown-primary); text-align: center; margin-bottom: var(--space-5); } .section-title span { color: var(--color-brand-yellow-deep); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 12px 24px; border-radius: var(--radius-pill); font-weight: 700; font-size: 15px; border: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--color-brand-yellow); color: var(--color-brown-primary); } .btn-primary:hover { background: var(--color-brand-yellow-deep); } .btn-secondary { background: var(--color-btn-secondary-bg); color: var(--color-brown-primary); } .btn-outline { background: transparent; color: var(--color-white); border: 1px solid rgba(255,255,255,.6); } /* ========================================================= 3. HEADER ========================================================= */ .top-bar { background: linear-gradient(90deg, var(--color-brand-yellow) 0%, var(--color-brand-yellow-alt) 100%); color: var(--color-brown-primary); text-align: center; font-size: 13px; font-weight: 700; padding: 6px var(--space-3); } .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-white); border-bottom: 1px solid var(--color-gray-border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); } .site-logo { display: flex; align-items: center; gap: var(--space-2); } .site-logo .logo-mark { font-family: var(--font-primary); font-weight: 900; font-size: 28px; color: var(--color-brand-yellow); letter-spacing: -1px; } .site-logo .logo-tagline { display: flex; flex-direction: column; line-height: 1.1; } .site-logo .logo-tagline small { font-size: 9px; font-weight: 700; color: var(--color-gray-text); letter-spacing: .5px; } .site-logo .logo-tagline strong { font-size: 13px; font-weight: 900; color: var(--color-black); } .main-nav { display: none; } .main-nav ul { display: flex; gap: var(--space-5); } .main-nav a { font-size: 15px; font-weight: 700; color: var(--color-brown-primary); padding: 8px 0; position: relative; } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--color-brand-yellow); transition: width .2s ease; } .main-nav a:hover::after, .main-nav .current-menu-item > a::after { width: 100%; } .header-actions { display: flex; align-items: center; gap: var(--space-2); } .header-actions .btn { padding: 8px 18px; font-size: 14px; } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; } .menu-toggle span, .menu-toggle::before, .menu-toggle::after { content: ""; } .hamburger { width: 22px; height: 2px; background: var(--color-brown-primary); position: relative; display: block; } .hamburger::before, .hamburger::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--color-brown-primary); transition: transform .2s ease; } .hamburger::before { top: -7px; } .hamburger::after { top: 7px; } .mobile-nav { position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); height: 100vh; background: var(--color-white); transform: translateX(100%); transition: transform .25s ease; z-index: 200; padding: var(--space-4); overflow-y: auto; box-shadow: -8px 0 24px rgba(0,0,0,.1); } .mobile-nav.is-open { transform: translateX(0); } .mobile-nav-close { background: none; border: none; font-size: 24px; color: var(--color-brown-primary); margin-bottom: var(--space-3); } .mobile-nav ul li a { display: block; padding: 14px 4px; font-size: 16px; font-weight: 700; color: var(--color-brown-primary); border-bottom: 1px solid var(--color-gray-bg); } .mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 199; } .mobile-nav-overlay.is-open { opacity: 1; pointer-events: auto; } @media (min-width: 1024px) { .main-nav { display: block; } .menu-toggle { display: none; } } /* ========================================================= 4. HERO / SLIDER ========================================================= */ .hero { position: relative; overflow: hidden; background: var(--color-brand-yellow-light); } .hero-slider { position: relative; height: clamp(320px, 55vw, 620px); } .hero-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .5s ease; } .hero-slide.is-active { opacity: 1; visibility: visible; } .hero-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .hero-slide-content { position: relative; z-index: 2; padding-inline: var(--space-4); max-width: var(--container-width); margin-inline: auto; width: 100%; color: var(--color-brown-primary); } .hero-slide-content .eyebrow { display: inline-block; background: var(--color-brown-primary); color: var(--color-brand-yellow-light); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: var(--space-2); } .hero-slide-content h1 { font-size: clamp(28px, 5vw, 48px); line-height: 1.2; margin-bottom: var(--space-3); } .hero-slide-content p { font-size: 16px; margin-bottom: var(--space-4); max-width: 480px; } .hero-dots { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; } .hero-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(78,53,42,.3); border: none; padding: 0; } .hero-dots button.is-active { background: var(--color-brown-primary); width: 24px; border-radius: var(--radius-pill); } .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.8); border: none; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--color-brown-primary); z-index: 3; } .hero-arrow.prev { left: var(--space-3); } .hero-arrow.next { right: var(--space-3); } /* ========================================================= 5. SIGNATURE MENU SHOWCASE (khối "GIÒN RỤM, ĐẬM VỊ!") ========================================================= */ .signature-section { position: relative; overflow: hidden; background: var(--color-brand-yellow-alt); padding-block: 90px var(--space-8); } .signature-wave { position: absolute; top: 0; left: 0; width: 100%; height: 90px; fill: var(--color-white); } .signature-bubble { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255,255,255,.5); pointer-events: none; } .signature-dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: var(--space-3); } .signature-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(78,53,42,.35); } .signature-dots .star { width: auto; height: auto; background: none; color: var(--color-white); font-size: 18px; line-height: 1; } /* Font hiển thị dạng "marker/đậm nét" — dùng Titan One (Google Fonts, hỗ trợ tiếng Việt) + hiệu ứng nhiễu (noise) phủ lên chữ để mô phỏng nét cọ/marker thô như ảnh mẫu. */ .signature-title { position: relative; font-family: "Titan One", var(--font-primary); font-size: clamp(30px, 5vw, 54px); line-height: 1.15; text-align: center; color: var(--color-brown-primary); letter-spacing: .5px; margin-bottom: var(--space-2); -webkit-text-stroke: 1px rgba(78,53,42,.08); } .signature-title::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 90px 90px; -webkit-background-clip: text; background-clip: text; mix-blend-mode: multiply; opacity: .45; pointer-events: none; } .signature-subtitle { text-align: center; font-size: 15px; font-weight: 700; color: var(--color-brown-primary); opacity: .85; margin-bottom: var(--space-6); } .signature-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } .signature-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); background: var(--card-bg, var(--color-brown-primary)); border-radius: var(--radius-card); padding: var(--space-3); box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease; } .signature-card:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,.18); } .signature-badge { align-self: flex-start; background: rgba(0,0,0,.35); color: var(--color-white); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill); } .signature-card-media { position: relative; aspect-ratio: 4 / 5; border-radius: calc(var(--radius-card) - 4px); background: rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); } .signature-card-icon { font-size: 40px; } .signature-card-name { font-family: "Titan One", var(--font-primary); font-size: clamp(20px, 3vw, 28px); color: var(--card-text, var(--color-white)); letter-spacing: .5px; text-align: center; } @media (min-width: 640px) { .signature-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .signature-cards { grid-template-columns: repeat(4, 1fr); } } /* ========================================================= 5b. MENU CATEGORY CARDS (component dự phòng, có thể tái dùng ở trang khác) ========================================================= */ .category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } .category-card { background: var(--color-gray-bg); border-radius: var(--radius-card); padding: var(--space-4) var(--space-3); text-align: center; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); background: var(--color-brand-yellow-light); } .category-card .icon { width: 64px; height: 64px; margin-inline: auto var(--space-2); border-radius: 50%; background: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 28px; } .category-card h3 { font-size: 16px; margin-bottom: 4px; } .category-card p { font-size: 12px; color: var(--color-gray-text); } @media (min-width: 768px) { .category-grid { grid-template-columns: repeat(4, 1fr); } } /* ========================================================= 6. PROMO / EVENT CARDS ========================================================= */ .promo-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .promo-card { border-radius: var(--radius-card); overflow: hidden; background: var(--color-white); box-shadow: var(--shadow-card); } .promo-card-media { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--color-brand-yellow-light), var(--color-brand-yellow)); display: flex; align-items: center; justify-content: center; color: var(--color-brown-primary); font-weight: 900; } .promo-card-body { padding: var(--space-3); } .promo-card-body .date { font-size: 12px; color: var(--color-gray-muted); margin-bottom: 4px; } .promo-card-body h3 { font-size: 16px; margin-bottom: 4px; } .promo-card-body p { font-size: 13px; color: var(--color-gray-text); } @media (min-width: 768px) { .promo-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================= 7. APP / STORE CTA BANNER ========================================================= */ .cta-banner { background: var(--color-brown-primary); border-radius: var(--radius-card); padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-white); } .cta-banner h2 { color: var(--color-brand-yellow); font-size: 26px; margin-bottom: var(--space-2); } .cta-banner p { color: rgba(255,255,255,.8); margin-bottom: var(--space-4); } .cta-banner .btn-group { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; } /* ========================================================= 8. FOOTER ========================================================= */ .site-footer { background: var(--color-footer-bg); color: var(--color-white); padding-block: var(--space-6) var(--space-4); } .footer-top { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; padding-bottom: var(--space-4); border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: var(--space-4); } .footer-brand .logo-mark { font-size: 26px; font-weight: 900; color: var(--color-brand-yellow); } .footer-nav { display: flex; gap: var(--space-4); flex-wrap: wrap; } .footer-nav a { font-size: 13px; color: rgba(255,255,255,.85); } .footer-nav a:hover { color: var(--color-brand-yellow); } .footer-info p { font-size: 11px; color: rgba(255,255,255,.65); line-height: 1.8; } .footer-info strong { color: rgba(255,255,255,.9); font-size: 11px; } .footer-copyright { font-size: 10px; color: rgba(255,255,255,.5); margin-top: var(--space-2); } .footer-social { display: flex; gap: var(--space-2); } .footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 14px; } @media (max-width: 767px) { .footer-top { flex-direction: column; } } /* ========================================================= 9. CONTENT / BLOG / SEARCH / 404 ========================================================= */ .entry-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .entry-card { background: var(--color-white); border: 1px solid var(--color-gray-border); border-radius: var(--radius-card); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } .entry-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); } .entry-card-thumb { display: block; aspect-ratio: 4/3; overflow: hidden; } .entry-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .entry-card-body { padding: var(--space-3); } .entry-card-title { font-size: 17px; margin-bottom: 4px; } .entry-card-title a:hover { color: var(--color-brand-yellow-deep); } .entry-card-meta { font-size: 12px; color: var(--color-gray-muted); margin-bottom: 6px; } .entry-card-excerpt { font-size: 13px; color: var(--color-gray-text); } @media (min-width: 768px) { .entry-grid { grid-template-columns: repeat(3, 1fr); } } .single-entry-header { margin-bottom: var(--space-3); } .single-entry-header h1 { font-size: 28px; margin-bottom: 6px; } .single-entry-thumb { border-radius: var(--radius-card); overflow: hidden; margin-bottom: var(--space-4); } .single-entry-content { font-size: 16px; line-height: 1.8; color: var(--color-brown-dark); max-width: 760px; } .single-entry-content h2 { font-size: 22px; margin: var(--space-4) 0 var(--space-2); } .single-entry-content p { margin-bottom: var(--space-3); } .single-entry-content img { border-radius: var(--radius-card); margin-block: var(--space-3); } .pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding-inline: 8px; border-radius: var(--radius-pill); background: var(--color-gray-bg); color: var(--color-brown-primary); font-size: 14px; font-weight: 700; } .pagination .page-numbers.current { background: var(--color-brand-yellow); } .search-form { display: flex; gap: var(--space-2); } .search-field { flex: 1; padding: 12px 16px; border-radius: var(--radius-pill); border: 1px solid var(--color-gray-border); font-family: var(--font-primary); font-size: 14px; } .search-field:focus { outline: 2px solid var(--color-brand-yellow); } /* ========================================================= 10. COMMENTS ========================================================= */ .comments-area { max-width: 760px; margin-top: var(--space-6); } .comments-title { font-size: 20px; margin-bottom: var(--space-3); } .comment-list, .comment-list ul { list-style: none; margin: 0; padding: 0; } .comment-list li { margin-bottom: var(--space-3); } .comment-list .comment-body { background: var(--color-gray-bg); border-radius: var(--radius-card); padding: var(--space-3); } .comment-list .comment-author { font-weight: 700; font-size: 14px; color: var(--color-brown-primary); } .comment-list .comment-metadata { font-size: 11px; color: var(--color-gray-muted); margin-bottom: 6px; } .comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--color-gray-border); border-radius: 10px; font-family: var(--font-primary); margin-bottom: var(--space-2); } .comment-respond .form-submit input { background: var(--color-brand-yellow); color: var(--color-brown-primary); border: none; padding: 10px 22px; border-radius: var(--radius-pill); font-weight: 700; } /* Back to top */ .back-to-top { position: fixed; right: var(--space-4); bottom: var(--space-4); width: 44px; height: 44px; border-radius: 50%; background: var(--color-brown-primary); color: var(--color-white); display: flex; align-items: center; justify-content: center; border: none; box-shadow: var(--shadow-card); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 90; } .back-to-top.is-visible { opacity: 1; pointer-events: auto; }