blah-mcp

/* PrecisionCore Design System - Modern 2025 Edition */ :root { /* Modern vibrant color palette for 2025 */ --bg-primary: #f8f9fa; --bg-secondary: #ffffff; --text-primary: #121212; --text-secondary: #4a4a4a; --text-muted: #6c757d; --primary: #3388FF; /* Vibrant blue as primary color */ --primary-dark: #2970d6; --primary-light: #5ea1ff; --secondary: #7209b7; /* Rich purple as secondary color */ --accent: #00c2a8; /* Teal as accent */ --gradient-start: #4361ee; --gradient-end: #7209b7; --success: #2ecc71; --warning: #f39c12; --error: #e74c3c; --info: #3498db; --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 16px; --box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --box-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --transition-fast: 0.2s ease; --transition-normal: 0.3s ease-out; --transition-slow: 0.5s cubic-bezier(0.19, 1, 0.22, 1); --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Retro computing theme variables - exact match to reference */ --retro-bg: #6e8c8d; --retro-window: #a2b5b5; --retro-border: #d0d0d0; --retro-shadow: #444; --retro-title-start: #8ba0a2; --retro-title-end: #6d7f82; --retro-accent: #ffb6c1; --retro-accent-glow: #ff9db3; --retro-accent-glow-2: #ffa5b0; --retro-subtitle: #cde3d6; --retro-subtitle-glow: #a5d3c0; --retro-input-bg: #c8d8d8; --retro-input-inner: #eef6f6; --retro-button: #ccdede; --retro-button-hover: #dfeeee; --retro-text: #444; } /* Dark mode with modern colors */ .dark-theme, .dark-mode { --bg-primary: #121212; --bg-secondary: #1e1e1e; --text-primary: #f8f9fa; --text-secondary: #e0e0e0; --text-muted: #a0a0a0; --primary: #5ea1ff; /* Lighter blue for dark mode */ --primary-dark: #3388FF; --primary-light: #8ab9ff; --secondary: #9d4edd; /* Lighter purple for dark mode */ --accent: #00e6c3; /* Brighter teal for dark mode */ --gradient-start: #4361ee; --gradient-end: #9d4edd; --box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --box-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); --box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); } /* Modern Typography */ body { font-family: var(--font-family); font-size: 16px; line-height: 1.6; color: var(--text-primary); background-color: var(--bg-primary); margin: 0; padding: 0; transition: background-color var(--transition-normal), color var(--transition-normal); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { margin-top: 0; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } h1 { font-size: 3.5rem; margin-bottom: 1.5rem; background: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } h2 { font-size: 2.5rem; margin-bottom: 1.25rem; color: var(--text-primary); } h3 { font-size: 1.75rem; margin-bottom: 1rem; color: var(--text-primary); } /* Modern Layout and spacing */ .container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 2rem; } /* Modern Button styles */ .btn { display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 500; padding: 0.75rem 1.5rem; border: none; border-radius: var(--border-radius-md); cursor: pointer; position: relative; background-color: var(--primary); color: white; text-transform: none; transition: all var(--transition-fast); box-shadow: var(--box-shadow-sm); overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .btn:hover { transform: translateY(-2px); box-shadow: var(--box-shadow-md); } .btn:hover::before { transform: translateX(100%); } .btn:active { transform: translateY(1px); box-shadow: var(--box-shadow-sm); } .btn-primary { background-color: var(--primary); color: white; } .btn-secondary { background-color: transparent; color: var(--primary); border: 2px solid var(--primary); } .btn-secondary:hover { background-color: rgba(51, 136, 255, 0.1); } /* Modern Input styles */ .input { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; font-family: var(--font-family); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--border-radius-md); color: var(--text-primary); background-color: var(--bg-secondary); transition: all var(--transition-fast); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(51, 136, 255, 0.2); } .input::placeholder { color: var(--text-muted); } .dark-theme .input, .dark-mode .input { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: var(--text-secondary); } /* Modern Card styles with morphism */ .card, .morphism-card { background-color: var(--bg-secondary); border-radius: var(--border-radius-lg); padding: 1.5rem; box-shadow: var(--box-shadow-md); transition: all var(--transition-normal); position: relative; overflow: hidden; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .dark-theme .card, .dark-theme .morphism-card, .dark-mode .card, .dark-mode .morphism-card { background-color: rgba(255, 255, 255, 0.05); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .card:hover, .morphism-card:hover { transform: translateY(-5px); box-shadow: var(--box-shadow-lg); } /* Modern Dropdown styles */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; min-width: 200px; padding: 0.5rem 0; background-color: var(--bg-secondary); border-radius: var(--border-radius-md); box-shadow: var(--box-shadow-md); z-index: 10; opacity: 0; transform: translateY(10px); transition: opacity var(--transition-fast), transform var(--transition-fast); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .dropdown-content.show { display: block; opacity: 1; transform: translateY(0); } .dropdown-item { display: block; padding: 0.75rem 1.25rem; color: var(--text-primary); text-decoration: none; cursor: pointer; transition: all var(--transition-fast); } .dropdown-item:hover { background-color: rgba(51, 136, 255, 0.1); color: var(--primary); } .dark-theme .dropdown-content, .dark-mode .dropdown-content { background-color: rgba(30, 30, 30, 0.95); border: 1px solid rgba(255, 255, 255, 0.05); } /* Custom cursor */ .custom-cursor { position: fixed; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(51, 136, 255, 0.2) 0%, rgba(51, 136, 255, 0) 70%); transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; transition: width 0.3s, height 0.3s, background 0.3s; mix-blend-mode: difference; } /* Dark mode toggle */ .dark-mode-toggle { position: fixed; top: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background-color: var(--bg-secondary); border: none; box-shadow: var(--box-shadow-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; z-index: 100; transition: all var(--transition-normal); } .dark-mode-toggle:hover { transform: rotate(15deg); } .dark-theme .dark-mode-toggle, .dark-mode .dark-mode-toggle { background-color: var(--bg-secondary); box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); } /* Background gradient and layer effects */ .background-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top right, rgba(67, 97, 238, 0.1), transparent 50%), radial-gradient(circle at bottom left, rgba(114, 9, 183, 0.1), transparent 50%); z-index: -2; opacity: 0.7; } .dark-theme .background-gradient, .dark-mode .background-gradient { background: radial-gradient(circle at top right, rgba(67, 97, 238, 0.2), transparent 50%), radial-gradient(circle at bottom left, rgba(114, 9, 183, 0.2), transparent 50%); opacity: 0.5; } .layer-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%233388ff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: -1; opacity: 0.5; } /* Bento grid layout */ .bento-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin: 2rem 0; } @media (min-width: 768px) { .bento-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, auto); } .bento-grid > div:first-child { grid-column: span 2; grid-row: span 2; } } /* Spotlight container */ .spotlight-container { width: 90%; max-width: 400px; margin: 0 auto; } .spotlight-input-wrapper { display: flex; justify-content: center; align-items: center; border: 2px solid var(--retro-border); background-color: var(--retro-input-bg); box-shadow: inset 2px 2px #fff, inset -2px -2px #888; padding: 4px; width: 100%; } .spotlight-input { border: none; outline: none; padding: 10px; flex: 1; font-size: 14px; background-color: var(--retro-input-inner); color: var(--retro-text); font-family: monospace; } .search-btn { border: none; background: var(--retro-button); font-size: 16px; padding: 0 10px; cursor: pointer; box-shadow: inset 1px 1px #fff, inset -1px -1px #888; } .search-btn:hover { background-color: var(--retro-button-hover); } /* Spotlight Hero styles - Retro computing inspired */ .spotlight-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; background-color: var(--retro-bg); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; } .spotlight-hero-content { width: 500px; border: 2px solid var(--retro-border); background-color: var(--retro-window); box-shadow: 4px 4px 0 var(--retro-shadow); position: relative; } .spotlight-hero-content::before { content: "BLAH - Search"; position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(to right, var(--retro-title-start), var(--retro-title-end)); color: white; padding: 6px 10px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; font-family: monospace; font-size: 14px; } .spotlight-hero-content::after { content: "✕"; position: absolute; top: 6px; right: 10px; background: #ccc; border: 1px solid #999; cursor: pointer; padding: 0 6px; font-weight: bold; font-size: 14px; } .spotlight-hero-window-body { text-align: center; padding: 40px 20px; } .spotlight-hero-title { font-size: 48px; color: var(--retro-accent); text-shadow: 0 0 8px var(--retro-accent-glow), 0 0 20px var(--retro-accent-glow-2); margin: 0; font-weight: bold; letter-spacing: 2px; } .spotlight-hero-subtitle { margin: 12px 0 30px; font-size: 20px; color: var(--retro-subtitle); text-shadow: 0 0 2px var(--retro-subtitle-glow); font-weight: normal; } /* Search results styling */ .search-results { background-color: white; border: 1px solid var(--retro-border); box-shadow: 3px 3px 0 rgba(68, 68, 68, 0.5); margin-top: 6px; max-height: 300px; overflow-y: auto; width: 100%; position: absolute; top: 100%; left: 0; z-index: 10; } .search-results-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--retro-border); font-size: 12px; font-weight: bold; background-color: var(--retro-input-bg); } .search-results-count { font-size: 11px; padding: 2px 6px; background-color: var(--retro-window); color: var(--retro-text); border: 1px solid var(--retro-border); } .search-results-list { padding: 0; } .search-result-item { display: flex; padding: 8px 10px; border-bottom: 1px solid var(--retro-border); cursor: pointer; } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background-color: var(--retro-input-bg); } .search-result-icon { font-size: 16px; margin-right: 12px; display: flex; align-items: center; } .search-result-content { flex: 1; } .search-result-title { font-size: 12px; font-weight: bold; margin: 0 0 4px 0; color: var(--retro-text); } .search-result-description { font-size: 11px; color: #666; margin: 0; } /* Help section */ .spotlight-examples { margin-top: 20px; text-align: left; width: 100%; } .spotlight-examples h3 { color: var(--retro-text); margin-bottom: 12px; font-size: 14px; border-bottom: 1px solid var(--retro-border); padding-bottom: 6px; } .spotlight-example-cards { display: grid; grid-template-columns: 1fr; gap: 10px; } .spotlight-example-cards .card { cursor: pointer; background-color: var(--retro-window); padding: 10px 12px; border: 1px solid var(--retro-border); box-shadow: 2px 2px 0 rgba(68, 68, 68, 0.5); } .spotlight-example-cards .card:hover { background-color: var(--retro-input-inner); } .spotlight-example-cards .card strong { color: var(--retro-text); font-weight: bold; } /* Content container */ .content-container { padding: 2rem 0; } /* Terms container */ .terms-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; } .terms-content { max-height: 400px; overflow-y: auto; margin: 20px 0; padding: 0 10px; text-align: left; color: var(--retro-text); } .terms-content h3 { color: var(--retro-text); font-size: 16px; margin-top: 20px; margin-bottom: 8px; } .terms-content p { margin-bottom: 12px; font-size: 14px; line-height: 1.5; } .terms-buttons { margin-top: 20px; text-align: center; } .accept-btn { background-color: var(--retro-button); border: none; padding: 8px 16px; font-weight: bold; cursor: pointer; box-shadow: inset 1px 1px #fff, inset -1px -1px #888, 2px 2px 0 #444; } .accept-btn:hover { background-color: var(--retro-button-hover); } /* Features section */ .features-section { padding: 2rem 0; } /* Community section */ .community-section { margin-top: 3rem; } /* Navbar container */ .navbar-container { width: 100%; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.8); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .dark-theme .navbar-container, .dark-mode .navbar-container { background-color: rgba(18, 18, 18, 0.8); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } /* Footer container */ .footer-container { width: 100%; backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.8); border-top: 1px solid rgba(0, 0, 0, 0.05); } .dark-theme .footer-container, .dark-mode .footer-container { background-color: rgba(18, 18, 18, 0.8); border-top: 1px solid rgba(255, 255, 255, 0.05); } /* BLAH Alert */ .blah-alert { position: fixed; bottom: 30px; right: 30px; padding: 1rem 1.5rem; background-color: var(--bg-secondary); color: var(--primary); border-radius: var(--border-radius-md); box-shadow: var(--box-shadow-md); z-index: 1000; animation: slideIn 0.5s ease forwards, fadeOut 0.5s ease 2.5s forwards; display: flex; align-items: center; } .alert-content { display: flex; align-items: center; gap: 0.75rem; } .alert-icon { font-size: 1.25rem; } .alert-text { font-weight: 600; letter-spacing: 0.05em; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* Terms accepted animation */ .terms-accepted-animation { animation: pulse 1s ease-in-out; } @keyframes pulse { 0% { background-color: var(--bg-primary); } 50% { background-color: rgba(51, 136, 255, 0.1); } 100% { background-color: var(--bg-primary); } } /* Utility classes */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .w-full { width: 100%; } .mb-4 { margin-bottom: 16px; } .mb-2 { margin-bottom: 8px; } .mt-2 { margin-top: 8px; } .p-4 { padding: 20px; /* Increased padding */ } .py-2 { padding-top: 10px; /* Increased padding */ padding-bottom: 10px; /* Increased padding */ } .px-4 { padding-left: 20px; /* Increased padding */ padding-right: 20px; /* Increased padding */ } /* Retro app container */ .retro-app { min-height: 100vh; background-color: var(--retro-bg); display: flex; flex-direction: column; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Retro navbar */ .retro-navbar { background-color: var(--retro-window); border-bottom: 2px solid var(--retro-border); box-shadow: 0 2px 4px var(--retro-shadow); padding: 8px 16px; transition: opacity 0.3s ease; } .retro-navbar.hidden { opacity: 0; pointer-events: none; } .retro-navbar.visible { opacity: 1; } /* Retro main content */ .retro-main-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 20px; } /* Retro content container */ .retro-content { width: 100%; max-width: 800px; margin-top: 30px; transition: opacity 0.5s ease, transform 0.5s ease; } .retro-content.hidden { opacity: 0; transform: translateY(-20px); pointer-events: none; height: 0; overflow: hidden; } .retro-content.visible { opacity: 1; transform: translateY(0); } /* Retro window styling */ .retro-window { background-color: var(--retro-window); border: 2px solid var(--retro-border); box-shadow: 4px 4px 0 var(--retro-shadow); margin-bottom: 30px; position: relative; } .retro-window-title { background: linear-gradient(to right, var(--retro-title-start), var(--retro-title-end)); color: white; padding: 6px 10px; font-weight: bold; font-family: monospace; font-size: 14px; position: relative; } .retro-window-title::after { content: "✕"; position: absolute; top: 6px; right: 10px; background: #ccc; border: 1px solid #999; cursor: pointer; padding: 0 6px; font-weight: bold; font-size: 14px; } .retro-window-content { padding: 20px; } /* Retro features section */ .retro-features { display: flex; flex-direction: column; gap: 20px; } /* Retro footer */ .retro-footer { background-color: var(--retro-window); border-top: 2px solid var(--retro-border); padding: 10px 20px; text-align: center; font-size: 12px; color: var(--retro-text); transition: opacity 0.3s ease; } .retro-footer.hidden { opacity: 0; pointer-events: none; } .retro-footer.visible { opacity: 1; } /* Retro dark mode toggle */ .retro-dark-mode-toggle { position: fixed; top: 10px; right: 10px; background-color: var(--retro-button); border: 2px solid var(--retro-border); box-shadow: 2px 2px 0 var(--retro-shadow); padding: 5px 10px; cursor: pointer; z-index: 100; font-size: 16px; } .retro-dark-mode-toggle:hover { background-color: var(--retro-button-hover); } /* Retro alert */ .retro-alert { position: fixed; bottom: 20px; right: 20px; background-color: var(--retro-window); border: 2px solid var(--retro-border); box-shadow: 4px 4px 0 var(--retro-shadow); padding: 10px 20px; z-index: 1000; animation: retro-slide-in 0.3s ease-out, retro-fade-out 0.3s ease-in 2.7s forwards; } .retro-alert-content { display: flex; align-items: center; gap: 10px; } .retro-alert-icon { background-color: var(--retro-accent); color: white; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; } .retro-alert-text { font-family: monospace; font-weight: bold; font-size: 14px; color: var(--retro-text); } @keyframes retro-slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes retro-fade-out { from { opacity: 1; } to { opacity: 0; } } @media (max-width: 768px) { .spotlight-container { max-width: 90%; } .spotlight-hero { padding: 45px 16px; /* Adjusted for mobile */ } .spotlight-hero-title { font-size: 24px; } .spotlight-hero-subtitle { font-size: 14px; } .spotlight-examples { margin-top: 24px; } .retro-features { flex-direction: column; } .footer-content { flex-direction: column; gap: 10px; /* More space */ } .feature-cards-section { padding: 35px 16px; /* More padding */ } .feature-section-title { margin-bottom: 28px; /* More space */ font-size: 18px; } .feature-cards-grid { gap: 20px; /* More space */ } }