/* HEADER */
.header {
background: linear-gradient(135deg, var(--bg-header), #113659);
color: var(--text-on-header);
padding: 24px 20px 30px;
border-bottom: 1px solid rgba(248, 250, 252, 0.08);
}
.header-inner {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
gap: 20px;
align-items: center;
}
@media (max-width: 820px) {
.header-inner {
grid-template-columns: minmax(0, 1fr);
}
}
.brand-mark {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 10px;
}
.brand-logo {
width: 40px;
height: 40px;
border-radius: 14px;
background: radial-gradient(circle at 30% 20%, var(--accent) 0, #ffd88a 30%, #0f766e 100%);
box-shadow: 0 10px 30px rgba(15, 118, 110, 0.55);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
letter-spacing: 0.04em;
color: #102a43;
font-size: 14px;
}
.brand-text-main {
font-size: 18px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.96;
}
.brand-text-sub {
font-size: 13px;
opacity: 0.72;
}
.header-title {
font-size: 26px;
line-height: 1.2;
font-weight: 650;
margin: 4px 0 8px;
}
.header-subtitle {
font-size: 14px;
line-height: 1.5;
max-width: 34rem;
opacity: 0.9;
}
.header-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 12px;
opacity: 0.9;
}
.meta-pill {
padding: 5px 10px;
border-radius: var(--radius-small);
background: rgba(15, 23, 42, 0.24);
border: 1px solid rgba(248, 250, 252, 0.08);
display: inline-flex;
align-items: center;
gap: 6px;
}
.meta-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--accent);
}
.header-summary-card {
background: rgba(15, 23, 42, 0.92);
border-radius: var(--radius-large);
padding: 14px 16px;
border: 1px solid rgba(248, 250, 252, 0.09);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.65);
}
.summary-eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.11em;
color: var(--accent-soft);
margin-bottom: 4px;
}
.summary-main {
font-size: 13px;
line-height: 1.5;
color: #e5edf9;
}
.summary-highlight {
font-weight: 600;
color: #fdf4d7;
}
.summary-meta-row {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 10px;
font-size: 11px;
color: #c7d2e9;
opacity: 0.9;
}
/* MAIN CONTENT AREA */
.content {
flex: 1;
padding: 22px 16px 32px;
}
.content-inner {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 2.4fr);
gap: 18px;
}
@media (max-width: 980px) {
.content-inner {
grid-template-columns: minmax(0, 1fr);
}
}
/* FILTER PANEL */
.filter-panel {
background: linear-gradient(145deg, #ffffff, #f7f9ff);
border-radius: var(--radius-large);
padding: 16px 16px 14px;
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-soft);
position: sticky;
top: 12px;
align-self: flex-start;
}
@media (max-width: 980px) {
.filter-panel {
position: static;
}
}
.filter-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.filter-title {
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.filter-count-chip {
padding: 2px 8px;
border-radius: var(--radius-small);
font-size: 11px;
border: 1px solid var(--accent-soft);
background: #fffaf0;
color: #8a5200;
}
.filter-caption {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 12px;
}
.filter-group {
margin-bottom: 12px;
}
.filter-label {
display: block;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 5px;
}
.filter-input,
.filter-select {
width: 100%;
padding: 7px 9px;
border-radius: 10px;
border: 1px solid var(--border-soft);
background: #ffffff;
font-size: 13px;
color: var(--text-main);
outline: none;
transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.filter-input:focus,
.filter-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(246, 168, 0, 0.4);
background: #fefcf7;
}
.filter-row {
display: flex;
gap: 8px;
}
.filter-row > * {
flex: 1;
}
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.chip {
padding: 4px 9px;
border-radius: var(--radius-small);
border: 1px solid var(--border-soft);
background: var(--bg-chip);
font-size: 11px;
color: var(--text-muted);
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.chip-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--accent);
opacity: 0.9;
}
.chip.active {
background: #fffaf0;
border-color: var(--accent);
color: #8a5200;
box-shadow: 0 0 0 1px rgba(246, 168, 0, 0.35);
}
.filter-footer {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.reset-button {
border: none;
background: none;
padding: 0;
font-size: 11px;
color: var(--text-muted);
text-decoration: underline;
cursor: pointer;
}
.legend {
font-size: 10px;
color: var(--text-muted);
text-align: right;
}
/* ISSUE LIST */
.issue-panel {
display: flex;
flex-direction: column;
gap: 10px;
}
.issue-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.issue-panel-title {
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.issue-panel-title span {
font-size: 11px;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.09em;
}
.sort-select {
min-width: 140px;
}
.issue-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.issue-card {
background: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-large);
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-soft);
padding: 12px 13px 11px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
@media (max-width: 720px) {
.issue-card {
grid-template-columns: minmax(0, 1fr);
align-items: flex-start;
}
}
.issue-badge {
width: 44px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: #102a43;
background: radial-gradient(circle at 25% 10%, var(--accent) 0, #ffd88a 38%, #fef7e4 100%);
border-radius: 16px;
padding: 7px 4px;
border: 1px solid #fbbf24;
box-shadow: 0 10px 25px rgba(245, 158, 11, 0.35);
}
.issue-main {
min-width: 0;
}
.issue-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 3px;
color: var(--text-main);
}
.issue-meta {
font-size: 11px;
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
margin-bottom: 3px;
}
.issue-meta span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.issue-topic-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--accent);
}
.issue-description {
font-size: 12px;
color: var(--text-main);
opacity: 0.9;
line-height: 1.4;
}
.issue-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
font-size: 11px;
}
@media (max-width: 720px) {
.issue-actions {
align-items: flex-start;
}
}
.issue-button {
padding: 7px 11px;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, var(--accent), #fbbf24);
color: #1f2933;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.11em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 12px 24px rgba(245, 158, 11, 0.45);
text-decoration: none;
white-space: nowrap;
}
.issue-button:hover {
filter: brightness(1.03);
}
.issue-button span {
font-size: 13px;
transform: translateX(0);
transition: transform 0.16s ease;
}
.issue-button:hover span {
transform: translateX(2px);
}
.issue-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: flex-end;
}
@media (max-width: 720px) {
.issue-tags {
justify-content: flex-start;
}
}
.tag-pill {
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
background: #edf2ff;
color: #3730a3;
border: 1px solid #c7d2fe;
}
/* FOOTER */
.footer {
border-top: 1px solid rgba(148, 163, 184, 0.4);
padding: 10px 16px 14px;
font-size: 11px;
color: var(--text-muted);
background: rgba(248, 250, 252, 0.9);
}
.footer-inner {
max-width: 1080px;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.footer-strong {
font-weight: 600;
color: #0f172a;
}
Find what you need by keyword, topic, or tag. Designed so you can answer,
“Have we seen this before?” in under 30 seconds.
Search title, topic, or keywords
Topic
All topics
