/* ============================================================= site-ux.css - motorcycle-specs.net UX improvement layer. Include AFTER Tailwind in default.master. Does not override brand colours or layout architecture. Add to : ============================================================= */ /* ── Priority 2: Readability improvements ──────────────────── */ /* Slightly warmer base text - gray-700 instead of gray-800 default */ body { font-size: 15px; line-height: 1.65; color: #374151; /* gray-700 */ -webkit-font-smoothing: antialiased; } /* Lift low-contrast helper text from gray-400 (#9ca3af) to gray-500 (#6b7280) */ /* This affects metadata, counts, sublabels site-wide */ .text-gray-400 { color: #6b7280 !important; /* gray-500 - still clearly secondary */ } /* But keep truly decorative dividers and subtle borders as-is */ .border-gray-100, .divide-gray-100 { /* untouched */ } /* Improve contrast on the tiny uppercase section labels */ /* text-xs uppercase tracking-widest was gray-500 - push to gray-600 */ .text-gray-500.uppercase, [class*="tracking-widest"].text-gray-500 { color: #4b5563; /* gray-600 */ letter-spacing: 0.05em; /* slightly less aggressive tracking */ } /* Spec labels on the spec page - was gray-500, lift to gray-600 */ .spec-label { color: #4b5563; } /* Breadcrumb separator - slightly bolder */ nav .mx-1 { color: #9ca3af; } /* Card title text - ensure min contrast */ .bike-row .text-sm.font-semibold, .bg-white .text-sm.font-semibold { color: #1f2937; /* gray-800 */ } /* ── Priority 5 (partial): Soften ad slot visual weight ────── */ /* Replace the current heavy dashed outline with a much lighter treatment */ .ad-slot { background: #fafafa; border: 1px solid #f0f0f0; /* very subtle - was dashed #e5e7eb */ border-radius: 8px; display: flex; align-items: center; justify-content: center; opacity: 0.75; /* de-emphasised - real ads won't use this */ transition: opacity 0.2s; } .ad-slot:hover { opacity: 1; } .ad-slot-label { font-size: 10px; color: #d1d5db; /* gray-300 - was gray-300 but now truly faint */ letter-spacing: 0.5px; text-transform: uppercase; font-family: 'DM Mono', monospace; } /* Reduce vertical footprint of inline leaderboard slots slightly */ .ad-slot--leaderboard { height: 72px; /* was 90px - 20% slimmer */ } /* ── Priority 3: Mobile UX ─────────────────────────────────── */ /* On mobile, show a collapsed "Browse" strip below the main content on listing pages. Classes added to the mobile browse panels. */ .mobile-browse-strip { display: none; } @media (max-width: 1023px) { .mobile-browse-strip { display: block; margin-top: 1.5rem; } } /* Mobile year pill strip - horizontal scrollable row */ .mobile-year-scroll { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mobile-year-scroll::-webkit-scrollbar { display: none; } /* ── Improve tap targets on mobile ─────────────────────────── */ @media (max-width: 768px) { /* Nav links in mobile menu */ #mobileMenu a { padding-top: 12px; padding-bottom: 12px; font-size: 15px; } /* Year pills - slightly bigger tap target */ .bg-gray-100.rounded { padding: 6px 12px; } /* Bike cards in grids - ensure image doesn't collapse */ .h-28, .h-32 { height: 7rem; } /* Spec rows - ensure value wraps instead of truncating */ .spec-value { word-break: break-word; } } /* ── Priority 6: Search result type tabs ───────────────────── */ /* Tab strip on search results page */ .search-tabs { display: flex; gap: 0; border-bottom: 2px solid #f1f5f9; margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none; } .search-tabs::-webkit-scrollbar { display: none; } .search-tab { flex-shrink: 0; padding: 8px 16px; font-size: 13px; font-weight: 500; color: #6b7280; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; background: none; border-top: none; border-left: none; border-right: none; transition: color 0.15s, border-color 0.15s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .search-tab:hover { color: #374151; } .search-tab.active { color: #dc2626; border-bottom-color: #dc2626; font-weight: 600; } .search-tab-count { font-size: 11px; font-weight: 500; background: #f3f4f6; color: #6b7280; padding: 1px 6px; border-radius: 10px; font-family: 'DM Mono', monospace; } .search-tab.active .search-tab-count { background: #fef2f2; color: #dc2626; } /* ── Compare page: search-to-add box ───────────────────────── */ .compare-search-wrap { position: relative; flex: 1; } .compare-search-result { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); z-index: 50; overflow: hidden; display: none; max-height: 280px; overflow-y: auto; } .compare-search-result.open { display: block; } .compare-search-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f9fafb; transition: background 0.1s; text-decoration: none; color: #374151; } .compare-search-item:last-child { border-bottom: none; } .compare-search-item:hover { background: #f9fafb; } .compare-search-item-sub { font-size: 11px; color: #9ca3af; }