/* ============================================================ themes.css — 3パターンのデザインプリセット data-theme="liquid-chrome" | "vision-iridescent" | "aurora-silicon" どれか1つをまたはに付与すると、style.css の :root 変数をオーバーライドして配色テーマが切り替わる ============================================================ */ /* ==================================================== A. Liquid Chrome — シルバーメタル × ホログラム虹 iPhone Pro チタン、CDジャケットの質感 ==================================================== */ [data-theme="liquid-chrome"] { /* 背景：明度の高いガンメタル */ --color-bg: #1c1d24; --color-bg-soft: #25272f; --color-bg-card: #2e3038; --color-bg-elevated: #3a3d47; --color-text: #f8f9fc; --color-text-soft: #c4c7d4; --color-text-muted: #8b8f9e; /* アクセント：プラチナシルバー */ --color-accent: #d8dde6; --color-accent-soft: rgba(216, 221, 230, 0.14); --color-accent-dark: #f0f2f6; --color-accent-glow: rgba(216, 221, 230, 0.5); /* セカンダリ：ホログラム虹（薄紫）*/ --color-secondary: #b8a4f0; --color-secondary-soft: rgba(184, 164, 240, 0.16); --color-secondary-dark: #d4c5fa; --color-secondary-glow: rgba(184, 164, 240, 0.45); --color-tertiary: #7fdcf0; --color-tertiary-soft: rgba(127, 220, 240, 0.16); --color-tertiary-glow: rgba(127, 220, 240, 0.4); --color-magenta: #f0a4c8; --color-magenta-soft: rgba(240, 164, 200, 0.16); --color-border: rgba(255, 255, 255, 0.14); --color-border-strong: rgba(255, 255, 255, 0.22); --color-border-soft: rgba(255, 255, 255, 0.07); --color-shadow: rgba(0, 0, 0, 0.5); --color-shadow-glow: rgba(216, 221, 230, 0.25); --color-highlight-text: #4a90b8; /* ホログラム虹のグラデ */ --gradient-hero: linear-gradient(120deg, #c8d5f5 0%, #e8d5f0 20%, #f5e0c8 40%, #d5f0e0 60%, #c8e8f0 80%, #d8c5f0 100%); --gradient-aurora: linear-gradient(120deg, #d8dde6 0%, #e8d5f0 30%, #d5f0e0 60%, #c8e8f0 100%); --gradient-text: linear-gradient(120deg, #f0f2f6 0%, #d4c5fa 30%, #f0a4c8 60%, #7fdcf0 100%); --gradient-card-glow: linear-gradient(135deg, rgba(216, 221, 230, 0.10), rgba(184, 164, 240, 0.10)); --gradient-button: linear-gradient(135deg, #d8dde6, #c4c7d4 50%, #f0f2f6); --gradient-stat: linear-gradient(120deg, #b8a4f0, #7fdcf0, #f0a4c8); } /* Liquid Chromeのヒーローはホログラム流れ */ [data-theme="liquid-chrome"] .home-hero { background: linear-gradient(135deg, #2a2c35 0%, #3a3d47 100%); border: 1px solid rgba(255, 255, 255, 0.2); } [data-theme="liquid-chrome"] .home-hero::before { background: conic-gradient(from 0deg at 50% 50%, rgba(184, 164, 240, 0.32) 0deg, rgba(240, 164, 200, 0.32) 72deg, rgba(255, 200, 150, 0.28) 144deg, rgba(160, 220, 200, 0.28) 216deg, rgba(127, 220, 240, 0.32) 288deg, rgba(184, 164, 240, 0.32) 360deg); filter: blur(50px); opacity: 0.85; animation: hologram-rotate 18s linear infinite; } @keyframes hologram-rotate { from { transform: rotate(0deg) scale(1.2); } to { transform: rotate(360deg) scale(1.2); } } [data-theme="liquid-chrome"] body::before { background: radial-gradient(ellipse 50% 30% at 20% 0%, rgba(216, 221, 230, 0.08), transparent 60%), radial-gradient(ellipse 40% 25% at 80% 30%, rgba(184, 164, 240, 0.08), transparent 60%); } [data-theme="liquid-chrome"] .home-cta { background: linear-gradient(135deg, #f8f9fc 0%, #d8dde6 50%, #f0f2f6 100%); color: #1d1d1f; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); } [data-theme="liquid-chrome"] .home-cta:hover { transform: scale(1.04); box-shadow: 0 8px 28px rgba(184, 164, 240, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8); } /* シルバーメタル枠の検索ボックス */ [data-theme="liquid-chrome"] .search-input { background: linear-gradient(135deg, #25272f, #2e3038); border: 1px solid; border-image: linear-gradient(135deg, #d8dde6, #8a8e98 50%, #d8dde6) 1; color: var(--color-text); } [data-theme="liquid-chrome"] .search-input:focus { border-image: linear-gradient(135deg, #b8a4f0, #7fdcf0 50%, #f0a4c8) 1; box-shadow: 0 0 0 3px rgba(184, 164, 240, 0.18), 0 0 24px rgba(127, 220, 240, 0.25); outline: none; } /* メタリック仕上げの用語カード */ [data-theme="liquid-chrome"] .term-item { background: linear-gradient(135deg, #2e3038 0%, #25272f 100%); border: 1px solid rgba(255, 255, 255, 0.10); position: relative; } [data-theme="liquid-chrome"] .term-item::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(216, 221, 230, 0.5), transparent 50%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } [data-theme="liquid-chrome"] .term-item:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(184, 164, 240, 0.35), 0 0 32px rgba(184, 164, 240, 0.2); } /* タイトル：液体クロームのシマー */ [data-theme="liquid-chrome"] .app-title { background: linear-gradient(120deg, #d8dde6 0%, #ffffff 25%, #d4c5fa 50%, #ffffff 75%, #d8dde6 100%); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: chrome-shimmer 6s linear infinite; } @keyframes chrome-shimmer { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } [data-theme="liquid-chrome"] .home-gross-value { background: linear-gradient(120deg, #ffffff, #d8dde6 50%, #d4c5fa); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ==================================================== B. Vision Iridescent — ガラス＋玉虫色 Apple Vision Pro / visionOS の透明感 ==================================================== */ [data-theme="vision-iridescent"] { /* 背景：深い夜、サテン感 */ --color-bg: #0a0a14; --color-bg-soft: #14141e; --color-bg-card: rgba(255, 255, 255, 0.04); --color-bg-elevated: rgba(255, 255, 255, 0.08); --color-text: #f5f5f7; --color-text-soft: #b8b8c4; --color-text-muted: #7878a0; --color-accent: #b0c4f5; --color-accent-soft: rgba(176, 196, 245, 0.18); --color-accent-dark: #d0dfff; --color-accent-glow: rgba(176, 196, 245, 0.5); --color-secondary: #d4a5f5; --color-secondary-soft: rgba(212, 165, 245, 0.18); --color-secondary-dark: #e5c5fa; --color-secondary-glow: rgba(212, 165, 245, 0.5); --color-tertiary: #88e0f0; --color-tertiary-soft: rgba(136, 224, 240, 0.18); --color-tertiary-glow: rgba(136, 224, 240, 0.45); --color-magenta: #f5a0c5; --color-magenta-soft: rgba(245, 160, 197, 0.18); --color-border: rgba(255, 255, 255, 0.10); --color-border-strong: rgba(255, 255, 255, 0.20); --color-border-soft: rgba(255, 255, 255, 0.05); --color-shadow: rgba(0, 0, 0, 0.55); --color-shadow-glow: rgba(176, 196, 245, 0.25); --color-highlight-text: #88e0f0; /* 玉虫色（iridescent）*/ --gradient-hero: conic-gradient(from 180deg at 50% 50%, #b0c4f5 0deg, #d4a5f5 90deg, #f5a0c5 180deg, #88e0f0 270deg, #b0c4f5 360deg); --gradient-aurora: linear-gradient(115deg, #88e0f0 0%, #b0c4f5 30%, #d4a5f5 65%, #f5a0c5 100%); --gradient-text: linear-gradient(120deg, #88e0f0, #b0c4f5 30%, #d4a5f5 60%, #f5a0c5 100%); --gradient-card-glow: linear-gradient(135deg, rgba(176, 196, 245, 0.10), rgba(212, 165, 245, 0.10)); --gradient-button: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(230, 235, 250, 0.95)); --gradient-stat: linear-gradient(115deg, #88e0f0, #b0c4f5, #d4a5f5, #f5a0c5); } [data-theme="vision-iridescent"] .home-hero { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); } [data-theme="vision-iridescent"] .home-hero::before { background: radial-gradient(ellipse 70% 50% at 30% 30%, rgba(176, 196, 245, 0.35), transparent 60%), radial-gradient(ellipse 60% 40% at 70% 70%, rgba(212, 165, 245, 0.30), transparent 60%), radial-gradient(ellipse 50% 35% at 50% 100%, rgba(245, 160, 197, 0.25), transparent 60%); } [data-theme="vision-iridescent"] body::before { background: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(176, 196, 245, 0.10), transparent 60%), radial-gradient(ellipse 50% 35% at 100% 30%, rgba(212, 165, 245, 0.08), transparent 60%), radial-gradient(ellipse 40% 25% at 50% 100%, rgba(136, 224, 240, 0.06), transparent 60%); } [data-theme="vision-iridescent"] .home-cta { background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 245, 250, 0.98)); color: #1d1d1f; backdrop-filter: blur(20px); } [data-theme="vision-iridescent"] .term-item { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ==================================================== C. Aurora Silicon — ダーク＋流れる虹オーロラ枠 Apple Silicon M3 Max トレーラー風 ==================================================== */ [data-theme="aurora-silicon"] { --color-bg: #050609; --color-bg-soft: #0a0b10; --color-bg-card: #0f1018; --color-bg-elevated: #15161f; --color-text: #ffffff; --color-text-soft: #c4c7d4; --color-text-muted: #6b6f80; --color-accent: #8b9aff; --color-accent-soft: rgba(139, 154, 255, 0.14); --color-accent-dark: #b0bbff; --color-accent-glow: rgba(139, 154, 255, 0.7); --color-secondary: #ff7eb6; --color-secondary-soft: rgba(255, 126, 182, 0.14); --color-secondary-dark: #ffa3cc; --color-secondary-glow: rgba(255, 126, 182, 0.6); --color-tertiary: #00e5ff; --color-tertiary-soft: rgba(0, 229, 255, 0.16); --color-tertiary-glow: rgba(0, 229, 255, 0.65); --color-magenta: #ff5e8a; --color-magenta-soft: rgba(255, 94, 138, 0.14); --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.18); --color-border-soft: rgba(255, 255, 255, 0.04); --color-shadow: rgba(0, 0, 0, 0.8); --color-shadow-glow: rgba(139, 154, 255, 0.35); --color-highlight-text: #00e5ff; /* 流れる虹オーロラ */ --gradient-hero: linear-gradient(120deg, #00e5ff 0%, #8b9aff 25%, #ff7eb6 50%, #ffb86c 75%, #00e5ff 100%); --gradient-aurora: linear-gradient(120deg, #00e5ff, #8b9aff 30%, #ff7eb6 60%, #ffb86c 100%); --gradient-text: linear-gradient(120deg, #00e5ff, #8b9aff 40%, #ff7eb6 80%); --gradient-card-glow: linear-gradient(135deg, rgba(139, 154, 255, 0.08), rgba(255, 126, 182, 0.08)); --gradient-button: linear-gradient(120deg, #8b9aff, #ff7eb6); --gradient-stat: linear-gradient(120deg, #00e5ff, #8b9aff, #ff7eb6, #ffb86c); } [data-theme="aurora-silicon"] .home-hero { background: #0a0b10; border: 2px solid transparent; position: relative; } [data-theme="aurora-silicon"] .home-hero::after { content: ''; position: absolute; inset: -2px; background: linear-gradient(120deg, #00e5ff, #8b9aff 25%, #ff7eb6 50%, #ffb86c 75%, #00e5ff 100%); background-size: 200% 200%; border-radius: var(--radius-2xl); z-index: -1; filter: blur(2px); animation: aurora-flow 8s linear infinite; } @keyframes aurora-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } [data-theme="aurora-silicon"] .home-hero::before { background: radial-gradient(ellipse 60% 40% at 30% 30%, rgba(139, 154, 255, 0.25), transparent 60%), radial-gradient(ellipse 50% 35% at 70% 80%, rgba(255, 126, 182, 0.18), transparent 60%); } [data-theme="aurora-silicon"] body::before { background: radial-gradient(ellipse 60% 40% at 20% 0%, rgba(139, 154, 255, 0.10), transparent 60%), radial-gradient(ellipse 50% 35% at 80% 30%, rgba(255, 126, 182, 0.08), transparent 60%), radial-gradient(ellipse 40% 25% at 50% 100%, rgba(0, 229, 255, 0.08), transparent 60%); } [data-theme="aurora-silicon"] .home-cta { background: linear-gradient(135deg, #ffffff, #f0f0f5); color: #050609; border: none; box-shadow: 0 0 24px rgba(139, 154, 255, 0.35); } [data-theme="aurora-silicon"] .home-cta:hover { box-shadow: 0 0 32px rgba(139, 154, 255, 0.6); } [data-theme="aurora-silicon"] .term-item { background: #0f1018; border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="aurora-silicon"] .term-item:hover { border-color: rgba(139, 154, 255, 0.5); box-shadow: 0 0 24px rgba(139, 154, 255, 0.2); } /* ==================================================== テーマ切替ピッカー（一時的にホーム画面トップに表示） ==================================================== */ .theme-picker { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 12px; margin-bottom: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--color-border); border-radius: var(--radius-pill); } .theme-picker-btn { padding: 8px 16px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: transparent; color: var(--color-text-soft); border: 1px solid var(--color-border); cursor: pointer; transition: all 200ms var(--ease-smooth, ease); min-height: auto; min-width: auto; } .theme-picker-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--color-text); } .theme-picker-btn.active { background: var(--gradient-button); color: white; border-color: transparent; }