/* ═══════════════════════════════════════════════════════ PRISM UI CONCEPTS — 4 switchable visual themes Applied via data-concept attribute on Each concept overrides CSS variables + adds unique styling ═══════════════════════════════════════════════════════ */ /* ── CONCEPT: NEBULA (Glassmorphism + floating panels) ── */ [data-concept="nebula"] { --font-display: 'Outfit', sans-serif; --font-body: 'Outfit', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; } [data-concept="nebula"][data-theme="dark"] { --bg: #06030f; --surface: rgba(255,255,255,0.04); --surface-hover: rgba(255,255,255,0.07); --border: rgba(255,255,255,0.08); --text: #e8e4f0; --text-dim: rgba(255,255,255,0.45); --text-faint: rgba(255,255,255,0.2); --accent: #a78bfa; --accent-bright: #c4b5fd; --accent-dim: rgba(167,139,250,0.2); --accent-glow: rgba(167,139,250,0.08); --user-bg: rgba(255,255,255,0.03); --ai-bg: rgba(167,139,250,0.04); --code-bg: rgba(167,139,250,0.08); --code-block-bg: rgba(0,0,0,0.3); --code-block-border: rgba(255,255,255,0.06); --header-gradient: linear-gradient(180deg, rgba(10,5,20,0.8) 0%, transparent 100%); --shadow-color: rgba(0,0,0,0.4); --msg-user-border: rgba(255,255,255,0.06); --bg-card: rgba(255,255,255,0.03); --bg-base: #06030f; } [data-concept="nebula"][data-theme="light"] { --bg: #f5f0ff; --surface: rgba(255,255,255,0.7); --surface-hover: rgba(255,255,255,0.9); --border: rgba(140,100,240,0.12); --text: #1a1528; --text-dim: #7a6f90; --text-faint: #c0b8d0; --accent: #7c3aed; --accent-bright: #6d28d9; --accent-dim: rgba(124,58,237,0.15); --accent-glow: rgba(124,58,237,0.06); --user-bg: rgba(124,58,237,0.04); --ai-bg: rgba(167,139,250,0.06); --code-bg: rgba(124,58,237,0.06); --code-block-bg: rgba(124,58,237,0.04); --code-block-border: rgba(124,58,237,0.1); --header-gradient: linear-gradient(180deg, rgba(245,240,255,0.9) 0%, transparent 100%); --shadow-color: rgba(100,60,200,0.06); --msg-user-border: rgba(124,58,237,0.08); --bg-card: rgba(255,255,255,0.6); --bg-base: #f0ebfa; } [data-concept="nebula"] body { font-family: var(--font-display); } [data-concept="nebula"] .sidebar { backdrop-filter: blur(40px) saturate(150%); -webkit-backdrop-filter: blur(40px) saturate(150%); } [data-concept="nebula"] .header { backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); } [data-concept="nebula"] .input-wrap { border-radius: var(--radius-lg); backdrop-filter: blur(20px); } [data-concept="nebula"] .message { border-radius: var(--radius-md); } [data-concept="nebula"] .picker-card { border-radius: var(--radius-lg); } /* Ambient orbs */ [data-concept="nebula"] body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(600px circle at 15% 10%, rgba(124,58,237,0.08), transparent), radial-gradient(500px circle at 85% 80%, rgba(236,72,153,0.05), transparent), radial-gradient(400px circle at 50% 50%, rgba(59,130,246,0.04), transparent); animation: nebula-drift 25s ease-in-out infinite alternate; } @keyframes nebula-drift { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(20deg); } } /* ── CONCEPT: EDITORIAL (Serif + minimal + ruled lines) ── */ [data-concept="editorial"] { --font-display: 'Instrument Serif', serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; } [data-concept="editorial"][data-theme="dark"] { --bg: #0a0a0a; --surface: #111111; --surface-hover: #161616; --border: #1e1e1e; --text: #f0ede6; --text-dim: #706e68; --text-faint: #3a3835; --accent: #c8a2ff; --accent-bright: #d4b8ff; --accent-dim: rgba(200,162,255,0.12); --accent-glow: rgba(200,162,255,0.06); --user-bg: #0e0e0e; --ai-bg: #0c0c0c; --code-bg: #161616; --code-block-bg: #111111; --code-block-border: #1e1e1e; --header-gradient: linear-gradient(180deg, #0a0a0a 0%, #0a0a0a 100%); --shadow-color: rgba(0,0,0,0.3); --msg-user-border: #1a1a1a; --bg-card: #111111; --bg-base: #0a0a0a; } [data-concept="editorial"][data-theme="light"] { --bg: #faf9f6; --surface: #ffffff; --surface-hover: #f5f4f0; --border: #e8e6e0; --text: #1a1815; --text-dim: #8a8680; --text-faint: #c8c4be; --accent: #7c3aed; --accent-bright: #6d28d9; --accent-dim: rgba(124,58,237,0.1); --accent-glow: rgba(124,58,237,0.04); --user-bg: #f8f6f2; --ai-bg: #faf9f6; --code-bg: #f0ede6; --code-block-bg: #f5f3f0; --code-block-border: #e8e6e0; --header-gradient: linear-gradient(180deg, #faf9f6 0%, #faf9f6 100%); --shadow-color: rgba(0,0,0,0.04); --msg-user-border: #e8e6e0; --bg-card: #ffffff; --bg-base: #f5f3f0; } [data-concept="editorial"] body { font-family: var(--font-body); } [data-concept="editorial"] .header h1, [data-concept="editorial"] .welcome h2, [data-concept="editorial"] .picker-header h2 { font-family: var(--font-display); font-weight: 400; font-style: italic; } [data-concept="editorial"] .header-persona-name { font-family: var(--font-display); font-style: italic; font-size: 1.1rem !important; } [data-concept="editorial"] .msg-counter, [data-concept="editorial"] .sidebar-item-date { font-family: var(--font-mono); } [data-concept="editorial"] .message.assistant { border-left: 2px solid var(--accent-dim); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } [data-concept="editorial"] .message.user { border: none; border-bottom: 1px solid var(--border); border-radius: 0; } [data-concept="editorial"] .message .content em { font-family: var(--font-display); font-style: italic; font-size: 1.05em; } [data-concept="editorial"] .message .content blockquote { border-left: 2px solid var(--accent); padding-left: 16px; font-family: var(--font-display); font-style: italic; font-size: 1.05em; color: var(--text-dim); } /* ── CONCEPT: SPATIAL (Raised panels + depth) ── */ [data-concept="spatial"] { --font-display: 'Sora', sans-serif; --font-body: 'Sora', sans-serif; --font-mono: 'Fira Code', monospace; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; } [data-concept="spatial"][data-theme="dark"] { --bg: #09080e; --surface: #0f0e16; --surface-hover: #181720; --border: rgba(255,255,255,0.06); --text: #e6e2f0; --text-dim: rgba(255,255,255,0.4); --text-faint: rgba(255,255,255,0.15); --accent: #a78bfa; --accent-bright: #c4b5fd; --accent-dim: rgba(167,139,250,0.15); --accent-glow: rgba(167,139,250,0.06); --user-bg: #13121a; --ai-bg: rgba(167,139,250,0.03); --code-bg: rgba(167,139,250,0.08); --code-block-bg: #09080e; --code-block-border: rgba(255,255,255,0.06); --header-gradient: linear-gradient(180deg, #0f0e16 0%, #0f0e16 100%); --shadow-color: rgba(0,0,0,0.5); --msg-user-border: rgba(255,255,255,0.06); --bg-card: #13121a; --bg-base: #09080e; } [data-concept="spatial"][data-theme="light"] { --bg: #f0eef6; --surface: #ffffff; --surface-hover: #f5f3fa; --border: #e0dce8; --text: #1a1625; --text-dim: #6b6580; --text-faint: #b0aab8; --accent: #7c3aed; --accent-bright: #6d28d9; --accent-dim: rgba(124,58,237,0.12); --accent-glow: rgba(124,58,237,0.05); --user-bg: #f8f6fc; --ai-bg: rgba(124,58,237,0.03); --code-bg: rgba(124,58,237,0.05); --code-block-bg: #f5f3fa; --code-block-border: #e0dce8; --header-gradient: linear-gradient(180deg, #ffffff 0%, #ffffff 100%); --shadow-color: rgba(0,0,0,0.06); --msg-user-border: #e0dce8; --bg-card: #ffffff; --bg-base: #f0eef6; } [data-concept="spatial"] body { font-family: var(--font-body); padding: 10px; gap: 10px; display: flex; } [data-concept="spatial"] .sidebar { border-radius: var(--radius-xl); box-shadow: 0 8px 32px var(--shadow-color); } [data-concept="spatial"] .header, [data-concept="spatial"] .input-area { background: transparent; } [data-concept="spatial"] .chat-container { border-radius: var(--radius-xl); } [data-concept="spatial"] .message { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; box-shadow: 0 4px 16px var(--shadow-color); transition: transform 0.2s; } [data-concept="spatial"] .message:hover { transform: translateY(-1px); } [data-concept="spatial"] .message.assistant { border-left-color: rgba(167,139,250,0.15); background: linear-gradient(135deg, var(--surface), var(--ai-bg)); } [data-concept="spatial"] .input-wrap { background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 4px 16px var(--shadow-color); } [data-concept="spatial"] .picker-card { border-radius: var(--radius-xl); } /* ── CONCEPT: OBSIDIAN (Luxury dark + gold accents) ── */ [data-concept="obsidian"] { --font-display: 'Playfair Display', serif; --font-body: 'Manrope', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 14px; --gold: #c8a87a; --gold-dim: rgba(200,168,122,0.12); --gold-glow: rgba(200,168,122,0.06); } [data-concept="obsidian"][data-theme="dark"] { --bg: #08070c; --surface: #0f0e14; --surface-hover: #181720; --border: rgba(255,255,255,0.04); --text: #e8e5de; --text-dim: #9e9a90; --text-faint: #3a3835; --accent: #c8a87a; --accent-bright: #d4b896; --accent-dim: rgba(200,168,122,0.15); --accent-glow: rgba(200,168,122,0.06); --user-bg: #0c0b10; --ai-bg: #0a090e; --code-bg: rgba(180,155,255,0.08); --code-block-bg: #0f0e14; --code-block-border: rgba(255,255,255,0.04); --header-gradient: linear-gradient(180deg, #08070c 0%, #08070c 100%); --shadow-color: rgba(0,0,0,0.4); --msg-user-border: rgba(255,255,255,0.04); --bg-card: #0f0e14; --bg-base: #08070c; } [data-concept="obsidian"][data-theme="light"] { --bg: #faf8f5; --surface: #ffffff; --surface-hover: #f8f5f0; --border: #e8e2d8; --text: #1a1610; --text-dim: #8a8478; --text-faint: #c8c0b4; --accent: #9a7b50; --accent-bright: #7a5e38; --accent-dim: rgba(154,123,80,0.12); --accent-glow: rgba(154,123,80,0.05); --user-bg: #f8f4ee; --ai-bg: #faf8f5; --code-bg: rgba(154,123,80,0.06); --code-block-bg: #f5f2ec; --code-block-border: #e8e2d8; --header-gradient: linear-gradient(180deg, #faf8f5 0%, #faf8f5 100%); --shadow-color: rgba(100,80,40,0.04); --msg-user-border: #e8e2d8; --bg-card: #ffffff; --bg-base: #f5f0ea; } [data-concept="obsidian"] body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; } [data-concept="obsidian"] .header h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.08em; } [data-concept="obsidian"] .header-persona-name { font-family: var(--font-display); font-style: italic; } [data-concept="obsidian"] .welcome h2 { font-family: var(--font-display); font-weight: 500; } [data-concept="obsidian"] .picker-header h2 { font-family: var(--font-display); font-weight: 400; font-style: italic; } [data-concept="obsidian"] .message .content em { font-family: var(--font-display); font-style: italic; color: var(--accent); } [data-concept="obsidian"] .message .content blockquote { border-left: 2px solid var(--accent); padding: 12px 16px; background: var(--accent-glow); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-display); font-style: italic; } [data-concept="obsidian"] .message.assistant { border-left: 2px solid rgba(200,168,122,0.2); } [data-concept="obsidian"] .sidebar-item.active { box-shadow: inset 2px 0 0 var(--accent); } /* Gold shimmer on input focus */ [data-concept="obsidian"] .input-wrap::before { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 200% 100%; opacity: 0; transition: opacity 0.3s; } [data-concept="obsidian"] .input-wrap:focus-within::before { opacity: 0.4; animation: obsidian-shimmer 2s linear infinite; } @keyframes obsidian-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* Ambient glow */ [data-concept="obsidian"][data-theme="dark"] body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(200,168,122,0.02), transparent), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(180,155,255,0.01), transparent); } /* Grain texture for obsidian */ [data-concept="obsidian"] body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.015; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }