demandNav.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. :root {
  2. --demand-nav-height: 52px;
  3. }
  4. .demand-nav {
  5. position: sticky;
  6. top: 0;
  7. z-index: 30;
  8. height: var(--demand-nav-height);
  9. display: flex;
  10. align-items: center;
  11. padding: 0 24px;
  12. background: rgba(255, 255, 255, 0.92);
  13. backdrop-filter: blur(12px);
  14. border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  15. box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
  16. }
  17. .demand-nav-inner {
  18. display: inline-flex;
  19. align-items: center;
  20. gap: 6px;
  21. padding: 4px;
  22. border-radius: 999px;
  23. background: #f1f5f9;
  24. border: 1px solid #e2e8f0;
  25. }
  26. .demand-nav-tab {
  27. display: inline-flex;
  28. align-items: center;
  29. height: 34px;
  30. padding: 0 16px;
  31. border-radius: 999px;
  32. text-decoration: none;
  33. font-size: 14px;
  34. font-weight: 600;
  35. color: #475569;
  36. transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  37. }
  38. .demand-nav-tab:hover {
  39. color: #1d4ed8;
  40. background: rgba(255, 255, 255, 0.72);
  41. }
  42. .demand-nav-tab--active {
  43. color: #1d4ed8;
  44. background: #ffffff;
  45. box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  46. }
  47. @media (max-width: 900px) {
  48. .demand-nav {
  49. padding: 0 12px;
  50. overflow-x: auto;
  51. }
  52. .demand-nav-tab {
  53. white-space: nowrap;
  54. font-size: 13px;
  55. padding: 0 12px;
  56. }
  57. }