/* ============================ QualityDB – Main Stylesheet ============================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #f7f8fc; --surface: #ffffff; --surface2: #f1f3f9; --border: #e2e6f0; --text: #1a1d2e; --text2: #6b7280; --text3: #9ca3af; --accent: #4f46e5; --accent-light: #ede9fe; --accent-hover: #4338ca; --green: #059669; --green-light: #d1fae5; --red: #dc2626; --red-light: #fee2e2; --yellow: #d97706; --yellow-light: #fef3c7; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06); --shadow-md: 0 4px 24px rgba(0,0,0,.12); --transition: .18s ease; color-scheme: light dark; } /* ── Dark mode: manual toggle (data-theme="dark" on ) or OS preference ─ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#111318; --surface:#1c1e27; --surface2:#252731; --border:#2e3044; --text:#e8eaf6; --text2:#9094b0; --text3:#5a5e78; --accent:#6366f1; --accent-light:#1e1b4b; --accent-hover:#818cf8; --green:#34d399; --green-light:#064e3b; --red:#f87171; --red-light:#450a0a; --yellow:#fbbf24; --yellow-light:#451a03; --shadow:0 1px 3px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); --shadow-md:0 4px 24px rgba(0,0,0,.4); } } [data-theme="dark"] { --bg:#111318; --surface:#1c1e27; --surface2:#252731; --border:#2e3044; --text:#e8eaf6; --text2:#9094b0; --text3:#5a5e78; --accent:#6366f1; --accent-light:#1e1b4b; --accent-hover:#818cf8; --green:#34d399; --green-light:#064e3b; --red:#f87171; --red-light:#450a0a; --yellow:#fbbf24; --yellow-light:#451a03; --shadow:0 1px 3px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); --shadow-md:0 4px 24px rgba(0,0,0,.4); } [data-theme="light"] { --bg:#f7f8fc; --surface:#ffffff; --surface2:#f1f3f9; --border:#e2e6f0; --text:#1a1d2e; --text2:#6b7280; --text3:#9ca3af; --accent:#4f46e5; --accent-light:#ede9fe; --accent-hover:#4338ca; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; } /* ---- HEADER ---- */ .header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .header-inner { max-width: 1400px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--accent); } .logo-icon { font-size: 20px; } .header-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; } .stat-pill { background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 500; color: var(--text2); } /* ── Country filter row ───────────────────────────────────────────────────── */ .country-filter-row { display: flex; align-items: center; gap: 6px; padding: 8px 24px; background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; position: sticky; top: 57px; z-index: 99; } .country-filter-row::-webkit-scrollbar { display: none; } .country-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 13px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all var(--transition); } .country-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .country-pill-active { border-color: var(--accent); background: var(--accent); color: #fff; } /* ---- SEARCH ---- */ .search-section { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 24px; } .search-wrap { max-width: 1400px; margin: 0 auto; position: relative; } .search-box { display: flex; align-items: center; background: var(--bg); border: 2px solid var(--border); border-radius: 10px; padding: 0 14px; transition: border-color var(--transition); max-width: 700px; } .search-box:focus-within { border-color: var(--accent); } .search-icon { font-size: 16px; color: var(--text3); margin-right: 10px; } #search-input { flex: 1; border: none; background: transparent; padding: 12px 0; font-size: 15px; font-family: inherit; color: var(--text); outline: none; } #search-input::placeholder { color: var(--text3); } .search-clear { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 14px; padding: 4px; border-radius: 4px; display: none; } .search-clear:hover { color: var(--text); background: var(--border); } /* ── Category quick-filter pills ─────────────────────────────────────────── */ .cat-pills-row { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--border); scrollbar-width: none; -ms-overflow-style: none; } .cat-pills-row::-webkit-scrollbar { display: none; } .cat-pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 6px 14px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text2); font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all var(--transition); flex-shrink: 0; } .cat-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light, #ede9fe); } .cat-pill-active { border-color: var(--accent); background: var(--accent); color: #fff !important; } .cat-pill-active:hover { opacity: .9; } .sub-pills-row { border-top: none; border-bottom: 1px solid var(--border); padding: 6px 24px 8px; background: var(--bg); } .sub-pill { font-size: 12px; padding: 4px 12px; border-color: var(--border); color: var(--text3); } /* ── Load more button ─────────────────────────────────────────────────────── */ .load-more-wrap { text-align: center; padding: 12px 0 24px; } .load-more-btn { background: var(--surface); color: var(--text2); border: 1.5px solid var(--border); border-radius: 99px; padding: 10px 28px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all var(--transition); } .load-more-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light, #ede9fe); } .load-more-btn:disabled { opacity: .5; cursor: wait; } /* ── Search autocomplete dropdown ────────────────────────────────────────── */ .search-suggestions { position: absolute; top: calc(100% + 2px); left: 0; width: 700px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 200; overflow: hidden; } .search-suggestion-item { padding: 10px 16px; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--text); transition: background var(--transition); border-bottom: 1px solid var(--border); } .search-suggestion-item:last-child { border-bottom: none; } .search-suggestion-item:hover, .search-suggestion-item.active { background: var(--accent-light); color: var(--accent); } .search-suggestion-item .sug-icon { color: var(--text3); font-size: 13px; flex-shrink: 0; } .search-suggestion-item .sug-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-suggestion-item .sug-thumb { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; background: var(--surface2); flex-shrink: 0; } .search-suggestion-item .sug-hint { font-size: 11px; color: var(--text3); background: var(--surface2); border-radius: 4px; padding: 1px 5px; } /* ---- LAYOUT ---- */ .layout { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 24px; align-items: start; } /* ---- MOBILE FILTER BUTTON ---- */ .mobile-filter-btn { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 150; background: var(--accent); color: #fff; border: none; border-radius: 24px; padding: 12px 28px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 4px 20px rgba(79,70,229,.45); align-items: center; gap: 8px; transition: background var(--transition); white-space: nowrap; } .mobile-filter-btn:hover { background: var(--accent-hover); } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 120; } .sidebar-backdrop.open { display: block; } .sidebar-close-btn { display: none; background: var(--surface2); border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 13px; cursor: pointer; color: var(--text2); align-items: center; justify-content: center; flex-shrink: 0; } /* ── CSS custom props for header height (used by sticky children) ──────── */ :root { --header-h: 57px; } @media (max-width: 900px) { :root { --header-h: 48px; } } @media (max-width: 600px) { :root { --header-h: 44px; } } /* ---- TABLET (≤ 900px) ---- */ @media (max-width: 900px) { .layout { grid-template-columns: 1fr; padding: 16px; gap: 16px; } .sidebar { position: fixed; top: 0; left: 0; width: 300px; max-width: 85vw; height: 100dvh; overflow-y: auto; z-index: 130; border-radius: 0; border: none; border-right: 1px solid var(--border); transform: translateX(-110%); transition: transform .25s ease; padding-bottom: 80px; } .sidebar.open { transform: translateX(0); } .sidebar-close-btn { display: flex; } .mobile-filter-btn { display: none; } /* replaced by bottom nav */ .header-inner { padding: 12px 16px; gap: 12px; } .logo-text { font-size: 16px; } .stat-pill { font-size: 11px; padding: 3px 10px; } .search-section { padding: 12px 16px; } .search-box { max-width: 100%; } .toolbar { flex-direction: column; align-items: flex-start; gap: 8px; } .toolbar-right { width: 100%; justify-content: space-between; } .sort-select { flex: 1; } .country-filter-row { top: var(--header-h); } .main-content { padding-bottom: 68px; } /* room for bottom nav */ /* ── Mobile bottom navigation bar ────────────────────────────────────── */ .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; display: flex; align-items: stretch; background: var(--surface); border-top: 1px solid var(--border); z-index: 150; padding-bottom: env(safe-area-inset-bottom, 0px); } .mbn-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 19px; background: none; border: none; cursor: pointer; color: var(--text3); padding: 4px 2px; transition: color var(--transition); -webkit-tap-highlight-color: transparent; } .mbn-btn span { font-size: 9px; font-weight: 600; color: var(--text3); line-height: 1; } .mbn-btn.mbn-active, .mbn-btn.mbn-active span { color: var(--accent); } .mbn-btn#mbn-picks, .mbn-btn#mbn-picks span { color: var(--yellow); } .mbn-btn#mbn-picks.mbn-active, .mbn-btn#mbn-picks.mbn-active span { color: var(--yellow); filter: brightness(0.85); } .mbn-btn:active { opacity: 0.7; } } @media (min-width: 901px) { .mobile-bottom-nav { display: none; } } /* ---- MOBILE (≤ 600px) ---- */ @media (max-width: 600px) { .header-inner { flex-wrap: wrap; } .header-stats { margin-left: 0; } /* Hide full country row — mini pills shown in search section instead */ .country-filter-row { display: none; } /* Mini country pills injected inside search section by JS */ .search-country-mini { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 0 0 2px; margin-top: 6px; } .search-country-mini::-webkit-scrollbar { display: none; } .search-country-mini .country-pill { padding: 3px 9px; font-size: 11px; } /* ── Compact product cards (horizontal layout) ────────────────────────── */ .product-grid { grid-template-columns: 1fr; } .product-card { display: flex; flex-direction: row; gap: 10px; padding: 10px 12px; align-items: flex-start; } .card-img-wrap { width: 62px; height: 62px; flex-shrink: 0; margin-bottom: 0; border-radius: 8px; } .card-img-wrap img { width: 62px; height: 62px; object-fit: contain; } .card-no-img { width: 62px; height: 62px; font-size: 26px; flex-shrink: 0; border-radius: 8px; } .card-body { flex: 1; min-width: 0; gap: 4px; } .card-title { font-size: 0.82em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-sparkline-row { display: none; } /* save vertical space */ .card-top-row { flex-wrap: wrap; gap: 3px; } .card-metrics { gap: 4px; flex-wrap: wrap; } .card-metric { padding: 3px 7px; font-size: 0.73em; } .card-price { font-size: 0.9em; margin-top: 2px; } /* ── Modal as bottom sheet ────────────────────────────────────────────── */ .modal-overlay { padding: 0; align-items: flex-end; } .modal { border-radius: var(--radius) var(--radius) 0 0; max-height: 92dvh; padding: 8px 16px 20px; } /* Drag handle indicator */ .modal::before { content: ""; display: block; width: 36px; height: 4px; background: var(--border); border-radius: 4px; margin: 0 auto 10px; } .modal-metrics { grid-template-columns: 1fr 1fr; } .page-btn { width: 32px; height: 32px; font-size: 12px; } } /* ---- SIDEBAR ---- */ .sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: sticky; top: 120px; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .sidebar-header h2 { font-size: 15px; font-weight: 600; } .reset-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 12px; color: var(--text2); cursor: pointer; font-family: inherit; transition: all var(--transition); } .reset-btn:hover { border-color: var(--accent); color: var(--accent); } .share-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 13px; color: var(--text2); cursor: pointer; font-family: inherit; transition: all var(--transition); line-height: 1; } .share-btn:hover { border-color: var(--accent); background: var(--accent-light, #e8f4ff); } .filter-group { margin-bottom: 20px; } .filter-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin-bottom: 8px; } .filter-select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-family: inherit; font-size: 13px; color: var(--text); cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; padding-right: 30px; } .filter-select:focus { border-color: var(--accent); } .range-row { display: flex; align-items: center; gap: 10px; } input[type="range"] { flex: 1; accent-color: var(--accent); height: 4px; cursor: pointer; } .range-value { font-size: 13px; font-weight: 600; color: var(--accent); min-width: 40px; text-align: right; } /* ── Price range number inputs ─────────────────────────────────────────────── */ .price-range-row { display: flex; align-items: center; gap: 8px; } .price-input-wrap { flex: 1; display: flex; flex-direction: column; gap: 3px; } .price-input-label { font-size: 11px; color: var(--text2); font-weight: 500; } .price-number-input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font-size: 13px; box-sizing: border-box; outline: none; transition: border-color .15s; } .price-number-input:focus { border-color: var(--accent); } .price-range-dash { font-size: 15px; color: var(--text2); margin-top: 16px; /* align with inputs (offset by label height) */ flex-shrink: 0; } .star-quick { display: flex; gap: 6px; margin-top: 8px; } .star-btn { flex: 1; padding: 5px 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-size: 11px; font-weight: 600; color: var(--text2); cursor: pointer; font-family: inherit; transition: all var(--transition); } .star-btn:hover, .star-btn.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); } /* ---- TOOLBAR ---- */ /* ── Active filters bar (shown above grid when non-default filters are on) ── */ #active-filters-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; padding: 8px 12px; background: var(--accent-light, #ede9fe); border: 1px solid var(--accent); border-radius: var(--radius-sm); font-size: 12px; color: var(--accent); } #active-filters-bar .af-label { font-weight: 600; color: var(--text2); margin-right: 4px; } .af-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--accent); border-radius: 99px; padding: 2px 8px 2px 10px; font-size: 11px; font-weight: 500; color: var(--accent); cursor: pointer; transition: background var(--transition); } .af-chip:hover { background: var(--accent); color: #fff; } .af-chip .af-x { font-size: 10px; opacity: .7; margin-left: 1px; } #active-filters-clear { margin-left: auto; font-size: 11px; color: var(--text2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; background: none; border: none; font-family: inherit; } #active-filters-clear:hover { color: var(--red); } .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; } .toolbar-left { display: flex; align-items: center; gap: 10px; } .results-info { font-size: 13px; color: var(--text2); } .results-info strong { color: var(--text); font-weight: 600; } .toolbar-right { display: flex; align-items: center; gap: 10px; } /* Export CSV button */ .export-btn { font-size: 11px; font-weight: 600; padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text2); cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition); white-space: nowrap; } .export-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } /* ---- BEST PICKS BUTTON ---- */ .best-picks-btn { font-size: 12px; font-weight: 600; padding: 5px 12px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text2); cursor: pointer; transition: all var(--transition); white-space: nowrap; } .best-picks-btn:hover { border-color: var(--yellow); color: var(--yellow); background: var(--yellow-light); } .best-picks-btn.active { border-color: var(--yellow); background: var(--yellow-light); color: var(--yellow); } .sort-label { font-size: 12px; color: var(--text3); } .sort-select { width: auto; } .view-toggle { display: flex; gap: 4px; } .view-btn { background: none; border: 1px solid var(--border); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 14px; color: var(--text3); transition: all var(--transition); } .view-btn.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); } /* ---- PRODUCT GRID ---- */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .product-grid.list-view { grid-template-columns: 1fr; } /* ---- PRODUCT CARD ---- */ @keyframes card-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); position: relative; overflow: hidden; animation: card-fade-in .22s ease-out both; } .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--accent); } /* ── card-top-row: source badge + quality badge side by side ─────────────── */ .card-top-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; } .card-top-row .source-badge { position: static; /* override absolute positioning inside the flex row */ } /* ── History badge (📈 — product has ≥2 snapshots) ──────────────────────── */ @keyframes badge-pulse { 0% { box-shadow: 0 0 0 0 rgba(67,160,71,.45); } 70% { box-shadow: 0 0 0 6px rgba(67,160,71,0); } 100% { box-shadow: 0 0 0 0 rgba(67,160,71,0); } } .history-badge { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 7px; height: 26px; border-radius: 13px; background: linear-gradient(135deg, #e8f5e9, #c8e6c9); border: 1px solid #81c784; box-shadow: 0 1px 4px rgba(67,160,71,.25); font-size: 12px; font-weight: 600; color: #2e7d32; cursor: pointer; transition: background .15s, box-shadow .15s, transform .12s; margin-left: auto; white-space: nowrap; animation: badge-pulse 2.4s ease-out 1.2s 2; /* subtle pulse on load, twice */ user-select: none; } .history-badge::after { content: "history"; font-size: 10px; font-weight: 500; opacity: .75; letter-spacing: .02em; } .history-badge:hover { background: linear-gradient(135deg, #c8e6c9, #a5d6a7); box-shadow: 0 2px 10px rgba(67,160,71,.4); transform: scale(1.06); } .history-badge:active { transform: scale(.97); } /* ── NEW badge — shown on products added within the last 14 days ──────────── */ .new-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, #ff6b35, #f7931e); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; user-select: none; margin-left: 2px; box-shadow: 0 1px 3px rgba(255,107,53,.35); } /* ── Expert-test brand score badge ───────────────────────────────────────── */ .expert-badge { display: inline-flex; align-items: center; gap: 2px; padding: 0 7px; height: 18px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; user-select: none; margin-left: 2px; cursor: default; } .expert-badge.expert-good { background: #e6f7f0; color: #1a7f37; border: 1px solid #b4dec8; } .expert-badge.expert-warn { background: #fef9e7; color: #9a6700; border: 1px solid #f0d690; } .expert-badge.expert-bad { background: #fdf0f0; color: #c0392b; border: 1px solid #f0bcbc; } [data-theme="dark"] .expert-badge.expert-good { background: #052e16; color: #6ee7b7; border-color: #065f46; } [data-theme="dark"] .expert-badge.expert-warn { background: #3b2a08; color: #fcd34d; border-color: #78450e; } [data-theme="dark"] .expert-badge.expert-bad { background: #3b0e0e; color: #fca5a5; border-color: #7f1d1d; } /* ── Quality badges ───────────────────────────────────────────────────────── */ .quality-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; letter-spacing: .03em; white-space: nowrap; } .badge-excellent { background: linear-gradient(135deg, #fff8e1, #ffe082); color: #5d4037; border: 1px solid #ffd54f; } .badge-good { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; } .badge-warn { background: #fff3e0; color: #e65100; border: 1px solid #ffcc02; } .badge-bad { background: #fce4ec; color: #b71c1c; border: 1px solid #ef9a9a; } /* Warentest sub-ratings row */ .wt-sub-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 12px 6px; } .wt-sub { font-size: 10px; padding: 2px 6px; border-radius: 8px; white-space: nowrap; cursor: default; } .wt-sub b { font-weight: 700; } .wt-sehr-gut { background: #e8f5e9; color: #1b5e20; border: 1px solid #81c784; } .wt-gut { background: #f1f8e9; color: #33691e; border: 1px solid #aed581; } .wt-befriedigend { background: #fff8e1; color: #e65100; border: 1px solid #ffcc02; } .wt-ausreichend { background: #fce4ec; color: #b71c1c; border: 1px solid #ef9a9a; } .wt-mangelhaft { background: #ffebee; color: #7f0000; border: 1px solid #e57373; } .source-badge { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; background: var(--surface2); color: var(--text3); letter-spacing: .03em; white-space: nowrap; } .source-badge.scraper { background: var(--accent-light); color: var(--accent); } /* Source-specific badge colours (srcSlug = source name with dots→dashes) */ .source-badge.src-heureka-cz { background: #fff3e0; color: #e65100; } .source-badge.src-heureka-sk { background: #fff3e0; color: #c84a00; } .source-badge.src-zbozi-cz { background: #e8f5e9; color: #2e7d32; } .source-badge.src-amazon-de { background: #fff8e1; color: #b26a00; } .source-badge.src-amazon-us { background: #232f3e; color: #ff9900; } .source-badge.src-amazon_us { background: #232f3e; color: #ff9900; } .source-badge.src-fnac { background: #e8eaf6; color: #3949ab; } .source-badge.src-fr-ir { background: #e3f2fd; color: #0d47a1; font-weight: 700; } .source-badge.src-fr_ir { background: #e3f2fd; color: #0d47a1; font-weight: 700; } .source-badge.src-coolblue { background: #e3f2fd; color: #0066cc; } .source-badge.src-digitec { background: #e8eaf6; color: #2d3b8e; } .source-badge.src-prisjakt { background: #fce4ec; color: #c2185b; } .source-badge.src-ceneo { background: #f3e5f5; color: #7b1fa2; } .source-badge.src-datart-cz { background: #e0f2f1; color: #00695c; } .source-badge.src-planeo-cz { background: #e0f7fa; color: #006064; } .source-badge.src-geizhals { background: #f1f8e9; color: #558b2f; } .source-badge.src-mediamarkt { background: #ffebee; color: #c62828; } .source-badge.src-saturn-de { background: #fff8e1; color: #e65100; } .source-badge.src-otto-de { background: #fce4ec; color: #ad1457; } .source-badge.src-pricerunner-se { background: #e8f5e9; color: #1b5e20; } .source-badge.src-pricerunner { background: #e8f5e9; color: #2e7d32; } .source-metric { font-weight: 600; font-size: 13px; } .source-metric.src-heureka-cz { color: #e65100; } .source-metric.src-zbozi-cz { color: #2e7d32; } .source-metric.src-amazon-de { color: #b26a00; } .source-metric.src-amazon_us { color: #ff9900; } /* ── Indice de Réparabilité badge (card) ─────────────────────────────────── */ .ir-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; margin: 4px 0 2px; letter-spacing: .02em; } .ir-badge.ir-good { background: #e8f5e9; color: #2e7d32; } .ir-badge.ir-mid { background: #fff8e1; color: #e65100; } .ir-badge.ir-bad { background: #fce4ec; color: #b71c1c; } /* ── Indice de Réparabilité block (modal) ────────────────────────────────── */ .ir-modal-block { background: #f0f4ff; border: 1px solid #c5d0f5; border-radius: 10px; padding: 12px 16px; margin: 12px 0; } .ir-modal-label { font-size: 12px; font-weight: 600; color: #3949ab; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; } .ir-modal-sub { font-weight: 400; text-transform: none; color: #666; } .ir-modal-score-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .ir-modal-score { font-size: 22px; font-weight: 800; padding: 2px 10px; border-radius: 8px; } .ir-modal-score.ir-good { background: #e8f5e9; color: #2e7d32; } .ir-modal-score.ir-mid { background: #fff8e1; color: #e65100; } .ir-modal-score.ir-bad { background: #fce4ec; color: #b71c1c; } .ir-modal-date { font-size: 11px; color: #888; } .ir-sub-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 6px; } .ir-sub { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; border-bottom: 1px solid #d5dcf5; } .ir-sub-label { color: #555; } .ir-sub-val { font-weight: 700; color: #3949ab; } /* ── Keyword filter pills (sidebar) ──────────────────────────────────────── */ .kw-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .kw-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 12px; border: 1.5px solid #c5d8f5; background: #f0f6ff; color: #1565c0; cursor: pointer; transition: background .15s, border-color .15s; display: flex; align-items: center; gap: 4px; } .kw-pill:hover { background: #dceeff; border-color: #90bef0; } .kw-pill.active { background: #1565c0; color: #fff; border-color: #1565c0; } .kw-pill.active .kw-pill-count { color: #a8d4ff; } .kw-pill-count { font-size: 10px; font-weight: 400; color: #6b9ed4; } /* ── Keyword tags ─────────────────────────────────────────────────────────── */ .card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; } .kw-tag { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; background: #e8f4fd; color: #1565c0; letter-spacing: .03em; white-space: nowrap; } .kw-tag-modal { font-size: 12px; padding: 3px 10px; } .modal-keywords { margin: 12px 0 4px; } .modal-keywords-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin-bottom: 6px; } .modal-keywords-tags { display: flex; flex-wrap: wrap; gap: 6px; } /* ── Product thumbnail (og:image banner at top of card) ──────────────────── */ .card-img-wrap { margin: -16px -16px 10px; /* bleed to card edges (card has 16px padding) */ height: 130px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: img-shimmer 1.4s ease-in-out infinite; } @keyframes img-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .card-product-img { width: 100%; height: 100%; object-fit: contain; background: transparent; opacity: 0; transition: opacity .25s ease; } .card-product-img.img-loaded { opacity: 1; } /* Placeholder shown when product has no image yet — keeps card height consistent */ .card-img-placeholder { margin: -16px -16px 10px; height: 130px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(135deg, var(--surface2) 0%, var(--surface3, #e8eaed) 100%); display: flex; align-items: center; justify-content: center; } .card-img-placeholder span { font-size: 3rem; opacity: 0.28; filter: grayscale(0.3); user-select: none; } @media (max-width: 600px) { .card-img-wrap { margin: -14px -14px 8px; } .card-img-placeholder { margin: -14px -14px 8px; height: 110px; } } /* ── Brand logo ───────────────────────────────────────────────────────────── */ .card-brand-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: #f5f5f5; padding: 2px; margin-bottom: 6px; display: block; } .card-category { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin-bottom: 6px; cursor: pointer; transition: color .12s; } .card-category:hover { color: var(--accent); text-decoration: underline dotted; } /* Source badge — clickable (filter by source) */ .source-badge[data-filter-source] { cursor: pointer; } .source-badge[data-filter-source]:hover { filter: brightness(1.1) saturate(1.15); box-shadow: 0 2px 8px rgba(0,0,0,.15); } /* Search highlight in card names */ mark.hl { background: rgba(255, 213, 0, 0.45); color: inherit; border-radius: 2px; padding: 0 1px; font-weight: 700; } .card-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; } .metric { background: var(--bg); border-radius: var(--radius-sm); padding: 6px 8px; } .metric-label { font-size: 10px; color: var(--text3); font-weight: 500; margin-bottom: 2px; } .metric-value { font-size: 13px; font-weight: 700; color: var(--text); } .metric-value.good { color: var(--green); } .metric-value.warn { color: var(--yellow); } .metric-value.bad { color: var(--red); } /* Rank: large bold "#N" + small grey "of T" */ .rank-value .rank-num { font-size: 15px; font-weight: 800; } .rank-value .rank-total { font-size: 10px; font-weight: 400; color: var(--text3); margin-left: 2px; } .rank-value .rank-top1 { font-size: 13px; font-weight: 800; color: var(--green); letter-spacing: -0.02em; } .card-stars { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text2); } .stars-visual { color: #f59e0b; letter-spacing: 1px; font-size: 12px; } .card-footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-price { font-size: 14px; font-weight: 700; color: var(--text); } .card-link { font-size: 11px; color: var(--accent); text-decoration: none; font-weight: 500; } .card-link:hover { text-decoration: underline; } /* List view overrides */ .list-view .product-card { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "meta metrics" "footer footer"; align-items: center; gap: 12px; padding: 12px 16px; } .list-view .card-category { margin-bottom: 2px; } .list-view .card-metrics { grid-area: metrics; display: flex; gap: 8px; grid-template-columns: unset; } .list-view .card-footer { grid-area: footer; margin-top: 6px; padding-top: 6px; } /* Hide images in list view — no room for them */ .list-view .card-img-wrap, .list-view .card-img-placeholder { display: none; } /* Compact history strip in list view: single row, no sparkline */ .list-view .card-history-strip { display: flex; align-items: center; gap: 6px; padding: 3px 8px; margin-top: 4px; } .list-view .hist-header { margin-bottom: 0; } .list-view .hist-body { display: flex; flex-direction: row; align-items: center; gap: 4px; } .list-view .card-sparkline { display: none; } .list-view .hist-changes { flex-direction: row; flex-wrap: wrap; gap: 0 6px; } .list-view .hist-row { gap: 3px; } .list-view .hist-stable-lbl { font-size: 0.72em; } /* ---- PAGINATION ---- */ .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; } .page-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; color: var(--text2); transition: all var(--transition); } .page-btn:hover { border-color: var(--accent); color: var(--accent); } .page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; } .page-btn:disabled { opacity: .4; cursor: not-allowed; } .page-ellipsis { color: var(--text3); padding: 0 4px; } /* ---- MODAL ---- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.open { display: flex; } .modal { background: var(--surface); border-radius: var(--radius); max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 28px; position: relative; box-shadow: var(--shadow-md); } /* Product image at top of modal */ .modal-img-wrap { margin: -28px -28px 16px; height: 160px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: img-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; } .modal-product-img { width: 100%; height: 100%; object-fit: contain; background: transparent; opacity: 0; transition: opacity .25s ease; } .modal-product-img.img-loaded { opacity: 1; } /* Modal navigation bar: ‹ › close buttons */ .modal-nav-bar { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 6px; } .modal-nav-btn, .modal-close { background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); border: 1px solid rgba(0,0,0,0.10); border-radius: 50%; width: 32px; height: 32px; font-size: 18px; cursor: pointer; color: var(--text2); transition: all var(--transition); box-shadow: 0 1px 4px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; } .modal-nav-btn { font-size: 22px; font-weight: 300; } .modal-nav-btn:hover, .modal-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); } [data-theme="dark"] .modal-nav-btn, [data-theme="dark"] .modal-close { background: rgba(30,30,40,0.9); border-color: var(--border); color: var(--text2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modal-nav-btn, :root:not([data-theme="light"]) .modal-close { background: rgba(30,30,40,0.9); border-color: var(--border); color: var(--text2); } } .modal-category { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 6px; } .modal-name { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .modal-freshness { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 500; padding: 2px 7px; border-radius: 99px; white-space: nowrap; flex-shrink: 0; } .modal-freshness.fresh-new { background: #dcfce7; color: #166534; } .modal-freshness.fresh-ok { background: #fef9c3; color: #854d0e; } .modal-freshness.fresh-old { background: var(--bg); color: var(--text3); border: 1px solid var(--border); } /* ── "Also available at" cross-market section ─────────────────────────────── */ .modal-also-at { margin: 16px 0; border-top: 1px solid var(--border); padding-top: 14px; } .also-at-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); margin-bottom: 8px; } .also-at-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); background: var(--bg); margin-bottom: 4px; transition: background var(--transition); font-size: 12.5px; } .also-at-row:hover { background: var(--accent-light, #ede9fe); } .also-at-src { font-size: 11px; font-weight: 600; color: var(--accent); min-width: 90px; flex-shrink: 0; } .also-at-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); } .also-at-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .also-at-qual { color: var(--green); font-size: 11px; font-weight: 600; } .also-at-price { font-weight: 700; font-size: 12px; color: var(--text); } .modal-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } .modal-metric { background: var(--bg); border-radius: var(--radius-sm); padding: 12px; text-align: center; } .modal-metric-label { font-size: 11px; color: var(--text3); font-weight: 500; margin-bottom: 4px; } .modal-metric-value { font-size: 20px; font-weight: 800; } .modal-metric-value.good { color: var(--green); } .modal-metric-value.warn { color: var(--yellow); } .modal-metric-value.bad { color: var(--red); } .modal-stars-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .modal-stars-big { font-size: 24px; font-weight: 800; color: var(--text); } .modal-stars-visual { color: #f59e0b; font-size: 20px; } .modal-reviews-count { font-size: 13px; color: var(--text2); } .star-bar-wrap { margin-bottom: 20px; } .star-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; } .star-bar-label { width: 32px; text-align: right; color: var(--text3); } .star-bar-track { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; } .star-bar-fill { height: 100%; background: #f59e0b; border-radius: 4px; transition: width .4s ease; } .star-bar-count { width: 40px; color: var(--text3); font-size: 11px; } .modal-desc { font-size: 13px; color: var(--text2); line-height: 1.7; margin-bottom: 20px; border-top: 1px solid var(--border); padding-top: 16px; } /* ── Expert test score block in product modal ──────────────────────────── */ .modal-expert-block { margin: 14px 0; padding: 14px 16px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); } .modal-expert-label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; } .modal-expert-row { display: flex; align-items: center; gap: 16px; } .modal-expert-score { font-size: 32px; font-weight: 800; line-height: 1; flex-shrink: 0; } .modal-expert-score.expert-good { color: #1a7f37; } .modal-expert-score.expert-warn { color: #9a6700; } .modal-expert-score.expert-bad { color: #c0392b; } .modal-expert-max { font-size: 14px; font-weight: 500; color: var(--text3); } .modal-expert-meta { flex: 1; min-width: 0; } .modal-expert-brand { font-size: 13px; font-weight: 600; color: var(--text1); margin-bottom: 3px; } .modal-expert-note { font-size: 11px; color: var(--text3); margin-bottom: 5px; } .modal-expert-link { font-size: 11px; color: var(--green); text-decoration: none; } .modal-expert-link:hover { text-decoration: underline; } [data-theme="dark"] .modal-expert-score.expert-good { color: #6ee7b7; } [data-theme="dark"] .modal-expert-score.expert-warn { color: #fcd34d; } [data-theme="dark"] .modal-expert-score.expert-bad { color: #fca5a5; } .modal-actions { display: flex; gap: 10px; flex-wrap: wrap; } .modal-nav-hint { margin-top: 8px; font-size: 11px; color: var(--text3); text-align: center; letter-spacing: .02em; } .modal-nav-hint kbd { background: var(--surface2); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; font-size: 10px; font-family: inherit; } .btn-primary { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; transition: background var(--transition); } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: none; color: var(--text2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 20px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all var(--transition); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .btn-share { background: none; color: var(--text3); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all var(--transition); } .btn-share:hover { border-color: var(--accent); color: var(--accent); } /* ---- STATES ---- */ /* ── Skeleton card loading state ──────────────────────────────────────────── */ @keyframes skel-shine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skel { border-radius: 6px; background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3, #e4e7ec) 50%, var(--surface2) 75%); background-size: 200% 100%; animation: skel-shine 1.4s ease-in-out infinite; } .skel-card { pointer-events: none; cursor: default !important; } .skel-img { height: 130px; margin: -16px -16px 10px; border-radius: var(--radius) var(--radius) 0 0; } .skel-badge { height: 18px; width: 60px; margin-bottom: 10px; } .skel-name { height: 13px; margin-bottom: 6px; } .skel-name-1 { width: 85%; } .skel-name-2 { width: 60%; margin-bottom: 14px; } .skel-metrics { display: flex; gap: 8px; margin-bottom: 10px; } .skel-metric { flex: 1; height: 42px; } .skel-stars { height: 14px; width: 70%; margin-bottom: 12px; } .skel-footer { height: 22px; width: 50%; } .loading-state, .empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text3); } .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto 12px; } @keyframes spin { to { transform: rotate(360deg); } } .empty-state-icon { font-size: 40px; margin-bottom: 12px; } .empty-state h3 { font-size: 16px; font-weight: 600; color: var(--text2); margin-bottom: 6px; } /* ---- LANGUAGE TOGGLE ---- */ .header-center { display: flex; align-items: center; justify-content: center; flex: 1; } .lang-toggle { display: flex; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 3px; } .lang-btn { padding: 4px 14px; border: none; border-radius: 16px; background: transparent; color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: inherit; letter-spacing: .03em; } .lang-btn:hover { color: var(--accent); } .lang-btn.active { background: var(--accent); color: #fff; box-shadow: 0 1px 4px rgba(79,70,229,.35); } /* ---- COUNTRY TOGGLE ---- */ .country-toggle { display: flex; gap: 8px; } .country-btn { flex: 1; padding: 8px 10px; border: 2px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text2); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; font-family: inherit; } .country-btn:hover { border-color: var(--accent); color: var(--accent); } .country-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; } /* ---- WARENTEST / DTEST CARDS ---- */ .src-warentest { background: #c0392b; } .src-dtest { background: #2980b9; } /* Grade colour classes */ .grade-very-good { color: #059669; font-weight: 700; } .grade-good { color: #16a34a; font-weight: 700; } .grade-ok { color: #d97706; font-weight: 700; } .grade-warn { color: #ea580c; font-weight: 700; } .grade-bad { color: #dc2626; font-weight: 700; } /* Sub-rating pills on cards */ .wt-sub-ratings { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; } .wt-sub { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; background: var(--surface2); border: 1px solid var(--border); cursor: default; } /* Test program label */ .wt-test-prog { font-size: 10px; color: var(--text3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Modal sub-rating table */ .wt-modal-sub-ratings { margin: 14px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .wt-sub-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; font-size: 13px; border-bottom: 1px solid var(--border); } .wt-sub-row:last-child { border-bottom: none; } .wt-sub-row:nth-child(even) { background: var(--surface2); } .wt-sub-name { color: var(--text2); } .wt-sub-grade { font-weight: 600; } /* ---- WARENTEST CARD HEADER (category always visible, WT badge in corner) ---- */ .wt-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; } .wt-badge { flex-shrink: 0; font-size: 10px; font-weight: 800; background: #c0392b; color: #fff; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; margin-left: 6px; } .wt-card-header .card-category { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0; } /* Grade number displayed smaller next to label */ .grade-num { font-weight: 400; font-size: 0.85em; color: inherit; opacity: 0.8; } /* "?" help button showing grade scale on hover */ .grade-help { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border); font-size: 9px; font-weight: 700; color: var(--text3); cursor: help; vertical-align: middle; margin-left: 3px; } .grade-help:hover { background: var(--accent-light); color: var(--accent); } /* ══════════════════════════════════════════════════════════════════════════════ SCORE BARS (D-test % scale + Warentest grade scale) ══════════════════════════════════════════════════════════════════════════════ */ .score-bars { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 4px; } .score-bar-row { display: grid; grid-template-columns: 78px 1fr 34px; align-items: center; gap: 5px; } .score-bar-label { font-size: 10px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; } .score-bar-track { height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden; } .score-bar-fill { height: 100%; border-radius: 3px; transition: width .35s ease; } .score-bar-val { font-size: 10px; font-weight: 700; text-align: right; color: var(--text1); white-space: nowrap; } /* Fill colours (used on .score-bar-fill) */ .fill-great { background: #059669; } .fill-good { background: #16a34a; } .fill-ok { background: #d97706; } .fill-warn { background: #ea580c; } .fill-bad { background: #dc2626; } /* Matching text colours (used on .score-bar-val, .dt-score-big, etc.) */ .text-great { color: #059669; } .text-good { color: #16a34a; } .text-ok { color: #d97706; } .text-warn { color: #ea580c; } .text-bad { color: #dc2626; } /* Wider rows in modal */ .modal-score-bars .score-bar-row { grid-template-columns: 130px 1fr 40px; } .modal-score-bars .score-bar-track { height: 7px; } .modal-score-bars .score-bar-label { font-size: 11px; } .modal-score-bars .score-bar-val { font-size: 11px; } /* ── Warentest card: grade label pill inline with grade number ─────────────── */ .wt-grade-metric .metric-value { display: flex; align-items: baseline; gap: 6px; font-size: 1.3em; font-weight: 700; } .wt-grade-label { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; letter-spacing: 0.3px; vertical-align: middle; } /* ── Warentest modal ──────────────────────────────────────────────────────────── */ .wt-modal-block { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 10px 0 14px; } .wt-modal-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text3); margin-bottom: 10px; } /* Grade hero: circle + meta info side by side */ .wt-modal-grade-hero { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 4px; } .wt-modal-grade-circle { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid currentColor; gap: 1px; } .wt-modal-grade-circle.wt-sehr-gut { background: #e8f5e9; color: #1b5e20; border-color: #4caf50; } .wt-modal-grade-circle.wt-gut { background: #f1f8e9; color: #33691e; border-color: #8bc34a; } .wt-modal-grade-circle.wt-befriedigend { background: #fff8e1; color: #e65100; border-color: #ffb300; } .wt-modal-grade-circle.wt-ausreichend { background: #fce4ec; color: #b71c1c; border-color: #ef9a9a; } .wt-modal-grade-circle.wt-mangelhaft { background: #ffebee; color: #7f0000; border-color: #e57373; } .wt-modal-grade-num { font-size: 1.9em; font-weight: 800; line-height: 1; } .wt-modal-grade-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.85; } /* Meta info rows next to the circle */ .wt-modal-grade-meta { flex: 1; display: flex; flex-direction: column; gap: 5px; padding-top: 4px; } .wt-meta-row { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 5px; } .wt-meta-row strong { color: var(--text1); } /* Sub-rating bars in modal */ .wt-modal-bars { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; } .wt-bar-row { display: grid; grid-template-columns: 80px 1fr 34px 58px; align-items: center; gap: 6px; } .wt-bar-label { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wt-bar-track { height: 7px; } .wt-bar-word { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 10px; text-align: center; white-space: nowrap; } /* Verdict block */ .wt-modal-verdict { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .wt-modal-verdict-text { font-size: 12px; color: var(--text2); line-height: 1.5; margin-top: 6px; font-style: italic; } /* ── D-test card ─────────────────────────────────────────────────────────────── */ .dt-badge { flex-shrink: 0; font-size: 10px; font-weight: 800; background: #1d4ed8; color: #fff; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; margin-left: 6px; } .dt-overall { display: flex; align-items: baseline; gap: 7px; margin: 5px 0 3px; } .dt-score-big { font-size: 21px; font-weight: 900; line-height: 1; } .dt-grade-text { font-size: 11px; color: var(--text2); font-style: italic; } /* ── D-test modal header ─────────────────────────────────────────────────────── */ .dt-modal-hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .dt-modal-score { font-size: 38px; font-weight: 900; line-height: 1; } .dt-modal-right { display: flex; flex-direction: column; gap: 3px; } .dt-modal-grade { font-size: 15px; font-weight: 700; } .dt-modal-meta { font-size: 12px; color: var(--text2); } .dt-modal-meta strong { color: var(--text1); } /* ── Collapsible modal sections ──────────────────────────────────────────────── */ .modal-section { margin: 12px 0 0; } .modal-section-hd { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); cursor: pointer; padding: 6px 0; border-bottom: 1px solid var(--border); user-select: none; } .modal-section-hd:hover { color: var(--accent); } .modal-section-chev { font-size: 10px; transition: transform .2s; } .modal-section-hd.open .modal-section-chev { transform: rotate(180deg); } .modal-section-body { padding-top: 6px; } .modal-section-body.hidden { display: none; } /* ── Category score rows (clickable, expand sub-params) ─────────────────────── */ .cat-score-row { cursor: pointer; border-radius: 4px; padding: 1px 3px; margin: 1px -3px; } .cat-score-row:hover { background: var(--surface2); } .cat-score-row.expanded .score-bar-label { font-weight: 700; color: var(--text1); } .cat-params { padding: 3px 0 6px 10px; border-left: 2px solid var(--border); margin: 1px 0 4px 8px; } .cat-params.hidden { display: none; } .cat-param-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 11px; } .cat-param-key { color: var(--text2); flex: 1; } .cat-param-val { font-weight: 500; white-space: nowrap; } /* ── Technical spec table ────────────────────────────────────────────────────── */ .spec-section { margin-bottom: 10px; } .spec-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin: 8px 0 4px; } .spec-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; } .spec-row { display: contents; } .spec-row > span { font-size: 11px; padding: 2px 0; border-bottom: 1px solid var(--border); } .spec-row > span:first-child { color: var(--text2); } .spec-row > span:last-child { font-weight: 500; color: var(--text1); } /* ── Products to avoid ───────────────────────────────────────────────────────── */ .avoid-btn { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1.5px dashed #e57373; background: transparent; color: #e57373; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; text-align: center; } .avoid-btn:hover { background: rgba(229,115,115,.08); } .avoid-btn-active { background: #e57373 !important; color: #fff !important; border-style: solid !important; } .avoid-info { margin-top: 6px; font-size: 11px; color: #e57373; background: rgba(229,115,115,.08); border-radius: 6px; padding: 5px 8px; } /* ── Keyword clear button ────────────────────────────────────────────────────── */ .kw-clear-btn { background: none; border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; font-size: 10px; color: var(--text2); cursor: pointer; transition: all .15s; } .kw-clear-btn:hover { background: var(--danger, #e57373); color: #fff; border-color: transparent; } /* ── Indice de Réparabilité — card sub-criteria bar row ───────────────────── */ .ir-sub-row { display: flex; gap: 4px; margin: 5px 0 3px; padding: 6px 8px; background: #f0f4ff; border-radius: 8px; border: 1px solid #dce3f8; } .ir-sub-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; } .ir-sub-label { font-size: 9px; font-weight: 700; color: #3949ab; letter-spacing: .03em; text-transform: uppercase; } .ir-sub-bar { width: 100%; height: 5px; background: #dce3f8; border-radius: 3px; overflow: hidden; } .ir-sub-fill { height: 100%; border-radius: 3px; transition: width .3s ease; } .ir-sub-fill.ir-good { background: #43a047; } .ir-sub-fill.ir-mid { background: #fb8c00; } .ir-sub-fill.ir-bad { background: #e53935; } .ir-sub-val { font-size: 9px; font-weight: 600; color: #555; } /* ── French legal note (replaces star row when no reviews) ────────────────── */ .card-stars.ir-legal-note { font-size: 10px; color: #3949ab; background: #f0f4ff; border-radius: 6px; padding: 3px 7px; display: flex; align-items: center; gap: 5px; } /* ── Cross-market panel ──────────────────────────────────────────────────── */ #cross-market-panel { padding: 0 16px 32px; } .cross-market-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 0 14px; flex-wrap: wrap; } .cross-market-title { font-weight: 700; font-size: 1.05em; color: #1a237e; flex: 1; } #cross-market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .cm-card { background: #fff; border: 1px solid #dde3ed; border-radius: 12px; padding: 14px 16px; transition: box-shadow 0.15s; } .cm-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); } .cm-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .cm-token { font-family: monospace; font-size: 0.85em; background: #e8f0fe; color: #1a237e; border-radius: 6px; padding: 2px 8px; font-weight: 700; } .cm-markets { font-size: 0.78em; color: #555; flex: 1; } .cm-range { font-size: 0.75em; color: #666; margin-bottom: 8px; display: flex; gap: 12px; } .cm-products { list-style: none; display: flex; flex-direction: column; gap: 5px; } .cm-product-row { display: flex; align-items: baseline; gap: 6px; font-size: 0.8em; } .cm-product-flag { font-size: 0.9em; min-width: 18px; } .cm-product-name { flex: 1; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cm-product-source { font-size: 0.75em; color: #888; white-space: nowrap; } .cm-product-rate { font-size: 0.75em; color: #2e7d32; font-weight: 600; white-space: nowrap; } .cm-product-price { font-size: 0.75em; color: #555; white-space: nowrap; } /* ── Cross-market card — new elements ───────────────────────────────────── */ .cm-brand-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #f5f5f5; padding: 2px; flex-shrink: 0; } .cm-card-title { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cm-flag-row { display: flex; flex-wrap: wrap; gap: 3px; } .cm-flag-chip { font-size: 1.1em; line-height: 1; cursor: default; } .cm-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; } .cm-avg-rate { font-size: 0.82em; font-weight: 700; color: #2e7d32; white-space: nowrap; } .cm-price-range { font-size: 0.75em; color: #555; white-space: nowrap; } .cm-rate-val { font-size: 0.75em; font-weight: 600; color: #2e7d32; white-space: nowrap; } .cm-reviews-val { font-size: 0.72em; color: #888; white-space: nowrap; } .cm-price-val { font-size: 0.72em; color: #555; white-space: nowrap; } .cm-product-link { font-size: 0.85em; color: var(--accent); text-decoration: none; flex-shrink: 0; opacity: 0.7; transition: opacity 0.15s; } .cm-product-link:hover { opacity: 1; } .cm-product-stats { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; } /* ── Data Health Panel ──────────────────────────────────────────────────── */ .status-health-btn { background: none; border: none; cursor: pointer; font-size: inherit; font-family: inherit; padding: 4px 10px; border-radius: 20px; transition: background 0.15s; } .status-health-btn:hover { background: rgba(0,0,0,0.07); } [data-theme="dark"] .status-health-btn:hover { background: rgba(255,255,255,0.08); } /* Dark-mode toggle button */ .theme-toggle-btn { background: none; border: none; cursor: pointer; font-size: 15px; font-family: inherit; padding: 4px 8px; border-radius: 20px; transition: background 0.15s, transform 0.2s; line-height: 1; } .theme-toggle-btn:hover { background: rgba(0,0,0,0.07); transform: rotate(20deg); } [data-theme="dark"] .theme-toggle-btn:hover { background: rgba(255,255,255,0.08); } .health-panel { position: fixed; top: 0; right: 0; width: 380px; max-width: 95vw; height: 100vh; background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.13); z-index: 1100; overflow-y: auto; animation: slideInRight 0.22s ease; } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .health-panel-inner { padding: 20px; } .health-panel-header { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1em; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #eee; } .health-summary { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .health-summary-pill { padding: 4px 12px; border-radius: 20px; font-size: 0.8em; font-weight: 500; } .health-pill-ok { background: #e8f5e9; color: #2e7d32; } .health-pill-warn { background: #fff8e1; color: #f57f17; } .health-pill-stale { background: #fdecea; color: #c62828; } .health-pill-imported { background: #e8eaf6; color: #283593; } .health-pill-total { background: #f0f4ff; color: #1565c0; } .health-rows { display: flex; flex-direction: column; gap: 8px; } .health-row { display: grid; grid-template-columns: 16px 1fr auto; align-items: start; gap: 8px; padding: 10px 12px; border-radius: 8px; background: #fafafa; border: 1px solid #eee; font-size: 0.82em; } .health-row:hover { border-color: #ddd; background: #f5f5f5; } .health-dot { font-size: 10px; margin-top: 3px; } .health-dot-ok { color: #43a047; } .health-dot-warn { color: #ffa000; } .health-dot-stale { color: #e53935; } .health-dot-imported { color: #1565c0; } .health-dot-unknown { color: #bbb; } .health-row-info {} .health-row-name { font-weight: 600; color: #222; margin-bottom: 2px; } .health-row-meta { color: #888; font-size: 0.92em; } .health-row-count { font-size: 0.9em; font-weight: 600; color: #555; white-space: nowrap; text-align: right; } .health-row-errors { font-size: 0.8em; color: #e53935; margin-top: 2px; } /* ── Cross-market quality chips ───────────────────────────────────────────── */ .cm-quality-chips { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; } .cm-qchip { font-size: 11px; font-weight: 600; padding: 3px 10px; border: 1.5px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text2); cursor: pointer; transition: all var(--transition); white-space: nowrap; } .cm-qchip:hover { border-color: var(--green); color: var(--green); background: var(--green-light); } .cm-qchip.active { border-color: var(--green); background: var(--green-light); color: var(--green); } /* ── Top-picks panel ──────────────────────────────────────────────────────── */ #top-picks-panel { padding: 0 16px 32px; } .top-picks-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 0 14px; flex-wrap: wrap; } .top-picks-title { font-weight: 700; font-size: 1.05em; color: var(--accent); flex: 1; } .tp-quality-chips { display: flex; gap: 4px; flex-shrink: 0; } #top-picks-grid { display: flex; flex-direction: column; gap: 8px; } .tp-category { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow var(--transition); } .tp-category:hover { box-shadow: var(--shadow); } .tp-category.tp-open { border-color: var(--accent); } .tp-category-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; background: var(--surface2); } .tp-category-header:hover { background: var(--accent-light); } .tp-category.tp-open .tp-category-header { background: var(--accent-light); } .tp-category-name { font-weight: 600; font-size: 0.95em; flex: 1; color: var(--text); } .tp-category-count { font-size: 0.78em; color: var(--text2); flex-shrink: 0; } .tp-show-all-btn { font-size: 11px; font-weight: 600; padding: 3px 10px; border: 1px solid var(--accent); border-radius: 6px; background: none; color: var(--accent); cursor: pointer; flex-shrink: 0; transition: all var(--transition); } .tp-show-all-btn:hover { background: var(--accent); color: #fff; } .tp-chevron { font-size: 0.7em; color: var(--text3); flex-shrink: 0; } .tp-product-list { list-style: none; display: flex; flex-direction: column; } .tp-collapsed { display: none; } .tp-product-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); transition: background var(--transition); } .tp-product-row:hover { background: var(--surface2); } .tp-product-img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: var(--surface2); flex-shrink: 0; } .tp-no-img { display: flex; align-items: center; justify-content: center; font-size: 22px; } .tp-product-main { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tp-product-name { font-size: 0.85em; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tp-product-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tp-product-rate { font-size: 0.78em; font-weight: 700; color: var(--green); } .tp-product-reviews { font-size: 0.72em; color: var(--text2); } .tp-product-price { font-size: 0.75em; color: var(--text2); font-weight: 500; } .tp-product-src { font-size: 0.72em; color: var(--text3); margin-left: auto; } .tp-open-link { font-size: 0.9em; color: var(--accent); text-decoration: none; padding: 4px 8px; border-radius: 4px; flex-shrink: 0; transition: background var(--transition); } .tp-open-link:hover { background: var(--accent-light); } /* ── Movers panel ─────────────────────────────────────────────────────────── */ .movers-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .movers-title { font-size: 1em; font-weight: 600; color: var(--text1); flex: 1; } .movers-section { margin-bottom: 28px; } .movers-section-title { font-size: 0.88em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 0 8px; border-bottom: 2px solid; margin-bottom: 8px; } .mover-up-title { color: #43a047; border-color: #43a047; } .mover-down-title { color: #e53935; border-color: #e53935; } .movers-table { width: 100%; border-collapse: collapse; font-size: 0.85em; } .movers-table th { text-align: left; padding: 6px 8px; color: #888; font-weight: 500; border-bottom: 1px solid var(--border); white-space: nowrap; } .movers-table td { padding: 7px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; } .movers-table tr:hover td { background: #f9f9f9; } .mover-name a { color: var(--accent); text-decoration: none; } .mover-name a:hover { text-decoration: underline; } .mover-val { color: #555; text-align: right; white-space: nowrap; } .mover-date { font-size: 0.7em; color: #999; margin-top: 1px; } .mover-delta { font-weight: 700; text-align: right; white-space: nowrap; } .mover-pct { text-align: right; white-space: nowrap; font-size: 0.85em; color: #777; min-width: 52px; } .mover-up { color: #43a047; } .mover-down { color: #e53935; } /* ── Modal history / sparklines ──────────────────────────────────────────── */ .modal-history { padding: 16px 24px 20px; border-top: 2px solid var(--accent); margin-top: 4px; background: linear-gradient(180deg, rgba(67,160,71,.04) 0%, transparent 60px); } .modal-history-title { font-size: 0.82em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 14px; } #modal-history-chart { display: flex; flex-wrap: wrap; gap: 16px; } .sparkline-wrap { flex: 1 1 460px; min-width: 280px; max-width: 480px; } /* Flat/stable sparkline — no chart, just show value + "stable" note */ .sparkline-flat { display: flex; flex-direction: column; justify-content: center; } .sparkline-stable { display: flex; align-items: baseline; gap: 10px; padding: 10px 0 6px; } .sparkline-stable-val { font-size: 1.6em; font-weight: 800; line-height: 1; } .sparkline-stable-tag { font-size: 0.78em; color: var(--text3); } /* All-flat history: compact banner + metric grid */ .history-stable-banner { display: flex; align-items: flex-start; gap: 12px; background: #f0faf1; border: 1px solid #c8e6c9; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; } .history-stable-icon { font-size: 1.4em; } .history-stable-text { display: flex; flex-direction: column; gap: 2px; font-size: 0.9em; } .history-stable-text strong { color: #2e7d32; } .history-stable-text span { color: var(--text3); font-size: 0.88em; } .history-stable-metrics { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 14px; } .history-stable-metric { display: flex; flex-direction: column; gap: 2px; } .history-stable-label { font-size: 0.72em; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .04em; } .history-stable-val { font-size: 1.35em; font-weight: 800; } /* Early-tracking note */ .history-early-note { font-size: 0.82em; color: var(--text3); background: #f8f8f8; border-radius: 6px; padding: 7px 10px; margin-bottom: 10px; border-left: 3px solid #ccc; } .sparkline-label { font-size: 0.78em; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .sparkline-canvas { position: relative; } .sparkline-svg { display: block; overflow: visible; width: 100%; height: auto; cursor: crosshair; } .spark-tooltip { position: absolute; top: -4px; transform: translate(-50%, -100%); background: #222; color: #fff; font-size: 0.72em; padding: 4px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; transition: opacity 0.08s ease-out; z-index: 5; } .sparkline-footer { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 0.74em; margin-top: 4px; } .sparkline-range { color: #aaa; } .sparkline-last { color: #222; font-weight: 600; } .sparkline-delta { font-weight: 700; } /* ── Product card: "has price/rating history" badge ──────────────────────── */ /* ── Rating delta chip on product cards ─────────────────────────────────── */ .card-delta-row { margin: 4px 0 2px; } .delta-chip { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: 0.75em; font-weight: 600; letter-spacing: 0.01em; cursor: default; white-space: nowrap; } .delta-up { background: rgba(34, 197, 94, 0.15); color: #16a34a; border: 1px solid rgba(34, 197, 94, 0.3); } .delta-down { background: rgba(239, 68, 68, 0.12); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.25); } .delta-up-price { background: rgba(239, 68, 68, 0.10); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.2); } .delta-down-price { background: rgba(34, 197, 94, 0.12); color: #15803d; border: 1px solid rgba(34, 197, 94, 0.25); } /* ── Inline history strip on product cards ───────────────────────────────── */ .card-history-strip { margin-top: 8px; padding: 8px 10px; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.22); border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .card-history-strip:hover { background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.35); } /* Green border for price drops, red for price rises, purple for rating-only */ .card-history-strip.hist-strip-drop { background: rgba(22, 163, 74, 0.09); border-color: rgba(22, 163, 74, 0.38); border-left: 3px solid rgba(22, 163, 74, 0.55); } .card-history-strip.hist-strip-drop:hover { background: rgba(22, 163, 74, 0.15); border-color: rgba(22, 163, 74, 0.55); } .card-history-strip.hist-strip-rise { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.30); border-left: 3px solid rgba(220, 38, 38, 0.45); } .card-history-strip.hist-strip-rise:hover { background: rgba(220, 38, 38, 0.14); border-color: rgba(220, 38, 38, 0.45); } .card-history-strip.hist-strip-rating { background: rgba(109, 40, 217, 0.08); border-color: rgba(109, 40, 217, 0.28); } .card-history-strip.hist-strip-rating:hover { background: rgba(109, 40, 217, 0.14); border-color: rgba(109, 40, 217, 0.42); } .card-history-strip.stable { display: flex; align-items: center; gap: 5px; background: rgba(59, 130, 246, 0.07); border-color: rgba(59, 130, 246, 0.22); padding: 6px 10px; cursor: pointer; } .card-history-strip.stable:hover { background: rgba(59, 130, 246, 0.13); border-color: rgba(59, 130, 246, 0.38); } .hist-icon { font-size: 0.85em; } .hist-stable-lbl { font-size: 0.78em; font-weight: 600; color: #3b82f6; } .hist-stable-metric { font-size: 0.72em; font-weight: 600; color: var(--text3); background: rgba(0,0,0,.04); border-radius: 4px; padding: 1px 5px; } .hist-stable-metric.hist-good { color: var(--green); background: rgba(5,150,105,.08); } .hist-stable-metric.hist-bad { color: var(--red); background: rgba(220,38,38,.08); } .hist-chart-hint { font-size: 0.7em; color: var(--accent); margin-left: auto; } .hist-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .hist-title { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text2); } .hist-days { font-size: 0.7em; color: var(--text3); font-weight: 500; } .hist-body { display: flex; align-items: center; gap: 10px; } .card-sparkline { flex-shrink: 0; border-radius: 3px; overflow: visible; } .hist-changes { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .hist-row { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; } .hist-lbl { font-size: 0.7em; color: var(--text3); min-width: 32px; } .hist-val { font-size: 0.8em; font-weight: 700; white-space: nowrap; } .hist-sub { font-size: 0.68em; color: var(--text3); white-space: nowrap; } .hist-good { color: #16a34a; } .hist-bad { color: #dc2626; } .hist-neutral { color: var(--text2); } /* dark mode */ [data-theme="dark"] .card-history-strip { background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.25); } [data-theme="dark"] .card-history-strip:hover { background: rgba(59, 130, 246, 0.17); border-color: rgba(59, 130, 246, 0.38); } [data-theme="dark"] .card-history-strip.hist-strip-drop { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.40); border-left: 3px solid rgba(22, 163, 74, 0.65); } [data-theme="dark"] .card-history-strip.hist-strip-rise { background: rgba(220, 38, 38, 0.11); border-color: rgba(220, 38, 38, 0.36); border-left: 3px solid rgba(220, 38, 38, 0.55); } [data-theme="dark"] .card-history-strip.stable { background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.28); } [data-theme="dark"] .hist-good { color: #4ade80; } [data-theme="dark"] .hist-bad { color: #f87171; } [data-theme="dark"] .hist-stable-lbl { color: #93c5fd; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card-history-strip { background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.25); } :root:not([data-theme="light"]) .card-history-strip:hover { background: rgba(59, 130, 246, 0.17); border-color: rgba(59, 130, 246, 0.38); } :root:not([data-theme="light"]) .card-history-strip.hist-strip-drop { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.40); border-left: 3px solid rgba(22, 163, 74, 0.65); } :root:not([data-theme="light"]) .card-history-strip.hist-strip-rise { background: rgba(220, 38, 38, 0.11); border-color: rgba(220, 38, 38, 0.36); border-left: 3px solid rgba(220, 38, 38, 0.55); } :root:not([data-theme="light"]) .card-history-strip.stable { background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.28); } :root:not([data-theme="light"]) .hist-good { color: #4ade80; } :root:not([data-theme="light"]) .hist-bad { color: #f87171; } :root:not([data-theme="light"]) .hist-stable-lbl { color: #93c5fd; } } /* ── Full-history table inside modal ─────────────────────────────────────── */ .history-table-toggle { margin-top: 12px; background: transparent; border: none; color: #1565c0; font-size: 0.85em; cursor: pointer; padding: 4px 0; } .history-table-toggle:hover { text-decoration: underline; } .history-table { width: 100%; border-collapse: collapse; font-size: 0.85em; margin-top: 8px; } .history-table th, .history-table td { padding: 6px 10px; border-bottom: 1px solid #eee; text-align: left; } .history-table th { background: #fafafa; color: #666; font-weight: 600; position: sticky; top: 0; } .history-table tbody tr:hover { background: #fafafa; } /* ── Brands leaderboard ─────────────────────────────────────────────────────── */ .brands-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #1a1a1a; border-bottom: 1px solid #2a2a2a; flex-wrap: wrap; } .brands-title { font-weight: 600; font-size: 1em; color: #e0e0e0; white-space: nowrap; } .brands-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .brands-count { padding: 8px 16px; font-size: 0.82em; color: #888; } .brands-table-wrap { overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 220px); } .brands-table { width: 100%; border-collapse: collapse; font-size: 0.88em; } .brands-th { padding: 10px 14px; text-align: left; font-weight: 600; font-size: 0.82em; color: #aaa; text-transform: uppercase; letter-spacing: 0.04em; background: #1a1a1a; position: sticky; top: 0; z-index: 1; border-bottom: 2px solid #2a2a2a; white-space: nowrap; } .brands-th.sortable { cursor: pointer; user-select: none; } .brands-th.sortable:hover { color: #e0e0e0; background: #222; } .brands-th.sorted { color: #4da3ff; } .brands-row td { padding: 9px 14px; border-bottom: 1px solid #222; color: #d0d0d0; white-space: nowrap; } .brands-row:hover td { background: #1e2a36; } .brand-rank { display: inline-block; min-width: 28px; font-size: 0.78em; color: #666; font-weight: 600; } /* Inline star bar */ .brand-star-bar { display: inline-block; vertical-align: middle; width: 60px; height: 6px; background: #2a2a2a; border-radius: 3px; margin-left: 6px; position: relative; overflow: hidden; } .brand-star-bar::after { content: ""; position: absolute; inset: 0; width: var(--pct, 0%); background: linear-gradient(90deg, #f59e0b, #fcd34d); border-radius: 3px; } /* ── Auth button in header ───────────────────────────────────────────────── */ .auth-btn { cursor: pointer; background: rgba(79,70,229,.12); border: 1px solid rgba(79,70,229,.3); color: var(--accent); font-weight: 600; gap: 5px; transition: background var(--transition); } .auth-btn:hover { background: rgba(79,70,229,.22); } .auth-btn.logged-in { background: rgba(5,150,105,.10); border-color: rgba(5,150,105,.3); color: var(--green); } /* ── Auth modal ──────────────────────────────────────────────────────────── */ .auth-modal { max-width: 540px; width: 94vw; max-height: 90vh; overflow-y: auto; padding: 32px 36px 28px; } .auth-modal-content { display: flex; flex-direction: column; gap: 0; } .auth-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 0; } .auth-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 16px; font-size: 0.9em; font-weight: 500; color: var(--text2); cursor: pointer; margin-bottom: -1px; transition: color var(--transition), border-color var(--transition); } .auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .auth-tab:hover:not(.active) { color: var(--text); } .auth-title { font-size: 1.3em; font-weight: 700; color: var(--text); margin-bottom: 6px; } .auth-subtitle { font-size: 0.85em; color: var(--text2); line-height: 1.5; margin-bottom: 18px; } .auth-form { display: flex; flex-direction: column; gap: 14px; } .auth-field { display: flex; flex-direction: column; gap: 5px; } .auth-field label { font-size: 0.82em; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .03em; } .auth-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text3); } .auth-field input, .auth-field select, .auth-field textarea { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 0.95em; color: var(--text); outline: none; transition: border-color var(--transition); font-family: inherit; resize: vertical; } .auth-field input:focus, .auth-field select:focus, .auth-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,.12); } .auth-research-questions { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .auth-research-intro { font-size: 0.82em; color: var(--text2); font-style: italic; } .auth-error { color: var(--red); font-size: 0.85em; min-height: 18px; font-weight: 500; } .auth-submit { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 11px 20px; font-size: 0.95em; font-weight: 600; cursor: pointer; margin-top: 4px; transition: background var(--transition); } .auth-submit:hover { background: var(--accent-hover); } .auth-submit:disabled { opacity: .6; cursor: not-allowed; } /* ── Contribution source breakdown ────────────────────────────────────────── */ .my-contrib-breakdown { padding: 8px 0 4px; font-size: 0.8em; } .mcb-title { color: var(--text2); font-weight: 600; margin: 0 0 4px; } .mcb-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; } .mcb-src { color: var(--text); font-weight: 500; min-width: 90px; } .mcb-count { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; } .mcb-detail { color: var(--text3); font-size: 0.9em; } /* ── Bookmarklet section (post-login panel) ──────────────────────────────── */ .bookmarklet-section { display: flex; flex-direction: column; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .bm-heading { font-size: 1em; font-weight: 700; color: var(--text); margin: 0; } .bm-sub { font-size: 0.82em; color: var(--text2); margin: -8px 0 0; } .bm-step { display: flex; align-items: flex-start; gap: 10px; } .bm-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.75em; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .bm-step-body { display: flex; flex-direction: column; gap: 6px; flex: 1; font-size: 0.85em; color: var(--text); } .bm-step-body strong { font-weight: 600; } .bm-hint { font-size: 0.8em; color: var(--text2); margin: 0; line-height: 1.45; } .bm-hint kbd { background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-family: monospace; font-size: 0.9em; } .bm-drag-btn { display: inline-block; padding: 8px 18px; background: var(--green); color: #fff; font-weight: 700; font-size: 0.9em; border-radius: 8px; text-decoration: none; cursor: grab; user-select: none; align-self: flex-start; transition: opacity var(--transition); margin: 2px 0; } .bm-drag-btn:hover { opacity: 0.88; } .bm-drag-btn:active { cursor: grabbing; } .bm-fallback { font-size: 0.75em; color: var(--text3); margin: 0; } .bm-links { display: flex; flex-wrap: wrap; gap: 6px; } .bm-links a { font-size: 0.8em; color: var(--accent); text-decoration: none; padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; transition: all var(--transition); white-space: nowrap; } .bm-links a:hover { border-color: var(--accent); background: var(--accent-light); } .bm-supported { font-size: 0.75em; color: var(--text3); margin: 0; } .bm-advanced { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .bm-advanced summary { font-size: 0.82em; color: var(--text2); padding: 8px 12px; cursor: pointer; user-select: none; list-style: none; } .bm-advanced summary::-webkit-details-marker { display: none; } .bm-advanced summary:hover { background: var(--surface2); } .bm-advanced .user-download-section { padding: 10px 12px; border-top: 1px solid var(--border); } /* ── Registration checkbox group (Q2) ────────────────────────────────────── */ .auth-checkbox-group { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 4px; } .auth-checkbox-item { display: flex; align-items: center; gap: 6px; font-size: 0.83em; color: var(--text2); cursor: pointer; user-select: none; } .auth-checkbox-item input[type=checkbox] { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); } /* ── Super-category pills ─────────────────────────────────────────────────── */ .super-cat-pill { font-weight: 700; font-size: 0.85em; padding: 5px 16px; border-radius: 20px; border: 2px solid var(--border); background: var(--surface); color: var(--text2); cursor: pointer; transition: all var(--transition); white-space: nowrap; } .super-cat-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .super-cat-pill.cat-pill-active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); } /* ── Logged-in user panel ────────────────────────────────────────────────── */ .user-panel { display: flex; flex-direction: column; gap: 18px; } .user-welcome { display: flex; align-items: center; gap: 14px; } .user-avatar { font-size: 2.2em; line-height: 1; } .user-email { font-size: 1em; font-weight: 600; color: var(--text); } .user-country { font-size: 0.82em; color: var(--text2); margin-top: 2px; } .user-stats { display: flex; gap: 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; } .user-stat { display: flex; flex-direction: column; align-items: center; flex: 1; } .user-stat-val { font-size: 1.4em; font-weight: 700; color: var(--accent); } .user-stat-label { font-size: 0.75em; color: var(--text2); text-align: center; margin-top: 2px; } .user-download-section { display: flex; flex-direction: column; gap: 10px; } .user-download-section > p { font-size: 0.88em; color: var(--text2); } .user-token-box { display: flex; align-items: center; gap: 8px; background: #1a1a2e; border: 1px solid #333; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.78em; color: #a0aec0; overflow-x: auto; } .user-token-box code { flex: 1; white-space: nowrap; } .copy-token-btn { background: none; border: none; cursor: pointer; font-size: 1.1em; padding: 2px 4px; border-radius: 4px; transition: background var(--transition); flex-shrink: 0; } .copy-token-btn:hover { background: rgba(255,255,255,.1); } .download-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.87em; font-weight: 500; color: var(--text); text-decoration: none; width: fit-content; transition: background var(--transition), border-color var(--transition); } .download-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); } .auth-logout-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 16px; font-size: 0.85em; color: var(--text2); cursor: pointer; align-self: flex-start; transition: border-color var(--transition), color var(--transition); } .auth-logout-btn:hover { border-color: var(--red); color: var(--red); } /* ── Dark-mode specific overrides for hard-coded colours ───────────────────── Most components use CSS variables and work automatically in dark mode. These rules fix elements with hard-coded light colours. Each rule appears twice: once for data-theme="dark" (manual toggle) and once inside @media (prefers-color-scheme: dark) for OS-preference auto-mode. */ /* Source badges – desaturate bright light backgrounds */ [data-theme="dark"] .source-badge { filter: brightness(0.65) saturate(0.75); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .source-badge { filter: brightness(0.65) saturate(0.75); } } /* Score badges */ [data-theme="dark"] .wt-befriedigend, [data-theme="dark"] .ir-badge.ir-mid, [data-theme="dark"] .ir-modal-score.ir-mid { background: #3d2600; color: #fbbf24; border-color: #78350f; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wt-befriedigend, :root:not([data-theme="light"]) .ir-badge.ir-mid, :root:not([data-theme="light"]) .ir-modal-score.ir-mid { background: #3d2600; color: #fbbf24; border-color: #78350f; } } /* Freshness chips */ [data-theme="dark"] .modal-freshness.fresh-new { background: #052e16; color: #6ee7b7; } [data-theme="dark"] .modal-freshness.fresh-ok { background: #3b2500; color: #fde68a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modal-freshness.fresh-new { background: #052e16; color: #6ee7b7; } :root:not([data-theme="light"]) .modal-freshness.fresh-ok { background: #3b2500; color: #fde68a; } } /* Card image area */ [data-theme="dark"] .card-img-placeholder { background: var(--surface2); } [data-theme="dark"] .card-img-wrap { background: linear-gradient(90deg, #1e293b 25%, #263042 50%, #1e293b 75%); background-size: 200% 100%; animation: img-shimmer 1.4s ease-in-out infinite; } [data-theme="dark"] .card-product-img { background: transparent; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card-img-placeholder { background: var(--surface2); } :root:not([data-theme="light"]) .card-img-wrap { background: linear-gradient(90deg, #1e293b 25%, #263042 50%, #1e293b 75%); background-size: 200% 100%; animation: img-shimmer 1.4s ease-in-out infinite; } :root:not([data-theme="light"]) .card-product-img { background: transparent; } } /* Search highlight */ [data-theme="dark"] mark.hl { background: rgba(250,204,21,.28); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) mark.hl { background: rgba(250,204,21,.28); } } /* History badge */ [data-theme="dark"] .history-badge { background: linear-gradient(135deg,#052e16,#064e3b); border-color: #065f46; color: #6ee7b7; } [data-theme="dark"] .history-badge:hover { background: linear-gradient(135deg,#064e3b,#065f46); box-shadow: 0 2px 10px rgba(16,185,129,.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .history-badge { background: linear-gradient(135deg,#052e16,#064e3b); border-color: #065f46; color: #6ee7b7; } } /* New badge */ [data-theme="dark"] .new-badge { background: #1e3a5f; color: #93c5fd; border-color: #1e40af; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .new-badge { background: #1e3a5f; color: #93c5fd; border-color: #1e40af; } }