/* PDFinder Pro Extension CSS */ /* Features Section */ .features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-6); margin: var(--sp-12) 0; } .feature-card { background: var(--surface); border-radius: var(--border-radius); padding: var(--sp-6); box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border); height: 100%; display: flex; flex-direction: column; } .feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .feature-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: #3498db; border-radius: 12px; margin-bottom: var(--sp-4); transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .feature-card:hover .feature-icon { transform: scale(1.1); color: #2980b9; } .feature-title { font-weight: 600; margin-bottom: var(--sp-3); color: var(--text); } .feature-description { color: var(--text-secondary); flex: 1; } /* PDFinder Demo */ .pdfinder-demo { width: 100%; display: flex; justify-content: center; margin: var(--sp-12) 0; } .demo-container { background: var(--surface); border-radius: var(--border-radius); padding: var(--sp-6); box-shadow: var(--shadow-lg); width: 100%; max-width: 600px; text-align: center; } .demo-container h3 { margin-bottom: var(--sp-4); color: var(--text); } .demo-browser { border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden; background: var(--surface); } .browser-controls { background: var(--surface-2); padding: var(--sp-2) var(--sp-4); display: flex; align-items: center; border-bottom: 1px solid var(--border); } .browser-dots { display: flex; gap: 5px; } .browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border); } .browser-dots span:nth-child(1) { background: #ff5f56; } .browser-dots span:nth-child(2) { background: #ffbd2e; } .browser-dots span:nth-child(3) { background: #27c93f; } .browser-address { margin-left: var(--sp-4); padding: var(--sp-1) var(--sp-4); background: var(--surface-3); border-radius: 15px; font-size: 14px; color: var(--text-secondary); flex: 1; text-align: center; } .browser-content { padding: var(--sp-4); display: flex; justify-content: center; min-height: 300px; } .extension-popup { width: 350px; background: var(--surface); border-radius: var(--border-radius); box-shadow: var(--shadow-md); overflow: hidden; border: 1px solid var(--border); } .popup-header { background: #3498db; color: white; padding: var(--sp-2) var(--sp-4); text-align: center; } .popup-header h4 { margin: 0; font-size: 1.2rem; } .popup-content { padding: var(--sp-4); } .demo-find-button { width: 100%; padding: var(--sp-2) var(--sp-4); background: #3498db; color: white; border: none; border-radius: var(--border-radius); font-size: 1rem; cursor: pointer; margin-bottom: var(--sp-3); transition: background 0.3s ease; } .demo-find-button:hover { background: #2980b9; } .demo-upload-button { display: block; width: 100%; padding: var(--sp-2) var(--sp-4); background: #2ecc71; color: white; border: none; border-radius: var(--border-radius); font-size: 1rem; cursor: pointer; margin-bottom: var(--sp-4); text-align: center; transition: background 0.3s ease; } .demo-upload-button:hover { background: #27ae60; } .demo-pdf-list { max-height: 200px; overflow-y: auto; margin-top: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-4); } .pdf-item { background: var(--surface-2); padding: var(--sp-3); border-radius: var(--border-radius); margin-bottom: var(--sp-3); } .pdf-link { font-weight: bold; color: #3498db; margin-bottom: var(--sp-2); cursor: pointer; } .pdf-link:hover { text-decoration: underline; } .pdf-actions { display: flex; gap: var(--sp-2); } .pdf-actions button { padding: var(--sp-1) var(--sp-2); border: none; border-radius: var(--border-radius-sm); cursor: pointer; font-size: 0.8rem; transition: all 0.3s ease; } .pdf-action-view { background: #3498db; color: white; } .pdf-action-view:hover { background: #2980b9; } .pdf-action-text { background: #f39c12; color: white; } .pdf-action-text:hover { background: #e67e22; } .pdf-action-save { background: #9b59b6; color: white; } .pdf-action-save:hover { background: #8e44ad; } /* Screenshots Section */ .screenshots-container { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6); margin: var(--sp-12) 0; } .screenshot { flex: 1; min-width: 300px; max-width: 600px; box-shadow: var(--shadow); border-radius: var(--border-radius); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border); display: flex; flex-direction: column; } .screenshot:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .screenshot img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; } .screenshot:hover img { transform: scale(1.02); } .screenshot-caption { padding: var(--sp-3); text-align: center; background: var(--surface-2); color: var(--text-secondary); font-style: italic; font-size: 0.9rem; } /* Call to Action Section */ .cta { background: linear-gradient(135deg, #3498db, #2c3e50); padding: var(--sp-16) var(--sp-6); border-radius: var(--border-radius-lg); text-align: center; color: white; margin-top: var(--sp-16); position: relative; overflow: hidden; } .cta-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 20%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 20%); z-index: 1; } .cta-button { background: white; color: #3498db; padding: 1rem 2.5rem; border-radius: var(--border-radius); font-weight: 600; transition: all 0.3s ease; display: inline-block; } .cta-button:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } /* Responsive adjustments */ @media (max-width: 768px) { .screenshot { min-width: 100%; } .extension-popup { width: 100%; } .pdf-actions { flex-wrap: wrap; } .pdf-actions button { flex: 1; min-width: 80px; } } /* Scrollbar for PDF list */ .demo-pdf-list::-webkit-scrollbar { width: 6px; } .demo-pdf-list::-webkit-scrollbar-track { background: var(--surface-2); } .demo-pdf-list::-webkit-scrollbar-thumb { background: #3498db; border-radius: 3px; } .demo-pdf-list::-webkit-scrollbar-thumb:hover { background: #2980b9; } .pdfinder-hero { background: linear-gradient(359deg, #3498db, #2c3e50); color: white; padding: var(--sp-16) var(--sp-6); text-align: center; position: relative; overflow: hidden; } .pdfinder-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 20%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 20%); z-index: 1; } @media (prefers-color-scheme: dark) { .pdfinder-hero { background: linear-gradient(359deg, #3498db, #1a2530); } } .pdfinder-hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; } .pdfinder-hero-title { font-weight: 700; margin-bottom: var(--sp-4); line-height: 1.2; } .pdfinder-hero-text { margin-bottom: var(--sp-8); opacity: 0.9; } .pdfinder-hero-button { background: white; color: #3498db; padding: 1rem 2.5rem; border-radius: var(--border-radius); font-weight: 600; transition: all 0.3s ease; display: inline-block; } .pdfinder-hero-button:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } /* Responsive adjustments */ h1 { background: linear-gradient(var(--gradient-direction), #4a90e2, #ffd700); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; margin-bottom: var(--sp-4); text-transform: uppercase; letter-spacing: 0.05em; } h2 { font-weight: 700; margin-bottom: var(--sp-4); line-height: 1.2; } /* .pdfinder-hero-content p { font-size: 1.25rem; margin-bottom: var(--sp-8); opacity: 0.9; color: white !important; font-size: 1.25rem !important; margin-bottom: var(--sp-8) !important; opacity: 0.9 !important; } */ main ol { list-style: decimal; margin-left: 1.5rem; margin-bottom: 1.5rem; } main ul { list-style: disc; margin-left: 1.5rem; margin-bottom: 1.5rem; } [dir="rtl"] main ol { list-style: decimal; margin-right: 1.5rem; } [dir="rtl"] main ul { list-style: disc; margin-right: 1.5rem; }