/* ============================================================ Tàng Thư Các — Module MÙA (seasons.css) Cộng thêm: đổi tông màu theo mùa + công tắc + hạt rơi. Không sửa file/biến gốc; chỉ ghi đè --accent theo [data-season]. ============================================================ */ /* ---- Đổi tông màu theo mùa ---- Ghi đè --accent trên -> kéo theo --bg-grad (radial dùng var(--accent)), --accent-soft / --accent-line / --card-orn, ::selection, viền & ánh nhấn. 'none' không đặt gì -> giữ nguyên màu mặc định / màu admin chọn trong Customizer. */ html[data-season="snow"] { --accent: #6fa6dc; } /* Đông — xanh dương lạnh */ html[data-season="sakura"] { --accent: #e88aa6; } /* Xuân — hồng ấm áp */ html[data-season="autumn"] { --accent: #d98a3f; } /* Thu — cam hổ phách */ /* Tăng chiều sâu nền theo mùa cho rõ "không khí" (vẫn dùng cấu trúc gradient của theme). Áp dụng cho TẤT CẢ các trang (file này nạp site-wide), cả dark lẫn light. */ html[data-season="snow"][data-theme="dark"] { --bg-grad: radial-gradient(1300px 720px at 80% -12%, color-mix(in oklab, var(--accent) 26%, #0c1320), #0a0d16 66%); } html[data-season="sakura"][data-theme="dark"] { --bg-grad: radial-gradient(1300px 720px at 80% -12%, color-mix(in oklab, var(--accent) 24%, #1d1018), #120b11 66%); } html[data-season="autumn"][data-theme="dark"] { --bg-grad: radial-gradient(1300px 720px at 80% -12%, color-mix(in oklab, var(--accent) 24%, #1a1209), #110d07 66%); } html[data-season="snow"][data-theme="light"] { --bg-grad: radial-gradient(1300px 720px at 80% -12%, color-mix(in oklab, var(--accent) 18%, #eef4fb), #f5f8fc 66%); } html[data-season="sakura"][data-theme="light"] { --bg-grad: radial-gradient(1300px 720px at 80% -12%, color-mix(in oklab, var(--accent) 16%, #fdeef3), #fdf6f8 66%); } html[data-season="autumn"][data-theme="light"] { --bg-grad: radial-gradient(1300px 720px at 80% -12%, color-mix(in oklab, var(--accent) 16%, #fbf1e4), #fdf8f1 66%); } /* ============================================================ Công tắc mùa (chèn vào .hdr__actions bằng JS) ============================================================ */ .ttc-season { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--border-2); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); } .ttc-season__btn { appearance: none; border: 0; cursor: pointer; display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; font-family: var(--btn-font), serif; font-size: 14px; line-height: 1; color: var(--text-3); background: transparent; transition: background .16s, color .16s, transform .12s; } .ttc-season__btn:hover { color: var(--text); transform: translateY(-1px); } .ttc-season__btn[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 58%, #000)); box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--accent) 75%, transparent); } .ttc-season__btn .lbl { margin-left: 6px; font-size: 12.5px; font-weight: 600; } /* Trên màn nhỏ: chỉ hiện glyph cho gọn. */ @media (max-width: 980px) { .ttc-season__btn .lbl { display: none; } .ttc-season__btn { min-width: 32px; padding: 0; } } /* Mobile: thu gọn để header còn chỗ cho nút Đăng nhập. */ @media (max-width: 600px) { .ttc-season { gap: 2px; padding: 2px; } .ttc-season__btn { min-width: 28px; height: 28px; font-size: 13px; } } @media (max-width: 400px) { .ttc-season__btn { min-width: 25px; height: 26px; } } /* Bản nổi dự phòng (nếu JS không tìm thấy .hdr__actions) */ .ttc-season--float { position: fixed; left: 16px; bottom: 16px; z-index: 1200; } @media (max-width: 600px) { .ttc-season--float { left: 12px; bottom: 12px; } } /* ============================================================ Lớp hạt rơi ============================================================ */ .ttc-season-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; } .ttc-season-layer:empty { display: none; } .ttc-flake, .ttc-petal, .ttc-leaf { position: absolute; top: -8vh; will-change: transform, opacity; } /* Đông — bông tuyết tròn trắng */ .ttc-flake { border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 0 6px rgba(255,255,255,.7); animation: ttcs-fall linear infinite; } /* Xuân — cánh anh đào hồng */ .ttc-petal { background: linear-gradient(135deg, #ffd9e8, #f59cc2); border-radius: 100% 0 100% 0; box-shadow: 0 0 7px rgba(245,156,194,.45); animation: ttcs-drift linear infinite; } /* Thu — lá cam/đỏ */ .ttc-leaf { border-radius: 100% 0 100% 0; box-shadow: 0 0 6px rgba(200,90,40,.4); animation: ttcs-drift linear infinite; } /* Quỹ đạo dùng biến --sway / --rot / --op (do JS đặt theo độ sâu) để tạo cảm giác xa–gần. */ @keyframes ttcs-fall { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; } 10% { opacity: var(--op, .9); } 90% { opacity: var(--op, .9); } 100% { transform: translate3d(var(--sway, 16px), 118vh, 0) rotate(var(--rot, 300deg)); opacity: 0; } } @keyframes ttcs-drift { 0% { transform: translate3d(0, 0, 0) rotate(calc(-1 * var(--rot, 14deg))); opacity: 0; } 12% { opacity: var(--op, 1); } 50% { transform: translate3d(var(--sway, 26px), 60vh, 0) rotate(var(--rot, 14deg)); } 88% { opacity: var(--op, 1); } 100% { transform: translate3d(calc(-1 * var(--sway, 20px)), 118vh, 0) rotate(calc(-1 * var(--rot, 14deg))); opacity: 0; } } /* Tôn trọng người dùng tắt chuyển động: ẩn hạt rơi (JS cũng không vẽ). */ @media (prefers-reduced-motion: reduce) { .ttc-season-layer { display: none !important; } }