/** * HCF VISUAL LAB - Light Theme（白底） * 以覆蓋層方式把全站深色 token 反轉為白底深字。 * 例外（維持深色）：.xv 3D 拆解畫面、.keep-dark 標記的區塊（作品卡片深色視覺頭）。 * 啟用： */ html.theme-light { --hcf-dark: #F7F7F9; --hcf-dark-elevated: #FFFFFF; --hcf-surface: rgba(0, 0, 0, 0.03); --hcf-surface-hover: rgba(0, 0, 0, 0.06); --hcf-border: rgba(0, 0, 0, 0.08); --hcf-border-hover: rgba(0, 0, 0, 0.2); --hcf-text-primary: #111114; --hcf-text-muted: #6B6B76; color-scheme: light; } html.theme-light body { background-color: #F7F7F9; color: #111114; } html.theme-light ::-webkit-scrollbar-track { background: #F7F7F9; } html.theme-light ::-webkit-scrollbar-thumb { background: #C9C9D2; border-color: rgba(0, 0, 0, 0.05); } html.theme-light ::selection { background: #C81015; color: #fff; } /* ---------- 3D 背景：白底上壓淡 ---------- */ html.theme-light #webgl-canvas { opacity: 0.12 !important; } html.theme-light .glow-orb, html.theme-light .ambient-glow { opacity: 0.35; } html.theme-light .liquid-orb-bg { background: #F7F7F9 !important; } html.theme-light #brand-glow { mix-blend-mode: multiply; opacity: 0; } html.theme-light #brand-glow.is-on { opacity: 0.55; } html.theme-light #custom-cursor, html.theme-light #custom-cursor-follower { mix-blend-mode: difference; } /* ---------- 文字 ---------- */ html.theme-light .text-white:not(.keep-dark, .keep-dark *, .xv *) { color: #111114 !important; } html.theme-light .text-white\/85:not(.xv *), html.theme-light .text-white\/80:not(.xv *) { color: rgba(17, 17, 20, 0.8) !important; } html.theme-light .text-white\/70:not(.keep-dark *, .xv *), html.theme-light .text-white\/50:not(.keep-dark *, .xv *) { color: rgba(17, 17, 20, 0.55) !important; } html.theme-light .text-white\/40:not(.xv *), html.theme-light .text-white\/30:not(.xv *) { color: rgba(17, 17, 20, 0.35) !important; } html.theme-light .text-gray-100:not(.keep-dark *, .xv *), html.theme-light .text-gray-200:not(.keep-dark *, .xv *) { color: #1F1F24 !important; } html.theme-light .text-gray-300:not(.keep-dark *, .xv *) { color: #34343C !important; } html.theme-light .text-gray-400:not(.keep-dark *, .xv *) { color: #55555F !important; } html.theme-light .text-gray-500:not(.keep-dark *, .xv *) { color: #6F6F7A !important; } html.theme-light .text-gray-600:not(.keep-dark *, .xv *) { color: #808090 !important; } html.theme-light .hover\:text-white:not(.keep-dark *, .xv *):hover { color: #000 !important; } html.theme-light .group:hover .group-hover\:text-white:not(.keep-dark *, .xv *) { color: #000 !important; } /* 淺色系強調字（紅 300 / 藍 300…）在白底太淡 → 加深 */ html.theme-light .text-red-300:not(.keep-dark *, .xv *) { color: #B40E13 !important; } html.theme-light .text-amber-300:not(.keep-dark *, .xv *), html.theme-light .text-amber-200:not(.keep-dark *, .xv *) { color: #A16207 !important; } html.theme-light .text-blue-300:not(.keep-dark *, .xv *) { color: #1D4ED8 !important; } html.theme-light .text-indigo-300:not(.keep-dark *, .xv *) { color: #4338CA !important; } html.theme-light .text-slate-300:not(.keep-dark *, .xv *) { color: #475569 !important; } html.theme-light .text-emerald-300:not(.keep-dark *, .xv *), html.theme-light .text-emerald-400:not(.keep-dark *, .xv *), html.theme-light .text-green-300:not(.keep-dark *, .xv *) { color: #047857 !important; } html.theme-light .text-cyan-300:not(.keep-dark *, .xv *), html.theme-light .text-cyan-400:not(.keep-dark *, .xv *) { color: #0E7490 !important; } html.theme-light .text-purple-300:not(.keep-dark *, .xv *), html.theme-light .text-purple-400:not(.keep-dark *, .xv *) { color: #6D28D9 !important; } html.theme-light .text-pink-300:not(.keep-dark *, .xv *) { color: #BE185D !important; } html.theme-light .text-\[\#D4AF37\]:not(.keep-dark *, .xv *) { color: #9A7B1C !important; } html.theme-light .hover\:text-\[\#D4AF37\]:not(.keep-dark *, .xv *):hover, html.theme-light .group:hover .group-hover\:text-\[\#D4AF37\]:not(.keep-dark *, .xv *) { color: #9A7B1C !important; } html.theme-light .text-gradient-silver { background-image: linear-gradient(135deg, #111 0%, #444 60%, #777 100%); } /* ---------- 底色 / 邊框 ---------- */ html.theme-light .bg-white\/5:not(.keep-dark, .keep-dark *, .xv *), html.theme-light .bg-white\/\[0\.02\]:not(.xv *), html.theme-light .bg-white\/\[0\.03\]:not(.xv *), html.theme-light .bg-white\/\[0\.04\]:not(.xv *) { background-color: rgba(0, 0, 0, 0.03) !important; } html.theme-light .bg-white\/10:not(.keep-dark, .keep-dark *, .xv *) { background-color: rgba(0, 0, 0, 0.06) !important; } html.theme-light .hover\:bg-white\/10:not(.keep-dark *, .xv *):hover { background-color: rgba(0, 0, 0, 0.06) !important; } html.theme-light .bg-black\/40:not(.keep-dark *, .xv *), html.theme-light .bg-black\/30:not(.keep-dark *, .xv *) { background-color: rgba(255, 255, 255, 0.6) !important; } html.theme-light .bg-\[\#0A0A0C\]:not(.xv *), html.theme-light .bg-\[\#0D0D0D\]:not(.xv *), html.theme-light .bg-\[\#070709\]:not(.xv *), html.theme-light .bg-\[\#111\]:not(.keep-dark, .keep-dark *, .xv *), html.theme-light .bg-\[\#111111\]:not(.keep-dark, .keep-dark *, .xv *), html.theme-light .bg-\[\#121216\]\/95:not(.xv *) { background-color: #FFFFFF !important; } html.theme-light .border-white\/10:not(.keep-dark *, .xv *), html.theme-light .border-white\/15:not(.keep-dark *, .xv *), html.theme-light .border-white\/5:not(.keep-dark *, .xv *), html.theme-light .border-gray-800:not(.xv *) { border-color: rgba(0, 0, 0, 0.1) !important; } html.theme-light .hover\:border-white:not(.xv *):hover { border-color: #111 !important; } html.theme-light .divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(0, 0, 0, 0.1) !important; } /* 玻璃面板 → 白玻璃 */ html.theme-light .glass-panel:not(.keep-dark, .keep-dark *, .xv *) { background: rgba(255, 255, 255, 0.72); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.18); } html.theme-light .glass-panel:not(.keep-dark, .keep-dark *, .xv *):hover { border-color: rgba(0, 0, 0, 0.18); } html.theme-light .glass-card { background: rgba(255, 255, 255, 0.75); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.2); } html.theme-light .glass-card:hover { background: #fff; border-color: rgba(0, 0, 0, 0.18); } html.theme-light .glass-nav { background: rgba(255, 255, 255, 0.78); border-bottom-color: rgba(0, 0, 0, 0.08); } html.theme-light .glass-nav.scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.18); } html.theme-light .glass-input { background: #fff; border-color: rgba(0, 0, 0, 0.12); color: #111; } html.theme-light .glass-input::placeholder { color: #9A9AA5; } html.theme-light .glass-pill { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); color: #111; } html.theme-light .lusion-card { background: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.08); } html.theme-light .modal-backdrop { background: rgba(247, 247, 249, 0.85); } html.theme-light select option { background: #fff; color: #111; } html.theme-light .faq-icon { background: rgba(0, 0, 0, 0.06) !important; } /* 白底按鈕 → 黑底白字（維持主次） */ html.theme-light a.bg-white:not(.keep-dark *, .xv *), html.theme-light button.bg-white:not(.keep-dark *, .xv *) { background-color: #111114 !important; color: #fff !important; } html.theme-light a.bg-white:not(.xv *) .text-black, html.theme-light button.bg-white:not(.xv *) .text-black { color: #fff !important; } html.theme-light .filter-btn.active, html.theme-light .filter-tag.active { background-color: #111114 !important; color: #fff !important; border-color: #111114 !important; } html.theme-light .text-black:not(.bg-white, .xv *, a.bg-white *, button.bg-white *, .bg-\[\#D4AF37\] *, .filter-btn, .filter-tag) { color: #111 !important; } /* Header：MENU 鈕、logo 文字 */ html.theme-light #mobile-menu-btn { color: #111; border-color: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.03); } html.theme-light #mobile-menu-btn.is-open { background: #111; color: #fff; border-color: #111; } html.theme-light .eq-bar { background: #C81015; } /* 頁首紅光橫幅、CONTACT 橫幅 */ html.theme-light .from-\[\#C81015\]\/25 { --tw-gradient-from: rgba(200, 16, 21, 0.10) var(--tw-gradient-from-position); } html.theme-light .from-\[\#C81015\]\/30 { --tw-gradient-from: rgba(200, 16, 21, 0.12) var(--tw-gradient-from-position); } html.theme-light .via-\[\#0A0A0C\] { --tw-gradient-to: rgba(247, 247, 249, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #F7F7F9 var(--tw-gradient-via-position), var(--tw-gradient-to); } html.theme-light .from-\[\#0A0A0C\] { --tw-gradient-from: #F7F7F9 var(--tw-gradient-from-position); } html.theme-light .via-\[\#0A0A0C\]\/85 { --tw-gradient-stops: var(--tw-gradient-from), rgba(247, 247, 249, 0.85) var(--tw-gradient-via-position), var(--tw-gradient-to); } html.theme-light .to-\[\#0A0A0C\]\/40 { --tw-gradient-to: rgba(247, 247, 249, 0.4) var(--tw-gradient-to-position); } html.theme-light .svc-marquee-track { color: rgba(0, 0, 0, 0.35); } /* 作品卡片深色視覺頭：維持深色（加 .keep-dark） */ html.theme-light .keep-dark { color-scheme: dark; } /* ---------- MENU 面板 → 覺醒式白紙 ---------- */ html.theme-light .mm { background: rgba(232, 232, 235, 0.96); } html.theme-light .mm::before { background: radial-gradient(60% 40% at 80% 0%, rgba(200, 16, 21, 0.08), transparent 70%); } html.theme-light .mm-sheet { background: #FFFFFF; border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.25); } html.theme-light .mm-title { color: #C81015; } html.theme-light .mm-sub { color: #111; } html.theme-light .mm-links a { color: #333; } html.theme-light .mm-links a:hover { color: #000; } html.theme-light .mm-links a.is-current { color: #C81015; } html.theme-light .mm-links li::after { color: #C9C9D0; } html.theme-light .mm-section + .mm-section { background-image: url("data:image/svg+xml;utf8,"); } html.theme-light .mm-section { border-color: rgba(0, 0, 0, 0.1); } html.theme-light .mm-foot { border-color: rgba(0, 0, 0, 0.1); } html.theme-light .mm-social a { color: #111; } html.theme-light .mm-tools button { border-color: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.03); color: #333; } html.theme-light .mm-tag { color: #A0A0A8; } html.theme-light .brand-spectrum { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); } html.theme-light .brand-spectrum button.active { box-shadow: 0 0 0 2px #111 inset; } html.theme-light .brand-spectrum-label b { color: #111; } html.theme-light .brand-logo:hover { filter: drop-shadow(0 0 10px rgba(138, 92, 255, 0.35)); }