You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
944 lines
18 KiB
944 lines
18 KiB
body { |
|
display: flex; |
|
flex-direction: column; |
|
min-height: 100vh; |
|
max-width: 100%; |
|
background-color: var(--color-bg); |
|
color: var(--color-text); |
|
font-family: var(--font-family), sans-serif; |
|
margin: 0; |
|
padding: 0; |
|
line-height: 1.6; |
|
} |
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
font-family: var(--heading-font), serif; |
|
font-weight: 600; |
|
line-height: 1.1; |
|
color: var(--color-primary); |
|
margin: 30px 0 10px; |
|
} |
|
|
|
h1 { |
|
font-size: 3.2rem; |
|
margin-top: 0.25em; |
|
font-weight: 300; |
|
} |
|
|
|
h1.brand { |
|
font-family: var(--brand-font), serif; |
|
font-size: 3.6rem; |
|
color: var(--brand-color); |
|
display: inline-flex; |
|
align-items: center; |
|
gap: 0.45em; |
|
line-height: 1.05; |
|
} |
|
|
|
|
|
|
|
h1.brand a, |
|
.publisher a { |
|
color: var(--brand-color); |
|
} |
|
|
|
h2 { |
|
font-size: 2.2rem; |
|
} |
|
|
|
h3 { |
|
font-size: 2rem; |
|
} |
|
|
|
h4 { |
|
font-size: 1.9rem; |
|
} |
|
|
|
h5 { |
|
font-size: 1.75rem; |
|
} |
|
|
|
h6 { |
|
font-size: 1.5rem; |
|
} |
|
|
|
p { |
|
margin: 0 0 15px; |
|
} |
|
|
|
aside h1 { |
|
font-size: 1.2rem; |
|
} |
|
|
|
aside h2 { |
|
font-size: 1.1rem; |
|
} |
|
|
|
aside p.lede { |
|
font-size: 1rem; |
|
} |
|
|
|
.lede { |
|
font-family: var(--main-body-font), serif; |
|
font-size: 1.6rem; |
|
word-wrap: break-word; |
|
font-weight: 300; |
|
} |
|
|
|
strong:not(>h2), .strong { |
|
color: var(--color-primary); |
|
} |
|
|
|
.hidden { |
|
display: none; |
|
} |
|
|
|
a { |
|
color: var(--color-secondary); |
|
text-decoration: none; |
|
} |
|
|
|
a:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
.card a:hover { |
|
text-decoration: none; |
|
color: var(--color-text); |
|
cursor: pointer; |
|
} |
|
|
|
.card a:hover h2 { |
|
color: var(--color-text); |
|
} |
|
|
|
img { |
|
max-width: 100%; |
|
height: auto; |
|
} |
|
|
|
svg.icon { |
|
width: 2em; |
|
height: 2em; |
|
} |
|
|
|
.divider { |
|
border: 2px solid var(--color-primary); |
|
margin: 20px 0; |
|
} |
|
|
|
.hashtag { |
|
color: var(--color-secondary); |
|
} |
|
|
|
.card { |
|
background-color: var(--color-bg); |
|
color: var(--color-text); |
|
padding: 0; |
|
margin: 0 0 50px 0; |
|
border-radius: 0; /* Sharp edges */ |
|
} |
|
|
|
.featured-cat { |
|
border-bottom: 2px solid var(--color-border); |
|
padding-left: 10px; |
|
} |
|
|
|
.featured-list { |
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: nowrap; |
|
align-items: flex-start; |
|
} |
|
|
|
|
|
.featured-list > * { |
|
box-sizing: border-box; /* so padding/border don't break the layout */ |
|
margin-bottom: 10px; |
|
padding: 10px; |
|
} |
|
|
|
@media (max-width: 1024px) { |
|
.featured-list { |
|
flex-direction: column !important; |
|
} |
|
|
|
.featured-list > div:first-child, |
|
.featured-list > div:last-child { |
|
flex: 1 1 auto; |
|
width: 100%; |
|
} |
|
|
|
.featured-list .card-header { |
|
margin-top: 20px; |
|
} |
|
|
|
.featured-list .card { |
|
border-bottom: 1px solid var(--color-border) !important; |
|
} |
|
|
|
.featured-list > * { |
|
margin-bottom: 10px; |
|
padding: 0; |
|
} |
|
} |
|
div:nth-child(odd) .featured-list { |
|
flex-direction: row-reverse; |
|
} |
|
|
|
/* Only the two column wrappers — not every .card that happens to be :first-child/:last-child of its parent */ |
|
.featured-list > div:first-child { |
|
flex: 0 0 66%; |
|
min-width: 0; |
|
} |
|
|
|
.featured-list > div:last-child { |
|
flex: 0 0 34%; |
|
min-width: 0; |
|
} |
|
|
|
.featured-list h2.card-title { |
|
font-size: 1.5rem; |
|
} |
|
|
|
.featured-list p.lede { |
|
font-size: 1.4rem; |
|
} |
|
|
|
.featured-list .card { |
|
margin-bottom: 10px; |
|
} |
|
|
|
.featured-list .card:not(:last-child) { |
|
border-bottom: 1px solid var(--color-border); |
|
} |
|
|
|
.featured-list .card-header img { |
|
max-height: 500px; |
|
aspect-ratio: 1; |
|
} |
|
|
|
.article-list .metadata { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
gap: 0.75rem; |
|
min-width: 0; |
|
} |
|
|
|
.article-list .metadata p { |
|
margin: 0; |
|
min-width: 0; |
|
} |
|
|
|
.truncate { |
|
display: -webkit-box; |
|
-webkit-line-clamp: 3; /* limit to 3 lines */ |
|
line-clamp: 3; |
|
-webkit-box-orient: vertical; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
.card.bordered { |
|
border: 2px solid var(--color-border); |
|
} |
|
|
|
.card-header { |
|
margin: 10px 0; |
|
} |
|
|
|
.header__image { |
|
position: relative; |
|
width: 100%; |
|
overflow: hidden; /* Ensures any overflow is hidden */ |
|
} |
|
|
|
.header__image::before { |
|
content: ""; |
|
display: block; |
|
padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100 = 56.25%) */ |
|
} |
|
|
|
.header__image img { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; /* Ensures the image covers the entire area while maintaining its aspect ratio */ |
|
} |
|
|
|
.card-body { |
|
font-size: 1rem; |
|
} |
|
|
|
.card-footer { |
|
border-top: 1px solid var(--color-border); |
|
margin: 20px 0; |
|
} |
|
|
|
.header { |
|
text-align: center; |
|
z-index: 1000; /* Ensure it stays on top */ |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-around; |
|
align-items: center; |
|
background-color: var(--color-bg); /* Black background */ |
|
border-bottom: 1px solid var(--color-border); /* White bottom border */ |
|
} |
|
|
|
.header__categories ul { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: center; |
|
gap: 20px; |
|
padding: 0; |
|
} |
|
|
|
.header__categories li { |
|
list-style: none; |
|
} |
|
|
|
.header__categories li a:hover { |
|
text-decoration: none; |
|
font-weight: bold; |
|
} |
|
|
|
.header__categories a.active { |
|
font-weight: bold; |
|
} |
|
|
|
.header__logo h1 { |
|
font-weight: normal; |
|
margin: 0; |
|
} |
|
|
|
/* Long site name: one line with ellipsis on narrow viewports */ |
|
.brand__title { |
|
min-width: 0; |
|
} |
|
|
|
@media (max-width: 1024px) { |
|
.header__logo .brand { |
|
font-size: clamp(1rem, 4.2vw, 1.45rem); |
|
gap: 0.35rem; |
|
/* Tight line-height + overflow:hidden on .brand__title clip ascenders; keep room for type. */ |
|
line-height: 1.35; |
|
justify-content: flex-start; |
|
text-align: left; |
|
} |
|
|
|
.brand__title { |
|
flex: 1; |
|
min-width: 0; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
line-height: 1.35; |
|
/* Padding inside the clipping box so Lobster/serif caps aren’t sheared at the top */ |
|
padding: 0.2em 0 0.12em; |
|
} |
|
|
|
.header__logo-circle { |
|
width: 44px; |
|
height: 44px; |
|
} |
|
|
|
.hamburger { |
|
flex-shrink: 0; |
|
margin-left: 0; |
|
} |
|
} |
|
|
|
/* Fixed square + overflow clips to a true circle. Logo img is out-of-flow so |
|
global img { height: auto } cannot shrink the bitmap; object-fit fills the disc. |
|
Slight scale crops typical padding baked into square marketing PNGs. */ |
|
.header__logo-circle { |
|
display: inline-block; |
|
position: relative; |
|
width: 60px; |
|
height: 60px; |
|
flex-shrink: 0; |
|
border-radius: 50%; |
|
overflow: hidden; |
|
box-shadow: 0 0 0 1px var(--color-border); |
|
vertical-align: middle; |
|
} |
|
|
|
.header__logo-circle > img { |
|
position: absolute; |
|
inset: 0; |
|
width: 100%; |
|
height: 100%; |
|
max-width: none; |
|
object-fit: cover; |
|
object-position: center; |
|
display: block; |
|
transform: scale(1.18); |
|
transform-origin: center center; |
|
} |
|
|
|
.header__logo a:hover { |
|
text-decoration: none; |
|
} |
|
|
|
.header__user { |
|
position: relative; |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.header__avatar img { |
|
height: 40px; /* Adjust the avatar size as needed */ |
|
width: 40px; |
|
border-radius: 50%; |
|
cursor: pointer; |
|
} |
|
|
|
.header__dropdown { |
|
display: none; |
|
position: absolute; |
|
top: 50px; /* Adjust this depending on the header.html.twig height */ |
|
right: 0; |
|
background-color: var(--color-text); /* White dropdown */ |
|
border: 2px solid var(--color-bg); /* Black border */ |
|
list-style: none; |
|
padding: 10px 0; |
|
z-index: 1000; |
|
border-radius: 0; /* Sharp edges */ |
|
} |
|
|
|
.header__dropdown ul { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.header__dropdown li { |
|
padding: 10px 20px; |
|
} |
|
|
|
.header__dropdown li a { |
|
color: var(--color-bg); /* Black text */ |
|
text-decoration: none; |
|
} |
|
|
|
.header__dropdown li a:hover { |
|
background-color: var(--color-bg); /* Black background on hover */ |
|
color: var(--color-text); /* White text on hover */ |
|
display: block; |
|
} |
|
|
|
footer p { |
|
margin: 0; |
|
} |
|
|
|
footer a { |
|
color: var(--color-text-contrast); |
|
} |
|
|
|
/* Tags container */ |
|
.tags { |
|
margin: 10px 0; |
|
display: flex; |
|
flex-wrap: wrap; /* Allows tags to wrap to the next line if needed */ |
|
gap: 10px; /* Adds spacing between individual tags */ |
|
} |
|
|
|
/* Individual tag */ |
|
.tag { |
|
background-color: var(--color-bg-light); |
|
color: var(--color-text-mid); |
|
padding: 3px 6px; /* Padding around the tag text */ |
|
border-radius: 20px; /* Rounded corners (pill-shaped) */ |
|
font-size: 0.75em; /* Slightly smaller text */ |
|
cursor: pointer; /* Cursor turns to pointer for clickable tags */ |
|
text-decoration: none; /* Removes any text decoration (e.g., underline) */ |
|
display: inline-block; /* Makes sure each tag behaves like a block with padding */ |
|
transition: background-color 0.3s ease; /* Smooth hover effect */ |
|
} |
|
|
|
/*!* Hover effect for tags *!*/ |
|
/*.tag:hover {*/ |
|
/* color: var(--color-text-contrast);*/ |
|
/*}*/ |
|
|
|
/* Optional: Responsive adjustments for smaller screens */ |
|
@media (max-width: 768px) { |
|
.tag { |
|
font-size: 0.8em; /* Slightly smaller text for mobile */ |
|
} |
|
} |
|
|
|
|
|
|
|
.card.card__horizontal { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
h1 { |
|
font-size: 2rem; |
|
} |
|
|
|
.card-content { |
|
flex: 1; |
|
margin-right: 30px; |
|
padding: 0 8px; |
|
} |
|
|
|
.card-image img { |
|
width: 220px; |
|
max-height: 220px; |
|
object-fit: contain; |
|
} |
|
} |
|
|
|
.article__image img { |
|
margin: 1rem 0; |
|
width: 100%; |
|
} |
|
|
|
/* Author profile (/p/npub…): NIP-01 uses `picture`; large circular crop */ |
|
.author-profile { |
|
max-width: 40rem; |
|
margin: 0 auto; |
|
text-align: center; |
|
} |
|
|
|
.author-profile__avatar { |
|
position: relative; |
|
width: 8rem; |
|
height: 8rem; |
|
margin: 0 auto 1rem; |
|
border-radius: 50%; |
|
overflow: hidden; |
|
box-shadow: 0 0 0 2px var(--color-border); |
|
} |
|
|
|
.author-profile__avatar > img { |
|
position: absolute; |
|
inset: 0; |
|
width: 100%; |
|
height: 100%; |
|
max-width: none; |
|
object-fit: cover; |
|
object-position: center; |
|
display: block; |
|
} |
|
|
|
.author-profile__avatar--compact { |
|
width: 4rem; |
|
height: 4rem; |
|
margin-bottom: 0.75rem; |
|
} |
|
|
|
.author-profile__title { |
|
margin-top: 0.25em; |
|
} |
|
|
|
.author-profile__header-meta { |
|
margin-top: 0.5rem; |
|
max-width: min(100%, 40rem); |
|
width: 100%; |
|
margin-left: auto; |
|
margin-right: auto; |
|
text-align: left; |
|
} |
|
|
|
/* One main label (NIP-05, Payment) with values stacked in the next column */ |
|
.author-profile__section--label-value { |
|
display: grid; |
|
grid-template-columns: 7.5rem minmax(0, 1fr); |
|
column-gap: 0.5rem; |
|
align-items: start; |
|
margin-top: 0.5rem; |
|
} |
|
|
|
.author-profile__section-type { |
|
font-size: 0.72rem; |
|
font-weight: 600; |
|
text-transform: uppercase; |
|
letter-spacing: 0.04em; |
|
color: var(--color-text); |
|
opacity: 0.75; |
|
line-height: 1.35; |
|
padding-top: 0.15em; |
|
} |
|
|
|
.author-profile__value-stack { |
|
list-style: none; |
|
margin: 0; |
|
padding: 0; |
|
min-width: 0; |
|
} |
|
|
|
.author-profile__value-stack-line { |
|
margin: 0.35rem 0 0; |
|
} |
|
|
|
.author-profile__value-stack-line:first-child { |
|
margin-top: 0; |
|
} |
|
|
|
.author-profile__payments-nested { |
|
list-style: none; |
|
margin: 0; |
|
padding: 0; |
|
min-width: 0; |
|
} |
|
|
|
.author-profile__identity { |
|
list-style: none; |
|
margin: 0.5rem 0 0; |
|
padding: 0; |
|
} |
|
|
|
.author-profile__meta-line, |
|
.author-profile__identity-row, |
|
.author-profile__payment { |
|
display: grid; |
|
grid-template-columns: 7.5rem minmax(0, 1fr); |
|
column-gap: 0.5rem; |
|
align-items: center; |
|
margin: 0.35rem 0; |
|
font-size: 0.9rem; |
|
line-height: 1.35; |
|
} |
|
|
|
.author-profile__identity-type { |
|
font-size: 0.72rem; |
|
font-weight: 600; |
|
text-transform: uppercase; |
|
letter-spacing: 0.04em; |
|
color: var(--color-text); |
|
opacity: 0.75; |
|
} |
|
|
|
.author-profile__meta-value, |
|
.author-profile__identity-link, |
|
.author-profile__payment-addr { |
|
min-width: 0; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
} |
|
|
|
.author-profile__payment-value { |
|
display: flex; |
|
align-items: center; |
|
gap: 0.4rem; |
|
min-width: 0; |
|
max-width: 100%; |
|
} |
|
|
|
.author-profile__payment-addr { |
|
flex: 1 1 auto; |
|
color: inherit; |
|
text-decoration: none; |
|
} |
|
|
|
.author-profile__copy-btn { |
|
flex-shrink: 0; |
|
font-size: 0.75rem; |
|
padding: 0.2rem 0.5rem; |
|
line-height: 1.2; |
|
} |
|
|
|
/* NIP-05: ellipsis long addresses; keep ✓ immediately after the (truncated) text, not at the column edge. */ |
|
.author-profile__nip05-value { |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-start; |
|
flex-wrap: nowrap; |
|
gap: 0.25rem; |
|
min-width: 0; |
|
max-width: 100%; |
|
width: 100%; |
|
} |
|
|
|
.author-profile__nip05-link { |
|
flex: 0 1 auto; |
|
min-width: 0; |
|
/* reserve space for the checkmark on the same “line” of layout */ |
|
max-width: calc(100% - 1.4rem); |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
word-break: normal; |
|
} |
|
|
|
.author-profile__nip05-verified { |
|
color: #2e7d32; |
|
font-size: 0.88em; |
|
font-weight: 600; |
|
line-height: 1; |
|
opacity: 0.85; |
|
user-select: none; |
|
flex-shrink: 0; |
|
flex-grow: 0; |
|
} |
|
|
|
.author-profile__payment-type { |
|
font-size: 0.72rem; |
|
font-weight: 600; |
|
text-transform: uppercase; |
|
letter-spacing: 0.04em; |
|
color: var(--color-text); |
|
opacity: 0.75; |
|
} |
|
|
|
.author-profile__jumble { |
|
margin: 1rem 0 0; |
|
text-align: center; |
|
} |
|
|
|
.author-profile__about { |
|
text-align: left; |
|
margin-top: 1rem; |
|
} |
|
|
|
.author-profile__divider { |
|
margin: 2rem 0; |
|
} |
|
|
|
.badge { |
|
background-color: var(--color-primary); |
|
color: var(--color-bg); |
|
padding: 3px 8px; |
|
border-radius: 20px; |
|
font-family: var(--font-family), sans-serif; |
|
font-weight: bold; |
|
font-size: 0.65em; |
|
text-transform: uppercase; |
|
margin-right: 5px; |
|
vertical-align: super; |
|
} |
|
|
|
.badge.badge__secondary { |
|
background-color: var(--color-secondary); |
|
} |
|
|
|
/* Author link + small Nostr profile picture (NIP-01 `picture`) */ |
|
.user-badge { |
|
display: inline-flex; |
|
align-items: center; |
|
gap: 0.4em; |
|
vertical-align: middle; |
|
text-decoration: none; |
|
} |
|
|
|
.user-badge:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
.user-badge__avatar { |
|
display: inline-block; |
|
width: 1.75rem; |
|
height: 1.75rem; |
|
border-radius: 50%; |
|
overflow: hidden; |
|
flex-shrink: 0; |
|
box-shadow: 0 0 0 1px var(--color-border); |
|
} |
|
|
|
.user-badge__avatar--wrap { |
|
position: relative; |
|
vertical-align: middle; |
|
} |
|
|
|
.user-badge__avatar-img { |
|
position: relative; |
|
z-index: 1; |
|
width: 100%; |
|
height: 100%; |
|
max-width: 100%; |
|
max-height: 100%; |
|
object-fit: cover; |
|
object-position: center; |
|
display: block; |
|
border-radius: 50%; |
|
} |
|
|
|
.user-badge__avatar-img.is-broken { |
|
display: none; |
|
} |
|
|
|
.user-badge__avatar-fallback { |
|
position: absolute; |
|
inset: 0; |
|
z-index: 0; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-radius: 50%; |
|
overflow: hidden; |
|
} |
|
|
|
.user-badge__avatar--generated .pubkey-avatar-svg, |
|
.user-badge__avatar-fallback .pubkey-avatar-svg { |
|
width: 100%; |
|
height: 100%; |
|
display: block; |
|
} |
|
|
|
.user-badge__name { |
|
line-height: 1.2; |
|
} |
|
|
|
.avatar { |
|
width: 24px; /* Adjust the size as needed */ |
|
height: 24px; /* Adjust the size as needed */ |
|
border-radius: 50%; /* Makes the image circular */ |
|
object-fit: cover; /* Ensures the image scales correctly */ |
|
display: inline-block; |
|
vertical-align: middle; |
|
} |
|
|
|
.alert { |
|
padding: 10px 20px; /* Padding around the text */ |
|
border-radius: 5px; /* Rounded corners */ |
|
margin: 20px 0; /* Spacing around the alert */ |
|
} |
|
|
|
.alert.alert-success { |
|
background-color: var(--color-secondary); |
|
color: var(--color-text-contrast); |
|
} |
|
|
|
/* Tabs Container */ |
|
.nav-tabs { |
|
display: flex; /* Arrange items in a row */ |
|
justify-content: center; |
|
padding: 0; /* Remove padding */ |
|
margin: 0; /* Remove margin */ |
|
list-style: none; /* Remove list item styling */ |
|
} |
|
|
|
/* Individual Tab Item */ |
|
.nav-tabs .nav-item { |
|
margin: 0; /* No margin around list items */ |
|
} |
|
|
|
/* NON-Active Tab */ |
|
.nav-tabs .nav-link { |
|
color: var(--color-text); |
|
background-color: transparent; |
|
border: none; |
|
} |
|
|
|
|
|
/* Active Tab */ |
|
.nav-tabs .nav-link.active { |
|
color: var(--color-text-contrast); |
|
background-color: var(--color-primary); |
|
font-weight: bold; |
|
} |
|
|
|
/* Content Container */ |
|
.tab-content { |
|
padding: 15px; /* Spacing inside the content */ |
|
border-top: none; /* Remove border overlap with active tab */ |
|
} |
|
|
|
/* Quill editor */ |
|
#editor { |
|
height: 400px; |
|
margin-bottom: 20px; |
|
} |
|
|
|
/* Search */ |
|
label.search { |
|
width: 100%; |
|
justify-content: center; |
|
margin-bottom: 15px; |
|
} |
|
|
|
/* Shared layout / theme utilities (replaces Bootstrap-only classes where removed) */ |
|
.text-subtle { |
|
color: var(--color-text-mid); |
|
} |
|
|
|
.text-muted { |
|
color: var(--color-text-mid); |
|
} |
|
|
|
.text-center { |
|
text-align: center; |
|
} |
|
|
|
.my-2 { |
|
margin-top: 0.5rem; |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.mt-2 { |
|
margin-top: 0.5rem; |
|
} |
|
|
|
.ms-2 { |
|
margin-left: 0.5rem; |
|
} |
|
|
|
.nostr-card-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
gap: 0.5rem; |
|
} |
|
|
|
.ui-badge { |
|
display: inline-block; |
|
padding: 0.2rem 0.55rem; |
|
font-size: 0.75rem; |
|
font-weight: 600; |
|
line-height: 1.2; |
|
border-radius: 4px; |
|
letter-spacing: 0.02em; |
|
} |
|
|
|
.ui-badge--brand { |
|
background-color: var(--brand-color); |
|
color: var(--color-text-contrast); |
|
} |
|
|
|
.ui-badge--primary { |
|
background-color: var(--color-primary); |
|
color: var(--color-text-contrast); |
|
} |
|
|
|
.ui-badge--secondary { |
|
background-color: var(--color-secondary); |
|
color: var(--color-text-contrast); |
|
} |
|
|
|
.ui-badge--neutral { |
|
background-color: var(--color-bg-light); |
|
color: var(--color-text); |
|
border: 1px solid var(--color-border); |
|
} |
|
|
|
.alert.alert-warning { |
|
background-color: var(--color-bg-light); |
|
color: var(--color-text); |
|
border: 1px solid var(--color-border); |
|
} |
|
|
|
a:focus-visible { |
|
outline: 2px solid var(--color-focus-ring); |
|
outline-offset: 2px; |
|
} |
|
|
|
@media (max-width: 600px) { |
|
.header__logo .brand { |
|
font-size: clamp(0.95rem, 4.8vw, 1.25rem); |
|
} |
|
|
|
.header__logo-circle { |
|
width: 40px; |
|
height: 40px; |
|
} |
|
}
|
|
|