| | |
| | |
| | |
| |
|
| | .tenet-list { |
| | margin: var(--spacing-6) 0; |
| | } |
| |
|
| | .tenet-list ol { |
| | list-style: none; |
| | counter-reset: tenet-counter; |
| | padding: 0!important; |
| | margin: 0!important; |
| | display: grid; |
| | gap: var(--spacing-4); |
| | } |
| |
|
| | .tenet { |
| | counter-increment: tenet-counter; |
| | position: relative; |
| | padding: var(--spacing-4); |
| | border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent); |
| | background: color-mix(in srgb, var(--primary-color) 12%, transparent); |
| | border-radius: 8px; |
| | transition: all 0.2s ease; |
| | } |
| |
|
| | .tenet:hover { |
| | border-color: color-mix(in srgb, var(--primary-color) 60%, transparent); |
| | background: color-mix(in srgb, var(--primary-color) 10%, transparent); |
| | } |
| |
|
| | .tenet::before { |
| | content: counter(tenet-counter); |
| | position: absolute; |
| | top: var(--spacing-4); |
| | left: var(--spacing-3); |
| | width: 24px; |
| | height: 24px; |
| | background: var(--primary-color); |
| | color: var(--on-primary); |
| | border-radius: 50%; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | font-size: 12px; |
| | font-weight: 600; |
| | line-height: 1; |
| | } |
| |
|
| | .tenet strong { |
| | display: block; |
| | font-size: 18px; |
| | font-weight: 600; |
| | color: var(--primary-color); |
| | margin: 0 0 var(--spacing-2) 0; |
| | padding-left: 36px; |
| | line-height: 1.3; |
| | display: flex; |
| | align-items: center; |
| | min-height: 24px; |
| | } |
| |
|
| | .tenet p { |
| | margin: 0 0 var(--spacing-2) 0; |
| | padding-left: 36px; |
| | line-height: 1.5; |
| | } |
| |
|
| | .tenet em { |
| | display: block; |
| | font-style: italic; |
| | color: var(--muted-color); |
| | font-size: 14px; |
| | padding-left: 36px; |
| | margin-top: var(--spacing-2); |
| | border-left: 2px solid color-mix(in srgb, var(--primary-color) 20%, transparent); |
| | padding-left: var(--spacing-3); |
| | margin-left: 36px; |
| | } |
| |
|
| | .tenet a { |
| | color: var(--primary-color); |
| | text-decoration: none; |
| | border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent); |
| | } |
| |
|
| | .tenet a:hover { |
| | color: var(--primary-color-hover); |
| | border-bottom-color: var(--primary-color); |
| | } |
| |
|
| | |
| | @media (--bp-sm) { |
| | .tenet { |
| | padding: var(--spacing-3); |
| | } |
| | |
| | .tenet strong { |
| | font-size: 16px; |
| | padding-left: 32px; |
| | } |
| | |
| | .tenet p, |
| | .tenet em { |
| | padding-left: 32px; |
| | margin-left: 32px; |
| | } |
| | |
| | .tenet::before { |
| | width: 20px; |
| | height: 20px; |
| | font-size: 11px; |
| | } |
| | } |
| |
|
