/* ============================================ WANO NO KUNI 和の国 — ADDITIVE THEME LAYER -------------------------------------------- NON-DESTRUCTIVE: this file is only loaded by pages that explicitly it (currently pages/explore.html). It re-tints the existing design tokens toward the Wano / Edo-festival palette and adds reusable Japanese motifs. Existing pages that do NOT link this file keep the original Sakura theme byte-for-byte. Load order: after variables.css & main.css so it wins. ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500;600;700;800&family=Yuji+Syuku&display=swap'); :root { /* ---- Wano core palette (new tokens) ---- */ --wano-vermilion: #E24A3B; /* 朱 shu — torii red */ --wano-vermilion-deep: #C1352A; --wano-gold: #E8B84B; /* 金 kin */ --wano-gold-deep: #C99A2E; --wano-indigo: #2B3A63; /* 藍 ai */ --wano-indigo-deep: #1B2647; --wano-ink: #16121F; /* 墨 sumi */ --wano-washi: #F4ECD8; /* 生成り paper */ --wano-matcha: #9BC17C; /* 抹茶 */ --wano-sakura: #F7B5C4; /* 桜 */ --wano-persimmon: #E8853C; /* 柿 */ --wano-lantern: #FFC873; /* 提灯 glow */ --font-brush: 'Shippori Mincho B1', 'Yuji Syuku', 'Kodchasan', serif; /* ---- Re-tint existing tokens (dark = Wano festival night) ---- */ --primary-dark: #16121f; --primary-navy: #1d1730; --primary-slate: #2a2140; --accent-pink: #F7B5C4; --accent-pink-light: #FBD0DA; --accent-pink-dark: #E8899E; --accent-sakura: #FFD7DF; --accent-rose: #FF7A96; --accent-blue: #6E8FD6; --accent-cyan: #7FD4D0; --accent-green: #9BC17C; --accent-amber: #E8B84B; --accent-red: #E24A3B; --accent-purple: #B79BE8; --gradient-main: linear-gradient(135deg, #E24A3B 0%, #E8853C 50%, #E8B84B 100%); --gradient-sakura: linear-gradient(135deg, #FFD7DF 0%, #F7B5C4 50%, #FF7A96 100%); --gradient-blue: linear-gradient(135deg, #6E8FD6 0%, #7FD4D0 100%); --gradient-cyber: linear-gradient(135deg, #16121f 0%, #2a2140 50%, #3a2b52 100%); --gradient-glow: linear-gradient(135deg, rgba(226,74,59,0.18) 0%, rgba(232,184,75,0.18) 100%); --gradient-green: linear-gradient(135deg, #9BC17C 0%, #7DB36A 100%); --gradient-wano: linear-gradient(135deg, #C1352A 0%, #E24A3B 45%, #E8B84B 100%); --gradient-lantern: radial-gradient(circle at 50% 40%, #FFD79A 0%, #E8853C 55%, transparent 80%); --bg-dark: #16121f; --bg-darker: #100d18; --bg-card: #221a33; --bg-card-hover: #2e2444; --text-primary: #F5EDE0; --text-secondary: #C8B8C4; --text-muted: #9384A0; --text-link: #EE7C5A; --border-dark: #33284a; --border-light: #4a3a66; --border-glow: rgba(232,184,75,0.5); --shadow-glow: 0 0 20px rgba(226,74,59,0.35); --shadow-glow-cyan: 0 0 20px rgba(232,184,75,0.32); --shadow-sakura: 0 4px 20px rgba(247,181,196,0.3); } [data-theme="light"] { --bg-dark: #F4ECD8; --bg-darker: #FBF6EA; --bg-card: #FFFDF6; --bg-card-hover: #FBEFD9; --text-primary: #24190F; --text-secondary: #5A4632; --text-muted: #8A7658; --text-link: #C1352A; --accent-pink: #E8899E; --accent-blue: #3E5C99; --accent-cyan: #3FA9A2; --accent-green: #6C9E4E; --accent-amber: #C99A2E; --accent-red: #C1352A; --border-dark: #E7D8BC; --border-light: #D9C29A; --border-glow: rgba(193,53,42,0.45); --shadow-glow: 0 0 20px rgba(193,53,42,0.22); --gradient-main: linear-gradient(135deg, #C1352A 0%, #E8853C 50%, #C99A2E 100%); --gradient-cyber: linear-gradient(135deg, #FBF6EA 0%, #F4ECD8 50%, #EFE0C4 100%); --gradient-wano: linear-gradient(135deg, #C1352A 0%, #E24A3B 45%, #C99A2E 100%); } /* ---- Ambient background re-tint (only where .cyber-bg exists) ---- */ .cyber-bg::before { background: radial-gradient(ellipse at 18% 16%, rgba(226,74,59,0.16) 0%, transparent 52%), radial-gradient(ellipse at 82% 84%, rgba(232,184,75,0.12) 0%, transparent 52%), radial-gradient(ellipse at 50% 55%, rgba(43,58,99,0.16) 0%, transparent 60%); } [data-theme="light"] .cyber-bg::before { background: radial-gradient(ellipse at 18% 16%, rgba(193,53,42,0.10) 0%, transparent 52%), radial-gradient(ellipse at 82% 84%, rgba(201,154,46,0.10) 0%, transparent 52%), radial-gradient(ellipse at 50% 55%, rgba(43,58,99,0.06) 0%, transparent 60%); } .cyber-grid { background-image: linear-gradient(rgba(232,184,75,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(232,184,75,0.045) 1px, transparent 1px); } .particle { background: var(--wano-lantern); box-shadow: 0 0 6px rgba(255,200,115,0.6); } /* ============================================ REUSABLE WANO MOTIFS ============================================ */ /* Seigaiha (青海波) wave strip — verified SVG, tiles cleanly */ .wano-waves { background-repeat: repeat; background-size: 48px 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23E8B84B' stroke-opacity='0.3' stroke-width='1.4'%3E%3Cpath d='M0 24a24 24 0 0 1 48 0'/%3E%3Cpath d='M0 24a18 18 0 0 1 48 0'/%3E%3Cpath d='M0 24a12 12 0 0 1 48 0'/%3E%3Cpath d='M0 24a6 6 0 0 1 48 0'/%3E%3Cpath d='M-24 24a24 24 0 0 1 48 0'/%3E%3Cpath d='M24 24a24 24 0 0 1 48 0'/%3E%3C/g%3E%3C/svg%3E"); } /* Brush kicker label */ .wano-kicker { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-brush); letter-spacing: 0.28em; text-transform: uppercase; font-size: var(--text-sm); color: var(--wano-gold); } .wano-kicker::before, .wano-kicker::after { content: ''; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--wano-vermilion), transparent); } .kanji-watermark { font-family: var(--font-brush); color: var(--wano-vermilion); opacity: 0.06; pointer-events: none; user-select: none; line-height: 1; font-weight: 800; } .torii-divider { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: var(--space-8) 0; color: var(--wano-vermilion); } .torii-divider::before, .torii-divider::after { content: ''; height: 2px; flex: 1; max-width: 160px; background: linear-gradient(90deg, transparent, var(--wano-vermilion), transparent); }