/* ══════════════════════════════════════════════════════════════ FACCO — variables.css v6.0 | Phương án A: Trắng + Stone Beige Học từ: Porcelanosa · miratap · Sangetsu ★ CHỈ SỬA FILE NÀY để thay đổi toàn bộ màu sắc website ★ LIGHT MODE: trắng sạch + stone beige ấm DARK MODE: nâu than ấm (tự động theo OS) Ctrl+F tìm nhanh: "--red" → màu đỏ thương hiệu "--gold" → màu vàng accent "LIGHT" → tất cả màu sáng "DARK" → tất cả màu tối "FONT" → đổi font chữ ══════════════════════════════════════════════════════════════ */ /* ── FONT ── Fonts được load trong để tối ưu tốc độ render. */ :root { /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BRAND — không đổi dù light hay dark ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --red: #D40020; /* ★ Màu đỏ logo FACCO thật */ --red-d: #b8001a; /* hover — đậm hơn khi hover */ --red-s: #e8334a; /* soft — nhạt hơn */ --red-dim: rgba(212, 0, 32, .12); --red-faint:rgba(212, 0, 32, .06); --gold: #8a6e38; --gold-w: #a0843f; /* warm */ --gold-l: rgba(138, 110, 56, .50); --gold-m: rgba(138, 110, 56, .22); --gold-f: rgba(138, 110, 56, .08); --gold-g: rgba(138, 110, 56, .04); /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FONT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --fd: 'Playfair Display', Georgia, serif; /* heading, logo */ --fb: 'DM Sans', 'Helvetica Neue', system-ui, sans-serif; /* body, nav, button */ --fj: 'Noto Serif JP', serif; /* chữ Nhật */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LAYOUT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --mw: 1240px; --g: clamp(20px, 5vw, 60px); --hh: 68px; --r-full: 9999px; --r-md: 8px; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MOTION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --tf: .16s ease; --tn: .30s ease; --ts: .54s ease; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LIGHT MODE — Porcelanosa / miratap Trắng tinh + stone beige ấm Chênh 7-8 điểm mỗi bước → chuyển mượt ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Nền */ --bg-0: #ffffff; /* card, element nổi — trắng hoàn toàn */ --bg-1: #f7f5f1; /* nền section chính — stone white nhạt */ --bg-2: #edeae4; /* section alt — stone beige nhạt */ --bg-3: #e3dfd8; /* hover, border bg */ --bg-4: #d6d1c8; /* divider, accent bg */ /* Chữ */ --tx-0: #1a1612; /* heading — than nâu đậm */ --tx-1: #38302a; /* body */ --tx-2: #695c50; /* sub */ --tx-3: #9a8c7e; /* muted */ --tx-4: #c4b8aa; /* hint */ /* Viền */ --br-0: rgba(26, 22, 18, .10); --br-1: rgba(26, 22, 18, .07); --br-2: rgba(26, 22, 18, .04); --br-g: rgba(138, 110, 56, .18); /* gold border */ /* Header — nền trắng mờ */ --header-bg: rgba(255, 255, 255, .92); --header-border: rgba(138, 110, 56, .14); /* Shadows — ấm, không xanh lạnh */ --sh-xs: 0 1px 2px rgba(26, 22, 18, .05); --sh-sm: 0 1px 4px rgba(26, 22, 18, .06), 0 2px 10px rgba(26, 22, 18, .05); --sh-md: 0 4px 16px rgba(26, 22, 18, .08), 0 12px 36px rgba(26, 22, 18, .07); --sh-lg: 0 8px 32px rgba(26, 22, 18, .10), 0 24px 64px rgba(26, 22, 18, .09); --sh-red: 0 4px 18px rgba(184, 50, 40, .24); /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DARK ZONES — luôn tối dù mode nào Hero · Banner · Journal · CTA · Footer ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --dk-0: #121110; /* tối nhất — hero bg */ --dk-1: #1a1814; /* header, footer */ --dk-2: #222018; /* card trong dark zone */ --dk-t: #ece3d3; /* chữ chính trên dark */ --dk-d: rgba(236, 227, 211, .58); --dk-m: rgba(236, 227, 211, .34); --dk-b: rgba(236, 227, 211, .10); --dk-bd: rgba(138, 110, 56, .14); --dk-bg-glass: rgba(18, 17, 16, .90); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DARK MODE — tự động theo OS / trình duyệt Windows: Settings → Personalization → Colors → Dark macOS: System Settings → Appearance → Dark iOS: Settings → Display & Brightness → Dark Android: Settings → Display → Dark theme ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (prefers-color-scheme: dark) { :root { /* Nền — nâu than ấm, cùng tông với dark zones */ --bg-0: #2c2820; /* card nổi (sáng nhất trong dark) */ --bg-1: #232018; /* section chính */ --bg-2: #1c1a14; /* section alt */ --bg-3: #161410; /* hover */ --bg-4: #11100c; /* tối nhất */ /* Chữ */ --tx-0: #ece3d3; --tx-1: #d4c8b4; --tx-2: rgba(212, 200, 180, .65); --tx-3: rgba(212, 200, 180, .38); --tx-4: rgba(212, 200, 180, .20); /* Viền */ --br-0: rgba(212, 200, 180, .11); --br-1: rgba(212, 200, 180, .07); --br-2: rgba(212, 200, 180, .04); --br-g: rgba(138, 110, 56, .22); /* Header */ --header-bg: rgba(20, 18, 16, .93); --header-border: rgba(138, 110, 56, .18); /* Shadows đậm hơn trong dark */ --sh-sm: 0 1px 4px rgba(0,0,0,.20), 0 2px 10px rgba(0,0,0,.16); --sh-md: 0 4px 16px rgba(0,0,0,.24), 0 12px 36px rgba(0,0,0,.20); --sh-lg: 0 8px 32px rgba(0,0,0,.28), 0 24px 64px rgba(0,0,0,.24); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ZONE CLASSES — dùng trên
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .zone-light { background: var(--bg-1); color: var(--tx-1); } .zone-light-0 { background: var(--bg-0); color: var(--tx-1); } .zone-light-alt { background: var(--bg-2); color: var(--tx-1); } /* Dark zones — KHÔNG bị ảnh hưởng bởi dark mode OS */ .zone-dark { background: var(--dk-0); color: var(--dk-t); } .zone-dark-2 { background: var(--dk-1); color: var(--dk-t); } .zone-dark-3 { background: var(--dk-2); color: var(--dk-t); }