/* ========================================================================== 白鹿情感｜配色風格提案（6 組） --------------------------------------------------------------------------- 原理：網站所有顏色都走 CSS 變數（--ink / --paper / --accent / --line）。這裡只覆寫變數值，不動任何版面與文案，所以套用是零風險的。用法：在或加上 data-theme="t1".."t6" 即切換整站配色。不加 = 維持目前的墨藍／暖赭。 ========================================================================== */ /* ========================================================================== 共用：讓主題色真正出現在畫面上 --------------------------------------------------------------------------- 原本 .btn--primary 用的是墨色（--ink-800），所以不管換哪組配色，主要按鈕都是同一個深灰——這是配色「感覺不到」的主因。這裡把主要按鈕改成吃主題色，並讓 hero 帶一層主題色的光暈。 ========================================================================== */ [data-theme] .btn--primary { background: var(--accent-600); color: var(--white); box-shadow: 0 2px 6px rgba(0, 0, 0, .07), 0 8px 22px -6px var(--accent-200); } [data-theme] .btn--primary:hover { background: var(--accent-700); box-shadow: 0 4px 10px rgba(0, 0, 0, .08), 0 14px 30px -8px var(--accent-200); } /* hero 的光暈改用主題色，讓第一屏就感受得到色調 */ [data-theme] .hero { background: radial-gradient(ellipse 74% 58% at 50% -4%, var(--accent-200), transparent 68%), radial-gradient(ellipse 45% 40% at 88% 12%, var(--accent-100), transparent 72%), var(--paper-50); } /* 深色區塊改用主題深色 --------------------------------------------------------------------------- 注意：這裡刻意「不列入 .stats」。 .stats 是數字與成就的容器，它自己有淺色底盤（見 stats.css）；首頁的深色底由外層的 .section--ink 提供，不需要 .stats 再上一次深色。若把 .stats 列進來，淺色頁面（例如關於白鹿）的數字區塊會被蓋成深色，變成深色底 + 深色字，文字看不見。 */ [data-theme] .section--ink, [data-theme] .band { background: var(--ink-900); } /* 卡片與淺底區塊跟著主題走 */ [data-theme] .card, [data-theme] .aside-card, [data-theme] .notice--accent { border-color: var(--accent-200); } [data-theme] .notice--accent { background: var(--accent-100); } /* 標題裝飾線改用主題色 */ [data-theme] .rule { background: var(--accent-500); } /* ========================================================================== T1 桃花粉｜櫻花粉 × 深梅最輕盈浪漫，像春日櫻花。適合想傳達「心動、初戀、溫柔」的調性。 ========================================================================== */ [data-theme="t1"] { --ink-900: #2E1526; --ink-800: #45203A; --ink-700: #5E3252; --ink-600: #7C5170; --ink-500: #9A7190; --ink-400: #B694AE; --paper-50: #FFF9FB; --paper-100: #FFF2F6; --paper-200: #FBE4EC; --paper-300: #F4CDDC; --paper-400: #E7AFC5; --accent-700: #A83368; --accent-600: #C74C81; --accent-500: #E27FA8; --accent-200: #F8D9E6; --accent-100: #FDF0F6; --line: rgba(46, 21, 38, 0.12); --line-strong: rgba(46, 21, 38, 0.22); --card: #FFFFFF; } /* ========================================================================== T2 暖陽蜜桃｜杏桃 × 暖棕溫暖親切、陽光感。傳達「被陪伴、有希望」。 ========================================================================== */ [data-theme="t2"] { --ink-900: #3A2415; --ink-800: #52341F; --ink-700: #6B4629; --ink-600: #8A5F3D; --ink-500: #A87C5A; --ink-400: #C39D7E; --paper-50: #FFFCF6; --paper-100: #FFF6EA; --paper-200: #FBEBDA; --paper-300: #F3D9BE; --paper-400: #E5BF9B; --accent-700: #B55A25; --accent-600: #D97440; --accent-500: #F09A63; --accent-200: #FADFC8; --accent-100: #FDF1E5; --line: rgba(58, 36, 21, 0.12); --line-strong: rgba(58, 36, 21, 0.22); --card: #FFFFFF; } /* ========================================================================== T3 藕紫玫瑰｜灰紫 × 霧玫瑰高雅內斂，帶一點命定感。傳達「細水長流、成熟的情感」。 ========================================================================== */ [data-theme="t3"] { --ink-900: #241B33; --ink-800: #372A4C; --ink-700: #4D3C66; --ink-600: #6A5986; --ink-500: #8A7BA3; --ink-400: #A99BBD; --paper-50: #FCFAFF; --paper-100: #F6F2FB; --paper-200: #EDE6F6; --paper-300: #DED3EE; --paper-400: #C6B6DE; --accent-700: #7C4E9E; --accent-600: #9A6BBA; --accent-500: #B98FD4; --accent-200: #E7DAF3; --accent-100: #F4EDFA; --line: rgba(36, 27, 51, 0.12); --line-strong: rgba(36, 27, 51, 0.22); --card: #FFFFFF; } /* ========================================================================== T4 珊瑚朱紅｜珊瑚 × 橙紅活潑熱情、生命力強。傳達「主動出擊、關係升溫」。 ========================================================================== */ [data-theme="t4"] { --ink-900: #33140F; --ink-800: #4B1E16; --ink-700: #632B20; --ink-600: #853E2E; --ink-500: #A65A47; --ink-400: #C1806D; --paper-50: #FFF9F7; --paper-100: #FFF2EE; --paper-200: #FCE4DD; --paper-300: #F5CEC2; --paper-400: #E9AC9A; --accent-700: #C2402B; --accent-600: #E05B41; --accent-500: #F4826A; --accent-200: #FAD5C9; --accent-100: #FDEDE7; --line: rgba(51, 20, 15, 0.12); --line-strong: rgba(51, 20, 15, 0.22); --card: #FFFFFF; } /* ========================================================================== T5 東方姻緣紅｜正紅 × 金最貼近「姻緣」的傳統意象：紅線、喜氣、圓滿。為了讓紅色真正被感受到（而不是只有按鈕是紅的），這裡： - 底色帶暖粉紅調 - hero 的紅色光暈加重 - 標題與重點色用正紅 ========================================================================== */ [data-theme="t5"] { --ink-900: #2B0F0C; --ink-800: #421A14; --ink-700: #5A2A20; --ink-600: #7A4234; --ink-500: #9B6353; --ink-400: #BC8A7B; --paper-50: #FFF7F5; --paper-100: #FDEBE7; --paper-200: #FADDD5; --paper-300: #F3C3B7; --paper-400: #E5A090; --accent-700: #A8151C; --accent-600: #C9282F; --accent-500: #E14D52; --accent-200: #F8CFC6; --accent-100: #FCE7E1; --line: rgba(43, 15, 12, 0.13); --line-strong: rgba(43, 15, 12, 0.24); --card: #FFFFFF; /* 金色點綴：疊在紅色按鈕上、當分隔線或小標 */ --gold-700: #8A6414; --gold-600: #B8891F; --gold-500: #D9AE45; --gold-200: #F0DFB4; --gold-100: #FAF2DC; } /* t5 專屬：hero 紅暈更明顯，並在最上方加一條金色細線 */ [data-theme="t5"] .hero { background: radial-gradient(ellipse 80% 62% at 50% -6%, #F6B9AC, transparent 66%), radial-gradient(ellipse 50% 44% at 86% 14%, #FBD9CF, transparent 70%), var(--paper-50); } [data-theme="t5"] .hero::after { content: ""; position: absolute; left: 50%; top: 0; width: min(560px, 62%); height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold-500) 18%, var(--gold-600) 50%, var(--gold-500) 82%, transparent); opacity: .85; } [data-theme="t5"] .btn--primary { background: linear-gradient(180deg, #D9353C, var(--accent-700)); box-shadow: 0 2px 6px rgba(168, 21, 28, .18), 0 10px 26px -8px rgba(168, 21, 28, .35); } [data-theme="t5"] .btn--primary:hover { background: linear-gradient(180deg, var(--accent-600), #8E1016); transform: translateY(-2px); } [data-theme="t5"] .hgroup__eyebrow, [data-theme="t5"] .hero__latin { color: var(--accent-700); } /* ========================================================================== T6 酒紅午夜｜深酒紅 × 藕粉沉穩、濃烈、有儀式感。深色底讓粉色重點更跳。 ========================================================================== */ [data-theme="t6"] { --ink-900: #1C0F1A; --ink-800: #2E1B2B; --ink-700: #45293F; --ink-600: #664458; --ink-500: #8A6478; --ink-400: #AC8999; --paper-50: #FDF8FA; --paper-100: #F9F0F4; --paper-200: #F0E1E9; --paper-300: #E0C9D6; --paper-400: #C5A4B6; --accent-700: #7E1E3F; --accent-600: #9E2E54; --accent-500: #C4507A; --accent-200: #ECCBD9; --accent-100: #F9EDF2; --line: rgba(28, 15, 26, 0.12); --line-strong: rgba(28, 15, 26, 0.22); --card: #FFFFFF; }