Decoder2704/python-chatbot-jay

1.navbar {2  position: sticky;3  top: 0;4  z-index: 100;5  background: #ffffff;6  border-bottom: 1px solid rgba(15, 23, 42, 0.08);7  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);8}9 10.navbar__inner {11  max-width: 1200px;12  margin: 0 auto;13  padding: 0 1.25rem;14  min-height: 72px;15  display: grid;16  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);17  align-items: center;18  gap: 1rem;19}20 21.navbar__brand {22  font-weight: 700;23  font-size: 1.125rem;24  letter-spacing: -0.02em;25  color: #0f172a;26  text-decoration: none;27  white-space: nowrap;28  transition: color var(--duration-normal) var(--ease-standard);29  border-radius: 8px;30}31 32.navbar__brand:hover {33  color: #6366f1;34}35 36.navbar__brand:focus-visible {37  box-shadow: var(--focus-ring);38}39 40.navbar__links {41  display: flex;42  justify-content: center;43  align-items: center;44  flex-wrap: wrap;45  gap: 0.25rem 0.5rem;46}47 48.navbar__link {49  display: inline-block;50  padding: 0.45rem 0.85rem;51  font-size: 0.9375rem;52  font-weight: 500;53  color: #475569;54  text-decoration: none;55  border-radius: 9999px;56  transition:57    color var(--duration-normal) var(--ease-standard),58    background var(--duration-normal) var(--ease-standard),59    box-shadow var(--duration-normal) var(--ease-standard);60}61 62.navbar__link:hover {63  color: #0f172a;64  background: rgba(15, 23, 42, 0.05);65}66 67.navbar__link:focus-visible {68  box-shadow: var(--focus-ring);69  outline: none;70}71 72.navbar__link--active {73  color: #4f46e5;74  font-weight: 600;75  background: rgba(99, 102, 241, 0.12);76  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.2);77}78 79.navbar__link--active:hover {80  color: #4338ca;81  background: rgba(99, 102, 241, 0.16);82}83 84.navbar__cta {85  justify-self: end;86  display: flex;87  align-items: center;88  gap: 0.5rem;89}90 91@media (max-width: 768px) {92  .navbar__inner {93    grid-template-columns: 1fr auto;94    grid-template-rows: auto auto;95    padding: 0.75rem 1rem;96    min-height: unset;97  }98 99  .navbar__brand {100    grid-column: 1;101    grid-row: 1;102  }103 104  .navbar__cta {105    grid-column: 2;106    grid-row: 1;107    flex-wrap: wrap;108    justify-content: flex-end;109  }110 111  .navbar__links {112    grid-column: 1 / -1;113    grid-row: 2;114    justify-content: center;115    padding-top: 0.25rem;116    border-top: 1px solid rgba(15, 23, 42, 0.06);117    margin-top: 0.25rem;118    padding-top: 0.75rem;119  }120}121