Spaces:
Running
Running
| /* ========================================== | |
| ShopPilot AI - Premium UI | |
| ========================================== */ | |
| :root { | |
| --bg: #0d1117; | |
| --card: #151b23; | |
| --card2: #1d2633; | |
| --border: rgba(255,255,255,.08); | |
| --primary: #ff9800; | |
| --primary2: #ffb74d; | |
| --text: #ffffff; | |
| --muted: #9aa4b2; | |
| --success: #3ddc84; | |
| --danger: #ff5f56; | |
| --radius: 22px; | |
| --shadow: | |
| 0 15px 40px rgba(0,0,0,.35); | |
| } | |
| *{ | |
| margin:0; | |
| padding:0; | |
| box-sizing:border-box; | |
| } | |
| html{ | |
| scroll-behavior:smooth; | |
| } | |
| body{ | |
| background:var(--bg); | |
| color:var(--text); | |
| font-family:'Inter',sans-serif; | |
| line-height:1.6; | |
| } | |
| .container{ | |
| width:min(1200px,92%); | |
| margin:auto; | |
| } | |
| a{ | |
| color:inherit; | |
| text-decoration:none; | |
| } | |
| button{ | |
| cursor:pointer; | |
| border:none; | |
| } | |
| img{ | |
| max-width:100%; | |
| display:block; | |
| } | |
| /* ================================== | |
| NAVBAR | |
| ================================== */ | |
| .navbar{ | |
| position:fixed; | |
| width:100%; | |
| top:0; | |
| z-index:999; | |
| backdrop-filter:blur(20px); | |
| background:rgba(10,10,10,.55); | |
| border-bottom:1px solid var(--border); | |
| } | |
| .nav-container{ | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| padding:18px 0; | |
| } | |
| .logo{ | |
| display:flex; | |
| align-items:center; | |
| gap:15px; | |
| } | |
| .logo-icon{ | |
| width:52px; | |
| height:52px; | |
| border-radius:15px; | |
| background:linear-gradient( | |
| 135deg, | |
| #ff9800, | |
| #ffcc80 | |
| ); | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| font-size:24px; | |
| color:#111; | |
| box-shadow:0 10px 25px rgba(255,152,0,.35); | |
| } | |
| .logo-text h2{ | |
| font-size:26px; | |
| font-weight:800; | |
| } | |
| .logo-text span{ | |
| color:var(--primary); | |
| } | |
| .logo-text p{ | |
| color:var(--muted); | |
| font-size:13px; | |
| } | |
| .nav-links{ | |
| display:flex; | |
| gap:35px; | |
| list-style:none; | |
| } | |
| .nav-links a{ | |
| color:#ddd; | |
| transition:.3s; | |
| } | |
| .nav-links a:hover{ | |
| color:var(--primary); | |
| } | |
| .status-box{ | |
| background:#17212d; | |
| border:1px solid var(--border); | |
| padding:10px 18px; | |
| border-radius:50px; | |
| display:flex; | |
| align-items:center; | |
| gap:10px; | |
| } | |
| .status-dot{ | |
| width:10px; | |
| height:10px; | |
| border-radius:50%; | |
| background:#00ff7f; | |
| animation:pulse 1.5s infinite; | |
| } | |
| @keyframes pulse{ | |
| 0%{ | |
| transform:scale(1); | |
| opacity:1; | |
| } | |
| 50%{ | |
| transform:scale(1.5); | |
| opacity:.5; | |
| } | |
| 100%{ | |
| transform:scale(1); | |
| opacity:1; | |
| } | |
| } | |
| /* ================================== | |
| HERO | |
| ================================== */ | |
| .hero{ | |
| padding-top:170px; | |
| padding-bottom:90px; | |
| } | |
| .eyebrow{ | |
| display:inline-block; | |
| background:rgba(255,152,0,.12); | |
| color:#ffb74d; | |
| padding:10px 18px; | |
| border-radius:50px; | |
| letter-spacing:2px; | |
| font-size:13px; | |
| font-weight:700; | |
| } | |
| .hero-title{ | |
| font-family:'Fraunces',serif; | |
| font-size:72px; | |
| margin-top:25px; | |
| line-height:1.1; | |
| } | |
| .hero-title span{ | |
| color:var(--primary); | |
| } | |
| .hero-subtitle{ | |
| margin-top:18px; | |
| color:#d8d8d8; | |
| font-size:32px; | |
| } | |
| .hero-description{ | |
| margin-top:28px; | |
| color:var(--muted); | |
| font-size:18px; | |
| max-width:760px; | |
| } | |
| .hero-description span{ | |
| color:#fff; | |
| font-weight:700; | |
| } | |
| /* ================================== | |
| SEARCH BOX | |
| ================================== */ | |
| .search-box{ | |
| margin-top:50px; | |
| display:grid; | |
| grid-template-columns:2fr 1fr auto; | |
| gap:18px; | |
| } | |
| .search-input, | |
| .budget-input{ | |
| background:var(--card); | |
| border:1px solid var(--border); | |
| border-radius:18px; | |
| padding:18px 22px; | |
| display:flex; | |
| align-items:center; | |
| gap:14px; | |
| transition:.35s; | |
| } | |
| .search-input:hover, | |
| .budget-input:hover{ | |
| border-color:var(--primary); | |
| box-shadow:0 0 25px rgba(255,152,0,.12); | |
| } | |
| .search-input i, | |
| .budget-input i{ | |
| color:var(--primary); | |
| font-size:20px; | |
| } | |
| .search-input input, | |
| .budget-input input{ | |
| width:100%; | |
| background:none; | |
| border:none; | |
| outline:none; | |
| color:white; | |
| font-size:17px; | |
| } | |
| .search-input input::placeholder, | |
| .budget-input input::placeholder{ | |
| color:#888; | |
| } | |
| #search-btn{ | |
| background:linear-gradient( | |
| 135deg, | |
| #ff9800, | |
| #ffb74d | |
| ); | |
| color:#111; | |
| font-size:17px; | |
| font-weight:700; | |
| padding:0 34px; | |
| border-radius:18px; | |
| transition:.35s; | |
| box-shadow:0 10px 30px rgba(255,152,0,.25); | |
| } | |
| #search-btn:hover{ | |
| transform:translateY(-3px); | |
| box-shadow:0 18px 35px rgba(255,152,0,.4); | |
| } | |
| #search-btn i{ | |
| margin-right:8px; | |
| } | |
| /* ================================== | |
| QUICK SEARCH | |
| ================================== */ | |
| .quick-search{ | |
| margin-top:35px; | |
| display:flex; | |
| flex-wrap:wrap; | |
| align-items:center; | |
| gap:14px; | |
| } | |
| .quick-search span{ | |
| color:#bbb; | |
| font-weight:600; | |
| } | |
| .chip{ | |
| background:#1d2532; | |
| color:#ddd; | |
| padding:12px 18px; | |
| border-radius:50px; | |
| border:1px solid var(--border); | |
| transition:.35s; | |
| font-size:14px; | |
| } | |
| .chip:hover{ | |
| background:var(--primary); | |
| color:#111; | |
| transform:translateY(-2px); | |
| } | |
| /* ================================== | |
| PIPELINE | |
| ================================== */ | |
| .pipeline{ | |
| margin:70px 0; | |
| } | |
| .pipeline-card{ | |
| background:var(--card); | |
| border-radius:25px; | |
| padding:35px; | |
| border:1px solid var(--border); | |
| box-shadow:var(--shadow); | |
| } | |
| .pipeline-card h3{ | |
| font-size:26px; | |
| margin-bottom:30px; | |
| } | |
| .pipeline-grid{ | |
| display:grid; | |
| grid-template-columns:repeat(5,1fr); | |
| gap:18px; | |
| } | |
| .agent{ | |
| background:var(--card2); | |
| border-radius:18px; | |
| padding:20px; | |
| transition:.35s; | |
| border:1px solid rgba(255,255,255,.05); | |
| } | |
| .agent:hover{ | |
| transform:translateY(-6px); | |
| border-color:var(--primary); | |
| } | |
| .agent-top{ | |
| display:flex; | |
| align-items:center; | |
| gap:10px; | |
| margin-bottom:12px; | |
| font-weight:700; | |
| } | |
| .agent .dot{ | |
| width:12px; | |
| height:12px; | |
| border-radius:50%; | |
| background:var(--success); | |
| animation:pulse 1.5s infinite; | |
| } | |
| .agent p{ | |
| color:var(--muted); | |
| font-size:14px; | |
| } | |
| /* ================================== | |
| RESULTS | |
| ================================== */ | |
| .results{ | |
| margin-top:60px; | |
| } | |
| .section-header{ | |
| display:flex; | |
| justify-content:space-between; | |
| align-items:center; | |
| margin-bottom:35px; | |
| } | |
| .section-header h2{ | |
| font-size:40px; | |
| font-family:'Fraunces',serif; | |
| } | |
| .section-header p{ | |
| color:var(--muted); | |
| } | |
| .compare-btn{ | |
| background:transparent; | |
| border:2px solid var(--primary); | |
| color:var(--primary); | |
| padding:14px 22px; | |
| border-radius:50px; | |
| transition:.35s; | |
| font-weight:600; | |
| } | |
| .compare-btn:hover{ | |
| background:var(--primary); | |
| color:#111; | |
| } | |
| /* ================================== | |
| PRODUCT CARDS | |
| ================================== */ | |
| .cards{ | |
| display:grid; | |
| grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); | |
| gap:30px; | |
| margin-top:40px; | |
| } | |
| .card{ | |
| position:relative; | |
| background:var(--card); | |
| border-radius:24px; | |
| padding:26px; | |
| border:1px solid var(--border); | |
| transition:.4s; | |
| overflow:hidden; | |
| box-shadow:var(--shadow); | |
| } | |
| .card:hover{ | |
| transform:translateY(-10px); | |
| border-color:var(--primary); | |
| box-shadow:0 25px 45px rgba(0,0,0,.45); | |
| } | |
| .card.best{ | |
| border:2px solid var(--primary); | |
| } | |
| .stamp{ | |
| position:absolute; | |
| top:18px; | |
| right:-45px; | |
| width:170px; | |
| background:linear-gradient(135deg,#ff9800,#ffc107); | |
| color:#111; | |
| font-weight:800; | |
| text-align:center; | |
| transform:rotate(45deg); | |
| padding:8px 0; | |
| font-size:13px; | |
| } | |
| .card-media{ | |
| width:100%; | |
| height:220px; | |
| background:#202938; | |
| border-radius:18px; | |
| display:flex; | |
| justify-content:center; | |
| align-items:center; | |
| overflow:hidden; | |
| margin-bottom:20px; | |
| } | |
| .card-media img{ | |
| width:100%; | |
| height:100%; | |
| object-fit:cover; | |
| } | |
| .card-media-fallback{ | |
| font-size:54px; | |
| font-weight:700; | |
| color:rgba(255,255,255,.15); | |
| } | |
| .card-rank{ | |
| display:inline-block; | |
| padding:7px 15px; | |
| border-radius:30px; | |
| background:rgba(255,152,0,.15); | |
| color:var(--primary); | |
| font-size:13px; | |
| font-weight:700; | |
| margin-bottom:15px; | |
| } | |
| .card-title{ | |
| font-size:24px; | |
| font-weight:700; | |
| margin-bottom:12px; | |
| } | |
| .card-tag{ | |
| display:inline-block; | |
| padding:7px 12px; | |
| background:#283243; | |
| color:#ddd; | |
| border-radius:50px; | |
| font-size:13px; | |
| margin-bottom:18px; | |
| } | |
| .card-price-row{ | |
| display:flex; | |
| justify-content:space-between; | |
| align-items:center; | |
| margin-bottom:18px; | |
| } | |
| .card-price{ | |
| font-size:30px; | |
| color:var(--primary); | |
| font-weight:800; | |
| } | |
| .card-rating{ | |
| color:#f7c948; | |
| font-weight:600; | |
| } | |
| .card-reasoning{ | |
| color:var(--muted); | |
| line-height:1.8; | |
| margin:18px 0; | |
| } | |
| .card-value{ | |
| background:#202938; | |
| border-radius:14px; | |
| padding:14px; | |
| margin-bottom:20px; | |
| color:#ddd; | |
| } | |
| .review-snippet{ | |
| border-left:4px solid var(--primary); | |
| background:#1d2532; | |
| padding:18px; | |
| border-radius:14px; | |
| margin-bottom:20px; | |
| } | |
| .review-snippet p{ | |
| color:#ddd; | |
| line-height:1.8; | |
| } | |
| .snippet-confidence{ | |
| display:block; | |
| margin-top:12px; | |
| color:var(--primary); | |
| font-size:13px; | |
| } | |
| .proscons{ | |
| display:grid; | |
| grid-template-columns:1fr 1fr; | |
| gap:15px; | |
| margin-bottom:20px; | |
| } | |
| .pros-col, | |
| .cons-col{ | |
| background:#1d2532; | |
| padding:16px; | |
| border-radius:16px; | |
| } | |
| .pros-col span{ | |
| color:#00e676; | |
| font-weight:700; | |
| } | |
| .cons-col span{ | |
| color:#ff6b6b; | |
| font-weight:700; | |
| } | |
| .pros-col ul, | |
| .cons-col ul{ | |
| margin-top:12px; | |
| padding-left:20px; | |
| } | |
| .pros-col li, | |
| .cons-col li{ | |
| color:#ccc; | |
| margin-bottom:8px; | |
| } | |
| .card-features{ | |
| display:flex; | |
| flex-wrap:wrap; | |
| gap:10px; | |
| margin-bottom:20px; | |
| } | |
| .feature-pill{ | |
| background:#2a3446; | |
| color:#ddd; | |
| padding:8px 14px; | |
| border-radius:40px; | |
| font-size:13px; | |
| } | |
| .card-link{ | |
| display:block; | |
| text-align:center; | |
| background:linear-gradient(135deg,#ff9800,#ffc107); | |
| color:#111; | |
| padding:15px; | |
| border-radius:16px; | |
| font-weight:700; | |
| transition:.35s; | |
| } | |
| .card-link:hover{ | |
| transform:translateY(-3px); | |
| } | |
| /* ================================== | |
| COMPARE TABLE | |
| ================================== */ | |
| .compare-section{ | |
| margin-top:70px; | |
| } | |
| .compare-section h2{ | |
| font-family:'Fraunces',serif; | |
| margin-bottom:25px; | |
| font-size:38px; | |
| } | |
| #compare-table{ | |
| width:100%; | |
| border-collapse:collapse; | |
| overflow:hidden; | |
| border-radius:18px; | |
| background:var(--card); | |
| } | |
| #compare-table th{ | |
| background:#222c39; | |
| color:#ffb74d; | |
| padding:18px; | |
| text-align:left; | |
| } | |
| #compare-table td{ | |
| padding:18px; | |
| border-top:1px solid rgba(255,255,255,.06); | |
| color:#ddd; | |
| } | |
| #compare-table tr:hover{ | |
| background:#1b2430; | |
| } | |
| /* ================================== | |
| EMPTY STATE | |
| ================================== */ | |
| .empty-state{ | |
| margin:80px 0; | |
| } | |
| .empty-layout{ | |
| display:grid; | |
| grid-template-columns:2fr 1fr; | |
| gap:30px; | |
| } | |
| .empty-card, | |
| .feature-card{ | |
| background:var(--card); | |
| border-radius:22px; | |
| padding:40px; | |
| border:1px solid var(--border); | |
| } | |
| .empty-icon{ | |
| font-size:60px; | |
| margin-bottom:20px; | |
| } | |
| .empty-card h2{ | |
| font-size:38px; | |
| margin-bottom:15px; | |
| } | |
| .empty-card p{ | |
| color:var(--muted); | |
| margin-bottom:12px; | |
| } | |
| .feature-card h3{ | |
| margin-bottom:20px; | |
| font-size:24px; | |
| } | |
| .feature-card ul{ | |
| list-style:none; | |
| } | |
| .feature-card li{ | |
| margin:14px 0; | |
| color:#ddd; | |
| } | |
| /* ================================== | |
| ERROR | |
| ================================== */ | |
| .error-card{ | |
| background:#301b1b; | |
| border:1px solid #ff4d4d; | |
| color:white; | |
| padding:35px; | |
| border-radius:20px; | |
| } | |
| /* ================================== | |
| FOOTER | |
| ================================== */ | |
| footer{ | |
| margin-top:80px; | |
| border-top:1px solid rgba(255,255,255,.08); | |
| padding:35px 0; | |
| } | |
| .footer-content{ | |
| display:flex; | |
| justify-content:space-between; | |
| align-items:center; | |
| color:#999; | |
| } | |
| /* ================================== | |
| HIDDEN | |
| ================================== */ | |
| .hidden{ | |
| display:none; | |
| } | |
| /* ================================== | |
| SCROLLBAR | |
| ================================== */ | |
| ::-webkit-scrollbar{ | |
| width:10px; | |
| } | |
| ::-webkit-scrollbar-track{ | |
| background:#111; | |
| } | |
| ::-webkit-scrollbar-thumb{ | |
| background:#ff9800; | |
| border-radius:50px; | |
| } | |
| /* ================================== | |
| RESPONSIVE | |
| ================================== */ | |
| @media(max-width:1000px){ | |
| .nav-container{ | |
| flex-direction:column; | |
| gap:20px; | |
| } | |
| .hero-title{ | |
| font-size:55px; | |
| } | |
| .pipeline-grid{ | |
| grid-template-columns:repeat(2,1fr); | |
| } | |
| .empty-layout{ | |
| grid-template-columns:1fr; | |
| } | |
| .search-box{ | |
| grid-template-columns:1fr; | |
| } | |
| .section-header{ | |
| flex-direction:column; | |
| align-items:flex-start; | |
| gap:20px; | |
| } | |
| .footer-content{ | |
| flex-direction:column; | |
| gap:15px; | |
| } | |
| } | |
| @media(max-width:700px){ | |
| .hero{ | |
| padding-top:140px; | |
| } | |
| .hero-title{ | |
| font-size:42px; | |
| } | |
| .hero-subtitle{ | |
| font-size:24px; | |
| } | |
| .cards{ | |
| grid-template-columns:1fr; | |
| } | |
| .pipeline-grid{ | |
| grid-template-columns:1fr; | |
| } | |
| .nav-links{ | |
| display:none; | |
| } | |
| .logo-text h2{ | |
| font-size:22px; | |
| } | |
| .compare-section{ | |
| overflow:auto; | |
| } | |
| } |