| .sidebar { |
| height: 100%; |
| display: flex; |
| flex-direction: column; |
| background: var(--bg-elevated); |
| border-right: 1px solid var(--border); |
| padding: var(--sp-4) 0; |
| position: relative; |
| z-index: 3; |
| min-width: 0; |
| } |
|
|
| .sidebar__brand { |
| display: flex; |
| align-items: center; |
| gap: var(--sp-3); |
| padding: 0 var(--sp-4) var(--sp-4); |
| border-bottom: 1px solid var(--border); |
| margin-bottom: var(--sp-4); |
| } |
|
|
| .sidebar__mark { |
| width: 36px; |
| height: 36px; |
| display: grid; |
| place-items: center; |
| border-radius: 9px; |
| background: rgba(13, 15, 20, 0.65); |
| box-shadow: inset 0 0 0 1px rgba(200, 169, 110, 0.2); |
| } |
|
|
| .sidebar__logo { |
| width: 100%; |
| height: 100%; |
| display: block; |
| } |
|
|
| .sidebar__name { |
| font-family: var(--font-mono); |
| font-size: var(--fs-md); |
| font-weight: 600; |
| letter-spacing: 0.16em; |
| color: var(--text); |
| } |
|
|
| .sidebar__tag { |
| font-size: var(--fs-xs); |
| color: var(--text-muted); |
| letter-spacing: 0.04em; |
| margin-top: 2px; |
| } |
|
|
| .sidebar__section-label { |
| font-size: var(--fs-xs); |
| letter-spacing: 0.18em; |
| text-transform: uppercase; |
| color: var(--text-faint); |
| padding: 0 var(--sp-4) var(--sp-2); |
| } |
|
|
| .sidebar__nav { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .sidebar__link { |
| position: relative; |
| display: grid; |
| grid-template-columns: 18px 1fr; |
| align-items: center; |
| gap: var(--sp-2); |
| padding: var(--sp-3) var(--sp-4); |
| color: var(--text-muted); |
| text-decoration: none; |
| border: 0; |
| font-size: var(--fs-base); |
| letter-spacing: 0.04em; |
| transition: color var(--transition), background var(--transition); |
| } |
|
|
| .sidebar__link:hover { |
| background: rgba(200, 169, 110, 0.04); |
| color: var(--text); |
| } |
|
|
| .sidebar__link.active, |
| .sidebar__link[aria-current="page"] { |
| color: var(--text); |
| background: rgba(200, 169, 110, 0.06); |
| } |
|
|
| .sidebar__ord { |
| display: none; |
| } |
|
|
| .sidebar__label { |
| font-family: var(--font-mono); |
| text-transform: uppercase; |
| font-size: var(--fs-xs); |
| letter-spacing: 0.12em; |
| } |
|
|
| @media (max-width: 1200px) { |
| .sidebar__tag, |
| .sidebar__footer { |
| display: none; |
| } |
| } |
|
|
| @media (max-width: 900px) { |
| .sidebar { |
| flex-direction: row; |
| align-items: center; |
| justify-content: space-between; |
| padding: var(--sp-3) var(--sp-4); |
| height: auto; |
| } |
|
|
| .sidebar__brand { |
| border-bottom: 0; |
| margin-bottom: 0; |
| padding: 0; |
| } |
|
|
| .sidebar__nav { |
| flex-direction: row; |
| gap: var(--sp-1); |
| } |
|
|
| .sidebar__link { |
| grid-template-columns: 18px auto; |
| padding: var(--sp-2) var(--sp-3); |
| } |
|
|
| .sidebar__active-bar { |
| top: auto; |
| left: 8px; |
| right: 8px; |
| bottom: 0; |
| width: auto; |
| height: 2px; |
| } |
| } |
|
|
| @media (max-width: 640px) { |
| .sidebar__label { |
| display: none; |
| } |
|
|
| .sidebar__link { |
| grid-template-columns: 18px; |
| padding: var(--sp-2); |
| } |
| } |
|
|
| .sidebar__active-bar { |
| position: absolute; |
| left: 0; |
| top: 8px; |
| bottom: 8px; |
| width: 2px; |
| background: var(--accent); |
| } |
|
|
| .sidebar__footer { display: none; } |
|
|
| .sidebar__status { |
| display: flex; |
| align-items: center; |
| gap: var(--sp-2); |
| color: var(--text); |
| font-size: var(--fs-xs); |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| } |
|
|
| .sidebar__dot { |
| width: 6px; |
| height: 6px; |
| background: var(--neutral); |
| border-radius: 50%; |
| box-shadow: 0 0 8px rgba(74, 158, 138, 0.6); |
| } |
|
|
| .sidebar__build { |
| font-size: var(--fs-xs); |
| color: var(--text-faint); |
| letter-spacing: 0.06em; |
| } |
|
|
