/* ================================================================ SniffReviews.com — Design System Light + Dark theme via [data-theme="dark"] on Two-tone brand: Navy #1C3F6E + Gold #C47E0D ================================================================ */ /* ── Light tokens (default) ────────────────────────────────────────── */ :root { --bg: #F7F4EF; --bg-alt: #EDE8DF; --s1: #FFFFFF; --s2: #F7F4EF; --s3: #EDE8DF; --border: #DDD6C8; --border-dim: #EDE8DF; --blue: #1C3F6E; --blue-d: #152E52; --blue-light: #2D5494; --blue-glow: rgba(28,63,110,0.18); --blue-subtle: rgba(28,63,110,0.07); --accent: #C47E0D; --accent-d: #A86809; --accent-subtle: rgba(196,126,13,0.09); --accent-glow: rgba(196,126,13,0.22); --purple: #7C3AED; --green: #059669; --amber: #D97706; --red: #DC2626; --text: #1A2332; --text-soft: #475569; --text-dim: #94A3B8; --radius: 14px; --radius-lg: 20px; --radius-sm: 10px; --radius-xl: 28px; --shadow-xs: 0 1px 3px rgba(20,35,65,0.07); --shadow: 0 2px 4px rgba(20,35,65,0.08), 0 4px 16px rgba(20,35,65,0.05); --shadow-md: 0 4px 14px rgba(20,35,65,0.10), 0 8px 32px rgba(20,35,65,0.06); --shadow-lg: 0 8px 32px rgba(20,35,65,0.12), 0 2px 8px rgba(20,35,65,0.07); } /* ── Dark tokens ────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0F1318; --bg-alt: #090C11; --s1: #17202C; --s2: #1C2535; --s3: #20293E; --border: #2C3A50; --border-dim: #1B2840; --blue-glow: rgba(45,84,148,0.30); --blue-subtle: rgba(45,84,148,0.14); --accent-subtle: rgba(196,126,13,0.14); --accent-glow: rgba(196,126,13,0.28); --text: #E2E8F0; --text-soft: #94A3B8; --text-dim: #4A5568; --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 8px 32px rgba(0,0,0,0.3); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); } /* ── Reset & Base ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background 0.3s, color 0.3s; } h1,h2,h3,h4,h5,h6 { color: var(--text); font-weight: 700; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--blue-d); text-decoration: underline; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } /* ── Page Shell ─────────────────────────────────────────────────────── */ .sr-page { display: flex; flex-direction: column; min-height: 100vh; padding-top: 63px; } .sr-app-body { display: flex; flex: 1; min-height: 0; padding-left: 0; } /* .sr-app-body:has(.sr-ln-collapsed) { padding-left: 56px; } — left nav hidden */ .sr-main { flex: 1; min-width: 0; } /* ── Navbar ─────────────────────────────────────────────────────────── */ .sr-navbar { background: color-mix(in srgb, var(--s1) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); position: fixed; top: 0; left: 0; right: 0; z-index: 200; box-shadow: var(--shadow-xs); transition: background 0.3s, border-color 0.3s; } /* Animated top accent line */ .sr-navbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--blue), var(--accent), var(--blue)); background-size: 200% auto; animation: navAccent 5s linear infinite; } @keyframes navAccent { to { background-position: 200% center; } } /* Inner: logo left, actions right */ .sr-navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; padding: 0 1.25rem; } /* Left */ .sr-nav-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .sr-nav-links { display: flex; align-items: center; gap: 0.1rem; } .sr-nav-link { font-size: 0.82rem; font-weight: 600; color: var(--text-soft); text-decoration: none; padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s; white-space: nowrap; } .sr-nav-link:hover { color: var(--text); background: var(--s2); } .sr-nav-link.active { color: var(--blue); } /* Vertical divider */ .sr-nav-divider-v { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; } /* Center: truly centered search pill */ .sr-nav-search-pill { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 1rem; background: var(--s2); border: 1.5px solid var(--border); border-radius: 99px; color: var(--text-dim); font-size: 0.8rem; font-weight: 500; text-decoration: none; transition: all 0.18s; width: 240px; box-shadow: var(--shadow-xs); } .sr-nav-search-pill:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-subtle); box-shadow: 0 0 0 3px var(--blue-glow); width: 260px; } .sr-nsp-icon { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.55; } .sr-nsp-text { flex: 1; } .sr-nsp-kbd { font-size: 0.62rem; font-weight: 700; background: var(--s1); border: 1px solid var(--border); border-radius: 4px; padding: 0.1rem 0.35rem; color: var(--text-dim); flex-shrink: 0; font-family: inherit; } .sr-nav-search-pill:hover .sr-nsp-icon { opacity: 1; } /* Right */ .sr-nav-right { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; } .sr-brand img { width: 96px; height: auto; display: block; } /* Show black logo on light theme, white logo on dark theme */ .sr-logo-dark { display: none !important; } .sr-logo-light { display: block !important; } [data-theme="dark"] .sr-logo-light { display: none !important; } [data-theme="dark"] .sr-logo-dark { display: block !important; } .sr-theme-btn { background: var(--s2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); width: 38px; height: 38px; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.18s, border-color 0.18s, transform 0.15s; flex-shrink: 0; } .sr-theme-btn:hover { background: var(--blue-subtle); border-color: var(--blue); transform: rotate(20deg) scale(1.1); } /* Nav links & dropdown */ .sr-nav-link { color: var(--text-soft) !important; font-size: 0.9rem; font-weight: 600; padding: 0.45rem 0.75rem !important; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s; } .sr-nav-link:hover, .sr-nav-link.show { color: var(--blue) !important; background: var(--blue-subtle); text-decoration: none !important; } .sr-nav-dropdown { background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 0.35rem 0; min-width: 200px; } .sr-nav-dd-item { display: flex !important; align-items: center; gap: 0.55rem; padding: 0.55rem 1rem !important; color: var(--text) !important; font-size: 0.88rem; font-weight: 500; transition: background 0.12s, color 0.12s; cursor: pointer; } .sr-nav-dd-item:hover { background: var(--blue-subtle) !important; color: var(--blue) !important; text-decoration: none !important; } .sr-nav-dd-icon { font-size: 1rem; flex-shrink: 0; } .sr-nav-divider { border-color: var(--border-dim); margin: 0.3rem 0; } .sr-nav-dd-soon { opacity: 0.6; cursor: default; } .sr-nav-dd-soon:hover { background: transparent !important; color: var(--text) !important; } .sr-nav-soon-badge { margin-left: auto; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--s3); color: var(--text-dim); border: 1px solid var(--border); border-radius: 99px; padding: 0.1rem 0.45rem; } .sr-nav-toggler { background: var(--s2); border: 1.5px solid var(--border); border-radius: var(--radius-sm); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; } .sr-nav-toggler:focus { box-shadow: none; } .sr-nav-toggler-icon { display: block; width: 18px; height: 2px; background: var(--text); position: relative; transition: background 0.2s; } .sr-nav-toggler-icon::before, .sr-nav-toggler-icon::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: var(--text); transition: transform 0.2s; } .sr-nav-toggler-icon::before { top: -5px; } .sr-nav-toggler-icon::after { top: 5px; } /* ── Footer ─────────────────────────────────────────────────────────── */ .sr-footer { background: var(--s1); border-top: 1px solid var(--border); color: var(--text-dim); text-align: center; padding: 1.5rem 0; font-size: 0.82rem; } /* ── Buttons ─────────────────────────────────────────────────────────── */ .sr-btn-primary, .sr-btn-nav { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--blue); color: #fff !important; border: none; padding: 0.72rem 1.5rem; border-radius: 99px; font-size: 0.9rem; font-weight: 700; cursor: pointer; letter-spacing: -0.01em; transition: background 0.18s, transform 0.1s, box-shadow 0.18s; box-shadow: 0 2px 12px var(--blue-glow); text-decoration: none !important; white-space: nowrap; } .sr-btn-primary:hover:not(:disabled), .sr-btn-nav:hover { background: var(--blue-d); transform: translateY(-2px); box-shadow: 0 6px 24px var(--blue-glow); color: #fff !important; text-decoration: none !important; } .sr-btn-primary:disabled { opacity: 0.35; cursor: not-allowed; } .sr-btn-ghost { background: var(--s2); color: var(--text-soft); border: 1.5px solid var(--border); padding: 0.6rem 1.2rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.18s; white-space: nowrap; font-family: inherit; } .sr-btn-ghost:hover { background: var(--blue-subtle); border-color: var(--blue); color: var(--blue); transform: translateY(-1px); text-decoration: none; } /* ── Gradient text ──────────────────────────────────────────────────── */ .sr-gradient-text { background: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ================================================================ HERO ================================================================ */ .sr-hero { position: relative; background: var(--s1); border-bottom: 1px solid var(--border); padding: 3rem 0 2.5rem; transition: background 0.3s; z-index: 1; } .sr-hero-mesh { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 10% 5%, rgba(28,63,110,0.08) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 90% 90%, rgba(196,126,13,0.07) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 60% 20%, rgba(28,63,110,0.05) 0%, transparent 50%); pointer-events: none; } [data-theme="dark"] .sr-hero-mesh { background: radial-gradient(ellipse 70% 60% at 10% 5%, rgba(45,84,148,0.12) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 90% 90%, rgba(249,115,22,0.1) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 60% 20%, rgba(45,84,148,0.08) 0%, transparent 50%); } .min-vh-hero { min-height: unset; } .sr-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--blue-subtle); border: 1px solid rgba(28,63,110,0.2); color: var(--blue); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.32rem 1rem; border-radius: 99px; margin-bottom: 1.5rem; } .sr-hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: pulseDot 2s ease-in-out infinite; } @keyframes pulseDot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.35; transform:scale(0.65); } } .sr-hero-title { font-size: clamp(2.5rem, 5.5vw, 4rem); font-weight: 900; line-height: 1.06; letter-spacing: -0.05em; color: var(--text); margin-bottom: 1.25rem; } .sr-hero-sub { font-size: clamp(0.95rem, 1.8vw, 1.05rem); color: var(--text-soft); margin-bottom: 2.25rem; max-width: 480px; line-height: 1.7; } /* Search */ .sr-search-wrap { max-width: 560px; } /* Sniff wave rings — emanate from the BUTTON on any search-box focus */ .sr-search-box:focus-within .sr-search-btn::before, .sr-search-box:focus-within .sr-search-btn::after { content: ''; position: absolute; inset: 0; border-radius: 99px; border: 2px solid var(--blue); pointer-events: none; animation: sniffRing 2.2s ease-out infinite; opacity: 0; } .sr-search-box:focus-within .sr-search-btn::after { animation-delay: 1.1s; } .sr-search-box { display: flex; gap: 0.45rem; background: var(--s1); border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 0.38rem; box-shadow: var(--shadow-md); transition: border-color 0.2s, box-shadow 0.2s; } .sr-search-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow), var(--shadow-md); } .sr-search-input { flex: 1; background: transparent; border: none; font-size: 0.97rem; color: var(--text); padding: 0.65rem 1rem; font-family: inherit; outline: none; min-width: 0; } .sr-search-input::placeholder { color: var(--text-dim); } @keyframes sniffBreathe { 0%, 100% { transform: scale(1); box-shadow: 0 2px 12px var(--blue-glow); } 50% { transform: scale(1.06); box-shadow: 0 4px 28px var(--blue-glow), 0 0 0 8px rgba(59,130,246,0.10); } } @keyframes sniffRing { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.2); opacity: 0; } } .sr-search-validation { font-size: 0.8rem; color: var(--accent); margin-top: 0.4rem; padding-left: 0.25rem; } .sr-search-btn { background: var(--blue); color: #fff; border: none; padding: 0.65rem 1.3rem; border-radius: 99px; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: background 0.18s; white-space: nowrap; flex-shrink: 0; font-family: inherit; position: relative; } .sr-search-btn:not(:disabled) { animation: sniffBreathe 2.6s ease-in-out infinite; } /* Waves on button when valid selection — override the focus-within waves */ .sr-search-btn:not(:disabled)::before, .sr-search-btn:not(:disabled)::after { content: ''; position: absolute; inset: 0; border-radius: 99px; border: 2px solid var(--blue); pointer-events: none; animation: sniffRing 2.6s ease-out infinite; opacity: 0; } .sr-search-btn:not(:disabled)::after { animation-delay: 1.3s; } .sr-search-btn:hover:not(:disabled) { background: var(--blue-d); animation: none; transform: scale(1.04); box-shadow: 0 4px 20px var(--blue-glow); } .sr-search-btn:hover:not(:disabled)::before, .sr-search-btn:hover:not(:disabled)::after { display: none; } /* While typing (disabled) — dim pulse so it's not dead */ .sr-search-box:focus-within .sr-search-btn:disabled { opacity: 0.55; animation: sniffBreathe 2.6s ease-in-out infinite; } /* ================================================================ BROWSE CONTENT — "Trending Now" breathing label ================================================================ */ .sr-trending-label { display: inline-flex; align-items: center; gap: 0.42rem; margin-bottom: 0.75rem; } .sr-tl-dot { width: 6px; height: 6px; border-radius: 50%; background: #f97316; flex-shrink: 0; animation: tlDotPulse 2.2s ease-out infinite; } @keyframes tlDotPulse { 0% { box-shadow: 0 0 0 0 rgba(196,126,13,0.7); } 70% { box-shadow: 0 0 0 5px rgba(196,126,13,0); } 100%{ box-shadow: 0 0 0 0 rgba(196,126,13,0); } } .sr-tl-text { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; animation: tlBreath 2.8s ease-in-out infinite; } @keyframes tlBreath { 0%, 100% { color: var(--text-dim); text-shadow: none; } 50% { color: #f97316; text-shadow: 0 0 10px rgba(196,126,13,0.45), 0 0 20px rgba(249,115,22,0.2); } } /* Quick chips */ .sr-quick-searches { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .sr-quick-label { color: var(--text-dim); font-size: 0.8rem; font-weight: 500; } .sr-chip { background: var(--s1); color: var(--text-soft); border: 1px solid var(--border); border-radius: 99px; padding: 0.28rem 0.9rem; font-size: 0.78rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.18s; box-shadow: var(--shadow-xs); } .sr-chip:hover { background: var(--blue-subtle); border-color: var(--blue); color: var(--blue); transform: translateY(-1px); } /* Hero stats */ .sr-hero-stats { display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-evenly; background: var(--s1); border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 1.4rem 2.5rem; box-shadow: var(--shadow-sm); width: 100%; } .sr-hstat { display: flex; flex-direction: column; align-items: center; } .sr-hstat-num { font-size: 2.2rem; font-weight: 900; color: var(--blue); letter-spacing: -0.04em; line-height: 1; white-space: nowrap; } .sr-hstat-label { font-size: 0.72rem; color: var(--text-dim); font-weight: 500; margin-top: 0.3rem; white-space: nowrap; } .sr-hstat-div { width:1px; height:40px; background: var(--border); flex-shrink: 0; } /* Hero preview card */ @keyframes floatCard { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .sr-hero-preview { background: var(--s1); border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 1.75rem; width: 360px; box-shadow: var(--shadow-lg); animation: floatCard 4s ease-in-out infinite; position: relative; } .sr-preview-chip { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--blue), var(--accent)); color: #fff; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.22rem 0.9rem; border-radius: 99px; white-space: nowrap; } .sr-preview-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-dim); } .sr-preview-device { font-size: 0.95rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; } .sr-preview-sub { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.2rem; } .sr-preview-thumb { font-size: 2.2rem; line-height: 1; } .sr-preview-verdict { font-size:0.72rem; font-weight:800; letter-spacing:0.1em; padding:0.3rem 0.8rem; border-radius:99px; flex-shrink:0; } .sr-verdict-buy { background:rgba(5,150,105,0.12); color:#059669; border:1.5px solid rgba(5,150,105,0.3); } .sr-verdict-consider{ background:rgba(217,119,6,0.12); color:#D97706; border:1.5px solid rgba(217,119,6,0.3); } .sr-verdict-avoid { background:rgba(220,38,38,0.12); color:#DC2626; border:1.5px solid rgba(220,38,38,0.3); } .sr-preview-score-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1rem; } .sr-preview-score-block { text-align:center; flex-shrink:0; } .sr-preview-score-num { font-size: 3rem; font-weight: 900; color: var(--green); letter-spacing: -0.06em; line-height: 1; } .sr-preview-score-label { font-size: 0.67rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; } .sr-preview-bars { flex:1; display:flex; flex-direction:column; gap:0.5rem; } .sr-preview-bar-row { display:flex; align-items:center; gap:0.5rem; } .sr-pb-label { font-size:0.68rem; color:var(--text-dim); font-weight:500; width:50px; flex-shrink:0; } .sr-pb-track { flex:1; height:6px; background:var(--bg-alt); border-radius:99px; overflow:hidden; } .sr-pb-fill { height:100%; border-radius:99px; } .sr-pb-pos { background: linear-gradient(90deg,#059669,#34D399); } .sr-pb-neu { background: linear-gradient(90deg,#D97706,#FBBF24); } .sr-pb-neg { background: linear-gradient(90deg,#DC2626,#F87171); } .sr-pb-pct { font-size:0.7rem; font-weight:700; color:var(--text-soft); width:28px; text-align:right; flex-shrink:0; } .sr-preview-opinions { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-bottom:1rem; padding:0.85rem; background:var(--bg-alt); border-radius:var(--radius); } .sr-preview-ops-title { font-size:0.65rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; margin-bottom:0.4rem; } .sr-ops-love { color:#059669; } .sr-ops-hate { color:#DC2626; } .sr-preview-op { font-size:0.71rem; color:var(--text-soft); padding:0.15rem 0; border-bottom:1px solid var(--border-dim); } .sr-preview-op:last-child { border-bottom:none; } .sr-preview-tags { display:grid; grid-template-columns:repeat(3,1fr); gap:0.35rem; padding-top:0.85rem; border-top:1px solid var(--border-dim); } .sr-preview-tag { font-size:0.68rem; font-weight:600; padding:0.22rem 0.55rem; border-radius:99px; border:1.5px solid transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sr-ptag-blue { background:rgba(28,63,110,0.07); color:var(--blue); border-color:rgba(28,63,110,0.2); } .sr-ptag-green { background:rgba(5,150,105,0.07); color:var(--green); border-color:rgba(5,150,105,0.2); } .sr-ptag-orange { background:rgba(196,126,13,0.07); color:var(--accent); border-color:rgba(249,115,22,0.2); } .sr-ptag-purple { background:rgba(124,58,237,0.07); color:var(--purple); border-color:rgba(124,58,237,0.2); } /* ================================================================ BROWSE SECTION — sidebar + grid ================================================================ */ .sr-browse-section { background: var(--bg); border-bottom: 1px solid var(--border); transition: background 0.3s; } .sr-browse-content { max-width: 1400px; margin: 0 auto; padding: 1rem 2.5rem 1.25rem; } /* ── Nav Tree Sidebar ──────────────────────────────────────────────── */ .sr-nav-tree { width: 270px; flex-shrink: 0; position: sticky; top: 65px; height: calc(100vh - 65px); overflow-y: auto; border-right: 1px solid var(--border); background: var(--s1); display: flex; flex-direction: column; padding-bottom: 2rem; /* Slim scrollbar */ scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .sr-nt-header { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.2rem 0.9rem; position: sticky; top: 0; background: var(--s1); border-bottom: 1px solid var(--border-dim); z-index: 1; } .sr-nt-title { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); } .sr-nt-close { background: none; border: none; color: var(--text-dim); font-size: 1rem; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: var(--radius-sm); transition: background 0.12s, color 0.12s; } .sr-nt-close:hover { background: var(--s3); color: var(--text); } /* Category row */ .sr-nt-cat-hd { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.7rem 1.2rem; border: none; background: transparent; color: var(--text-soft); font-size: 0.9rem; font-weight: 700; font-family: inherit; cursor: pointer; text-align: left; transition: background 0.13s, color 0.13s; letter-spacing: -0.01em; } .sr-nt-cat-hd:hover { background: var(--blue-subtle); color: var(--blue); } .sr-nt-cat.open > .sr-nt-cat-hd { color: var(--blue); background: var(--blue-subtle); } .sr-nt-cat-icon { font-size: 1rem; flex-shrink: 0; } .sr-nt-cat-name { flex: 1; } .sr-nt-chevron { font-size: 0.65rem; color: var(--text-dim); transition: transform 0.18s; flex-shrink: 0; } .sr-nt-cat.open > .sr-nt-cat-hd .sr-nt-chevron, .sr-nt-brand.open > .sr-nt-brand-hd .sr-nt-chevron { color: var(--blue); } /* Brand row */ .sr-nt-brands { background: var(--s2); border-top: 1px solid var(--border-dim); border-bottom: 1px solid var(--border-dim); padding: 0.3rem 0; } .sr-nt-brand-hd { display: flex; align-items: center; gap: 0.45rem; width: 100%; padding: 0.5rem 1rem 0.5rem 1.8rem; border: none; background: transparent; color: var(--text-soft); font-size: 0.82rem; font-weight: 600; font-family: inherit; cursor: pointer; text-align: left; transition: background 0.12s, color 0.12s; } .sr-nt-brand-hd:hover { background: var(--blue-subtle); color: var(--blue); } .sr-nt-brand.open > .sr-nt-brand-hd { color: var(--blue); } .sr-nt-brand-icon { font-size: 0.85rem; flex-shrink: 0; opacity: 0.7; } .sr-nt-brand-name { flex: 1; } /* Device leaf */ .sr-nt-devices { padding: 0.2rem 0 0.35rem; background: var(--s1); border-top: 1px solid var(--border-dim); } .sr-nt-device { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.38rem 1rem 0.38rem 2.8rem; border: none; background: transparent; color: var(--text-soft); font-size: 0.8rem; font-weight: 400; font-family: inherit; cursor: pointer; text-align: left; transition: background 0.1s, color 0.1s; line-height: 1.35; } .sr-nt-device:hover { background: var(--blue-subtle); color: var(--blue); font-weight: 600; } .sr-nt-device:hover .sr-nt-device-arrow { opacity: 1; transform: translateX(2px); } .sr-nt-device-arrow { font-size: 0.7rem; color: var(--blue); opacity: 0; transition: opacity 0.12s, transform 0.12s; flex-shrink: 0; } /* Brand device count badge */ .sr-nt-brand-count { font-size: 0.62rem; font-weight: 600; background: var(--s3); color: var(--text-dim); border-radius: 99px; padding: 0.05rem 0.38rem; flex-shrink: 0; } /* Device tier letter badge */ .sr-nt-device-tier { margin-left: auto; flex-shrink: 0; font-size: 0.58rem; font-weight: 800; border-radius: 4px; padding: 0.06rem 0.32rem; text-transform: uppercase; letter-spacing: 0.02em; } .sr-tier-budget { background: rgba(16,185,129,0.15); color: #10B981; } .sr-tier-midrange { background: rgba(59,130,246,0.15); color: #3B82F6; } .sr-tier-premium { background: rgba(139,92,246,0.15); color: #8B5CF6; } .sr-tier-flagship { background: rgba(245,158,11,0.15); color: #D97706; } /* Price tier filter bar */ .sr-nt-tier-bar { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border-dim); background: var(--s2); } .sr-nt-tier-chip { font-size: 0.68rem; font-weight: 600; padding: 0.25rem 0.55rem; border-radius: 99px; border: 1.5px solid var(--border); background: var(--s1); color: var(--text-soft); cursor: pointer; transition: all 0.13s; font-family: inherit; white-space: nowrap; } .sr-nt-tier-chip:hover { border-color: var(--blue); color: var(--blue); } .sr-nt-tier-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; } /* Coming soon section separator */ .sr-nt-soon-section { margin-top: auto; border-top: 1px solid var(--border-dim); padding-top: 0.25rem; } /* Coming soon row */ .sr-nt-soon { opacity: 0.5; cursor: default; pointer-events: none; } .sr-nt-soon-pill { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--s3); color: var(--text-dim); border: 1px solid var(--border); border-radius: 99px; padding: 0.08rem 0.4rem; margin-left: auto; } /* Mobile toggle bar */ .sr-tree-mobile-bar { padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); } .sr-tree-mobile-btn { width: 100%; padding: 0.6rem 1rem; background: var(--s2); border: 1.5px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.88rem; font-weight: 600; font-family: inherit; cursor: pointer; text-align: left; transition: background 0.15s; } .sr-tree-mobile-btn:hover { background: var(--blue-subtle); border-color: var(--blue); } /* Mobile overlay */ .sr-tree-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 300; } /* ── Left sidebar (legacy, kept for reference) ─────────────────────── */ .sr-sidebar { width: 220px; flex-shrink: 0; padding: 2.5rem 0 2.5rem 1.5rem; position: sticky; top: 65px; max-height: calc(100vh - 65px); overflow-y: auto; border-right: 1px solid var(--border); } .sr-sidebar-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); padding: 0 1rem 0.85rem; margin-bottom: 0.25rem; } .sr-sidebar-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.6rem 1rem; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-soft); font-size: 0.875rem; font-weight: 500; cursor: pointer; font-family: inherit; text-align: left; transition: background 0.15s, color 0.15s; margin-bottom: 0.15rem; } .sr-sidebar-item:hover { background: var(--blue-subtle); color: var(--blue); } .sr-sidebar-item.active { background: var(--blue-subtle); color: var(--blue); font-weight: 700; } .sr-sidebar-icon { font-size: 1.1rem; line-height: 1; flex-shrink: 0; } .sr-sidebar-name { flex: 1; } .sr-sidebar-count { font-size: 0.68rem; font-weight: 600; color: var(--text-dim); background: var(--s3); border-radius: 99px; padding: 0.1rem 0.45rem; min-width: 22px; text-align: center; } .sr-sidebar-item.active .sr-sidebar-count { background: rgba(28,63,110,0.12); color: var(--blue); } /* ── Sidebar collapse toggle ────────────────────────────────────────── */ .sr-sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.5rem; border: none; background: transparent; color: var(--text-dim); font-size: 0.65rem; cursor: pointer; border-bottom: 1px solid var(--border-dim); transition: background 0.13s, color 0.13s; font-family: inherit; } .sr-sidebar-toggle:hover { background: var(--blue-subtle); color: var(--blue); } /* Collapsed state */ .sr-sidebar-collapsed { width: 52px !important; padding-left: 0; padding-right: 0; align-items: center; } .sr-sidebar-collapsed .sr-sidebar-item { justify-content: center; padding: 0.65rem 0; } .sr-sidebar-collapsed .sr-sidebar-icon { font-size: 1.25rem; } /* ── Price tier filter chips ────────────────────────────────────────── */ .sr-sidebar-tier-filter { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.65rem 0.85rem 0.5rem; border-bottom: 1px solid var(--border-dim); } .sr-stf-chip { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 99px; border: 1.5px solid var(--border); background: var(--s2); color: var(--text-soft); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.13s; font-family: inherit; text-align: left; } .sr-stf-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-subtle); } .sr-stf-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; } .sr-sidebar-item.sr-sidebar-soon { opacity: 0.55; cursor: default; } .sr-sidebar-item.sr-sidebar-soon:hover { background: transparent; color: var(--text-soft); } .sr-sidebar-soon-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--s3); color: var(--text-dim); border: 1px solid var(--border); border-radius: 99px; padding: 0.08rem 0.4rem; margin-left: auto; } /* ── Browse main ───────────────────────────────────────────────────── */ .sr-browse-main { flex: 1; padding: 2.5rem 2rem 2.5rem; min-width: 0; } .sr-browse-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .sr-browse-title { font-size: 1.35rem; font-weight: 800; color: var(--text); letter-spacing: -0.03em; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; } .sr-browse-sub { font-size: 0.82rem; color: var(--text-dim); } /* ── Device cards grid ──────────────────────────────────────────────── */ .sr-devices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.65rem; } .sr-device-card { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; background: var(--s1); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 0.85rem 0.75rem 0.75rem; cursor: pointer; font-family: inherit; text-align: center; transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s; box-shadow: var(--shadow-xs); position: relative; overflow: hidden; } .sr-device-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; } .sr-device-card:hover { border-color: var(--blue); box-shadow: 0 6px 24px var(--blue-glow); transform: translateY(-4px); } .sr-device-card:hover::before { transform: scaleX(1); } /* ── Modern device card icons (app-icon style) ──────────────────────── */ .sr-device-card-icon { font-size: 1.4rem; line-height: 1; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.05rem; transition: transform 0.18s; border: 1.5px solid transparent; } .sr-device-card:hover .sr-device-card-icon { transform: scale(1.08); } /* Per-category icon backgrounds */ .sr-dci-phones { background: linear-gradient(145deg,rgba(28,63,110,0.14),rgba(28,63,110,0.05)); border-color:rgba(28,63,110,0.15); } .sr-dci-laptops { background: linear-gradient(145deg,rgba(124,58,237,0.14),rgba(124,58,237,0.05)); border-color:rgba(124,58,237,0.15); } .sr-dci-tablets { background: linear-gradient(145deg,rgba(8,145,178,0.14),rgba(8,145,178,0.05)); border-color:rgba(8,145,178,0.15); } .sr-dci-watches { background: linear-gradient(145deg,rgba(217,119,6,0.14),rgba(217,119,6,0.05)); border-color:rgba(217,119,6,0.15); } .sr-dci-speakers { background: linear-gradient(145deg,rgba(5,150,105,0.14),rgba(5,150,105,0.05)); border-color:rgba(5,150,105,0.15); } .sr-dci-cars { background: linear-gradient(145deg,rgba(220,38,38,0.12),rgba(220,38,38,0.04)); border-color:rgba(220,38,38,0.15); } .sr-dci-bikes { background: linear-gradient(145deg,rgba(234,88,12,0.12),rgba(234,88,12,0.04)); border-color:rgba(234,88,12,0.15); } [data-theme="dark"] .sr-dci-phones { background: linear-gradient(145deg,rgba(99,102,241,0.2),rgba(45,84,148,0.08)); } [data-theme="dark"] .sr-dci-laptops { background: linear-gradient(145deg,rgba(167,139,250,0.2),rgba(167,139,250,0.08)); } [data-theme="dark"] .sr-dci-tablets { background: linear-gradient(145deg,rgba(34,211,238,0.18),rgba(34,211,238,0.07)); } [data-theme="dark"] .sr-dci-watches { background: linear-gradient(145deg,rgba(251,191,36,0.18),rgba(251,191,36,0.07)); } [data-theme="dark"] .sr-dci-speakers { background: linear-gradient(145deg,rgba(52,211,153,0.18),rgba(52,211,153,0.07)); } [data-theme="dark"] .sr-dci-cars { background: linear-gradient(145deg,rgba(239,68,68,0.18),rgba(239,68,68,0.07)); } [data-theme="dark"] .sr-dci-bikes { background: linear-gradient(145deg,rgba(251,146,60,0.18),rgba(251,146,60,0.07)); } .sr-device-card-name { font-size: 0.74rem; font-weight: 700; color: var(--text); line-height: 1.3; } .sr-device-card-cta { font-size: 0.67rem; font-weight: 700; color: var(--blue); opacity: 0; transform: translateY(3px); transition: opacity 0.2s, transform 0.2s; } .sr-device-card:hover .sr-device-card-cta { opacity: 1; transform: translateY(0); } /* ── Browse coming-soon placeholder ─────────────────────────────────── */ .sr-browse-coming-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; gap: 0.75rem; } .sr-bcs-icon { font-size: 3.5rem; line-height: 1; opacity: 0.4; } .sr-bcs-title { font-size: 1.15rem; font-weight: 700; color: var(--text); } .sr-bcs-sub, .sr-bcs-desc { font-size: 0.875rem; color: var(--text-dim); max-width: 320px; } .sr-bcs-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--s3); color: var(--text-dim); border: 1px solid var(--border); border-radius: 99px; padding: 0.25rem 0.75rem; margin-top: 0.25rem; } .sr-section-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; } .sr-section-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.035em; color: var(--text); margin-bottom: 0.6rem; } .sr-section-sub { color: var(--text-soft); font-size: 0.975rem; margin-bottom: 3rem; } /* ================================================================ FEATURES SECTION ================================================================ */ .sr-features-section { padding: 5.5rem 1.5rem; background: var(--bg); transition: background 0.3s; } .sr-feature-card { background: var(--s1); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.75rem; height: 100%; transition: box-shadow 0.25s, transform 0.2s; position: relative; overflow: hidden; } .sr-feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .sr-fc-blue { border-top: 3px solid var(--blue); } .sr-fc-orange { border-top: 3px solid var(--accent); } .sr-fc-green { border-top: 3px solid var(--green); } .sr-fc-purple { border-top: 3px solid var(--purple); } .sr-feature-icon { font-size: 2.1rem; margin-bottom: 1rem; display: block; } .sr-feature-card h4 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; letter-spacing: -0.02em; } .sr-feature-card p { color: var(--text-soft); font-size: 0.875rem; line-height: 1.6; } /* ================================================================ CTA SECTION ================================================================ */ /* ── How It Works ───────────────────────────────────────────────────── */ .sr-hiw-section { padding: 5rem 1.5rem; background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .sr-section-sub { color: var(--text-dim); font-size: 0.93rem; margin-top: 0.5rem; } .sr-hiw-steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; flex-wrap: wrap; margin-bottom: 3.5rem; } .sr-hiw-step { flex: 1; min-width: 220px; max-width: 300px; background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.5rem; text-align: center; position: relative; box-shadow: var(--shadow-xs); } .sr-hiw-step-num { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--accent)); color: #fff; font-size: 0.75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .sr-hiw-step-icon { font-size: 2rem; margin-bottom: 0.75rem; display: block; } .sr-hiw-step-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; } .sr-hiw-step-desc { font-size: 0.83rem; color: var(--text-dim); line-height: 1.6; margin: 0; } .sr-hiw-arrow { align-self: center; font-size: 1.5rem; color: var(--text-dim); padding: 0 0.75rem; flex-shrink: 0; } .sr-hiw-stats { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 2.5rem; box-shadow: var(--shadow-xs); } .sr-hiw-stat { text-align: center; padding: 0 2rem; } .sr-hiw-stat-num { font-size: 2rem; font-weight: 900; color: var(--blue); letter-spacing: -0.04em; line-height: 1; } .sr-hiw-stat-num span { font-size: 1rem; font-weight: 600; color: var(--text-dim); } .sr-hiw-stat-label { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.25rem; font-weight: 500; } .sr-hiw-stat-div { width: 1px; height: 48px; background: var(--border); flex-shrink: 0; } .sr-hiw-sources { text-align: center; } .sr-hiw-sources-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 1rem; } .sr-hiw-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .sr-hiw-badge { display: flex; align-items: center; gap: 0.5rem; background: var(--s1); border: 1px solid var(--border); border-radius: 99px; padding: 0.45rem 1rem; box-shadow: var(--shadow-xs); } .sr-hiw-badge-icon { font-size: 1rem; } .sr-hiw-badge-name { font-size: 0.82rem; font-weight: 700; color: var(--text); } .sr-hiw-badge-tag { font-size: 0.68rem; background: var(--blue-subtle); color: var(--blue); padding: 0.1rem 0.45rem; border-radius: 99px; font-weight: 600; } @media (max-width: 768px) { .sr-hiw-arrow { display: none; } .sr-hiw-stat-div { width: 48px; height: 1px; } .sr-hiw-steps { gap: 1.5rem; } } .sr-cta-section { background: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%); padding: 4.5rem 1.5rem; } .sr-cta-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .sr-cta-title { font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 900; color: #fff; letter-spacing: -0.04em; margin-bottom: 0.4rem; } .sr-cta-sub { color: rgba(255,255,255,0.8); font-size: 0.95rem; margin: 0; } .sr-cta-chips { display:flex; flex-wrap:wrap; gap:0.6rem; } .sr-cta-chip { background: rgba(255,255,255,0.15); color: #fff; border: 1.5px solid rgba(255,255,255,0.3); border-radius: 99px; padding: 0.5rem 1.1rem; font-size: 0.84rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.18s, transform 0.15s; backdrop-filter: blur(4px); } .sr-cta-chip:hover { background: rgba(255,255,255,0.28); transform: translateY(-2px); } /* ================================================================ LOADING ================================================================ */ .sr-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 65vh; gap: 1.5rem; text-align: center; padding: 2rem; } .sr-loading-text { font-size: 1.05rem; color: var(--text); letter-spacing: -0.01em; } /* ================================================================ ERROR & MAINTENANCE PAGES ================================================================ */ .sr-error-box { background: var(--s1); border: 1.5px solid rgba(220,38,38,0.2); border-top: 4px solid var(--red); border-radius: var(--radius-lg); padding: 3rem 2rem; max-width: 460px; margin: 0 auto; box-shadow: var(--shadow); text-align: center; } .sr-page-center { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 2rem 1rem; } .sr-error-page-box { background: var(--s1); border: 1.5px solid rgba(220,38,38,0.15); border-top: 4px solid var(--red); border-radius: var(--radius-lg); padding: 3rem 2.5rem; max-width: 500px; width: 100%; box-shadow: var(--shadow-md); text-align: center; } .sr-maintenance-box { background: var(--s1); border: 1.5px solid var(--border); border-top: 4px solid var(--blue); border-radius: var(--radius-lg); padding: 3rem 2.5rem; max-width: 500px; width: 100%; box-shadow: var(--shadow-md); text-align: center; } .sr-error-icon, .sr-maintenance-icon { font-size: 3rem; margin-bottom: 1.25rem; display: block; } .sr-error-title { font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 0.75rem; } .sr-error-sub { color: var(--text-soft); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.75rem; } .sr-error-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.75rem; } .sr-error-details { margin-top: 0.5rem; text-align: left; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .sr-error-details summary { padding: 0.6rem 1rem; cursor: pointer; font-size: 0.82rem; color: var(--text-dim); background: var(--s2); user-select: none; list-style: none; } .sr-error-details summary::-webkit-details-marker { display: none; } .sr-error-details summary::before { content: '▶ '; font-size: 0.7rem; } .sr-error-details[open] summary::before { content: '▼ '; } .sr-error-details-body { padding: 0.75rem 1rem; background: var(--s3); display: flex; flex-direction: column; gap: 0.3rem; } .sr-error-details-label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .sr-error-details-value { font-size: 0.8rem; color: var(--text-soft); word-break: break-all; background: var(--s1); padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--border); } .sr-maintenance-msg { background: var(--blue-subtle); border: 1px solid var(--blue-glow); border-radius: var(--radius-sm); padding: 0.75rem 1rem; font-size: 0.88rem; color: var(--text-soft); margin-bottom: 1.5rem; } .sr-maintenance-footer { font-size: 0.82rem; color: var(--text-dim); margin-top: 1.5rem; } /* ================================================================ REPORT PAGE ================================================================ */ .sr-report { max-width: 1120px; } .sr-report-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--border); } .sr-report-header-left { display:flex; align-items:flex-start; gap:1.25rem; } .sr-header-right { display:flex; align-items:center; gap:1.25rem; flex-shrink:0; } /* ── Value for Money Starburst Seal ─────────────────────────────────────── */ .sr-value-seal { width: 170px; height: 100px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; /* 16-point starburst */ clip-path: polygon( 50% 0%, 54% 14%, 67% 5%, 64% 19%, 79% 16%, 70% 28%, 86% 31%, 73% 40%, 89% 50%, 73% 60%, 86% 69%, 70% 72%, 79% 84%, 64% 81%, 67% 95%, 54% 86%, 50% 100%, 46% 86%, 33% 95%, 36% 81%, 21% 84%, 30% 72%, 14% 69%, 27% 60%, 11% 50%, 27% 40%, 14% 31%, 30% 28%, 21% 16%, 36% 19%, 33% 5%, 46% 14%); animation: sealSpin 0s linear infinite, sealPop 0.6s cubic-bezier(0.34,1.56,0.64,1) both; } @keyframes sealPop { from { transform: scale(0.5) rotate(-15deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } } .sr-seal-gold { background: linear-gradient(135deg, #F59E0B 0%, #10B981 100%); } .sr-seal-amber { background: linear-gradient(135deg, #FBBF24 0%, #C47E0D 100%); } .sr-seal-red { background: linear-gradient(135deg, #C47E0D 0%, #EF4444 100%); } .sr-value-seal-text { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px 6px; gap: 2px; } .sr-value-seal-star { font-size: 1.1rem; color: rgba(255,255,255,0.9); line-height: 1; } .sr-value-seal-label { font-size: 0.72rem; font-weight: 800; color: #fff; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.05em; text-shadow: 0 1px 4px rgba(0,0,0,0.3); word-break: break-word; max-width: 100px; } .sr-device-img { width: 90px; height: 90px; object-fit: contain; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--s2); padding: 6px; flex-shrink: 0; } .sr-report-meta { display:flex; align-items:center; gap:0.75rem; margin-top:0.3rem; flex-wrap:wrap; } .sr-back-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-dim); font-size: 0.82rem; font-weight: 500; margin-bottom: 0.5rem; transition: color 0.18s; } .sr-back-link:hover { color: var(--blue); text-decoration: none; } .sr-report-title { font-size: clamp(1.6rem,4vw,2.2rem); font-weight: 900; color: var(--text); letter-spacing: -0.045em; margin-bottom: 0.25rem; line-height: 1.1; } /* Verdict colours */ .sr-verdict-success { background:rgba(5,150,105,0.08); color:var(--green); border-color:rgba(5,150,105,0.25); } .sr-verdict-warning { background:rgba(217,119,6,0.08); color:var(--amber); border-color:rgba(217,119,6,0.25); } .sr-verdict-danger { background:rgba(220,38,38,0.07); color:var(--red); border-color:rgba(220,38,38,0.2); } /* Verdict thumb */ @keyframes thumbPop { 0% { transform:scale(0.4) rotate(-25deg); opacity:0; } 60% { transform:scale(1.15) rotate(6deg); opacity:1; } 100% { transform:scale(1) rotate(0deg); opacity:1; } } @keyframes thumbWobble { 0%,100% { transform:rotate(0deg) scale(1); } 15% { transform:rotate(-18deg) scale(1.08); } 30% { transform:rotate(14deg) scale(1.05); } 45% { transform:rotate(-10deg) scale(1.03); } 60% { transform:rotate(7deg) scale(1.01); } 75% { transform:rotate(-4deg) scale(1); } 90% { transform:rotate(2deg) scale(1); } } .sr-verdict-thumb { display:flex; flex-direction:column; align-items:center; gap:0.35rem; align-self:center; padding:0.85rem 1.4rem; border-radius:var(--radius-lg); border:1.5px solid currentColor; box-shadow:var(--shadow); animation:thumbPop 0.55s cubic-bezier(.34,1.56,.64,1) both; } .sr-thumb-emoji { font-size:2.6rem; line-height:1; display:inline-block; transform-origin:bottom center; animation:thumbWobble 2.4s ease-in-out 0.7s infinite; } @keyframes chipSlide { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } /* ── SniffScore card ─────────────────────────────────────────────────── */ .sr-sniff-score-card { gap:0; } /* Score-on-scale bar */ .sr-score-scale { width:100%; padding:0 0.25rem; margin-top:1.25rem; } .sr-score-scale-track { position:relative; height:10px; margin-bottom:0.55rem; } .sr-sst-zones { display:flex; height:100%; border-radius:99px; overflow:hidden; } .sr-sst-avoid { flex:44; background:linear-gradient(90deg,#DC2626,#F87171); } .sr-sst-consider{ flex:26; background:linear-gradient(90deg,#D97706,#FBBF24); } .sr-sst-buy { flex:30; background:linear-gradient(90deg,#059669,#34D399); } .sr-sst-marker { position:absolute; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:3px; } .sr-sst-pin { width:16px; height:16px; border-radius:50%; background:var(--s1); border:3px solid var(--text); box-shadow:0 2px 8px rgba(0,0,0,0.3); } .sr-sst-marker-success .sr-sst-pin { border-color:#059669; } .sr-sst-marker-warning .sr-sst-pin { border-color:#D97706; } .sr-sst-marker-danger .sr-sst-pin { border-color:#DC2626; } .sr-sst-score-label { font-size:0.62rem; font-weight:800; color:var(--text-soft); white-space:nowrap; line-height:1; transform:translateY(10px); } .sr-score-scale-labels { display:flex; justify-content:space-between; font-size:0.6rem; color:var(--text-dim); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-top:1rem; } /* Quick stats row */ .sr-score-stats { display:flex; align-items:center; justify-content:center; gap:0.9rem; margin-top:1.25rem; } .sr-score-stat { text-align:center; } .sr-score-stat-val { font-size:1.05rem; font-weight:800; letter-spacing:-0.02em; line-height:1.1; } .sr-score-stat-label { font-size:0.62rem; color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:0.08em; margin-top:0.2rem; } .sr-score-stat-div { width:1px; height:28px; background:var(--border-dim); flex-shrink:0; } /* Verdict desc at bottom */ .sr-score-verdict-desc { font-size:0.73rem; color:var(--text-dim); margin:1rem 0 0; line-height:1.4; text-align:center; } /* ── Cards ──────────────────────────────────────────────────────────── */ .sr-card { background:var(--s1); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; box-shadow:var(--shadow); height:100%; transition: background 0.3s, border-color 0.3s; } .sr-card-title { font-size:0.72rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:1.25rem; padding-bottom:0.85rem; border-bottom:1px solid var(--border-dim); } .sr-card-title-row { display:flex; align-items:center; justify-content:space-between; padding-bottom:0; gap:0.5rem; flex-wrap:wrap; } .sr-pros-card { border-top:3px solid var(--green); } .sr-cons-card { border-top:3px solid var(--red); } /* ── SVG Arc Gauge ──────────────────────────────────────────────────── */ @keyframes arcDraw { from { stroke-dashoffset:314.16; } } .sr-arc-wrap { position:relative; width:170px; height:170px; margin:0.5rem auto 0; flex-shrink:0; } .sr-arc-verdict-success { --arc-c1:#059669; --arc-c2:#34D399; } .sr-arc-verdict-warning { --arc-c1:#D97706; --arc-c2:#FBBF24; } .sr-arc-verdict-danger { --arc-c1:#DC2626; --arc-c2:#F87171; } .sr-arc-svg { width:100%; height:100%; transform:rotate(-90deg); } .sr-arc-track { fill:none; stroke:var(--bg-alt); stroke-width:10; } .sr-arc-fill { fill:none; stroke:url(#arcGrad); stroke-width:10; stroke-linecap:round; stroke-dasharray:314.16; animation:arcDraw 1.3s cubic-bezier(.4,0,.2,1) 0.15s both; } .sr-arc-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; line-height:1; } .sr-arc-num { font-size:2.8rem; font-weight:900; letter-spacing:-0.05em; } .sr-arc-sub { font-size:0.72rem; color:var(--text-dim); font-weight:500; margin-top:0.15rem; } /* Legacy */ .sr-gauge-wrapper { position:relative; width:170px; height:170px; } .sr-gauge-number { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:2.8rem; font-weight:900; line-height:1; letter-spacing:-0.05em; } .sr-score-success { color:var(--green); } .sr-score-warning { color:var(--amber); } .sr-score-danger { color:var(--red); } /* ── Sentiment Bars ──────────────────────────────────────────────────── */ @keyframes barGrow { from{width:0;} to{width:var(--bar-w);} } .sr-sent-bars { display:flex; flex-direction:column; gap:1.4rem; padding:0.75rem 0; justify-content:center; height:calc(100% - 3rem); } .sr-sent-row { display:flex; align-items:center; gap:0.65rem; } .sr-sent-icon { font-size:1.25rem; flex-shrink:0; line-height:1; } .sr-sent-label { font-size:0.8rem; font-weight:600; color:var(--text-soft); width:62px; flex-shrink:0; } .sr-sent-track { flex:1; height:11px; background:var(--bg-alt); border-radius:99px; overflow:hidden; } .sr-sent-fill { height:100%; border-radius:99px; width:0; animation:barGrow 0.95s cubic-bezier(.4,0,.2,1) 0.2s both; } .sr-sent-pos { background:linear-gradient(90deg,#059669,#34D399); } .sr-sent-neu { background:linear-gradient(90deg,#D97706,#FBBF24); } .sr-sent-neg { background:linear-gradient(90deg,#DC2626,#F87171); } .sr-sent-val { font-size:0.82rem; font-weight:700; width:40px; text-align:right; flex-shrink:0; } .sr-pos-text { color:#059669; } .sr-neu-text { color:#D97706; } .sr-neg-text { color:#DC2626; } /* ── Verdict Banner ───────────────────────────────────────────────────── */ .sr-verdict-banner { display:flex; align-items:center; gap:1.75rem; padding:1.6rem 2rem; border-radius:var(--radius-lg); border:1.5px solid transparent; position:relative; overflow:hidden; } .sr-verdict-banner-success { background:linear-gradient(135deg,rgba(5,150,105,0.1) 0%,rgba(16,185,129,0.04) 100%); border-color:rgba(5,150,105,0.22); } .sr-verdict-banner-warning { background:linear-gradient(135deg,rgba(245,158,11,0.1) 0%,rgba(251,191,36,0.04) 100%); border-color:rgba(245,158,11,0.25); } .sr-verdict-banner-danger { background:linear-gradient(135deg,rgba(220,38,38,0.08) 0%,rgba(239,68,68,0.03) 100%); border-color:rgba(220,38,38,0.2); } .sr-vb-left { display:flex; align-items:center; gap:1rem; flex-shrink:0; } .sr-vb-emoji { font-size:2.8rem; line-height:1; } .sr-vb-label { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:var(--text-dim); margin-bottom:0.15rem; } .sr-vb-verdict { font-size:2rem; font-weight:900; letter-spacing:-0.04em; line-height:1; } .sr-verdict-banner-success .sr-vb-verdict { color:var(--green); } .sr-verdict-banner-warning .sr-vb-verdict { color:var(--amber); } .sr-verdict-banner-danger .sr-vb-verdict { color:var(--red); } .sr-vb-divider { width:1.5px; height:52px; background:var(--border); flex-shrink:0; } .sr-vb-text { margin:0; font-size:0.92rem; color:var(--text-soft); line-height:1.65; } /* ── Phrase list ──────────────────────────────────────────────────────── */ .sr-phrase-list { padding:0; margin:0; display:flex; flex-direction:column; gap:0.3rem; } .sr-phrase-item { display:flex; align-items:flex-start; gap:0.75rem; padding:0.65rem 0.85rem; border-radius:8px; font-size:0.875rem; color:var(--text-soft); line-height:1.55; } .sr-phrase-text { flex:1; } .sr-pro-dot,.sr-con-dot { flex-shrink:0; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:800; margin-top:1px; } .sr-pro-dot { background:rgba(5,150,105,0.14); color:var(--green); } .sr-con-dot { background:rgba(220,38,38,0.1); color:var(--red); } /* Expand */ .sr-expand-btn { margin-top:0.75rem; background:none; border:1px solid var(--border); border-radius:99px; color:var(--blue); font-size:0.78rem; font-weight:600; padding:0.3rem 0.9rem; cursor:pointer; font-family:inherit; transition:background 0.18s, border-color 0.18s; } .sr-expand-btn:hover { background:var(--blue-subtle); border-color:var(--blue); } .sr-expand-btn-danger { color:var(--red); } .sr-expand-btn-danger:hover { background:rgba(220,38,38,0.06); border-color:var(--red); } /* ── Tag Cloud (legacy, keep for any old references) ────────────────── */ .sr-tag-cloud { display:flex; flex-wrap:wrap; gap:0.5rem; padding:0.25rem 0; } .sr-tag { display:inline-block; border-radius:99px; padding:0.28rem 0.85rem; font-weight:600; cursor:default; border:1.5px solid transparent; } .sr-tag-xs { font-size:0.72rem; padding:0.22rem 0.7rem; opacity:0.8; } .sr-tag-sm { font-size:0.8rem; } .sr-tag-md { font-size:0.88rem; } .sr-tag-lg { font-size:0.95rem; font-weight:700; } .sr-tag-xl { font-size:1.05rem; font-weight:800; } /* ── Word Cloud (ECharts canvas) ─────────────────────────────────────── */ #sr-wc-canvas { border-radius: 8px; } /* ── Price tag + popover ─────────────────────────────────────────────── */ .sr-price-tag { display: inline-flex; align-items: center; gap: 0.3rem; background: rgba(5,150,105,0.08); color: var(--green); border: 1px solid rgba(5,150,105,0.2); border-radius: 99px; padding: 0.2rem 0.75rem; font-size: 0.8rem; font-weight: 700; white-space: nowrap; } .sr-price-tag-btn { cursor: pointer; transition: background 0.15s, border-color 0.15s; } .sr-price-tag-btn:hover { background: rgba(5,150,105,0.16); border-color: rgba(5,150,105,0.4); } .sr-price-tag-caret { font-size: 0.65rem; margin-left: 0.15rem; opacity: 0.7; } .sr-price-popover-wrap { position: relative; display: inline-block; } .sr-price-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 200; width: 320px; background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,0.18); padding: 0; overflow: hidden; animation: sr-pop-in 0.15s ease; } @keyframes sr-pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 480px) { .sr-price-popover { width: 90vw; left: 50%; transform: translateX(-50%); } @keyframes sr-pop-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } } .sr-pp-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem 0.6rem; background: linear-gradient(135deg, rgba(5,150,105,0.12), rgba(16,185,129,0.06)); border-bottom: 1px solid var(--border); } .sr-pp-title { font-size: 0.88rem; font-weight: 700; color: var(--text); } .sr-pp-close { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 0.85rem; padding: 0; line-height: 1; } .sr-pp-close:hover { color: var(--text); } .sr-pp-price { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; color: var(--green); padding: 0.75rem 1rem 0.5rem; } .sr-pp-divider { height: 1px; background: var(--border); margin: 0 1rem; } .sr-pp-section { padding: 0.65rem 1rem; } .sr-pp-section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); margin-bottom: 0.4rem; } .sr-pp-value-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; } .sr-pp-value-badge { font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 99px; } .sr-seal-gold .sr-pp-value-badge, .sr-pp-value-badge.sr-seal-gold { background: rgba(245,158,11,0.12); color: #D97706; border: 1px solid rgba(245,158,11,0.25); } .sr-pp-value-badge.sr-seal-amber { background: rgba(251,191,36,0.12); color: #B45309; border: 1px solid rgba(251,191,36,0.25); } .sr-pp-value-badge.sr-seal-red { background: rgba(239,68,68,0.10); color: #DC2626; border: 1px solid rgba(239,68,68,0.2); } .sr-pp-score-hint { font-size: 0.72rem; color: var(--text-dim); } .sr-pp-value-desc { font-size: 0.78rem; color: var(--text-soft); margin: 0; line-height: 1.5; } .sr-pp-source-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; } .sr-pp-source-name { font-size: 0.82rem; font-weight: 600; color: var(--text); } .sr-pp-source-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(28,63,110,0.10); color: #2D5494; border: 1px solid rgba(28,63,110,0.2); border-radius: 99px; padding: 0.1rem 0.45rem; } .sr-pp-source-link { display: inline-block; font-size: 0.78rem; color: var(--blue); text-decoration: none; font-weight: 600; transition: color 0.15s; } .sr-pp-source-link:hover { color: var(--purple); text-decoration: underline; } .sr-pp-insight { font-size: 0.78rem; color: var(--text-soft); margin: 0; line-height: 1.5; font-style: italic; border-left: 2px solid var(--green); padding-left: 0.6rem; } .sr-pp-disclaimer { margin-top: 0.75rem; padding: 0.5rem 0.65rem; border-radius: 6px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); font-size: 0.72rem; color: var(--text-dim); line-height: 1.45; } /* ── Cache Manager / Admin Panel ────────────────────────────────────── */ .sr-cm-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; } /* ── Admin tabs ─────────────────────────────────────────────────────── */ .sr-cm-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; } .sr-cm-tab { background: none; border: none; padding: 0.6rem 1.2rem; font-size: 0.83rem; font-weight: 600; color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; display: flex; align-items: center; gap: 0.4rem; transition: color 0.13s, border-color 0.13s; font-family: inherit; } .sr-cm-tab:hover { color: var(--text); } .sr-cm-tab.active { color: var(--blue); border-bottom-color: var(--blue); } .sr-cm-tab-badge { background: var(--s2); border-radius: 20px; padding: 1px 7px; font-size: 0.68rem; font-weight: 700; color: var(--text-dim); } .sr-cm-tab-badge-red { background: rgba(220,38,38,0.12); color: #DC2626; } /* ── Error log rows ─────────────────────────────────────────────────── */ .sr-cm-row-resolved td { opacity: 0.45; } .sr-cm-stack { background: var(--s2); border-top: 1px solid var(--border); padding: 0.75rem 1rem; font-size: 0.68rem; line-height: 1.6; color: var(--text-soft); white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow-y: auto; margin: 0; } .sr-cm-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; margin: 0; color: var(--text); } .sr-cm-sub { font-size: 0.83rem; color: var(--text-dim); margin: 0.25rem 0 0; } .sr-cm-btn-danger { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.1rem; border-radius: 8px; border: none; cursor: pointer; background: #ef4444; color: #fff; font-size: 0.84rem; font-weight: 600; transition: background 0.15s, opacity 0.15s; } .sr-cm-btn-danger:hover:not(:disabled) { background: #dc2626; } .sr-cm-btn-danger:disabled { opacity: 0.45; cursor: not-allowed; } .sr-cm-confirm-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-soft); } .sr-cm-confirm-actions { display: flex; gap: 0.5rem; } .sr-cm-btn-danger-sm { padding: 0.35rem 0.9rem; border-radius: 6px; border: none; cursor: pointer; background: #ef4444; color: #fff; font-size: 0.8rem; font-weight: 600; } .sr-cm-btn-ghost { padding: 0.35rem 0.9rem; border-radius: 6px; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--text-soft); font-size: 0.8rem; font-weight: 500; } .sr-cm-btn-ghost:hover { border-color: var(--blue); color: var(--blue); } .sr-cm-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .sr-cm-search-wrap { position: relative; flex: 1; min-width: 220px; } .sr-cm-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 0.85rem; pointer-events: none; } .sr-cm-search { width: 100%; padding: 0.5rem 2.2rem 0.5rem 2.2rem; border-radius: 8px; border: 1px solid var(--border); background: var(--s1); color: var(--text); font-size: 0.87rem; outline: none; transition: border-color 0.15s; } .sr-cm-search:focus { border-color: var(--blue); } .sr-cm-search-clear { position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 0.8rem; padding: 0.2rem; } .sr-cm-search-clear:hover { color: var(--text); } .sr-cm-stats { display: flex; gap: 0.5rem; flex-shrink: 0; } .sr-cm-stat-chip { padding: 0.3rem 0.75rem; border-radius: 99px; font-size: 0.75rem; font-weight: 700; } .sr-cm-chip-blue { background: var(--blue-subtle); color: var(--blue); } .sr-cm-chip-amber { background: rgba(217,119,6,0.1); color: var(--amber); } .sr-cm-toast { position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%); background: var(--s1); border: 1px solid var(--border); box-shadow: var(--shadow-md); border-radius: 10px; padding: 0.65rem 1.2rem; font-size: 0.85rem; color: var(--text-soft); z-index: 9999; white-space: nowrap; animation: sr-toast-in 0.2s ease; } @keyframes sr-toast-in { from { opacity:0; transform: translateX(-50%) translateY(8px); } to { opacity:1; transform: translateX(-50%) translateY(0); } } .sr-cm-empty { text-align: center; padding: 3rem 1rem; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .sr-cm-empty p { font-size: 0.9rem; margin: 0; } .sr-cm-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); } .sr-cm-table { width: 100%; border-collapse: collapse; font-size: 0.855rem; color: var(--text-soft); } .sr-cm-table thead th { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); padding: 0.7rem 1rem; background: var(--s2); border-bottom: 1.5px solid var(--border); white-space: nowrap; } .sr-cm-th-center { text-align: center; } .sr-cm-table tbody tr { border-bottom: 1px solid var(--border-dim); transition: background 0.12s; } .sr-cm-table tbody tr:last-child { border-bottom: none; } .sr-cm-table tbody tr:hover { background: var(--s2); } .sr-cm-row-deleting { opacity: 0.45; pointer-events: none; } .sr-cm-table td { padding: 0.75rem 1rem; vertical-align: middle; } .sr-cm-td-center { text-align: center; } .sr-cm-td-right { text-align: right; } .sr-cm-device-name { font-weight: 600; color: var(--text); } .sr-cm-device-key { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.1rem; font-family: monospace; } .sr-cm-score { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 6px; font-weight: 800; font-size: 0.85rem; } .sr-cm-score-good { background: rgba(5,150,105,0.12); color: #059669; } .sr-cm-score-mid { background: rgba(217,119,6,0.12); color: var(--amber); } .sr-cm-score-bad { background: rgba(220,38,38,0.12); color: var(--red); } .sr-cm-reviews { font-weight: 600; color: var(--text-soft); } .sr-cm-age { font-size: 0.8rem; color: var(--text-dim); } .sr-cm-badge { display: inline-block; padding: 0.18rem 0.6rem; border-radius: 99px; font-size: 0.7rem; font-weight: 700; } .sr-cm-badge-fresh { background: rgba(5,150,105,0.12); color: #059669; } .sr-cm-badge-stale { background: rgba(217,119,6,0.12); color: var(--amber); } .sr-cm-badge-old { background: rgba(148,163,184,0.15); color: var(--text-dim); } .sr-cm-del-btn { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: 0.4; transition: opacity 0.15s, transform 0.12s; padding: 0.3rem; } .sr-cm-del-btn:hover:not(:disabled) { opacity: 1; transform: scale(1.15); } /* ── Phone Specs card ───────────────────────────────────────────────── */ .sr-specs-card { } .sr-specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem 1.25rem; margin-top: 0.25rem; } .sr-spec-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 0.75rem; background: var(--s2); border-radius: 10px; border: 1px solid var(--border-dim); } .sr-spec-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.05rem; } .sr-spec-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); margin-bottom: 0.15rem; } .sr-spec-value { font-size: 0.82rem; color: var(--text-soft); line-height: 1.4; } .sr-specs-source { margin-top: 0.75rem; font-size: 0.72rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.3rem; } .sr-specs-source a { color: var(--blue); text-decoration: none; font-weight: 600; } .sr-specs-source a:hover { text-decoration: underline; } /* ── Reviews table ──────────────────────────────────────────────────── */ .sr-sortable { cursor:pointer; user-select:none; transition:color 0.15s; white-space:nowrap; } .sr-sortable:hover { color:var(--blue); } .sr-reviews-table { color:var(--text-soft); } .sr-reviews-table thead th { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); border-top:none; border-bottom:1.5px solid var(--border) !important; background:var(--s2); padding:0.75rem 1rem; } .sr-reviews-table tbody tr { border-color:var(--border-dim); transition:background 0.15s; } .sr-reviews-table tbody tr:hover { background:var(--s2); } .sr-reviews-table td { vertical-align:middle; font-size:0.855rem; padding:0.75rem 1rem; border-color:var(--border-dim); color:var(--text-soft); } .sr-reviews-table td:first-child { border-left:3px solid transparent; } .sr-row-positive td:first-child { border-left-color:var(--green); } .sr-row-negative td:first-child { border-left-color:var(--red); } .sr-row-neutral td:first-child { border-left-color:var(--amber); } .sr-row-mixed td:first-child { border-left-color:var(--blue); } /* Sentiment badges */ .badge.sr-badge-positive { background:rgba(5,150,105,0.1) !important; color:var(--green) !important; font-size:0.72rem; padding:0.3em 0.7em; } .badge.sr-badge-negative { background:rgba(220,38,38,0.08) !important; color:var(--red) !important; font-size:0.72rem; padding:0.3em 0.7em; } .badge.sr-badge-neutral { background:rgba(217,119,6,0.08) !important; color:var(--amber) !important; font-size:0.72rem; padding:0.3em 0.7em; } .badge.sr-badge-mixed { background:rgba(148,163,184,0.1) !important; color:var(--text-soft) !important; font-size:0.72rem; padding:0.3em 0.7em; } /* ── Bootstrap overrides ──────────────────────────────────────────── */ .btn-primary { background-color:var(--blue); border-color:var(--blue-d); } .btn-primary:hover { background-color:var(--blue-d); } .table { --bs-table-bg:transparent; --bs-table-border-color:var(--border-dim); color:var(--text-soft); } .text-success { color:var(--green) !important; } .text-danger { color:var(--red) !important; } /* ── Blazor Error UI ──────────────────────────────────────────────── */ #blazor-error-ui { background:rgba(220,38,38,0.06); border-top:1px solid rgba(220,38,38,0.2); bottom:0; left:0; color:var(--red); padding:0.6rem 1.25rem 0.7rem; position:fixed; width:100%; z-index:1000; display:none; } #blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:0.75rem; top:0.5rem; } /* ================================================================ SNIFFING DOG ANIMATION ================================================================ */ .sr-sniff-dog { position:relative; display:inline-block; width:100px; height:100px; } .sr-sniff-img { width:100px; height:auto; display:block; animation:sniffBob 1.2s ease-in-out infinite; transform-origin:bottom center; } @keyframes sniffBob { 0% { transform:translateY(0) rotate(0deg); } 20% { transform:translateY(-10px) rotate(-5deg); } 40% { transform:translateY(-3px) rotate(3deg); } 60% { transform:translateY(-8px) rotate(-3deg); } 80% { transform:translateY(-2px) rotate(2deg); } 100% { transform:translateY(0) rotate(0deg); } } .sr-sniff-particles { position:absolute; top:8px; right:-8px; display:flex; flex-direction:column; gap:4px; pointer-events:none; } .sr-sniff-particles span { display:block; border-radius:50%; opacity:0; animation:sniffParticle 1.5s ease-out infinite; } .sr-sniff-particles span:nth-child(1) { width:8px; height:8px; animation-delay:0s; background:#1C3F6E; } .sr-sniff-particles span:nth-child(2) { width:6px; height:6px; animation-delay:0.3s; background:#C47E0D; } .sr-sniff-particles span:nth-child(3) { width:9px; height:9px; animation-delay:0.6s; background:#10B981; } .sr-sniff-particles span:nth-child(4) { width:5px; height:5px; animation-delay:0.9s; background:#EC4899; } .sr-sniff-particles span:nth-child(5) { width:7px; height:7px; animation-delay:1.2s; background:#FBBF24; } @keyframes sniffParticle { 0% { opacity:0; transform:translateY(0) scale(0.6); } 30% { opacity:0.8; transform:translateY(-10px) scale(1); } 100% { opacity:0; transform:translateY(-36px) scale(0.3); } } /* ── Misc ──────────────────────────────────────────────────────────── */ .valid.modified:not([type=checkbox]) { outline:1px solid var(--green); } .invalid { outline:1px solid var(--red); } .validation-message { color:var(--red); font-size:0.8rem; } /* ================================================================ EID MUBARAK BANNER ================================================================ */ .sr-eid-banner { background: linear-gradient(135deg, #14532d 0%, #166534 50%, #15803d 100%); color: #bbf7d0; text-align: center; padding: 0.48rem 1.5rem; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.75rem; letter-spacing: 0.02em; border-bottom: 1px solid rgba(134,239,172,0.25); } .sr-eid-text { color: #dcfce7; } /* Adjust left nav fixed offset when eid banner is visible (~40px banner) */ .sr-has-eid .sr-left-nav { top: 105px; height: calc(100vh - 105px); } .sr-has-eid .sr-app-body { padding-top: 0; /* header already accounts for eid banner */ } /* ================================================================ LEFT NAV (global app rail) ================================================================ */ /* ================================================================ LEFT NAV — shell ================================================================ */ .sr-left-nav { width: 260px; flex-shrink: 0; background: var(--s1); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 0.7rem 0.6rem 0; position: fixed; top: 65px; left: 0; height: calc(100vh - 65px); overflow: visible; transition: width 0.22s ease; z-index: 100; } /* Scroll-body: tree + coming-soon section scrolls independently */ .sr-ln-scroll-body { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--border) transparent; padding-bottom: 1rem; } .sr-ln-scroll-body::-webkit-scrollbar { width: 4px; } .sr-ln-scroll-body::-webkit-scrollbar-track { background: transparent; } .sr-ln-scroll-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } .sr-ln-collapsed { width: 56px; padding: 0.7rem 0; align-items: center; } /* ── Floating tab toggle — outside the nav rail ──────────────────── */ .sr-ln-toggle { position: absolute; right: -14px; top: 1.1rem; width: 14px; height: 36px; background: var(--s1); border: 1px solid var(--border); border-left: none; border-radius: 0 7px 7px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; color: var(--text-dim); transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.2s, width 0.15s; box-shadow: 3px 0 8px rgba(0,0,0,0.07); padding: 0; opacity: 0; pointer-events: none; } .sr-left-nav:hover .sr-ln-toggle { opacity: 1; pointer-events: auto; } .sr-ln-toggle svg { width: 14px; height: 14px; flex-shrink: 0; margin-left: -4px; /* center in the narrow tab */ } .sr-ln-toggle:hover { background: var(--blue-subtle); border-color: var(--blue); color: var(--blue); width: 22px; } .sr-ln-toggle:hover svg { margin-left: 0; } .sr-ln-section-label { font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); padding: 0.15rem 0.5rem 0.4rem; white-space: nowrap; overflow: hidden; } .sr-ln-nav { display: flex; flex-direction: column; gap: 0.05rem; width: 100%; } .sr-ln-divider { height: 1px; background: var(--border-dim); margin: 0.55rem 0; width: 100%; } /* ── Icons-only items (collapsed state & coming-soon) ─────────────── */ .sr-ln-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem; border-radius: var(--radius-sm); color: var(--text-soft); font-size: 0.84rem; font-weight: 600; cursor: pointer; text-decoration: none !important; white-space: nowrap; overflow: hidden; transition: background 0.13s, color 0.13s; border: none; background: transparent; font-family: inherit; width: 100%; line-height: 1; } .sr-ln-item:hover { background: var(--blue-subtle); color: var(--blue); text-decoration: none !important; } .sr-ln-active { background: var(--blue-subtle) !important; color: var(--blue) !important; } .sr-ln-collapsed .sr-ln-item { justify-content: center; padding: 0.6rem 0; gap: 0; color: var(--text); } .sr-ln-collapsed .sr-ln-item:hover { color: var(--blue); } .sr-ln-collapsed .sr-ln-nav { width: 100%; } .sr-ln-icon { font-size: 1.05rem; line-height: 1; flex-shrink: 0; } .sr-ln-label { flex: 1; } .sr-ln-soon { opacity: 0.45; cursor: default; pointer-events: none; } .sr-ln-soon-tag { font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--s3); color: var(--text-dim); border: 1px solid var(--border); border-radius: 99px; padding: 0.06rem 0.35rem; flex-shrink: 0; } /* ================================================================ LEFT NAV — TREE (Category → Brand → Device) ================================================================ */ .sr-ln-tree { display: flex; flex-direction: column; gap: 0.02rem; width: 100%; } /* ── Category rows ──────────────────────────────────────────────── */ .sr-ln-cat-row { display: flex; align-items: center; gap: 0.45rem; padding: 0.52rem 0.5rem; border: none; background: transparent; width: 100%; color: var(--text); font-size: 0.82rem; font-weight: 700; cursor: pointer; border-radius: var(--radius-sm); font-family: inherit; text-align: left; transition: background 0.13s, color 0.13s; } .sr-ln-cat-row:hover { background: var(--blue-subtle); color: var(--blue); } .sr-ln-cat-row.sr-ln-active { background: var(--blue-subtle); color: var(--blue); } /* Coming-soon vehicle tree */ .sr-ln-tree-cs { opacity: 0.45; pointer-events: none; } .sr-ln-cat-row-cs { cursor: default; } .sr-ln-item-cs { cursor: default; pointer-events: none; } .sr-ln-cat-ico { font-size: 1rem; flex-shrink: 0; } .sr-ln-cat-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-ln-cat-body { padding-left: 0.2rem; margin-bottom: 0.15rem; } /* ── Brand rows ─────────────────────────────────────────────────── */ .sr-ln-brand-row { display: flex; align-items: center; gap: 0.38rem; padding: 0.38rem 0.4rem 0.38rem 1rem; border: none; background: transparent; width: 100%; color: var(--text-soft); font-size: 0.76rem; font-weight: 600; cursor: pointer; border-radius: var(--radius-sm); font-family: inherit; text-align: left; transition: background 0.13s, color 0.13s; } .sr-ln-brand-row:hover { background: var(--s2); color: var(--blue); } .sr-ln-brand-ico { font-size: 0.75rem; opacity: 0.7; flex-shrink: 0; } .sr-ln-brand-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-ln-brand-body { margin-bottom: 0.1rem; } /* ── Device rows ────────────────────────────────────────────────── */ .sr-ln-device-row { display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.4rem 0.3rem 1.9rem; border: none; background: transparent; width: 100%; color: var(--text-dim); font-size: 0.69rem; font-weight: 500; cursor: pointer; border-radius: var(--radius-sm); font-family: inherit; text-align: left; transition: background 0.12s, color 0.12s; white-space: nowrap; overflow: hidden; } .sr-ln-device-row:hover { background: var(--s2); color: var(--blue); } .sr-ln-device-name { flex: 1; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* ── Shared: count badges & chevrons ──────────────────────────────── */ .sr-ln-count { font-size: 0.58rem; font-weight: 700; background: var(--s3); color: var(--text-dim); border-radius: 99px; padding: 0.05rem 0.32rem; flex-shrink: 0; } .sr-ln-count-sm { font-size: 0.55rem; padding: 0.04rem 0.26rem; } .sr-ln-chev { font-size: 0.65rem; color: var(--text-dim); flex-shrink: 0; line-height: 1; } .sr-ln-chev-sm { font-size: 0.58rem; } /* ── Tier badges on device rows ──────────────────────────────────── */ .sr-ln-tier { font-size: 0.62rem; flex-shrink: 0; line-height: 1; } .sr-tier-flagship { opacity: 0.9; } .sr-tier-premium { opacity: 0.8; } .sr-tier-midrange { opacity: 0.75; } .sr-tier-budget { opacity: 0.7; } /* ── Inline spec tags on device rows ─────────────────────────────── */ .sr-ln-spec-tag { font-size: 0.55rem; font-weight: 700; color: var(--text-dim); flex-shrink: 0; line-height: 1; } .sr-ln-5g-dot { font-size: 0.53rem; font-weight: 800; letter-spacing: -0.02em; color: var(--green); flex-shrink: 0; line-height: 1; } .sr-ln-dimmed { opacity: 0.4; } /* ================================================================ LEFT NAV — FILTER PANEL ================================================================ */ .sr-ln-filters { width: 100%; } .sr-lnf-header { display: flex; align-items: center; gap: 0.38rem; padding: 0.42rem 0.55rem; border: 1px solid var(--border-dim); background: var(--s2); border-radius: var(--radius-sm); width: 100%; color: var(--text-soft); font-size: 0.73rem; font-weight: 700; cursor: pointer; font-family: inherit; text-align: left; transition: all 0.15s; margin-bottom: 0.35rem; } .sr-lnf-header:hover { background: var(--blue-subtle); border-color: var(--blue-glow); color: var(--blue); } .sr-lnf-icon { width: 13px; height: 13px; flex-shrink: 0; } .sr-lnf-title { flex: 1; letter-spacing: 0.01em; } .sr-lnf-badge { font-size: 0.53rem; font-weight: 700; background: var(--blue); color: #fff; border-radius: 99px; padding: 0.1rem 0.42rem; display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; } .sr-lnf-chev { width: 11px; height: 11px; flex-shrink: 0; transition: transform 0.2s; } .sr-lnf-chev.open { transform: rotate(180deg); } .sr-lnf-body { padding: 0.1rem 0 0.35rem; } .sr-lnf-group { margin-bottom: 0.55rem; } .sr-lnf-group-label { display: block; font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); padding: 0 0.5rem 0.3rem; } .sr-lnf-chips { display: flex; flex-wrap: wrap; gap: 0.28rem; padding: 0 0.5rem; } .sr-lnf-chip { font-size: 0.66rem; font-weight: 600; padding: 0.2rem 0.52rem; border-radius: 99px; border: 1.5px solid var(--border); background: var(--s1); color: var(--text-soft); cursor: pointer; transition: all 0.12s; font-family: inherit; white-space: nowrap; } .sr-lnf-chip:hover { border-color: var(--blue); color: var(--blue); } .sr-lnf-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; } /* ── 5G toggle row ───────────────────────────────────────────────── */ .sr-lnf-toggle-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.05rem 0.5rem; } .sr-lnf-toggle-label { font-size: 0.72rem; font-weight: 600; color: var(--text-soft); cursor: pointer; } /* iOS-style switch */ .sr-lnf-switch { position: relative; display: inline-flex; width: 32px; height: 18px; flex-shrink: 0; } .sr-lnf-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .sr-lnf-slider { position: absolute; inset: 0; background: var(--border); border-radius: 99px; cursor: pointer; transition: background 0.2s; } .sr-lnf-slider::before { content: ''; position: absolute; width: 12px; height: 12px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .sr-lnf-switch input:checked + .sr-lnf-slider { background: var(--blue); } .sr-lnf-switch input:checked + .sr-lnf-slider::before { transform: translateX(14px); } /* ── Clear button ────────────────────────────────────────────────── */ .sr-lnf-clear { display: block; width: calc(100% - 1rem); margin: 0.3rem 0.5rem 0; padding: 0.3rem 0.5rem; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); border-radius: var(--radius-sm); font-size: 0.68rem; font-weight: 700; cursor: pointer; font-family: inherit; text-align: center; transition: background 0.13s, color 0.13s; } .sr-lnf-clear:hover { background: var(--accent); color: #fff; } /* ================================================================ CATEGORY TABS (Home page) ================================================================ */ .sr-cat-tabs { display: flex; gap: 0; padding: 0 2.5rem; border-bottom: 1px solid var(--border); background: var(--s1); overflow-x: auto; scrollbar-width: none; } .sr-cat-tabs::-webkit-scrollbar { display: none; } .sr-cat-tab { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border: none; border-bottom: 2.5px solid transparent; margin-bottom: -1px; background: transparent; color: var(--text-soft); font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color 0.13s, border-color 0.13s; font-family: inherit; } .sr-cat-tab:hover { color: var(--blue); } .sr-cat-tab.active { color: var(--blue); border-bottom-color: var(--blue); } /* Category tab icon — styled pill */ .sr-cat-tab-icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; background: var(--s2); border: 1px solid var(--border-dim); flex-shrink: 0; transition: background 0.13s; } .sr-cat-tab:hover .sr-cat-tab-icon, .sr-cat-tab.active .sr-cat-tab-icon { background: var(--blue-subtle); border-color: rgba(28,63,110,0.2); } /* Vehicle tabs — red accent */ .sr-cat-tab[data-key="cars"]:hover, .sr-cat-tab[data-key="cars"].active { color: #DC2626; border-bottom-color: #DC2626; } .sr-cat-tab[data-key="bikes"]:hover, .sr-cat-tab[data-key="bikes"].active { color: #A86809; border-bottom-color: #A86809; } .sr-cat-tab[data-key="cars"]:hover .sr-cat-tab-icon, .sr-cat-tab[data-key="cars"].active .sr-cat-tab-icon { background: rgba(220,38,38,0.1); border-color: rgba(220,38,38,0.2); } .sr-cat-tab[data-key="bikes"]:hover .sr-cat-tab-icon, .sr-cat-tab[data-key="bikes"].active .sr-cat-tab-icon { background: rgba(168,104,9,0.1); border-color: rgba(168,104,9,0.2); } .sr-tab-icon-phones { color: #1C3F6E; } .sr-tab-icon-laptops { color: #7C3AED; } .sr-tab-icon-tablets { color: #0891B2; } .sr-tab-icon-watches { color: #D97706; } .sr-tab-icon-speakers { color: #059669; } .sr-tab-icon-cars { color: #DC2626; } .sr-tab-icon-bikes { color: #A86809; } /* Coming-soon tab */ .sr-cat-tab-cs { opacity: 0.5; cursor: not-allowed; pointer-events: none; position: relative; } .sr-cat-tab-cs-badge { font-size: 0.62rem !important; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(135deg, #DC2626, #A86809); background-clip: unset !important; -webkit-background-clip: unset !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-radius: 20px; padding: 2px 7px; line-height: 1.6; flex-shrink: 0; } /* Vehicle card CTA colour override */ .sr-vehicle-card .sr-device-card-cta { color: #DC2626; } .sr-vehicle-card:hover { border-color: rgba(220,38,38,0.3); } [data-theme="dark"] .sr-vehicle-card:hover { border-color: rgba(239,68,68,0.4); } /* ── Tier filter chips ──────────────────────────────────────────────── */ .sr-tier-chips { display: flex; gap: 0.35rem; padding: 0.45rem 2.5rem; background: var(--s2); border-bottom: 1px solid var(--border-dim); flex-wrap: wrap; } .sr-tier-chip { font-size: 0.73rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 99px; border: 1.5px solid var(--border); background: var(--s1); color: var(--text-soft); cursor: pointer; transition: all 0.13s; font-family: inherit; white-space: nowrap; } .sr-tier-chip:hover { border-color: var(--blue); color: var(--blue); } .sr-tier-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; } /* ================================================================ CHART PLACEHOLDER ================================================================ */ .sr-chart-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 2rem; text-align: center; background: var(--s2); border: 2px dashed var(--border); border-radius: var(--radius-lg); min-height: 200px; } .sr-chart-placeholder-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.35; } .sr-chart-placeholder h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-soft); margin-bottom: 0.5rem; } .sr-chart-placeholder p { font-size: 0.82rem; color: var(--text-dim); max-width: 440px; margin: 0; line-height: 1.6; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 991px) { .sr-hero { padding: 2.5rem 0 2rem; } .sr-steps-section, .sr-features-section { padding: 4rem 1.25rem; } } @media (max-width: 767px) { .sr-hero { padding: 2rem 0 1.5rem; } .sr-search-box { flex-direction:column; border-radius:var(--radius-lg); padding:0.5rem; gap:0.4rem; } .sr-search-input { padding:0.6rem 0.9rem; font-size:0.95rem; } .sr-search-btn { width:100%; padding:0.75rem 1rem; border-radius:var(--radius); text-align:center; } /* Left nav — hidden off-screen on mobile, slides in as drawer */ .sr-left-nav { position: fixed !important; top: 65px !important; left: 0 !important; width: 280px !important; height: calc(100vh - 65px) !important; padding: 0.75rem 0 !important; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important; z-index: 210; overflow-y: auto; } .sr-left-nav.sr-ln-mob-open { transform: translateX(0); } /* Full tree visible when drawer is open */ .sr-left-nav.sr-ln-mob-open .sr-ln-label, .sr-left-nav.sr-ln-mob-open .sr-ln-section-label, .sr-left-nav.sr-ln-mob-open .sr-ln-soon-tag, .sr-left-nav.sr-ln-mob-open .sr-ln-tree, .sr-left-nav.sr-ln-mob-open .sr-ln-filters { display: revert !important; } .sr-left-nav.sr-ln-mob-open .sr-ln-item { justify-content: flex-start !important; padding: 0.5rem 1rem !important; gap: 0.5rem !important; } /* No left-padding offset — nav is overlay */ .sr-app-body { padding-left: 0 !important; } .sr-left-nav .sr-ln-toggle { display: none; } /* Mobile backdrop */ .sr-ln-mob-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 209; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Browse content */ .sr-browse-content { padding: 1.25rem 1rem 1.5rem; } .sr-cat-tabs { padding: 0 1rem; } .sr-tier-chips { padding: 0.5rem 1rem; } .sr-devices-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.75rem; } .sr-report-header { flex-direction: column; } .sr-verdict-thumb { align-self: flex-start; } .sr-device-img { width:72px; height:72px; } .sr-arc-wrap { width:140px; height:140px; } .sr-arc-num { font-size:2.2rem; } .sr-verdict-banner { flex-direction:column; align-items:flex-start; gap:1rem; padding:1.25rem 1.25rem; } .sr-vb-divider { display:none; } .sr-reviews-table thead th:last-child, .sr-reviews-table tbody td:last-child { display:none; } .sr-features-section { padding:3rem 1rem; } .sr-section-title { font-size:1.5rem; } .sr-cta-inner { flex-direction:column; text-align:center; } .sr-cta-chips { justify-content:center; } .sr-hero-stats { justify-content:center; width:100%; } } @media (max-width: 480px) { .sr-hero-title { font-size:2.1rem; } .sr-brand img { width:80px; } } /* ═══════════════════════════════════════════════════════════════════════════ Sniff Intelligence — Insight Cards ═══════════════════════════════════════════════════════════════════════════ */ /* ── Sentiment quick pros/cons ─────────────────────────────────────────── */ .sr-sent-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.25rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .sr-sent-quick-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.45rem; } .sr-sent-quick-item { font-size: 0.8rem; color: var(--text-soft); padding: 0.25rem 0; border-bottom: 1px solid var(--border-dim); line-height: 1.4; } .sr-sent-quick-item:last-child { border-bottom: none; } .sr-sent-quick-empty { color: var(--text-dim); font-style: italic; } /* ── Sniff Intelligence (redesigned) ───────────────────────────────────── */ .sr-intel-wrapper { overflow: clip; } .sr-intel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .sr-intel-header-left { display: flex; align-items: center; gap: 0.6rem; } .sr-intel-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(45,84,148,0.6); animation: sr-pulse 2s infinite; flex-shrink: 0; } @keyframes sr-pulse { 0% { box-shadow: 0 0 0 0 rgba(45,84,148,0.6); } 70% { box-shadow: 0 0 0 10px rgba(99,102,241,0); } 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); } } .sr-intel-badge { font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.7rem; border-radius: 99px; background: rgba(45,84,148,0.10); color: var(--accent); border: 1px solid rgba(99,102,241,0.2); } .sr-intel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .sr-intel-item { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 1.15rem; border-radius: 12px; background: var(--s2); border: 1.5px solid var(--border); transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; } .sr-intel-item:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(45,84,148,0.12); border-color: rgba(99,102,241,0.35); } .sr-intel-featured { grid-column: 1 / -1; padding: 1.35rem 1.5rem; background: linear-gradient(135deg, rgba(45,84,148,0.08) 0%, rgba(139,92,246,0.05) 100%); border-color: rgba(99,102,241,0.25); } .sr-intel-featured:hover { box-shadow: 0 10px 36px rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.5); } .sr-intel-icon { font-size: 1.75rem; line-height: 1; flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(45,84,148,0.08); } .sr-intel-featured .sr-intel-icon { font-size: 2.2rem; width: 58px; height: 58px; border-radius: 14px; background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1)); } .sr-intel-text { font-size: 0.875rem; color: var(--text-soft); line-height: 1.6; flex: 1; } .sr-intel-featured .sr-intel-text { font-size: 1rem; font-weight: 500; color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════════ Chart hint sub-labels ═══════════════════════════════════════════════════════════════════════════ */ .sr-chart-hint { font-size: 0.78rem; color: var(--text-dim); margin: -0.3rem 0 0.85rem; line-height: 1.4; } /* ═══════════════════════════════════════════════════════════════════════════ Aspect Radar + Sankey canvases ═══════════════════════════════════════════════════════════════════════════ */ #sr-radar-canvas { width: 100%; height: 340px; } #sr-sankey-canvas { width: 100%; height: 340px; } /* ═══════════════════════════════════════════════════════════════════════════ Topic Network (Force Graph) ═══════════════════════════════════════════════════════════════════════════ */ #sr-graph-canvas { width: 100%; height: 500px; border-radius: var(--radius); background: var(--s2); cursor: grab; } #sr-graph-canvas:active { cursor: grabbing; } .sr-graph-legend { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--text-dim); flex-wrap: wrap; } .sr-graph-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .sr-graph-dot-green { background: #10B981; box-shadow: 0 0 6px #10B98166; } .sr-graph-dot-blue { background: #2D5494; box-shadow: 0 0 6px #2D549466; } .sr-graph-dot-red { background: #EF4444; box-shadow: 0 0 6px #EF444466; } /* ═══════════════════════════════════════════════════════════════════════════ What's New & Notable ═══════════════════════════════════════════════════════════════════════════ */ .sr-whatsnew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.65rem; } .sr-whatsnew-item { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.9rem 1.1rem; background: var(--blue-subtle); border-left: 3px solid var(--blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.855rem; color: var(--text-soft); line-height: 1.45; transition: border-color 0.18s, background 0.18s, transform 0.18s; } .sr-whatsnew-item:hover { border-color: var(--accent); background: var(--accent-subtle); transform: translateX(3px); } .sr-whatsnew-arrow { color: var(--blue); font-weight: 700; flex-shrink: 0; margin-top: 0.05rem; transition: color 0.18s; } .sr-whatsnew-item:hover .sr-whatsnew-arrow { color: var(--accent); } /* ═══════════════════════════════════════════════════════════════════════════ Reviews Explorer Tree ═══════════════════════════════════════════════════════════════════════════ */ #sr-reviews-tree { width: 100%; height: 680px; border-radius: var(--radius); background: var(--s2); cursor: grab; } #sr-reviews-tree:active { cursor: grabbing; } .sr-tree-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .sr-tree-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.85rem; border-radius: 99px; font-size: 0.8rem; font-weight: 500; border: 1.5px solid transparent; } .sr-tree-pill-pos { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); color: #059669; } .sr-tree-pill-neu { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: #D97706; } .sr-tree-pill-neg { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #DC2626; } .sr-tree-pill-hint { margin-left: auto; font-size: 0.72rem; color: var(--text-dim); font-style: italic; } /* ── Feedback Widget ──────────────────────────────────────────────────────── */ /* Hide widget while the page loading animation is active */ body:has(.sr-loading) .sr-fb-widget { display: none; } body:has(.sr-loading) .sr-report-fab { display: none; } /* ── Persistent floating action bar (Report page) ───────────────── */ .sr-report-fab { position: fixed; bottom: 5.5rem; /* sits just above the feedback tab */ right: 1.5rem; display: flex; flex-direction: column; gap: 0.45rem; z-index: 999; } .sr-fab-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 12px rgba(0,0,0,0.13); transition: box-shadow 0.15s, transform 0.15s; } .sr-fab-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.18); text-decoration: none; } .sr-fab-ghost { background: var(--s1); border: 1.5px solid var(--border); color: var(--text-soft); } .sr-fab-ghost:hover { color: var(--blue); border-color: var(--blue); } .sr-fab-primary { background: var(--blue); border: 1.5px solid var(--blue); color: #fff; } .sr-fab-primary:hover { background: var(--blue-d); border-color: var(--blue-d); color: #fff; } @media (max-width: 480px) { .sr-fab-btn span { display: none; } /* icon-only on very small screens */ .sr-fab-btn { padding: 0.55rem 0.7rem; font-size: 1rem; } } .sr-fb-widget { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1000; } .sr-fb-tab { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; border-radius: 99px; border: none; background: linear-gradient(135deg, var(--accent), #6366f1); color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 18px rgba(99,102,241,0.35); transition: transform 0.15s, box-shadow 0.15s; } .sr-fb-tab:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(99,102,241,0.45); } .sr-fb-tab-icon { font-size: 1rem; } .sr-fb-panel { position: absolute; bottom: calc(100% + 0.6rem); right: 0; width: 320px; border-radius: 14px; background: var(--s1); border: 1px solid var(--border); box-shadow: 0 8px 32px rgba(0,0,0,0.25); overflow: hidden; transform: translateY(12px) scale(0.97); transform-origin: bottom right; opacity: 0; pointer-events: none; transition: transform 0.22s ease, opacity 0.22s ease; } .sr-fb-open .sr-fb-panel { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; } .sr-fb-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.1rem; background: linear-gradient(135deg, var(--accent), #6366f1); color: #fff; font-weight: 600; font-size: 0.9rem; } .sr-fb-close { background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; } .sr-fb-close:hover { color: #fff; } .sr-fb-body { padding: 1rem 1.1rem; } .sr-fb-check-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.75rem; cursor: pointer; user-select: none; } .sr-fb-check-label input { cursor: pointer; } .sr-fb-field { margin-bottom: 0.65rem; } .sr-fb-input { width: 100%; padding: 0.5rem 0.75rem; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.85rem; outline: none; box-sizing: border-box; transition: border-color 0.15s; } .sr-fb-input:focus { border-color: var(--accent); } .sr-fb-input:disabled { background: var(--s2); color: var(--text-soft); cursor: default; opacity: 1; } .sr-fb-textarea { resize: vertical; min-height: 90px; } .sr-fb-input-err { border-color: #ef4444 !important; } .sr-fb-field-err { font-size: 0.75rem; color: #ef4444; margin-top: 0.25rem; display: block; } .sr-fb-error { font-size: 0.8rem; color: #ef4444; margin-bottom: 0.5rem; } .sr-fb-submit { width: 100%; padding: 0.55rem 1rem; border-radius: 8px; border: none; background: linear-gradient(135deg, var(--accent), #6366f1); color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .sr-fb-submit:disabled { opacity: 0.6; cursor: not-allowed; } .sr-fb-success { text-align: center; padding: 1rem 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .sr-fb-success-icon { font-size: 2rem; } .sr-fb-success p { font-size: 0.88rem; color: var(--text-dim); margin: 0; } .sr-fb-another { background: none; border: 1.5px solid var(--border); border-radius: 8px; padding: 0.3rem 0.9rem; font-size: 0.8rem; color: var(--text-dim); cursor: pointer; } .sr-fb-another:hover { border-color: var(--accent); color: var(--accent); } /* responsive */ @media (max-width: 640px) { .sr-intel-grid { grid-template-columns: 1fr; } .sr-intel-featured { grid-column: 1; } .sr-sent-quick { grid-template-columns: 1fr; } .sr-whatsnew-grid { grid-template-columns: 1fr; } #sr-radar-canvas { height: 280px; } #sr-sankey-canvas { height: 280px; } #sr-graph-canvas { height: 380px; } #sr-reviews-tree { height: 420px; } .sr-tree-pill-hint { display: none; } } /* ── Ghost button ─────────────────────────────────────────────────────────── */ .sr-btn-ghost { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.25rem; border-radius: 8px; border: 1.5px solid var(--border); background: transparent; color: var(--text-soft); font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .sr-btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(99,102,241,0.06); } /* ── Compare page ─────────────────────────────────────────────────────────── */ .sr-compare { max-width: 1120px; } /* Title bar */ .sr-compare-title-bar { margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .sr-compare-heading { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0.5rem 0 0; } .sr-compare-name-a { color: #2D5494; } .sr-compare-name-b { color: var(--accent); } .sr-compare-vs-badge { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.25rem 0.8rem; border-radius: 99px; background: var(--s2); border: 1.5px solid var(--border); color: var(--text-dim); } /* Stats table */ .sr-compare-table-wrap { overflow-x: auto; } .sr-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; } .sr-compare-table th, .sr-compare-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .sr-compare-table thead th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); background: var(--s2); } .sr-ct-a { color: #2D5494 !important; } .sr-ct-b { color: var(--accent) !important; } .sr-ct-label { color: var(--text-dim); font-size: 0.8rem; white-space: nowrap; width: 160px; } .sr-ct-metric { width: 160px; } .sr-compare-winner-a { background: rgba(28,63,110,0.07); border-left: 3px solid #2D5494; font-weight: 600; color: #2D5494; } .sr-compare-winner-b { background: rgba(196,126,13,0.07); border-left: 3px solid var(--accent); font-weight: 600; color: var(--accent); } .sr-winner-tick { margin-left: 0.4rem; font-size: 0.75rem; color: #10B981; font-weight: 800; } /* Verdict pill in table */ .sr-verdict-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: 99px; font-size: 0.75rem; font-weight: 700; } .sr-verdict-pill.sr-verdict-success { background: rgba(16,185,129,0.1); color: #059669; } .sr-verdict-pill.sr-verdict-warning { background: rgba(245,158,11,0.1); color: #D97706; } .sr-verdict-pill.sr-verdict-danger { background: rgba(239,68,68,0.1); color: #DC2626; } /* Radar canvas */ #sr-compare-radar { width: 100%; height: 380px; } /* Radar legend */ .sr-compare-radar-legend { display: flex; align-items: center; gap: 1.25rem; font-size: 0.82rem; color: var(--text-soft); margin-bottom: 0.5rem; } .sr-compare-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .sr-compare-dot-a { background: #2D5494; box-shadow: 0 0 6px rgba(28,63,110,0.4); } .sr-compare-dot-b { background: #C47E0D; box-shadow: 0 0 6px rgba(196,126,13,0.4); } /* Half state */ .sr-compare-half { max-width: 820px; margin: 0 auto; } .sr-compare-half-header { margin-bottom: 2rem; } .sr-compare-half-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; margin: 0.5rem 0 0.25rem; } .sr-compare-half-layout { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .sr-compare-mini-card { flex-shrink: 0; min-width: 200px; max-width: 260px; background: var(--card-bg); border: 1.5px solid var(--border); border-left: 4px solid #2D5494; border-radius: var(--radius-lg); padding: 1.25rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; } .sr-compare-mini-img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 0.25rem; } .sr-compare-mini-name { font-weight: 700; font-size: 0.9rem; color: var(--text); } .sr-compare-mini-score { font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; } .sr-compare-mini-verdict { font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 99px; } .sr-compare-mini-verdict.sr-verdict-success { background:rgba(16,185,129,0.1); color:#059669; } .sr-compare-mini-verdict.sr-verdict-warning { background:rgba(245,158,11,0.1); color:#D97706; } .sr-compare-mini-verdict.sr-verdict-danger { background:rgba(239,68,68,0.1); color:#DC2626; } .sr-compare-vs { font-size: 2.5rem; font-weight: 900; color: var(--text-dim); flex-shrink: 0; line-height: 1; } .sr-compare-search-panel { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 0.6rem; } .sr-compare-search-label { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } .sr-search-row { display: flex; gap: 0.5rem; } .sr-search-row .sr-search-input { flex: 1; } /* Responsive */ @media (max-width: 767px) { .sr-compare-half-layout { flex-direction: column; align-items: stretch; } .sr-compare-mini-card { max-width: 100%; } .sr-compare-vs { text-align: center; font-size: 1.75rem; } .sr-compare-heading { font-size: 1.25rem; } #sr-compare-radar { height: 280px; } } /* ── Autocomplete ─────────────────────────────────────────────────────── */ .sr-autocomplete-wrap { position: relative; width: 100%; } .sr-autocomplete-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); z-index: 9000; overflow: hidden; max-height: 340px; overflow-y: auto; } .sr-autocomplete-section { padding: 0.45rem 0.9rem 0.3rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); background: var(--s2); border-bottom: 1px solid var(--border-dim); } .sr-autocomplete-item { padding: 0.6rem 1rem; font-size: 0.88rem; color: var(--text); cursor: pointer; transition: background 0.12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-autocomplete-item:hover, .sr-autocomplete-item.active { background: var(--blue-subtle); color: var(--blue); } .sr-autocomplete-no-match { padding: 0.75rem 1rem; font-size: 0.85rem; color: var(--text-dim); font-style: italic; } /* ── Recent search chips (Home page) ─────────────────────────────────── */ .sr-recent-searches { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; } .sr-recent-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--s1); color: var(--text-soft); font-size: 0.78rem; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .sr-recent-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-subtle); } .sr-recent-chip::before { content: "🕐"; font-size: 0.72rem; } /* ── Google sign-in button ────────────────────────────────────────── */ .sr-btn-google { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 1.1rem; background: #fff; border: 1.5px solid #dadce0; border-radius: 999px; color: #3c4043; font-size: 0.85rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: box-shadow 0.2s, background 0.2s; white-space: nowrap; } .sr-btn-google:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.18); background: #f8f9fa; color: #3c4043; text-decoration: none; } .sr-btn-google-lg { padding: 0.75rem 2rem; font-size: 1rem; margin-top: 0.5rem; } .sr-google-g { font-size: 1rem; font-weight: 800; background: linear-gradient(135deg, #4285f4 0%, #ea4335 33%, #fbbc04 66%, #34a853 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } [data-theme="dark"] .sr-btn-google { background: #2d2d2d; border-color: #555; color: #e0e0e0; } [data-theme="dark"] .sr-btn-google:hover { background: #383838; color: #e0e0e0; } /* ── User menu (nav) ─────────────────────────────────────────────── */ .sr-user-menu { position: relative; display: inline-flex; } .sr-user-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--blue); background: var(--blue-subtle); color: var(--blue); font-size: 0.75rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; transition: box-shadow 0.15s; } .sr-user-avatar:hover { box-shadow: 0 0 0 3px var(--blue-glow); } .sr-user-avatar-img { width: 100%; height: 100%; object-fit: cover; } .sr-user-avatar-initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .sr-user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 200px; z-index: 300; overflow: hidden; padding: 0.75rem 0 0.4rem; } .sr-user-dropdown-name { padding: 0 1rem 0.1rem; font-weight: 600; font-size: 0.88rem; color: var(--text); } .sr-user-dropdown-email { padding: 0 1rem 0.5rem; font-size: 0.75rem; color: var(--text-dim); } .sr-user-dropdown-divider { border: none; border-top: 1px solid var(--border-dim); margin: 0; } .sr-user-dropdown-item { display: block; padding: 0.55rem 1rem; font-size: 0.85rem; color: var(--text-soft); text-decoration: none; transition: background 0.12s, color 0.12s; } .sr-user-dropdown-item:hover { background: var(--blue-subtle); color: var(--blue); } .sr-signout-btn { width: 100%; background: none; border: none; cursor: pointer; text-align: left; } /* ── Auth gate (report page) ────────────────────────────────────── */ .sr-auth-gate-wrap { position: relative; min-height: 320px; margin-bottom: 3rem; } .sr-auth-blurred-preview { filter: blur(7px); opacity: 0.45; pointer-events: none; user-select: none; } .sr-auth-ghost-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; } .sr-auth-ghost-card { height: 160px; border-radius: var(--radius-lg); background: var(--s1); border: 1px solid var(--border); } .sr-auth-gate-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 100; background: rgba(0,0,0,0.35); backdrop-filter: blur(2px); } .sr-auth-gate { background: var(--s1); border-radius: var(--radius-xl); padding: 2.25rem 2rem 1.75rem; max-width: 460px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .sr-auth-gate-lock { font-size: 2.5rem; margin-bottom: 0.5rem; line-height: 1; } .sr-auth-gate-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.02em; } .sr-auth-gate-desc { font-size: 0.88rem; color: var(--text-soft); margin-bottom: 1.1rem; } .sr-auth-gate-features { list-style: none; padding: 0; margin: 0 0 1.4rem; text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; } .sr-auth-gate-features li { font-size: 0.82rem; color: var(--text-soft); padding: 0.2rem 0; } .sr-auth-gate-note { font-size: 0.74rem; color: var(--text-dim); margin: 0.85rem 0 0; } @media (max-width: 599px) { .sr-auth-gate-features { grid-template-columns: 1fr; } .sr-auth-ghost-cards { grid-template-columns: 1fr; } .sr-auth-gate { padding: 1.5rem 1.25rem; } } /* ── Admin Analytics Dashboard ───────────────────────────────────── */ .sr-dash-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; } .sr-dash-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; margin: 0; } .sr-dash-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .sr-dash-updated { font-size: 0.78rem; color: var(--text-dim); } /* Admin refresh badge in top nav */ .sr-admin-refresh-badge { font-size: 0.72rem; color: var(--text-dim); background: var(--s2); border: 1px solid var(--border); border-radius: 6px; padding: 0.2rem 0.6rem; white-space: nowrap; letter-spacing: 0.01em; } /* Stat cards */ .sr-dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; } @media (max-width: 900px) { .sr-dash-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .sr-dash-stats { grid-template-columns: 1fr; } } .sr-dash-stat { background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; border-left: 4px solid transparent; } .sr-dash-stat-blue { border-left-color: #3B82F6; } .sr-dash-stat-teal { border-left-color: #14B8A6; } .sr-dash-stat-purple { border-left-color: #8B5CF6; } .sr-dash-stat-indigo { border-left-color: #2D5494; } .sr-dash-stat-green { border-left-color: #22C55E; } .sr-dash-stat-orange { border-left-color: #C47E0D; } .sr-dash-stat-pink { border-left-color: #EC4899; } .sr-dash-stat-red { border-left-color: #EF4444; } .sr-dash-stat-icon { font-size: 1.4rem; margin-bottom: 0.5rem; line-height: 1; } .sr-dash-stat-num { font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.2rem; } .sr-dash-stat-label { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } .sr-dash-stat-sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.35rem; } /* Secondary stats row */ .sr-dash-sub-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.82rem; color: var(--text-soft); margin-bottom: 1.75rem; padding: 0.75rem 1rem; background: var(--s2); border-radius: var(--radius); border: 1px solid var(--border-dim); } /* Table */ .sr-dash-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .sr-dash-table thead th { text-align: left; padding: 0.4rem 0.6rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); border-bottom: 1px solid var(--border); } .sr-dash-table tbody td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border-dim); vertical-align: middle; } .sr-dash-table tbody tr:last-child td { border-bottom: none; } .sr-dash-table tbody tr:hover td { background: var(--s2); } .sr-dash-user-cell { display: flex; align-items: center; gap: 0.55rem; } .sr-dash-avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .sr-dash-avatar-initials { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-subtle); color: var(--blue); font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sr-dash-uid { font-family: monospace; font-size: 0.75rem; background: var(--s2); padding: 0.15rem 0.4rem; border-radius: 4px; color: var(--text-soft); cursor: help; } /* ══════════════════════════════════════════════════════════════════════ Release Notes Dropdown ══════════════════════════════════════════════════════════════════════ */ .sr-rn-wrap { position: relative; } .sr-rn-btn { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; font-size: 0.78rem; font-weight: 600; font-family: inherit; color: var(--text-soft); background: var(--s3); border: 1px solid var(--border); border-radius: 99px; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .sr-rn-btn:hover, .sr-rn-btn-open { color: var(--text); background: var(--blue-subtle); border-color: var(--blue); } .sr-rn-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: rnPulse 2s ease-in-out infinite; flex-shrink: 0; } @keyframes rnPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 5px transparent; } } .sr-rn-chev { width: 10px; height: 10px; transition: transform 0.2s; } .sr-rn-chev.open { transform: rotate(180deg); } .sr-rn-backdrop { position: fixed; inset: 0; z-index: 299; } .sr-rn-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 520px; background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; z-index: 300; overflow: hidden; } .sr-rn-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem 0.7rem; border-bottom: 1px solid var(--border); } .sr-rn-panel-title { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); } .sr-rn-close { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 0.9rem; padding: 0.1rem 0.3rem; } .sr-rn-close:hover { color: var(--text); } .sr-rn-entries { flex: 1; overflow-y: auto; padding: 0.5rem 0; } .sr-rn-entry { padding: 0.75rem 1rem; border-left: 3px solid transparent; margin: 0.25rem 0.5rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--s2); } .sr-rn-entry + .sr-rn-entry { margin-top: 0.5rem; } .sr-rn-blue { border-left-color: var(--blue); } .sr-rn-purple { border-left-color: var(--purple); } .sr-rn-green { border-left-color: var(--green); } .sr-rn-amber { border-left-color: var(--amber); } .sr-rn-accent { border-left-color: var(--accent); } .sr-rn-entry-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; } .sr-rn-ver { font-size: 0.72rem; font-weight: 700; color: var(--blue); } .sr-rn-date { font-size: 0.7rem; color: var(--text-dim); } .sr-rn-entry-title { font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 0.35rem; } .sr-rn-list { list-style: none; padding: 0; margin: 0; } .sr-rn-list li { font-size: 0.75rem; color: var(--text-soft); padding: 0.1rem 0 0.1rem 0.85rem; position: relative; } .sr-rn-list li::before { content: '·'; position: absolute; left: 0.25rem; color: var(--text-dim); } .sr-rn-footer-link { display: block; text-align: center; padding: 0.65rem; font-size: 0.78rem; font-weight: 600; color: var(--blue); border-top: 1px solid var(--border); text-decoration: none; transition: background 0.15s; } .sr-rn-footer-link:hover { background: var(--blue-subtle); text-decoration: none; color: var(--blue); } /* ══════════════════════════════════════════════════════════════════════ Left Nav — Sniff Next link ══════════════════════════════════════════════════════════════════════ */ /* Food row in expanded left nav */ .sr-ln-food-row { display: flex; align-items: center; gap: 0.45rem; padding: 0.52rem 0.5rem; border-radius: var(--radius-sm); color: var(--text); font-size: 0.82rem; font-weight: 700; text-decoration: none !important; transition: background 0.13s, color 0.13s; width: 100%; } .sr-ln-food-row:hover { background: rgba(245,158,11,0.1); color: #b45309; text-decoration: none !important; } .sr-ln-food-row.sr-ln-active { background: rgba(245,158,11,0.12); color: #b45309; } [data-theme="dark"] .sr-ln-food-row:hover, [data-theme="dark"] .sr-ln-food-row.sr-ln-active { color: #fbbf24; background: rgba(251,191,36,0.1); } .sr-ln-sniff-next { display: flex; align-items: center; gap: 0.55rem; margin: 0.5rem 0.75rem; padding: 0.55rem 0.75rem; border-radius: var(--radius); background: linear-gradient(135deg, rgba(28,63,110,0.08), rgba(124,58,237,0.08)); border: 1px solid rgba(28,63,110,0.2); text-decoration: none; transition: all 0.18s; position: relative; overflow: hidden; } .sr-ln-sniff-next:hover { background: linear-gradient(135deg, rgba(28,63,110,0.15), rgba(124,58,237,0.15)); border-color: var(--blue); text-decoration: none; transform: translateX(2px); } .sr-ln-sn-pulse { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--blue), var(--purple)); border-radius: 99px 0 0 99px; animation: snPulse 2.5s ease-in-out infinite; } @keyframes snPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; box-shadow: 0 0 8px var(--blue-glow); } } .sr-ln-sn-icon { font-size: 1rem; } .sr-ln-sn-label { font-size: 0.83rem; font-weight: 600; color: var(--text); flex: 1; } .sr-ln-sn-tag { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue); background: var(--blue-subtle); padding: 0.15rem 0.45rem; border-radius: 99px; } .sr-ln-sn-mini { text-decoration: none; } .sr-ln-sn-mini:hover { text-decoration: none; } /* ══════════════════════════════════════════════════════════════════════ Sniff Next Page ══════════════════════════════════════════════════════════════════════ */ /* Hero */ .snx-hero { position: relative; overflow: hidden; min-height: 320px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0a0e1a 0%, #0d1117 40%, #13072a 100%); padding: 4rem 2rem 3rem; } .snx-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; animation: snxOrb 8s ease-in-out infinite alternate; } .snx-orb-1 { width: 400px; height: 400px; background: radial-gradient(circle, #1C3F6E, transparent); top: -100px; left: -80px; } .snx-orb-2 { width: 350px; height: 350px; background: radial-gradient(circle, #7C3AED, transparent); bottom: -80px; right: -60px; animation-delay: -3s; } .snx-orb-3 { width: 250px; height: 250px; background: radial-gradient(circle, #C47E0D, transparent); top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.15; animation-delay: -5s; } @keyframes snxOrb { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.15) translate(20px, -20px); } } .snx-orb-2 { animation-name: snxOrb2; } @keyframes snxOrb2 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.1) translate(-15px, 15px); } } .snx-hero-inner { position: relative; z-index: 1; text-align: center; max-width: 620px; } .snx-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(196,126,13,0.9); margin-bottom: 1rem; } .snx-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: rnPulse 2s infinite; } .snx-title { font-size: clamp(2.8rem, 6vw, 4.5rem); font-weight: 900; letter-spacing: -0.04em; color: #fff; margin-bottom: 1rem; line-height: 1.05; } .snx-gradient-text { background: linear-gradient(135deg, #2D5494, #A855F7, #C47E0D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .snx-sub { font-size: 1rem; color: rgba(255,255,255,0.6); margin-bottom: 1.75rem; line-height: 1.7; } .snx-legend { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .snx-badge { font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.85rem; border-radius: 99px; border: 1px solid; } .snx-badge-dev { color: #34d399; border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.1); } .snx-badge-planned { color: #4D7CC4; border-color: rgba(77,124,196,0.4); background: rgba(77,124,196,0.1); } .snx-badge-research { color: #fb923c; border-color: rgba(251,146,60,0.4); background: rgba(251,146,60,0.1); } /* Sections */ .snx-section { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem 1.5rem; } .snx-section-last { padding-bottom: 4rem; } .snx-section-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .snx-section-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .snx-dot-dev { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,0.5); } .snx-dot-planned { background: #4D7CC4; box-shadow: 0 0 8px rgba(77,124,196,0.5); } .snx-dot-research { background: #fb923c; box-shadow: 0 0 8px rgba(251,146,60,0.5); } .snx-section-title { font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 0; } .snx-section-sub { font-size: 0.8rem; color: var(--text-dim); } /* Grid */ .snx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .snx-grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .snx-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .snx-grid, .snx-grid-3 { grid-template-columns: 1fr; } } /* Cards */ .snx-card { display: flex; gap: 1rem; padding: 1.25rem; background: var(--s1); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; position: relative; overflow: hidden; } .snx-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .snx-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .snx-card-dev::before { background: linear-gradient(90deg, #34d399, #10b981); } .snx-card-planned::before { background: linear-gradient(90deg, #4D7CC4, #2D5494); } .snx-card-research::before { background: linear-gradient(90deg, #D4930F, #C47E0D); } .snx-card-dev:hover { border-color: rgba(52,211,153,0.4); } .snx-card-planned:hover { border-color: rgba(77,124,196,0.4); } .snx-card-research:hover { border-color: rgba(196,126,13,0.4); } .snx-card-icon { font-size: 1.8rem; flex-shrink: 0; line-height: 1; margin-top: 0.1rem; } .snx-card-body { flex: 1; min-width: 0; } .snx-card-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; } .snx-card-desc { font-size: 0.8rem; color: var(--text-soft); line-height: 1.6; margin: 0; } /* Progress bar */ .snx-progress-wrap { margin-top: 0.85rem; height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; } .snx-progress-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #34d399, #10b981); box-shadow: 0 0 8px rgba(52,211,153,0.5); transition: width 0.6s ease; } .snx-progress-label { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.3rem; display: block; } /* ══════════════════════════════════════════════════════════════════════ Report Dashboard Layout ══════════════════════════════════════════════════════════════════════ */ .sr-dashboard { padding: 0 1.5rem 2rem; max-width: 1400px; margin: 0 auto; } /* KPI Strip */ .sr-kpi-strip { display: flex; align-items: center; gap: 0; flex-wrap: wrap; background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 0.75rem 1.25rem; margin-bottom: 1.5rem; gap: 0; } .sr-kpi-device { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex-shrink: 0; } .sr-kpi-img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); } .sr-kpi-name { font-size: 0.92rem; font-weight: 700; color: var(--text); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .sr-kpi-divider-v { width: 1px; height: 36px; background: var(--border); margin: 0 1.1rem; flex-shrink: 0; } .sr-kpi-stat { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; flex-shrink: 0; } .sr-kpi-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .sr-kpi-big { font-size: 1.2rem; font-weight: 800; color: var(--text); line-height: 1; } .sr-kpi-verdict { font-size: 0.88rem; font-weight: 800; letter-spacing: 0.03em; padding: 0.2rem 0.6rem; border-radius: 99px; } .sr-kpi-price { font-size: 0.75rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; } .sr-kpi-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-shrink: 0; } .sr-kpi-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.85rem; font-size: 0.78rem; font-weight: 600; font-family: inherit; border-radius: 99px; border: 1px solid var(--border); background: var(--s2); color: var(--text-soft); text-decoration: none; transition: all 0.15s; cursor: pointer; white-space: nowrap; } .sr-kpi-btn:hover { background: var(--s3); color: var(--text); text-decoration: none; } .sr-kpi-btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); } .sr-kpi-btn-primary:hover { background: var(--blue-d); color: #fff; } /* Dashboard grid rows */ .sr-db-row { display: grid; gap: 1rem; margin-bottom: 1rem; } .sr-db-3col { grid-template-columns: repeat(3, 1fr); } .sr-db-2col { grid-template-columns: repeat(2, 1fr); } .sr-db-2col-5-7 { grid-template-columns: 5fr 7fr; } @media (max-width: 1024px) { .sr-db-3col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .sr-db-3col, .sr-db-2col, .sr-db-2col-5-7 { grid-template-columns: 1fr; } .sr-kpi-strip { gap: 0.5rem; } .sr-kpi-divider-v { display: none; } } /* Donut stat row */ .sr-donut-stats { display: flex; justify-content: space-around; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border-dim); } .sr-ds-item { display: flex; align-items: center; gap: 0.4rem; } .sr-ds-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .sr-ds-label { font-size: 0.72rem; color: var(--text-dim); } .sr-ds-val { font-size: 0.85rem; font-weight: 700; } /* Verdict dashboard card */ .sr-verdict-card-db { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 0.4rem; padding: 1.5rem 1.25rem; } .sr-vc-emoji { font-size: 2.8rem; line-height: 1; } .sr-vc-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .sr-vc-verdict { font-size: 1.6rem; font-weight: 900; letter-spacing: 0.04em; } .sr-vc-text { font-size: 0.78rem; color: var(--text-soft); line-height: 1.55; margin: 0; } .sr-vc-price-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border-dim); width: 100%; } .sr-vc-price-label { font-size: 0.78rem; font-weight: 600; color: var(--text-soft); } /* ── SniffScore Formula Popover ─────────────────────────────────────── */ .sr-formula-pop-wrap { position: relative; width: 100%; display: flex; justify-content: center; } .sr-formula-trigger { background: none; border: none; padding: 0; font-size: 0.68rem; font-weight: 600; color: var(--text-dim); cursor: pointer; letter-spacing: 0.01em; text-decoration: underline dotted; text-underline-offset: 3px; transition: color 0.15s; } .sr-formula-trigger:hover { color: var(--blue); } .sr-formula-popover { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 270px; background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 50; } .sr-formula-popover::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--border); } .sr-formula-popover .sr-pp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; } .sr-formula-popover .sr-pp-title { font-size: 0.72rem; font-weight: 700; color: var(--text); } /* ── SniffScore Formula rows (shared between card + popover) ────────── */ .sr-sf-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 0.4rem; } .sr-sf-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; margin-bottom: 0.2rem; flex-wrap: wrap; } .sr-sf-label { font-weight: 600; flex: 1; } .sr-sf-op { color: var(--text-dim); flex-shrink: 0; } .sr-sf-val { font-weight: 700; flex-shrink: 0; } .sr-sf-total { display: flex; justify-content: space-between; align-items: center; margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid var(--border); font-size: 0.75rem; font-weight: 700; color: var(--text-soft); } .sr-sf-total span:last-child { font-size: 0.88rem; } /* ================================================================ DESIGN POLISH — v2.0 Elevation · Typography · Micro-interactions · Surface depth ================================================================ */ /* ── 1. Shadow system — properly visible depth ──────────────────── */ :root { --shadow-xs: 0 1px 2px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.05); --shadow: 0 2px 4px rgba(0,0,0,0.06), 0 6px 18px rgba(0,0,0,0.07); --shadow-md: 0 4px 8px rgba(0,0,0,0.07), 0 14px 32px rgba(0,0,0,0.08); --shadow-lg: 0 10px 20px rgba(0,0,0,0.09), 0 24px 52px rgba(0,0,0,0.10); --shadow-blue:0 4px 16px rgba(79,70,229,0.24), 0 1px 4px rgba(28,63,110,0.14); } [data-theme="dark"] { --shadow-xs: 0 1px 3px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3); --shadow: 0 2px 6px rgba(0,0,0,0.45), 0 8px 22px rgba(0,0,0,0.35); --shadow-md: 0 6px 14px rgba(0,0,0,0.55), 0 18px 40px rgba(0,0,0,0.4); --shadow-lg: 0 12px 28px rgba(0,0,0,0.65), 0 28px 60px rgba(0,0,0,0.5); } /* ── 2. Page background — subtle brand mesh ─────────────────────── */ body { background-image: radial-gradient(ellipse 75% 50% at 0% 0%, rgba(28,63,110,0.05) 0%, transparent 55%), radial-gradient(ellipse 55% 40% at 100% 95%, rgba(249,115,22,0.04) 0%, transparent 55%); background-attachment: fixed; } [data-theme="dark"] body { background-image: radial-gradient(ellipse 75% 50% at 0% 0%, rgba(99,102,241,0.09) 0%, transparent 55%), radial-gradient(ellipse 55% 40% at 100% 95%, rgba(249,115,22,0.06) 0%, transparent 55%); background-attachment: fixed; } /* ── 3. Text selection ───────────────────────────────────────────── */ ::selection { background: rgba(79,70,229,0.18); color: var(--text); } /* ── 4. Card elevation — gradient surface, hover shimmer ─────────── */ .sr-card { padding: 1.75rem; border-radius: 16px; border-width: 1px; box-shadow: var(--shadow-md); position: relative; } .sr-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 55%; background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%); border-radius: 16px 16px 0 0; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; } .sr-card:hover::before { opacity: 1; } .sr-card-title { font-size: 0.75rem; font-weight: 800; color: var(--text-soft); letter-spacing: 0.09em; padding-bottom: 0.9rem; margin-bottom: 1.1rem; } [data-theme="dark"] .sr-card { background: linear-gradient(160deg, var(--s1) 0%, color-mix(in srgb, var(--s1) 94%, #1C3F6E) 100%); } /* ── 5. Primary button — gradient + depth ────────────────────────── */ .sr-btn-primary, .sr-btn-nav { background: linear-gradient(135deg, var(--blue) 0%, #2D5494 100%); box-shadow: 0 4px 14px rgba(28,63,110,0.30), 0 1px 4px rgba(28,63,110,0.16); } .sr-btn-primary:hover:not(:disabled), .sr-btn-nav:hover { background: linear-gradient(135deg, var(--blue-d) 0%, var(--blue) 100%); box-shadow: 0 6px 24px rgba(79,70,229,0.40), 0 2px 6px rgba(79,70,229,0.22); transform: translateY(-2px); } /* ── 6. Hero mesh — richer radial gradients ──────────────────────── */ .sr-hero-mesh { background: radial-gradient(ellipse 70% 60% at 10% 5%, rgba(79,70,229,0.13) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 90% 90%, rgba(249,115,22,0.11) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 60% 20%, rgba(28,63,110,0.07) 0%, transparent 55%), radial-gradient(ellipse 35% 30% at 25% 75%, rgba(124,58,237,0.06) 0%, transparent 50%); } [data-theme="dark"] .sr-hero-mesh { background: radial-gradient(ellipse 70% 60% at 10% 5%, rgba(99,102,241,0.18) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 90% 90%, rgba(249,115,22,0.14) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 60% 20%, rgba(99,102,241,0.11) 0%, transparent 55%), radial-gradient(ellipse 35% 30% at 25% 75%, rgba(139,92,246,0.08) 0%, transparent 50%); } /* ── 7. Hero stats bar — gradient surface ────────────────────────── */ .sr-hero-stats { box-shadow: var(--shadow-md); border-width: 1px; background: linear-gradient(135deg, var(--s1) 0%, color-mix(in srgb, var(--s1) 96%, var(--blue)) 100%); } .sr-hstat-num { font-size: 2.4rem; font-weight: 900; letter-spacing: -0.05em; } /* ── 8. Device cards — taller, breathing room ────────────────────── */ .sr-device-card { min-height: 118px; padding: 1.05rem 0.9rem 0.9rem; box-shadow: var(--shadow); } .sr-device-card-icon { width: 48px; height: 48px; border-radius: 13px; font-size: 1.5rem; } .sr-device-card-name { font-size: 0.79rem; font-weight: 700; } /* ── 9. KPI strip — elevated, left-tinted ───────────────────────── */ .sr-kpi-strip { padding: 0.9rem 1.5rem; border-radius: 16px; box-shadow: var(--shadow-md); border-width: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--s1) 97%, var(--blue)) 0%, var(--s1) 40%); } .sr-kpi-name { font-size: 1rem; font-weight: 800; } .sr-kpi-big { font-size: 1.4rem; letter-spacing: -0.03em; } .sr-kpi-label { font-size: 0.67rem; letter-spacing: 0.08em; } /* ── 10. Left nav active — left border indicator ─────────────────── */ .sr-ln-active { border-left: 3px solid var(--blue) !important; padding-left: calc(0.65rem - 3px) !important; font-weight: 700 !important; } /* ── 11. Left nav shell — soft shadow ────────────────────────────── */ .sr-left-nav { box-shadow: 2px 0 16px rgba(0,0,0,0.04); } /* ── 12. Navbar — distinct, not flat ─────────────────────────────── */ .sr-navbar { box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,0.05); } /* ── 13. Feature cards — brand-tinted gradient ───────────────────── */ .sr-feature-card { box-shadow: var(--shadow-md); border-width: 1px; } .sr-feature-card:hover { box-shadow: 0 18px 44px -4px rgba(0,0,0,0.12); transform: translateY(-5px); } .sr-fc-blue { background: linear-gradient(160deg, var(--s1) 55%, rgba(79,70,229,0.04)); } .sr-fc-orange { background: linear-gradient(160deg, var(--s1) 55%, rgba(249,115,22,0.04)); } .sr-fc-green { background: linear-gradient(160deg, var(--s1) 55%, rgba(5,150,105,0.04)); } .sr-fc-purple { background: linear-gradient(160deg, var(--s1) 55%, rgba(124,58,237,0.04)); } /* ── 14. Search box — stronger lift ──────────────────────────────── */ .sr-search-box { box-shadow: 0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04); } .sr-search-box:focus-within { box-shadow: 0 0 0 3px var(--blue-glow), 0 6px 20px rgba(0,0,0,0.09); } /* ── 15. Category tabs ───────────────────────────────────────────── */ .sr-cat-tab.active { font-weight: 700; } .sr-cat-tab.active .sr-cat-tab-icon { box-shadow: 0 2px 8px rgba(79,70,229,0.22); } /* ── 16. Verdict banner — colored ambient glow ───────────────────── */ .sr-verdict-banner-success { box-shadow: 0 4px 24px rgba(5,150,105,0.14); } .sr-verdict-banner-warning { box-shadow: 0 4px 24px rgba(217,119,6,0.14); } .sr-verdict-banner-danger { box-shadow: 0 4px 24px rgba(220,38,38,0.12); } /* ── 17. Score donut ─────────────────────────────────────────────── */ .sr-arc-wrap { filter: drop-shadow(0 4px 16px rgba(0,0,0,0.09)); } .sr-arc-num { font-size: 3rem; letter-spacing: -0.06em; } /* ── 18. How-it-works steps ──────────────────────────────────────── */ .sr-hiw-step { box-shadow: var(--shadow-md); border-width: 1px; } /* ── 19. Popovers ────────────────────────────────────────────────── */ .sr-price-popover { box-shadow: 0 16px 48px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.08); border-radius: var(--radius-lg); } .sr-formula-popover { box-shadow: 0 12px 32px rgba(0,0,0,0.14), 0 3px 8px rgba(0,0,0,0.07); } /* ── 20. Intel insight items ─────────────────────────────────────── */ .sr-intel-item { box-shadow: var(--shadow); } /* ── 21. Score stat numbers ──────────────────────────────────────── */ .sr-score-stat-val { font-size: 1.1rem; letter-spacing: -0.02em; } /* ── 22. Phrase items ────────────────────────────────────────────── */ .sr-phrase-item { border-radius: 10px; } /* ── 23. Chip & tag depth ────────────────────────────────────────── */ .sr-chip { box-shadow: var(--shadow-xs); } .sr-tag { box-shadow: var(--shadow-xs); } /* ── 24. Footer — slight gradient ────────────────────────────────── */ .sr-footer { background: linear-gradient(180deg, var(--s1) 0%, color-mix(in srgb, var(--s1) 97%, var(--blue)) 100%); } /* ── 25. Scrollbars ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ── 26. Spec items ──────────────────────────────────────────────── */ .sr-spec-item { box-shadow: var(--shadow-xs); } /* ── 27. Browse header spacing ───────────────────────────────────── */ .sr-browse-header { padding-bottom: 1.35rem; margin-bottom: 1.85rem; } /* ── 28. Typography refinements ──────────────────────────────────── */ h1, h2, h3 { letter-spacing: -0.03em; } .sr-report-title { letter-spacing: -0.05em; } .sr-hero-title { letter-spacing: -0.055em; } .sr-section-title { letter-spacing: -0.04em; } .sr-cta-title { letter-spacing: -0.045em; } /* ================================================================ CRYSTAL GLASS LAYER — v1.0 Specular highlights · Frosted surfaces · Surface lighting ================================================================ */ /* ── A. Navbar — stronger frosted glass (enhance existing blur) ─── */ .sr-navbar { background: rgba(255,255,255,0.78) !important; backdrop-filter: blur(28px) saturate(200%); -webkit-backdrop-filter: blur(28px) saturate(200%); box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,0.06), inset 0 -1px 0 rgba(255,255,255,0.5); } [data-theme="dark"] .sr-navbar { background: rgba(13,17,23,0.78) !important; backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(255,255,255,0.04); } /* ── B. Left nav — frosted glass panel ───────────────────────────── */ .sr-left-nav { background: rgba(255,255,255,0.82) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } [data-theme="dark"] .sr-left-nav { background: rgba(22,27,34,0.80) !important; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } /* ── C. Cards — specular top-edge highlight (glass pane light) ───── */ /* In dark mode the white inset highlight is the "crystal" moment */ .sr-card { box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.80); } [data-theme="dark"] .sr-card { box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.07) !important; } /* ── D. Feature cards — glass edge ──────────────────────────────── */ .sr-feature-card { box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.80); } [data-theme="dark"] .sr-feature-card { box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.06); } /* ── E. Device cards ─────────────────────────────────────────────── */ .sr-device-card { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.80); } [data-theme="dark"] .sr-device-card { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05); } /* ── F. Hero stats bar — frosted glass ───────────────────────────── */ .sr-hero-stats { background: rgba(255,255,255,0.72) !important; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.90); } [data-theme="dark"] .sr-hero-stats { background: rgba(22,27,34,0.70) !important; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.06); } /* ── G. KPI strip — frosted glass ────────────────────────────────── */ .sr-kpi-strip { position: relative; z-index: 50; background: rgba(255,255,255,0.70) !important; backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.90); } [data-theme="dark"] .sr-kpi-strip { background: rgba(22,27,34,0.68) !important; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.05); } /* ── H. Primary button — gloss top sheen ────────────────────────── */ .sr-btn-primary { overflow: hidden; position: relative; } .sr-btn-primary::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, transparent 100%); border-radius: inherit; pointer-events: none; } /* ── I. Price popover — genuine frosted glass ───────────────────── */ .sr-price-popover { background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); box-shadow: 0 20px 60px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.9); } [data-theme="dark"] .sr-price-popover { background: rgba(22,27,34,0.90) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.07); } /* ── J. Intel items ──────────────────────────────────────────────── */ .sr-intel-item { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.70); } [data-theme="dark"] .sr-intel-item { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05); } /* ── K. HiW steps ────────────────────────────────────────────────── */ .sr-hiw-step { box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.80); } [data-theme="dark"] .sr-hiw-step { box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.06); } /* ── L. Chips & tags ─────────────────────────────────────────────── */ .sr-chip { box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.70); } .sr-tag { box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.70); } [data-theme="dark"] .sr-chip, [data-theme="dark"] .sr-tag { box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.05); } /* ── M. Verdict banners — glass tint ────────────────────────────── */ .sr-verdict-banner { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); } /* ── N. Score donut — stronger depth ────────────────────────────── */ .sr-arc-wrap { filter: drop-shadow(0 6px 20px rgba(0,0,0,0.11)) drop-shadow(0 2px 4px rgba(0,0,0,0.07)); } /* ── O. Search box — frosted glass ──────────────────────────────── */ .sr-search-box { background: rgba(255,255,255,0.90) !important; backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.90); } [data-theme="dark"] .sr-search-box { background: rgba(22,27,34,0.82) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05); } .sr-search-box:focus-within { background: rgba(255,255,255,0.98) !important; box-shadow: 0 0 0 3px var(--blue-glow), 0 6px 20px rgba(0,0,0,0.09), inset 0 1px 0 rgba(255,255,255,0.90); } [data-theme="dark"] .sr-search-box:focus-within { background: rgba(22,27,34,0.95) !important; } /* ================================================================ PRESTIGE LAYER — v1.0 Gradient text · Aurora · Noise · Entrance animations Spinning borders · Spring physics · Maximum visual impact ================================================================ */ /* ── @property — unlocks CSS gradient/angle animations ──────────── */ @property --sr-angle { syntax: ''; initial-value: 0deg; inherits: false; } /* ── 1. Gradient hero title — the signature "wow" moment ─────────── */ .sr-hero-title { background: linear-gradient( 135deg, var(--text) 0%, var(--text) 30%, var(--blue) 60%, var(--accent) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="dark"] .sr-hero-title { background: linear-gradient( 135deg, #F1F5F9 0%, #E0E7FF 35%, #A5B4FC 62%, #FCA5A5 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── 2. Gradient stat numbers in hero bar ────────────────────────── */ .sr-hstat-num { background: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 900; } /* ── 3. Report score number — glowing gradient ───────────────────── */ .sr-arc-num { background: linear-gradient(160deg, var(--blue-light) 0%, var(--blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 900; } /* ── 4. Score donut — breathing ambient glow ─────────────────────── */ .sr-arc-wrap::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient(circle, var(--blue-glow) 0%, transparent 68%); animation: sr-donut-breathe 3.5s ease-in-out infinite; pointer-events: none; z-index: -1; } @keyframes sr-donut-breathe { 0%, 100% { opacity: 0.5; transform: scale(0.96); } 50% { opacity: 1.0; transform: scale(1.06); } } /* ── 5. Primary button — spinning conic-gradient border on hover ─── */ .sr-btn-primary::before { content: ''; position: absolute; inset: -2px; border-radius: calc(var(--radius) + 2px); background: conic-gradient( from var(--sr-angle), #1C3F6E, #4D7CC4, #C084FC, #C47E0D, #FBBF24, #1C3F6E ); animation: sr-spin-angle 3s linear infinite; z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .sr-btn-primary:hover:not(:disabled)::before { opacity: 1; } @keyframes sr-spin-angle { to { --sr-angle: 360deg; } } /* ── 6. Spring-physics hover on cards ────────────────────────────── */ .sr-device-card, .sr-feature-card, .sr-hiw-step { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important; } .sr-device-card:hover { transform: translateY(-4px) scale(1.015) !important; } .sr-feature-card:hover { transform: translateY(-7px) scale(1.01) !important; } .sr-hiw-step:hover { transform: translateY(-4px) scale(1.01); } /* ── 7. Category tab active — glowing icon ───────────────────────── */ .sr-cat-tab.active .sr-cat-tab-icon { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(79,70,229,0.38), 0 0 0 3px var(--blue-glow); transform: scale(1.08); } /* ── 8. Left nav active — inset glow pill (no layout shift) ─────── */ .sr-ln-active { background: linear-gradient(90deg, var(--blue-subtle), transparent) !important; box-shadow: inset 3px 0 0 var(--blue), 0 1px 6px rgba(79,70,229,0.10) !important; border-left: none !important; padding-left: 0.65rem !important; border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; font-weight: 700 !important; } /* ── 9. Page entrance animations ─────────────────────────────────── */ @keyframes sr-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes sr-fade-in { from { opacity: 0; } to { opacity: 1; } } .sr-browse-content { animation: sr-fade-up 0.5s cubic-bezier(0.16,1,0.3,1) both; } .sr-hero-mesh { animation: sr-fade-in 0.7s ease both; } .sr-hero-stats { animation: sr-fade-up 0.5s 0.12s cubic-bezier(0.16,1,0.3,1) both; } /* Device card stagger */ .sr-device-card:nth-child(1) { animation: sr-fade-up 0.35s 0.00s cubic-bezier(0.16,1,0.3,1) both; } .sr-device-card:nth-child(2) { animation: sr-fade-up 0.35s 0.05s cubic-bezier(0.16,1,0.3,1) both; } .sr-device-card:nth-child(3) { animation: sr-fade-up 0.35s 0.10s cubic-bezier(0.16,1,0.3,1) both; } .sr-device-card:nth-child(4) { animation: sr-fade-up 0.35s 0.15s cubic-bezier(0.16,1,0.3,1) both; } .sr-device-card:nth-child(5) { animation: sr-fade-up 0.35s 0.20s cubic-bezier(0.16,1,0.3,1) both; } .sr-device-card:nth-child(6) { animation: sr-fade-up 0.35s 0.25s cubic-bezier(0.16,1,0.3,1) both; } .sr-device-card:nth-child(7) { animation: sr-fade-up 0.35s 0.30s cubic-bezier(0.16,1,0.3,1) both; } .sr-device-card:nth-child(8) { animation: sr-fade-up 0.35s 0.35s cubic-bezier(0.16,1,0.3,1) both; } .sr-device-card:nth-child(n+9) { animation: sr-fade-up 0.35s 0.40s cubic-bezier(0.16,1,0.3,1) both; } /* Feature card stagger */ .sr-feature-card:nth-child(1) { animation: sr-fade-up 0.45s 0.00s cubic-bezier(0.16,1,0.3,1) both; } .sr-feature-card:nth-child(2) { animation: sr-fade-up 0.45s 0.09s cubic-bezier(0.16,1,0.3,1) both; } .sr-feature-card:nth-child(3) { animation: sr-fade-up 0.45s 0.18s cubic-bezier(0.16,1,0.3,1) both; } .sr-feature-card:nth-child(4) { animation: sr-fade-up 0.45s 0.27s cubic-bezier(0.16,1,0.3,1) both; } /* ── 10. Aurora — breathing hero background ──────────────────────── */ @keyframes sr-aurora { 0%, 100% { filter: brightness(1) saturate(1); } 33% { filter: brightness(1.06) saturate(1.2); } 66% { filter: brightness(0.97) saturate(0.9); } } .sr-hero-mesh { animation: sr-aurora 10s ease-in-out infinite; } /* ── 11. Dark mode: noise grain on cards ─────────────────────────── */ [data-theme="dark"] .sr-card { background: linear-gradient( 145deg, var(--s1) 0%, color-mix(in srgb, var(--s1) 94%, #1C3F6E) 60%, color-mix(in srgb, var(--s1) 96%, #C47E0D) 100% ); } [data-theme="dark"] .sr-card::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 180px 180px; opacity: 0.028; pointer-events: none; border-radius: inherit; mix-blend-mode: screen; } /* ── 12. Verdict banners — stronger colored glow ─────────────────── */ .sr-verdict-banner-success { box-shadow: 0 6px 32px rgba(5,150,105,0.22), inset 0 1px 0 rgba(5,150,105,0.15) !important; border-color: rgba(5,150,105,0.3) !important; } .sr-verdict-banner-warning { box-shadow: 0 6px 32px rgba(217,119,6,0.22), inset 0 1px 0 rgba(217,119,6,0.15) !important; border-color: rgba(217,119,6,0.3) !important; } .sr-verdict-banner-danger { box-shadow: 0 6px 32px rgba(220,38,38,0.18), inset 0 1px 0 rgba(220,38,38,0.12) !important; border-color: rgba(220,38,38,0.25) !important; } /* ── 13. Body background — richer ambient brand light ────────────── */ body { background-image: radial-gradient(ellipse 90% 60% at -5% -5%, rgba(28,63,110,0.08) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 105% 105%, rgba(249,115,22,0.06) 0%, transparent 55%), radial-gradient(ellipse 45% 35% at 55% 55%, rgba(124,58,237,0.03) 0%, transparent 50%); background-attachment: fixed; } [data-theme="dark"] body { background-image: radial-gradient(ellipse 90% 60% at -5% -5%, rgba(99,102,241,0.14) 0%, transparent 55%), radial-gradient(ellipse 65% 55% at 105% 105%, rgba(249,115,22,0.09) 0%, transparent 55%), radial-gradient(ellipse 45% 35% at 55% 55%, rgba(124,58,237,0.05) 0%, transparent 50%); background-attachment: fixed; } /* ── 14. Logo: subtle hover lift + glow ──────────────────────────── */ .sr-brand { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), filter 0.2s ease; } .sr-brand:hover { transform: scale(1.05); filter: drop-shadow(0 0 10px var(--blue-glow)); text-decoration: none !important; } /* ── 15. Theme button: playful spin ──────────────────────────────── */ .sr-theme-btn:hover { background: var(--blue-subtle) !important; border-color: var(--blue) !important; transform: rotate(25deg) scale(1.12) !important; } /* ── 16. Footer: gradient top border ─────────────────────────────── */ .sr-footer { position: relative; } .sr-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--blue) 30%, var(--accent) 70%, transparent 100%); opacity: 0.35; } /* ── 17. Branded scrollbar ───────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--blue) 0%, var(--blue-light) 100%); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--blue-d) 0%, var(--blue) 100%); } /* ── 18. Branded focus ring ──────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--radius-sm); } button:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--blue-glow) !important; } /* ── 19. Nav search pill — glow expand ───────────────────────────── */ .sr-nav-search-pill { transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1); } /* ── 20. Spec items — glass surface ──────────────────────────────── */ .sr-spec-item { box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.70); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease; } .sr-spec-item:hover { transform: translateY(-2px); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.80); } [data-theme="dark"] .sr-spec-item { box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.05); } /* ── 21. KPI numbers — stronger weight ───────────────────────────── */ .sr-kpi-big { font-weight: 900 !important; } /* ── 22. Section titles — gradient underline on hover ────────────── */ .sr-section-title { position: relative; display: inline-block; } .sr-section-title::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--blue), var(--accent)); border-radius: 99px; transition: width 0.4s cubic-bezier(0.16,1,0.3,1); } .sr-section-title:hover::after { width: 100%; } /* ================================================================ LEFT NAV TREE EFFECTS Spring physics · Connector lines · Glow indicators · Icon pulse ================================================================ */ /* ── Spring transitions on all tree rows ─────────────────────────── */ .sr-ln-cat-row, .sr-ln-brand-row, .sr-ln-device-row, .sr-ln-item { transition: background 0.18s ease, color 0.18s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease !important; position: relative; } /* ── Category rows: gradient fade + left-bar slide + icon pop ────── */ .sr-ln-cat-row::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 3px; background: linear-gradient(180deg, var(--blue), var(--blue-light)); border-radius: 0 3px 3px 0; opacity: 0; transform: scaleY(0.4); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1); } .sr-ln-cat-row:hover::before, .sr-ln-cat-row.sr-ln-active::before { opacity: 1; transform: scaleY(1); } .sr-ln-cat-row:hover { background: linear-gradient(90deg, var(--blue-subtle) 0%, transparent 85%) !important; color: var(--blue) !important; transform: translateX(2px); } .sr-ln-cat-row:hover .sr-ln-cat-ico { transform: scale(1.25); display: inline-block; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); } .sr-ln-cat-ico { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); display: inline-block; } /* ── Active category: glowing pill ──────────────────────────────── */ .sr-ln-cat-row.sr-ln-active { background: linear-gradient(90deg, var(--blue-subtle) 0%, transparent 80%) !important; color: var(--blue) !important; box-shadow: inset 3px 0 0 var(--blue) !important; font-weight: 800 !important; } .sr-ln-cat-row.sr-ln-active .sr-ln-cat-ico { transform: scale(1.15); } /* ── Chevron: smooth rotation ────────────────────────────────────── */ .sr-ln-chev, .sr-ln-chev-sm { transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1); display: inline-block; } /* ── Tree connector lines ─────────────────────────────────────────── */ .sr-ln-cat-body { position: relative; padding-left: 0.4rem; } .sr-ln-cat-body::before { content: ''; position: absolute; left: 0.72rem; top: 0; bottom: 0.5rem; width: 1px; background: linear-gradient(180deg, var(--border) 0%, transparent 100%); } .sr-ln-brand-body { position: relative; } .sr-ln-brand-body::before { content: ''; position: absolute; left: 1.5rem; top: 0; bottom: 0.4rem; width: 1px; background: linear-gradient(180deg, var(--border-dim) 0%, transparent 100%); } /* ── Brand rows: indent line + hover ─────────────────────────────── */ .sr-ln-brand-row { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; } .sr-ln-brand-row:hover { background: linear-gradient(90deg, var(--blue-subtle) 0%, transparent 90%) !important; color: var(--blue) !important; transform: translateX(2px); } .sr-ln-brand-row:hover .sr-ln-brand-ico { opacity: 1 !important; transform: scale(1.2); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), opacity 0.15s ease; } .sr-ln-brand-ico { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), opacity 0.15s ease; } /* ── Device rows: subtle hover with left tick ────────────────────── */ .sr-ln-device-row::before { content: ''; position: absolute; left: 1.55rem; top: 50%; width: 5px; height: 1px; background: var(--blue); opacity: 0; transform: translateY(-50%) scaleX(0); transform-origin: left; transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1); } .sr-ln-device-row:hover::before { opacity: 0.7; transform: translateY(-50%) scaleX(1); } .sr-ln-device-row:hover { background: linear-gradient(90deg, var(--blue-subtle) 0%, transparent 95%) !important; color: var(--blue) !important; transform: translateX(2px); padding-left: 2.0rem; } /* ── Count badges: glow on parent hover ─────────────────────────── */ .sr-ln-cat-row:hover .sr-ln-count, .sr-ln-brand-row:hover .sr-ln-count { background: var(--blue-subtle); color: var(--blue); box-shadow: 0 0 0 1.5px var(--blue-glow); } .sr-ln-count { transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } /* ── Sniff Next link in nav: pulse glow ──────────────────────────── */ .sr-ln-sniff-next:hover { transform: translateX(2px); background: linear-gradient(90deg, rgba(28,63,110,0.08) 0%, transparent 85%) !important; } .sr-ln-sniff-next { transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.18s ease !important; } /* ── Section label: styled divider ──────────────────────────────── */ .sr-ln-section-label { color: var(--text-dim); } /* ── Dark mode: stronger connector lines ─────────────────────────── */ [data-theme="dark"] .sr-ln-cat-body::before { background: linear-gradient(180deg, rgba(99,102,241,0.25) 0%, transparent 100%); } [data-theme="dark"] .sr-ln-brand-body::before { background: linear-gradient(180deg, rgba(99,102,241,0.15) 0%, transparent 100%); } [data-theme="dark"] .sr-ln-cat-row:hover, [data-theme="dark"] .sr-ln-brand-row:hover, [data-theme="dark"] .sr-ln-device-row:hover { background: linear-gradient(90deg, rgba(45,84,148,0.12) 0%, transparent 85%) !important; } /* ══════════════════════════════════════════════════════════════════ Intel card Show More — button styling only (Equal height is achieved by limiting Intel to 4 items via Show More) ══════════════════════════════════════════════════════════════════ */ /* Intel show-more button — indigo accent to match intelligence theme */ .sr-expand-btn-intel { color: #6366f1; border-color: rgba(99,102,241,0.35); } .sr-expand-btn-intel:hover { background: rgba(45,84,148,0.08); border-color: #6366f1; } [data-theme="dark"] .sr-expand-btn-intel { color: #a5b4fc; border-color: rgba(165,180,252,0.3); } [data-theme="dark"] .sr-expand-btn-intel:hover { background: rgba(99,102,241,0.15); border-color: #a5b4fc; } /* ── Mobile Browse trigger button ───────────────────────────────── */ .sr-ln-mob-trigger { display: none; /* hidden on desktop */ } @media (max-width: 768px) { .sr-ln-mob-trigger { display: flex; align-items: center; gap: 0.4rem; position: fixed; bottom: 1.5rem; left: 1rem; z-index: 211; background: var(--blue); color: #fff; border: none; border-radius: 99px; padding: 0.6rem 1.1rem 0.6rem 0.85rem; font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 4px 18px rgba(37,99,235,0.4); transition: background 0.15s, box-shadow 0.15s, transform 0.15s; } .sr-ln-mob-trigger:hover { background: #1d4ed8; box-shadow: 0 6px 22px rgba(37,99,235,0.5); transform: translateY(-1px); } .sr-ln-mob-trigger:active { transform: translateY(0); } [data-theme="dark"] .sr-ln-mob-trigger { box-shadow: 0 4px 18px rgba(59,130,246,0.35); } } /* ── Collapsible section headers ──────────────────────────────────────────── */ .sr-section { margin-bottom: 0; } .sr-section-hdr { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.65rem 1rem; margin-bottom: 0.75rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; font-size: 0.95rem; font-weight: 600; color: var(--text); cursor: pointer; letter-spacing: -0.01em; transition: background 0.15s, border-color 0.15s; } .sr-section-hdr:hover { background: rgba(99,102,241,0.06); border-color: var(--blue); } .sr-section-chevron { font-size: 0.75rem; color: var(--text-dim); transition: transform 0.2s ease; display: inline-block; } .sr-section-chevron.sr-sec-collapsed { transform: rotate(-90deg); } /* ── KPI strip price popover ─────────────────────────────────────────────── */ .sr-kpi-price-wrap { position: relative; z-index: 200; } .sr-kpi-price-btn { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font: inherit; color: var(--blue); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; transition: opacity 0.15s; } .sr-kpi-price-btn:hover { opacity: 0.75; } .sr-kpi-price-caret { font-size: 0.6rem; opacity: 0.6; } /* ── Deep Dive sign-in gate ──────────────────────────────────────────────── */ .sr-deepdive-gate { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2.5rem 1.5rem; background: var(--card-bg); border: 1.5px dashed var(--border); border-radius: var(--radius-lg); text-align: center; } .sr-gate-icon { font-size: 2.4rem; } .sr-gate-title { font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .sr-gate-desc { font-size: 0.88rem; color: var(--text-soft); max-width: 380px; margin: 0; } .sr-gate-btn { margin-top: 0.5rem; } /* === SniffBot Chat Widget === */ .sr-chat-wrap { position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 99998; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .sr-chat-fab { width: 60px; height: 60px; border-radius: 50%; background: transparent; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(79,70,229,0.45); display: flex; align-items: center; justify-content: center; position: relative; transition: transform 0.2s, box-shadow 0.2s; flex-shrink: 0; padding: 0; } .sr-chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(79,70,229,0.55); } .sr-chat-fab-logo { width: 60px; height: 60px; border-radius: 50%; display: block; } .sr-chat-fab-close { font-size: 1.1rem; line-height: 1; color: #fff; background: var(--blue); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .sr-chat-badge { position: absolute; top: -3px; right: -3px; background: var(--accent); color: #fff; font-size: 0.65rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--bg); } .sr-chat-panel { width: 360px; max-height: 560px; display: flex; flex-direction: column; border-radius: var(--radius-xl); background: var(--s1); border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08); overflow: hidden; animation: sr-chat-pop 0.22s cubic-bezier(0.34,1.56,0.64,1); transform-origin: bottom right; } @keyframes sr-chat-pop { from { opacity: 0; transform: scale(0.85) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } .sr-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; background: var(--blue); flex-shrink: 0; } .sr-chat-header-info { display: flex; align-items: center; gap: 0.6rem; } .sr-chat-avatar { font-size: 1.5rem; line-height: 1; } .sr-chat-title { font-size: 0.88rem; font-weight: 700; color: #fff; } .sr-chat-status { font-size: 0.7rem; color: rgba(255,255,255,0.7); margin-top: 1px; } .sr-chat-close { background: none; border: none; color: rgba(255,255,255,0.8); font-size: 0.9rem; cursor: pointer; padding: 4px; line-height: 1; border-radius: 4px; } .sr-chat-close:hover { color: #fff; background: rgba(255,255,255,0.15); } .sr-chat-messages { flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; scroll-behavior: smooth; } .sr-chat-messages::-webkit-scrollbar { width: 4px; } .sr-chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .sr-chat-row { display: flex; } .sr-chat-row-user { justify-content: flex-end; } .sr-chat-row-bot { justify-content: flex-start; flex-direction: column; gap: 0.4rem; } .sr-chat-bubble { max-width: 84%; padding: 0.55rem 0.8rem; border-radius: 14px; font-size: 0.82rem; line-height: 1.55; } .sr-chat-bubble-user { background: var(--blue); color: #fff; border-bottom-right-radius: 4px; } .sr-chat-bubble-bot { background: var(--bg-alt); color: var(--text); border-bottom-left-radius: 4px; } .sr-chat-link { color: var(--blue); text-decoration: underline; } .sr-chat-typing { display: flex; align-items: center; gap: 4px; padding: 0.6rem 0.8rem; } .sr-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); display: inline-block; animation: sr-dot-bounce 1.1s infinite ease-in-out both; } .sr-chat-typing span:nth-child(1) { animation-delay: 0s; } .sr-chat-typing span:nth-child(2) { animation-delay: 0.18s; } .sr-chat-typing span:nth-child(3) { animation-delay: 0.36s; } @keyframes sr-dot-bounce { 0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } .sr-chat-cards { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 310px; } .sr-chat-card { background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.85rem; font-size: 0.78rem; display: flex; flex-direction: column; gap: 0.3rem; box-shadow: var(--shadow-xs); } .sr-chat-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .sr-chat-card-name { font-weight: 700; color: var(--text); font-size: 0.83rem; } .sr-chat-score-pill { font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0.45rem; border-radius: 99px; flex-shrink: 0; } .sr-verdict-success { background: rgba(5,150,105,0.12); color: var(--green); } .sr-verdict-warning { background: rgba(217,119,6,0.12); color: var(--amber); } .sr-verdict-danger { background: rgba(220,38,38,0.10); color: var(--red); } .sr-chat-card-verdict { font-size: 0.73rem; font-weight: 600; } .sr-chat-verdict-success { color: var(--green); } .sr-chat-verdict-warning { color: var(--amber); } .sr-chat-verdict-danger { color: var(--red); } .sr-chat-card-price { color: var(--text-soft); font-size: 0.75rem; } .sr-chat-card-pro { color: var(--green); font-size: 0.75rem; } .sr-chat-card-con { color: var(--amber); font-size: 0.75rem; } .sr-chat-card-link { display: inline-block; margin-top: 0.3rem; font-size: 0.75rem; font-weight: 600; color: var(--blue); text-decoration: none; } .sr-chat-card-link:hover { text-decoration: underline; } .sr-chat-quick-wrap { padding: 0.4rem 0.75rem 0.3rem; display: flex; flex-wrap: wrap; gap: 0.35rem; flex-shrink: 0; border-top: 1px solid var(--border-dim); } .sr-chat-quick { background: var(--blue-subtle); border: 1px solid rgba(28,63,110,0.2); color: var(--blue); font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.55rem; border-radius: 99px; cursor: pointer; white-space: nowrap; transition: background 0.15s; } .sr-chat-quick:hover { background: rgba(28,63,110,0.14); } .sr-chat-input-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.75rem; border-top: 1px solid var(--border); flex-shrink: 0; } .sr-chat-input { flex: 1; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 99px; padding: 0.45rem 0.85rem; font-size: 0.82rem; color: var(--text); outline: none; transition: border-color 0.15s; } .sr-chat-input:focus { border-color: var(--blue); } .sr-chat-input::placeholder { color: var(--text-dim); } .sr-chat-input:disabled { opacity: 0.6; } .sr-chat-send { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); border: none; color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; } .sr-chat-send:hover:not(:disabled) { background: var(--blue-d); } .sr-chat-send:disabled { opacity: 0.4; cursor: default; } [data-theme='dark'] .sr-chat-bubble-bot { background: rgba(255,255,255,0.06); } [data-theme='dark'] .sr-chat-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } [data-theme='dark'] .sr-chat-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); } @media (max-width: 480px) { .sr-chat-panel { width: calc(100vw - 32px); max-height: 70vh; } .sr-chat-wrap { bottom: 5rem; right: 1rem; } } .sr-db-row-hover:hover { background: var(--s2); } /* ══════════════════════════════════════════════════════════════════ FOOD REVIEWS — Browse + Report ══════════════════════════════════════════════════════════════════ */ /* ── Hero ───────────────────────────────────────────────────────── */ .sr-food-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, var(--bg)) 0%, color-mix(in srgb, #f59e0b 6%, var(--bg)) 100%); border-bottom: 1px solid var(--border); padding: 3.5rem 1.5rem 2.5rem; text-align: center; } .sr-food-hero-inner { max-width: 600px; margin: 0 auto; } .sr-food-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); background: var(--s2); border: 1px solid var(--border); padding: 0.3rem 0.85rem; border-radius: 99px; margin-bottom: 1.25rem; } .sr-food-hero-dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.6); } .sr-food-hero-title { font-size: 2.4rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; margin: 0 0 1rem; } .sr-food-hero-sub { color: var(--text-soft); font-size: 1rem; margin: 0; max-width: 480px; margin: 0 auto; } /* ── Content wrapper ────────────────────────────────────────────── */ .sr-food-content { max-width: 1300px; margin: 0 auto; padding: 2rem 1.5rem 3rem; } /* ── Section headers ────────────────────────────────────────────── */ .sr-food-section { margin-bottom: 2.5rem; } .sr-food-section-hdr { margin-bottom: 1.25rem; } .sr-food-section-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.2rem; } .sr-food-section-sub { font-size: 0.82rem; color: var(--text-dim); margin: 0; } /* ── Cards grid — Best of the Best ──────────────────────────────── */ .sr-food-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; } .sr-food-card { display: flex; flex-direction: column; gap: 0.75rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.1rem 0.9rem; text-decoration: none; color: inherit; transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s; } .sr-food-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12); transform: translateY(-2px); border-color: var(--blue); } .sr-food-card-top { display: flex; align-items: center; gap: 0.85rem; } /* Score ring */ .sr-food-score-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; border: 3px solid currentColor; } .sr-food-ring-green { color: #22c55e; } .sr-food-ring-yellow { color: #f59e0b; } .sr-food-ring-red { color: #ef4444; } .sr-food-score-num { font-size: 1.15rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; } .sr-food-score-lbl { font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; } .sr-food-card-info { flex: 1; min-width: 0; } .sr-food-card-name { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-food-card-cuisine { font-size: 0.76rem; color: var(--text-soft); margin: 0.15rem 0 0.2rem; } .sr-food-card-area { font-size: 0.75rem; color: var(--text-dim); } /* Verdict badge */ .sr-food-verdict { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.2rem 0.55rem; border-radius: 99px; white-space: nowrap; flex-shrink: 0; } .sr-food-verdict-green { background: rgba(34,197,94,0.12); color: #16a34a; } .sr-food-verdict-yellow { background: rgba(245,158,11,0.12); color: #b45309; } .sr-food-verdict-red { background: rgba(239,68,68,0.12); color: #b91c1c; } /* Aspect pills */ .sr-food-card-aspects { display: flex; flex-wrap: wrap; gap: 0.35rem; } .sr-food-aspect-pill { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--s2); border: 1px solid var(--border); padding: 0.15rem 0.5rem; border-radius: 99px; font-size: 0.71rem; } .sr-food-aspect-name { color: var(--text-soft); } .sr-food-aspect-score { font-weight: 700; color: var(--text); } /* Card footer */ .sr-food-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.5rem; border-top: 1px solid var(--border); } .sr-food-price { font-size: 0.75rem; color: var(--blue); font-weight: 600; } .sr-food-reviews { font-size: 0.72rem; color: var(--text-dim); } /* ── Latest list ────────────────────────────────────────────────── */ .sr-food-list { display: flex; flex-direction: column; gap: 0.5rem; } .sr-food-list-row { display: flex; align-items: center; gap: 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.85rem 1.1rem; text-decoration: none; color: inherit; transition: box-shadow 0.15s, border-color 0.15s; } .sr-food-list-row:hover { box-shadow: var(--shadow); border-color: var(--blue); } .sr-food-list-score { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; border: 2.5px solid currentColor; font-size: 0.95rem; font-weight: 900; letter-spacing: -0.02em; } .sr-food-list-body { flex: 1; min-width: 0; } .sr-food-list-name { font-size: 0.95rem; font-weight: 700; } .sr-food-list-meta { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.1rem; } .sr-food-list-price { font-size: 0.75rem; color: var(--blue); font-weight: 600; } /* ── Report page ────────────────────────────────────────────────── */ .sr-food-kpi-strip { display: flex; align-items: center; gap: 0; flex-wrap: wrap; background: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 0.75rem 1.25rem; margin: 0 1.5rem 1.5rem; max-width: 1400px; margin-left: auto; margin-right: auto; } .sr-food-kpi-left { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex-shrink: 0; } .sr-food-kpi-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; } .sr-food-kpi-meta { font-size: 0.75rem; color: var(--text-dim); } .sr-food-report-body { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem 3rem; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 640px) { .sr-food-hero-title { font-size: 1.8rem; } .sr-food-grid { grid-template-columns: 1fr; } .sr-food-kpi-strip { gap: 0.5rem; } .sr-food-kpi-divider-v { display: none; } } /* ── Dark mode overrides ────────────────────────────────────────── */ [data-theme="dark"] .sr-food-verdict-green { background: rgba(34,197,94,0.15); color: #4ade80; } [data-theme="dark"] .sr-food-verdict-yellow { background: rgba(245,158,11,0.15); color: #fbbf24; } [data-theme="dark"] .sr-food-verdict-red { background: rgba(239,68,68,0.15); color: #f87171; } /* ── Food report — additional sections ─────────────────────────── */ /* Quick facts bar */ .sr-food-facts-bar { display: flex; flex-wrap: wrap; gap: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 1rem; overflow: hidden; } .sr-food-fact { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.85rem 1.1rem; flex: 1; min-width: 160px; border-right: 1px solid var(--border); } .sr-food-fact:last-child { border-right: none; } .sr-food-fact-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; } .sr-food-fact-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); margin-bottom: 0.2rem; } .sr-food-fact-value { font-size: 0.8rem; font-weight: 600; color: var(--text); line-height: 1.35; } .sr-food-map-link { color: var(--blue); text-decoration: none; } .sr-food-map-link:hover { text-decoration: underline; } /* Avoid-if banner */ .sr-food-avoid-banner { display: flex; align-items: center; gap: 0.75rem; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25); border-radius: var(--radius-lg); padding: 0.7rem 1rem; font-size: 0.85rem; color: var(--text); margin-bottom: 1rem; } /* Trend colors */ .sr-food-trend-up { color: #22c55e; font-weight: 700; font-size: 0.88rem; } .sr-food-trend-flat { color: var(--text-dim); font-weight: 600; font-size: 0.88rem; } .sr-food-trend-down { color: #ef4444; font-weight: 700; font-size: 0.88rem; } /* Must-try dishes grid */ .sr-food-dishes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; } .sr-food-dish-card { display: flex; align-items: flex-start; gap: 0.75rem; background: var(--s2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.85rem 1rem; } .sr-food-dish-emoji { font-size: 1.8rem; flex-shrink: 0; line-height: 1; margin-top: 0.1rem; } .sr-food-dish-body { flex: 1; min-width: 0; } .sr-food-dish-name { font-size: 0.92rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.3rem; } .sr-food-dish-desc { font-size: 0.78rem; color: var(--text-soft); line-height: 1.45; margin-bottom: 0.4rem; } .sr-food-dish-price { font-size: 0.75rem; font-weight: 700; color: var(--blue); } /* Reviewer quotes */ .sr-food-quotes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; } .sr-food-quote { position: relative; background: var(--s2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .sr-food-quote-positive { border-left: 3px solid #22c55e; } .sr-food-quote-neutral { border-left: 3px solid #f59e0b; } .sr-food-quote-negative { border-left: 3px solid #ef4444; } .sr-food-quote-mark { font-size: 2.5rem; line-height: 0.8; color: var(--border); font-family: Georgia, serif; font-weight: 900; } .sr-food-quote-text { font-size: 0.82rem; line-height: 1.55; color: var(--text); font-style: italic; margin: 0; flex: 1; } .sr-food-quote-dish { font-size: 0.72rem; font-weight: 700; color: var(--blue); } .sr-food-quote-sentiment { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.25rem; } /* Similar places chips */ .sr-food-similar-chip { display: inline-flex; align-items: center; background: var(--s2); border: 1px solid var(--border); border-radius: 99px; padding: 0.35rem 0.85rem; font-size: 0.82rem; font-weight: 600; color: var(--text); text-decoration: none; transition: border-color 0.15s, background 0.15s; } .sr-food-similar-chip:hover { border-color: var(--blue); background: var(--s3); color: var(--blue); } /* Responsive */ @media (max-width: 640px) { .sr-food-facts-bar { flex-direction: column; } .sr-food-fact { border-right: none; border-bottom: 1px solid var(--border); } .sr-food-fact:last-child { border-bottom: none; } .sr-food-dishes-grid { grid-template-columns: 1fr; } .sr-food-quotes-grid { grid-template-columns: 1fr; } } /* ── Food pill nav link ──────────────────────────────────────────── */ /* ── Nav pills container ────────────────────────────────────────── */ .sr-nav-pills { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 1.5rem; } /* ── Devices pill ───────────────────────────────────────────────── */ .sr-nav-devices-pill { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; padding: 0.45rem 1.1rem 0.45rem 0.85rem; border-radius: 99px; background: linear-gradient(135deg, rgba(28,63,110,0.12) 0%, rgba(45,84,148,0.08) 100%); border: 1.5px solid rgba(28,63,110,0.30); transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.12s; white-space: nowrap; } .sr-nav-devices-pill:hover { background: linear-gradient(135deg, rgba(28,63,110,0.22) 0%, rgba(45,84,148,0.16) 100%); border-color: #2D5494; box-shadow: 0 0 0 3px rgba(28,63,110,0.12); transform: translateY(-1px); } [data-theme="dark"] .sr-nav-devices-pill { background: linear-gradient(135deg, rgba(77,124,196,0.12) 0%, rgba(28,63,110,0.08) 100%); border-color: rgba(77,124,196,0.28); } [data-theme="dark"] .sr-nav-devices-pill:hover { background: linear-gradient(135deg, rgba(77,124,196,0.22) 0%, rgba(28,63,110,0.14) 100%); border-color: #4D7CC4; box-shadow: 0 0 0 3px rgba(77,124,196,0.12); } .sr-nav-pill-icon { font-size: 1.05rem; line-height: 1; } .sr-nav-pill-text { font-size: 0.84rem; font-weight: 800; letter-spacing: 0.01em; color: #1C3F6E; text-transform: uppercase; } [data-theme="dark"] .sr-nav-pill-text { color: #4D7CC4; } /* ── Food pill ──────────────────────────────────────────────────── */ .sr-nav-food-pill { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; padding: 0.45rem 1.1rem 0.45rem 0.85rem; border-radius: 99px; background: linear-gradient(135deg, rgba(245,158,11,0.13) 0%, rgba(239,68,68,0.09) 100%); border: 1.5px solid rgba(245,158,11,0.35); transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.12s; white-space: nowrap; } .sr-nav-food-pill:hover { background: linear-gradient(135deg, rgba(245,158,11,0.22) 0%, rgba(239,68,68,0.15) 100%); border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.12); transform: translateY(-1px); } [data-theme="dark"] .sr-nav-food-pill { background: linear-gradient(135deg, rgba(251,191,36,0.10) 0%, rgba(239,68,68,0.07) 100%); border-color: rgba(251,191,36,0.28); } [data-theme="dark"] .sr-nav-food-pill:hover { background: linear-gradient(135deg, rgba(251,191,36,0.18) 0%, rgba(239,68,68,0.12) 100%); border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,0.10); } .sr-nav-food-pill-icon { font-size: 1.05rem; line-height: 1; } .sr-nav-food-pill-text { font-size: 0.84rem; font-weight: 800; letter-spacing: 0.01em; color: #92400e; text-transform: uppercase; } [data-theme="dark"] .sr-nav-food-pill-text { color: #fbbf24; } .sr-nav-food-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 4px rgba(245,158,11,0.8); animation: sr-pulse-dot 2s ease-in-out infinite; flex-shrink: 0; } @keyframes sr-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } } /* ── Food search box ────────────────────────────────────────────── */ .sr-food-search-wrap { position: relative; display: flex; align-items: center; max-width: 560px; margin: 1.5rem auto 0.75rem; background: var(--s1); border: 1.5px solid var(--border); border-radius: 99px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: border-color 0.2s, box-shadow 0.2s; } .sr-food-search-wrap:focus-within { border-color: #f59e0b; box-shadow: 0 4px 20px rgba(245,158,11,0.15); } .sr-food-search-icon { padding: 0 0.75rem 0 1.1rem; font-size: 1rem; flex-shrink: 0; } .sr-food-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 0.95rem; font-family: inherit; color: var(--text); padding: 0.8rem 0.5rem 0.8rem 0; } .sr-food-search-input::placeholder { color: var(--text-dim); } .sr-food-search-clear { all: unset; cursor: pointer; padding: 0 1rem; color: var(--text-dim); font-size: 0.85rem; flex-shrink: 0; } .sr-food-search-clear:hover { color: var(--text); } /* ── Cuisine chips ──────────────────────────────────────────────── */ .sr-food-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; max-width: 560px; margin: 0 auto; } .sr-food-chip { all: unset; cursor: pointer; display: inline-block; padding: 0.25rem 0.75rem; border: 1px solid var(--border); border-radius: 99px; font-size: 0.78rem; font-weight: 600; color: var(--text-soft); background: var(--s2); transition: all 0.15s; } .sr-food-chip:hover, .sr-food-chip.active { border-color: #f59e0b; background: rgba(245,158,11,0.1); color: #b45309; } [data-theme="dark"] .sr-food-chip:hover, [data-theme="dark"] .sr-food-chip.active { color: #fbbf24; } /* ── City filter tabs ───────────────────────────────────────────── */ .sr-food-city-tabs { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 1rem 1.5rem 0; flex-wrap: wrap; } .sr-food-city-tab { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1.1rem; border-radius: 99px; font-size: 0.85rem; font-weight: 700; border: 2px solid var(--border); color: var(--text-soft); background: var(--s1); transition: all 0.15s; white-space: nowrap; } .sr-food-city-tab:hover { border-color: var(--brand); color: var(--text); background: var(--s2); } .sr-food-city-tab.active { border-color: var(--brand); background: var(--brand); color: #fff; } [data-theme="dark"] .sr-food-city-tab.active { color: #0a0a0a; } .sr-food-city-count { font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 99px; background: rgba(255,255,255,0.2); min-width: 1.4rem; text-align: center; } .sr-food-city-tab:not(.active) .sr-food-city-count { background: var(--s3); color: var(--text-dim); } /* ── Empty state ────────────────────────────────────────────────── */ .sr-food-empty { text-align: center; padding: 3rem 1rem; color: var(--text-soft); background: var(--card-bg); border: 1px dashed var(--border); border-radius: var(--radius-lg); }