/* MetaPeek Premium - Ultra-premium styling with glassmorphism and premium effects */ /* Custom premium font import */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); .metapeek-container { /* Premium color palette */ --mp-primary: #6366F1; --mp-primary-light: #818CF8; --mp-primary-dark: #4F46E5; --mp-accent: #10B981; --mp-accent-light: #34D399; --mp-accent-dark: #059669; --mp-secondary: #8B5CF6; --mp-gradient-primary: linear-gradient(var(--gradient-secondary), var(--mp-primary), var(--mp-secondary)); --mp-gradient-accent: linear-gradient(var(--gradient-secondary), var(--mp-accent), var(--mp-secondary)); /* Theme colors for dark mode (default) */ --mp-bg: #0F172A; --mp-surface: #1E293B; --mp-surface-raised: #334155; --mp-glass-bg: rgba(255, 255, 255, 0.03); --mp-glass-border: rgba(255, 255, 255, 0.07); --mp-text-primary: #F1F5F9; --mp-text-secondary: #94A3B8; --mp-text-tertiary: #64748B; --mp-error: #EF4444; --mp-warning: #F59E0B; --mp-success: #10B981; /* Elevations and effects */ --mp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06); --mp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --mp-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --mp-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --mp-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15); --mp-shadow-glow-accent: 0 0 20px rgba(16, 185, 129, 0.15); /* Border radius */ --mp-radius-sm: 0.375rem; --mp-radius: 0.5rem; --mp-radius-md: 0.75rem; --mp-radius-lg: 1rem; --mp-radius-xl: 1.5rem; /* Transitions */ --mp-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --mp-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --mp-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Container styling */ max-width: 1200px; margin: 0 auto; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--mp-text-primary); padding: 2rem; background-color: var(--mp-bg); border-radius: var(--mp-radius-lg); box-shadow: var(--mp-shadow-lg); overflow: hidden; position: relative; isolation: isolate; } /* Decorative background elements */ .metapeek-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.1), transparent 70%), radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.1), transparent 70%); z-index: -1; animation: mp-rotate 60s linear infinite; } @keyframes mp-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Light mode overrides */ @media (prefers-color-scheme: light) { .metapeek-container { --mp-bg: #F8FAFC; --mp-surface: #F1F5F9; --mp-surface-raised: #E2E8F0; --mp-glass-bg: rgba(0, 0, 0, 0.02); --mp-glass-border: rgba(0, 0, 0, 0.05); --mp-text-primary: #0F172A; --mp-text-secondary: #334155; --mp-text-tertiary: #64748B; } } /* Header section with logo */ .metapeek-header { text-align: center; margin-bottom: 3rem; position: relative; } .metapeek-container .logo { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; background: var(--mp-gradient-primary); border-radius: var(--mp-radius); color: white; font-weight: 700; margin-bottom: 1.5rem; font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: var(--mp-shadow-md), var(--mp-shadow-glow); transform: translateY(0); transition: transform var(--mp-transition), box-shadow var(--mp-transition); position: relative; overflow: hidden; } .metapeek-container .logo::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( to bottom right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60% ); transform: rotate(30deg); z-index: 1; } .metapeek-container .logo:hover { transform: translateY(-3px); box-shadow: var(--mp-shadow-lg), var(--mp-shadow-glow); } .metapeek-container h1 { font-family: 'Inter', sans-serif; margin-bottom: 1.5rem; font-size: 2.25rem; font-weight: 700; color: var(--mp-text-primary); line-height: 1.2; background: var(--mp-gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Input container with premium effects */ .metapeek-container .input-container { margin-bottom: 3rem; position: relative; } .metapeek-container .url-input { width: 100%; padding: 1.25rem 1.5rem; padding-left: 3rem; background: var(--mp-glass-bg); border: 1px solid var(--mp-glass-border); border-radius: var(--mp-radius); color: var(--mp-text-primary); font-size: 1rem; font-family: 'Inter', sans-serif; margin-bottom: 1rem; box-sizing: border-box; transition: all var(--mp-transition); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--mp-shadow); } .metapeek-container .url-input:focus { outline: none; box-shadow: var(--mp-shadow), 0 0 0 2px var(--mp-primary-light); border-color: var(--mp-primary-light); } .metapeek-container .input-container::before { content: ''; position: absolute; left: 1.25rem; top: 1.25rem; width: 1rem; height: 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366F1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9'%3E%3C/path%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; pointer-events: none; } .metapeek-container .fetch-button { width: 100%; padding: 1.25rem; background: var(--mp-gradient-primary); border: none; border-radius: var(--mp-radius); color: white; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; font-size: 1rem; transition: all var(--mp-transition); box-shadow: var(--mp-shadow), var(--mp-shadow-glow); position: relative; overflow: hidden; transform: translateY(0); } .metapeek-container .fetch-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ); transition: transform var(--mp-transition-slow); } .metapeek-container .fetch-button:hover { transform: translateY(-3px); box-shadow: var(--mp-shadow-md), var(--mp-shadow-glow); } .metapeek-container .fetch-button:hover::before { transform: translateX(200%); } .metapeek-container .fetch-button:active { transform: translateY(-1px); } .metapeek-container .fetch-button:disabled { opacity: 0.7; cursor: not-allowed; background: linear-gradient(var(--gradient-secondary), #a5a6f6, #b0a0fa); } /* Preview grid layout */ .metapeek-container .preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; position: relative; } @media (max-width: 1024px) { .metapeek-container .preview-grid { grid-template-columns: 1fr; } } /* Premium container styling */ .metapeek-container .preview-container { background: var(--mp-surface); border-radius: var(--mp-radius-lg); padding: 2rem; box-shadow: var(--mp-shadow-md); border: 1px solid var(--mp-glass-border); transition: transform var(--mp-transition), box-shadow var(--mp-transition); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: relative; overflow: hidden; } .metapeek-container .preview-container:hover { transform: translateY(-5px); box-shadow: var(--mp-shadow-lg), var(--mp-shadow-glow); } .metapeek-container .preview-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--mp-gradient-primary); transform: scaleX(0); transform-origin: var(--transform-origin); transition: transform var(--mp-transition); } .metapeek-container .preview-container:hover::before { transform: scaleX(1); } /* Section titles with icons */ .metapeek-container .section-title { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--mp-glass-border); display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 600; font-family: 'Inter', sans-serif; color: var(--mp-text-primary); } .metapeek-container .section-title svg { color: var(--mp-primary); stroke-width: 2; } /* Premium preview card */ .metapeek-container .preview-card { background: var(--mp-glass-bg); border: 1px solid var(--mp-glass-border); border-radius: var(--mp-radius-lg); overflow: hidden; margin-bottom: 1.5rem; box-shadow: var(--mp-shadow); transition: transform var(--mp-transition), box-shadow var(--mp-transition); } .metapeek-container .preview-card:hover { transform: translateY(-3px); box-shadow: var(--mp-shadow-md); } .metapeek-container .preview-image { width: 100%; height: 200px; background: rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .metapeek-container .preview-image span { color: var(--mp-text-tertiary); font-family: 'Inter', sans-serif; font-style: italic; } .metapeek-container .preview-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--mp-transition); } .metapeek-container .preview-card:hover .preview-image img { transform: scale(1.05); } .metapeek-container .preview-content { padding: 1.5rem; } .metapeek-container .preview-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; font-family: 'Inter', sans-serif; color: var(--mp-text-primary); line-height: 1.4; } .metapeek-container .preview-description { color: var(--mp-text-secondary); margin-bottom: 1rem; line-height: 1.6; font-family: 'Inter', sans-serif; font-size: 0.95rem; } /* Source code container */ .metapeek-container .source-container { background: var(--mp-glass-bg); border: 1px solid var(--mp-glass-border); border-radius: var(--mp-radius); padding: 1.5rem; max-height: 600px; overflow: auto; box-shadow: var(--mp-shadow-sm); transition: box-shadow var(--mp-transition); position: relative; } .metapeek-container .source-container:hover { box-shadow: var(--mp-shadow); } .metapeek-container .source-code { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.875rem; line-height: 1.6; color: var(--mp-text-primary); tab-size: 2; } /* Line numbers for code (optional enhancement) */ .metapeek-container .source-code { counter-reset: line; padding-left: 3.5rem; position: relative; } .metapeek-container .source-code::before { content: ''; position: absolute; left: 2.5rem; top: 0; width: 1px; height: 100%; background: var(--mp-glass-border); } /* Premium meta list styling */ .metapeek-container .meta-list { display: grid; gap: 1rem; margin-top: 1.5rem; } .metapeek-container .meta-item { background: var(--mp-surface-raised); padding: 1.25rem; border-radius: var(--mp-radius); box-shadow: var(--mp-shadow-sm); transition: transform var(--mp-transition), box-shadow var(--mp-transition); border: 1px solid var(--mp-glass-border); position: relative; overflow: hidden; } .metapeek-container .meta-item:hover { transform: translateY(-2px); box-shadow: var(--mp-shadow); } .metapeek-container .meta-item::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--mp-gradient-primary); } .metapeek-container .meta-label { color: var(--mp-text-secondary); font-size: 0.875rem; margin-bottom: 0.5rem; font-family: 'Inter', sans-serif; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; } .metapeek-container .meta-label::before { content: ''; display: inline-block; width: 8px; height: 8px; background-color: var(--mp-primary); border-radius: 50%; } .metapeek-container .meta-value { word-break: break-all; line-height: 1.5; font-family: 'Inter', sans-serif; color: var(--mp-text-primary); font-size: 0.95rem; } /* Premium buttons */ .metapeek-container .copy-button { background: var(--mp-surface-raised); border: 1px solid var(--mp-glass-border); color: var(--mp-text-primary); padding: 1rem 1.5rem; border-radius: var(--mp-radius); cursor: pointer; width: 100%; margin-top: 1.5rem; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.95rem; transition: all var(--mp-transition); display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .metapeek-container .copy-button::before { content: ''; display: inline-block; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366F1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z'%3E%3C/path%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; transition: transform var(--mp-transition); } .metapeek-container .copy-button:hover { background-color: var(--mp-primary); color: white; transform: translateY(-2px); box-shadow: var(--mp-shadow), var(--mp-shadow-glow); } .metapeek-container .copy-button:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z'%3E%3C/path%3E%3C/svg%3E"); transform: scale(1.1); } .metapeek-container .copy-button:active { transform: translateY(0); } /* Premium error and loading states */ .metapeek-container .error-message { color: var(--mp-error); background: rgba(239, 68, 68, 0.1); padding: 1.25rem; border-radius: var(--mp-radius); margin: 1.5rem 0; text-align: center; font-family: 'Inter', sans-serif; border-left: 3px solid var(--mp-error); animation: mp-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes mp-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .metapeek-container .loading { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--mp-text-primary); padding: 2.5rem; font-family: 'Inter', sans-serif; font-weight: 500; animation: mp-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .metapeek-container .loading::after { content: ""; width: 24px; height: 24px; border: 2px solid var(--mp-primary-light); border-top-color: transparent; border-radius: 50%; animation: mp-spin 1s linear infinite; } @keyframes mp-spin { to { transform: rotate(360deg); } } /* Premium responsive adjustments */ @media (max-width: 768px) { .metapeek-container { padding: 10px; margin-top: 5rem; } .theme-toggle { display: none !important; } .metapeek-container h1 { font-size: 1.875rem; } .metapeek-container .preview-container { padding: 1.5rem; } .metapeek-container .logo { padding: 0.5rem 1rem; font-size: 0.875rem; } } @media (max-width: 576px) { .metapeek-container .url-input { padding: 1rem 1.25rem 1rem 2.5rem; } .metapeek-container .input-container::before { left: 1rem; top: 1rem; } .metapeek-container .fetch-button { padding: 1rem; } } /* RTL Support */ [dir="rtl"] .metapeek-container .input-container::before { left: auto; right: 1.25rem; } [dir="rtl"] .metapeek-container .url-input { padding-left: 1.5rem; padding-right: 3rem; } [dir="rtl"] .metapeek-container .section-title { flex-direction: row-reverse; } [dir="rtl"] .metapeek-container .meta-label { text-align: right; } [dir="rtl"] .metapeek-container .meta-item::before { left: auto; right: 0; } [dir="rtl"] .metapeek-container .meta-label::before { margin-right: 0; margin-left: 0.5rem; } /* Show copy button tooltip */ .metapeek-container .copy-button[data-copied="true"]::after { content: "Copied!"; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--mp-primary); color: white; padding: 0.5rem 1rem; border-radius: var(--mp-radius); font-size: 0.875rem; margin-bottom: 0.5rem; animation: mp-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Optional: Add a history section */ .metapeek-container .history-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--mp-glass-border); } .metapeek-container .history-title { display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--mp-text-primary); font-family: 'Inter', sans-serif; } .metapeek-container .history-list { display: flex; flex-wrap: wrap; gap: 0.75rem; } .metapeek-container .history-item { background: var(--mp-surface-raised); color: var(--mp-text-secondary); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; cursor: pointer; transition: all var(--mp-transition); border: 1px solid var(--mp-glass-border); font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 0.5rem; } .metapeek-container .history-item:hover { background: var(--mp-primary); color: white; transform: translateY(-2px); box-shadow: var(--mp-shadow), var(--mp-shadow-glow); } .metapeek-container .history-item::before { content: ''; display: inline-block; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366F1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .metapeek-container .history-item:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E"); } /* Theme toggle */ .metapeek-container .theme-toggle { position: absolute; top: 1.5rem; right: 1.5rem; width: 40px; height: 40px; border-radius: 50%; background: var(--mp-surface-raised); border: 1px solid var(--mp-glass-border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--mp-transition); box-shadow: var(--mp-shadow-sm); } .metapeek-container .theme-toggle:hover { transform: translateY(-2px) rotate(15deg); box-shadow: var(--mp-shadow), var(--mp-shadow-glow); } .metapeek-container .theme-toggle svg { width: 20px; height: 20px; color: var(--mp-primary); transition: transform var(--mp-transition); } [dir="rtl"] .metapeek-container .theme-toggle { right: auto; left: 1.5rem; } /* Status indicator */ .metapeek-container .status-indicator { position: absolute; top: 1.5rem; left: 1.5rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--mp-text-secondary); font-family: 'Inter', sans-serif; } .metapeek-container .status-indicator::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--mp-accent); box-shadow: 0 0 10px var(--mp-accent); animation: mp-pulse 2s infinite; } @keyframes mp-pulse { 0% { opacity: 0.6; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0.6; transform: scale(0.8); } } [dir="rtl"] .metapeek-container .status-indicator { left: auto; right: 1.5rem; }