1216 lines
19 KiB
CSS
1216 lines
19 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
--bg: #061614;
|
|
--panel: #0a201d;
|
|
--panel-2: #0f2824;
|
|
--line: #1c4a43;
|
|
--line-bright: #2c7b6d;
|
|
--text: #e7f0ed;
|
|
--muted: #91a39e;
|
|
--teal: #2fbd9f;
|
|
--teal-dark: #0e5f53;
|
|
--amber: #d8892d;
|
|
--purple: #8f6ff0;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: radial-gradient(circle at 40% -20%, #10352f 0, #061614 38rem);
|
|
color: var(--text);
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.topbar {
|
|
align-items: center;
|
|
background: #041411;
|
|
border-bottom: 1px solid #12362f;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.75rem 1.5rem;
|
|
}
|
|
|
|
.brand,
|
|
.primary-nav,
|
|
.account-nav,
|
|
.heading-actions,
|
|
.controls-grid,
|
|
.rankings-grid,
|
|
.chart-card header {
|
|
display: flex;
|
|
}
|
|
|
|
.brand {
|
|
align-items: center;
|
|
font-size: 1.1rem;
|
|
font-weight: 760;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.brand-mark {
|
|
color: var(--teal);
|
|
font-size: 1.7rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.primary-nav {
|
|
gap: 0.25rem;
|
|
margin-right: auto;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.primary-nav a {
|
|
border: 1px solid #173f38;
|
|
border-radius: 8px;
|
|
color: #d9e7e3;
|
|
font-weight: 720;
|
|
min-width: 8.5rem;
|
|
padding: 0.9rem 1.2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.primary-nav a:hover,
|
|
.result-chips a:hover,
|
|
.axis-chips a:hover {
|
|
border-color: var(--line-bright);
|
|
color: white;
|
|
}
|
|
|
|
.account-nav {
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.account-nav a,
|
|
.account-menu summary,
|
|
.heading-actions a,
|
|
.heading-actions span,
|
|
.chart-card header a,
|
|
.issue-form button {
|
|
background: #0a201d;
|
|
border: 1px solid #173f38;
|
|
border-radius: 7px;
|
|
color: #c2d1cc;
|
|
font-size: 0.88rem;
|
|
padding: 0.55rem 0.8rem;
|
|
}
|
|
|
|
.account-menu {
|
|
position: relative;
|
|
}
|
|
|
|
.account-menu summary {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
.account-menu summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.account-menu summary::after {
|
|
color: var(--muted);
|
|
content: "▾";
|
|
font-size: 0.75rem;
|
|
margin-left: 0.45rem;
|
|
}
|
|
|
|
.account-menu[open] summary {
|
|
border-color: var(--line-bright);
|
|
color: white;
|
|
}
|
|
|
|
.account-menu[open] summary::after {
|
|
content: "▴";
|
|
}
|
|
|
|
.account-menu-panel {
|
|
background: #061614;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
|
|
min-width: 12rem;
|
|
padding: 0.45rem;
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 0.45rem);
|
|
z-index: 20;
|
|
}
|
|
|
|
.account-menu-panel a {
|
|
display: block;
|
|
margin: 0.2rem 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.account-menu-panel .sign-out {
|
|
background: #0d5f53;
|
|
border-color: #16806f;
|
|
color: white;
|
|
}
|
|
|
|
.account-nav .sign-in {
|
|
background: #0d5f53;
|
|
border-color: #16806f;
|
|
color: white;
|
|
}
|
|
|
|
.shell {
|
|
margin: 0 auto;
|
|
max-width: 1180px;
|
|
padding: 1.25rem 1.5rem 2rem;
|
|
}
|
|
|
|
.login-shell {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
min-height: calc(100vh - 4.25rem);
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.login-panel {
|
|
background: color-mix(in srgb, var(--panel) 88%, transparent);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1fr);
|
|
max-width: 56rem;
|
|
padding: 1.4rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.login-copy {
|
|
border-right: 1px solid rgba(44, 123, 109, 0.45);
|
|
padding: 0.6rem 1.5rem 0.6rem 0.2rem;
|
|
}
|
|
|
|
.login-copy .eyebrow {
|
|
color: var(--teal);
|
|
font-size: 0.82rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
margin: 0 0 0.8rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.login-copy h1 {
|
|
font-size: 2rem;
|
|
line-height: 1.1;
|
|
margin: 0;
|
|
}
|
|
|
|
.login-copy p:last-child {
|
|
color: var(--muted);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.login-form {
|
|
display: grid;
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
.login-form label {
|
|
color: #cfe0dc;
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.login-form input {
|
|
background: #132923;
|
|
border: 1px solid #2a4b43;
|
|
border-radius: 6px;
|
|
color: var(--text);
|
|
font: inherit;
|
|
min-height: 2.7rem;
|
|
padding: 0.6rem 0.75rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.login-form input:focus {
|
|
border-color: var(--line-bright);
|
|
outline: 2px solid rgba(47, 189, 159, 0.22);
|
|
}
|
|
|
|
.login-form button {
|
|
background: var(--teal-dark);
|
|
border: 1px solid #16806f;
|
|
border-radius: 7px;
|
|
color: white;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-weight: 800;
|
|
margin-top: 0.35rem;
|
|
min-height: 2.8rem;
|
|
}
|
|
|
|
.form-error {
|
|
background: rgba(216, 137, 45, 0.14);
|
|
border: 1px solid rgba(216, 137, 45, 0.45);
|
|
border-radius: 6px;
|
|
color: #f4c27d;
|
|
margin: 0 0 0.25rem;
|
|
padding: 0.7rem 0.75rem;
|
|
}
|
|
|
|
.page-heading {
|
|
align-items: end;
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.stacked-heading {
|
|
align-items: start;
|
|
display: block;
|
|
}
|
|
|
|
.page-heading h1 {
|
|
font-size: clamp(1.7rem, 2vw, 2.3rem);
|
|
line-height: 1.1;
|
|
margin: 0;
|
|
}
|
|
|
|
.page-heading p,
|
|
.score-note,
|
|
.footer,
|
|
.empty-state,
|
|
.setup-error p {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.page-heading p {
|
|
margin: 0.4rem 0 0;
|
|
}
|
|
|
|
.heading-actions {
|
|
flex-wrap: wrap;
|
|
gap: 0.65rem;
|
|
justify-content: end;
|
|
}
|
|
|
|
.notice,
|
|
.filter-card,
|
|
.chamber-card,
|
|
.ranking-card,
|
|
.chart-card,
|
|
.setup-error {
|
|
background: color-mix(in srgb, var(--panel) 88%, transparent);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.notice {
|
|
color: #b8cbc5;
|
|
margin: 1rem 0;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.controls-grid {
|
|
gap: 1.25rem;
|
|
margin-top: 1.1rem;
|
|
}
|
|
|
|
.filter-card {
|
|
flex: 1 1 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.1rem;
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
|
|
.issue-form {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.chip,
|
|
.suggestions a {
|
|
align-items: center;
|
|
background: #123a34;
|
|
border: 1px solid #1f6b5f;
|
|
border-radius: 6px;
|
|
color: #d9f4ee;
|
|
display: inline-flex;
|
|
min-height: 2.35rem;
|
|
padding: 0.45rem 0.75rem;
|
|
}
|
|
|
|
.chip a {
|
|
color: #bedbd5;
|
|
font-size: 1.2rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.search-box {
|
|
flex: 1 1 14rem;
|
|
}
|
|
|
|
.search-box input {
|
|
background: #132923;
|
|
border: 1px solid #2a4b43;
|
|
border-radius: 6px;
|
|
color: var(--text);
|
|
min-height: 2.35rem;
|
|
padding: 0.45rem 0.75rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.wide-search {
|
|
align-items: center;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin: 1.4rem 0 1rem;
|
|
padding: 0.65rem;
|
|
}
|
|
|
|
.wide-search input {
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--text);
|
|
flex: 1;
|
|
font-size: 1rem;
|
|
outline: 0;
|
|
padding: 0.55rem 0.7rem;
|
|
}
|
|
|
|
.wide-search button {
|
|
background: var(--teal-dark);
|
|
border: 1px solid #16806f;
|
|
border-radius: 7px;
|
|
color: white;
|
|
padding: 0.65rem 1rem;
|
|
}
|
|
|
|
.wide-search select {
|
|
background: #102722;
|
|
border: 1px solid #2a4b43;
|
|
border-radius: 7px;
|
|
color: var(--text);
|
|
font: inherit;
|
|
min-height: 2.55rem;
|
|
padding: 0.45rem 0.65rem;
|
|
}
|
|
|
|
.issue-form button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.suggestions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.55rem;
|
|
margin-top: 0.8rem;
|
|
}
|
|
|
|
.suggestions a {
|
|
background: transparent;
|
|
color: #a8c6c0;
|
|
font-size: 0.84rem;
|
|
min-height: 1.9rem;
|
|
}
|
|
|
|
.suggestion-empty {
|
|
color: var(--muted);
|
|
margin: 0.4rem 0 1rem;
|
|
}
|
|
|
|
.result-chips,
|
|
.axis-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.65rem;
|
|
margin: 0.8rem 0 1.3rem;
|
|
}
|
|
|
|
.result-chips a,
|
|
.axis-chips a {
|
|
align-items: center;
|
|
border: 1px solid #1d554c;
|
|
border-radius: 999px;
|
|
color: #c9dcd7;
|
|
display: inline-flex;
|
|
gap: 0.45rem;
|
|
min-height: 2.15rem;
|
|
padding: 0.4rem 0.85rem;
|
|
}
|
|
|
|
.result-chips .dashed-chip {
|
|
border-style: dashed;
|
|
color: #79a99d;
|
|
}
|
|
|
|
.phonebook-results {
|
|
background: color-mix(in srgb, var(--panel) 88%, transparent);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
margin: 1rem 0 1.25rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phonebook-results header,
|
|
.pagination {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.phonebook-results header {
|
|
border-bottom: 1px solid rgba(44, 123, 109, 0.36);
|
|
padding: 0.9rem 1rem;
|
|
}
|
|
|
|
.phonebook-results header h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.phonebook-results header span,
|
|
.phonebook-meta,
|
|
.pagination span,
|
|
.pagination strong {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.phonebook-list {
|
|
list-style-position: inside;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.phonebook-list li {
|
|
border-bottom: 1px solid rgba(44, 123, 109, 0.22);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.phonebook-list li:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.phonebook-list a {
|
|
align-items: center;
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
margin-left: 1.1rem;
|
|
min-height: 3.1rem;
|
|
padding: 0.55rem 1rem 0.55rem 0;
|
|
}
|
|
|
|
.phonebook-list a:hover {
|
|
color: white;
|
|
}
|
|
|
|
.phonebook-name {
|
|
color: var(--text);
|
|
font-weight: 760;
|
|
min-width: 0;
|
|
}
|
|
|
|
.phonebook-meta {
|
|
font-size: 0.86rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pagination {
|
|
border-top: 1px solid rgba(44, 123, 109, 0.36);
|
|
gap: 0.8rem;
|
|
padding: 0.8rem 1rem;
|
|
}
|
|
|
|
.pagination a,
|
|
.pagination span {
|
|
border: 1px solid #1d554c;
|
|
border-radius: 7px;
|
|
min-width: 5.8rem;
|
|
padding: 0.48rem 0.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.pagination span {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.chamber-card {
|
|
align-items: stretch;
|
|
display: grid;
|
|
flex: 0 0 28rem;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
overflow: hidden;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.segment {
|
|
align-items: center;
|
|
border-radius: 7px;
|
|
color: var(--muted);
|
|
display: flex;
|
|
font-weight: 700;
|
|
justify-content: center;
|
|
min-height: 4.4rem;
|
|
}
|
|
|
|
.segment.active {
|
|
background: #105f54;
|
|
color: white;
|
|
outline: 1px solid #258778;
|
|
}
|
|
|
|
.score-note {
|
|
font-size: 0.86rem;
|
|
margin: 0.8rem 0;
|
|
}
|
|
|
|
.rankings-grid {
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.ranking-card {
|
|
flex: 1 1 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ranking-card header,
|
|
.chart-card header {
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1rem 0.65rem;
|
|
}
|
|
|
|
.ranking-card header span {
|
|
color: var(--muted);
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
.ranking-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.ranking-list li {
|
|
border-top: 1px solid rgba(44, 123, 109, 0.22);
|
|
}
|
|
|
|
.ranking-list li.selected {
|
|
background: rgba(47, 189, 159, 0.16);
|
|
box-shadow: inset 0 0 0 1px rgba(47, 189, 159, 0.55);
|
|
}
|
|
|
|
.ranking-list a {
|
|
align-items: center;
|
|
display: grid;
|
|
gap: 0.7rem;
|
|
grid-template-columns: 2.2rem 3.2rem minmax(0, 1fr) 4rem;
|
|
min-height: 3.2rem;
|
|
padding: 0.45rem 0.9rem;
|
|
}
|
|
|
|
.rank,
|
|
.votes {
|
|
color: var(--muted);
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
}
|
|
|
|
.score {
|
|
border-radius: 5px;
|
|
color: white;
|
|
font-variant-numeric: tabular-nums;
|
|
padding: 0.42rem 0.2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.score.positive {
|
|
background: linear-gradient(90deg, #0e6d5e, #2fbd9f);
|
|
}
|
|
|
|
.score.negative {
|
|
background: linear-gradient(90deg, #76420e, var(--amber));
|
|
}
|
|
|
|
.profile-card,
|
|
.compare-card,
|
|
.compare-controls {
|
|
background: color-mix(in srgb, var(--panel) 88%, transparent);
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.profile-header {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 1.55rem 1.75rem;
|
|
}
|
|
|
|
.profile-identity {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 1.2rem;
|
|
}
|
|
|
|
.avatar {
|
|
align-items: center;
|
|
background: #0d372f;
|
|
border: 1px solid #1d554c;
|
|
border-radius: 999px;
|
|
color: #8fe2d0;
|
|
display: inline-flex;
|
|
font-weight: 800;
|
|
height: 4.4rem;
|
|
justify-content: center;
|
|
width: 4.4rem;
|
|
}
|
|
|
|
.profile-header h2 {
|
|
font-size: 1.65rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.profile-header p,
|
|
.overall-score span,
|
|
.overall-score small,
|
|
.compare-legend small,
|
|
.compare-legend p {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.party-pill {
|
|
background: #0b2a3b;
|
|
border-radius: 5px;
|
|
color: #83b9e7;
|
|
font-size: 0.8rem;
|
|
padding: 0.2rem 0.45rem;
|
|
}
|
|
|
|
.overall-score {
|
|
text-align: right;
|
|
}
|
|
|
|
.overall-score strong {
|
|
display: inline-block;
|
|
font-size: 2rem;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.topic-panels {
|
|
border-top: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.topic-panels article {
|
|
padding: 1.35rem 1.6rem;
|
|
}
|
|
|
|
.topic-panels article + article {
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.topic-panels h3,
|
|
.profile-history h3 {
|
|
color: var(--teal);
|
|
margin: 0 0 0.9rem;
|
|
}
|
|
|
|
.topic-panels .opposed-heading {
|
|
color: var(--amber);
|
|
}
|
|
|
|
.topic-row {
|
|
align-items: center;
|
|
border-left: 3px solid transparent;
|
|
border-radius: 6px;
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
grid-template-columns: 3.4rem minmax(0, 1fr) 9rem;
|
|
margin: 0.65rem 0;
|
|
padding: 0.35rem 0.5rem;
|
|
}
|
|
|
|
.topic-row.active {
|
|
background: rgba(216, 137, 45, 0.12);
|
|
border-left-color: var(--amber);
|
|
}
|
|
|
|
.topic-row span {
|
|
font-weight: 650;
|
|
}
|
|
|
|
.topic-row i {
|
|
background: currentColor;
|
|
border-radius: 999px;
|
|
color: #75c9b8;
|
|
display: block;
|
|
height: 0.3rem;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.profile-history {
|
|
padding: 1.2rem 1.6rem 1.4rem;
|
|
}
|
|
|
|
.compare-controls {
|
|
border-radius: 8px;
|
|
margin-top: 1.4rem;
|
|
padding: 1.1rem 1.25rem 0.4rem;
|
|
}
|
|
|
|
.compare-controls h2 {
|
|
color: #6fa89b;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.08em;
|
|
margin-top: 0.4rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.axis-chips a {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.compare-card {
|
|
align-items: stretch;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
|
|
margin-top: 1.4rem;
|
|
padding: 1.6rem;
|
|
}
|
|
|
|
.radar-frame {
|
|
min-height: 31rem;
|
|
}
|
|
|
|
.radar-chart {
|
|
display: block;
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.radar-ring {
|
|
fill: transparent;
|
|
stroke: rgba(55, 105, 94, 0.55);
|
|
}
|
|
|
|
.radar-axis {
|
|
stroke: rgba(70, 116, 106, 0.4);
|
|
}
|
|
|
|
.radar-label {
|
|
fill: #72a99c;
|
|
font-size: 15px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.compare-legend {
|
|
padding: 1rem 0 1rem 1.5rem;
|
|
}
|
|
|
|
.legend-row {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 0.8rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.legend-line {
|
|
border-radius: 999px;
|
|
display: inline-block;
|
|
height: 0.25rem;
|
|
width: 2.2rem;
|
|
}
|
|
|
|
.legend-dot {
|
|
border-radius: 999px;
|
|
display: inline-block;
|
|
height: 0.7rem;
|
|
width: 0.7rem;
|
|
}
|
|
|
|
.line-0,
|
|
.dot-0 { background: #2fbd9f; }
|
|
.line-1,
|
|
.dot-1 { background: #8f6ff0; }
|
|
.line-2,
|
|
.dot-2 { background: #f4b860; }
|
|
.line-3,
|
|
.dot-3 { background: #7bdff2; }
|
|
|
|
.member {
|
|
min-width: 0;
|
|
}
|
|
|
|
.member strong,
|
|
.member small {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.member small {
|
|
color: var(--muted);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.empty-state {
|
|
border-top: 1px solid rgba(44, 123, 109, 0.22);
|
|
margin: 0;
|
|
min-height: 10rem;
|
|
padding: 2.2rem 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.chart-card {
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
.chart-frame {
|
|
padding: 0.5rem 1rem 0.85rem;
|
|
}
|
|
|
|
.chart-legend {
|
|
display: grid;
|
|
gap: 0.65rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
|
|
padding: 0 1rem 0.85rem;
|
|
}
|
|
|
|
.chart-legend.compact {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
padding-top: 0.15rem;
|
|
}
|
|
|
|
.chart-legend.compact .chart-legend-row {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
.chart-legend.compact .chart-legend-line,
|
|
.chart-legend.compact .chart-legend-marker {
|
|
flex: 0 0 auto;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.chart-legend.compact .chart-legend-copy {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.chart-legend-row {
|
|
align-items: flex-start;
|
|
background: rgba(12, 38, 33, 0.78);
|
|
border: 1px solid rgba(44, 123, 109, 0.28);
|
|
border-radius: 8px;
|
|
box-shadow: inset 0 0 0 1px rgba(8, 54, 47, 0.22);
|
|
display: flex;
|
|
gap: 0.7rem;
|
|
min-height: 3.4rem;
|
|
padding: 0.65rem 0.8rem;
|
|
}
|
|
|
|
.chart-legend-line,
|
|
.chart-legend-marker {
|
|
display: inline-block;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.chart-legend-line {
|
|
align-self: flex-start;
|
|
border-top: 4px solid currentColor;
|
|
color: inherit;
|
|
margin-top: 0.6rem;
|
|
width: 2.25rem;
|
|
}
|
|
|
|
.chart-legend-marker {
|
|
background: currentColor;
|
|
color: inherit;
|
|
height: 0.85rem;
|
|
margin-top: 0.2rem;
|
|
width: 0.85rem;
|
|
}
|
|
|
|
.chart-legend-copy,
|
|
.chart-legend-label,
|
|
.chart-legend-meta {
|
|
min-width: 0;
|
|
}
|
|
|
|
.chart-legend-copy {
|
|
display: grid;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.chart-legend-label {
|
|
color: var(--text);
|
|
display: block;
|
|
font-size: 1.08rem;
|
|
font-weight: 760;
|
|
letter-spacing: -0.01em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.chart-legend-meta {
|
|
color: var(--muted);
|
|
display: block;
|
|
font-size: 0.82rem;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.score-chart {
|
|
display: block;
|
|
height: auto;
|
|
min-height: 18rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.chart-grid {
|
|
stroke: #33544d;
|
|
stroke-dasharray: 4 5;
|
|
}
|
|
|
|
.chart-year-line {
|
|
stroke: rgba(51, 84, 77, 0.45);
|
|
stroke-dasharray: 3 8;
|
|
}
|
|
|
|
.chart-axis {
|
|
stroke: #48635d;
|
|
}
|
|
|
|
.chart-axis-label,
|
|
.chart-series-label,
|
|
.chart-empty {
|
|
fill: #9fb0ac;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.chart-empty {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.line-0,
|
|
.marker-0 {
|
|
color: #009e73;
|
|
}
|
|
|
|
.line-1,
|
|
.marker-1 {
|
|
color: #0072b2;
|
|
}
|
|
|
|
.line-2,
|
|
.marker-2 {
|
|
color: #e69f00;
|
|
}
|
|
|
|
.line-3,
|
|
.marker-3 {
|
|
color: #cc79a7;
|
|
}
|
|
|
|
.line-1 {
|
|
border-top-style: dashed;
|
|
}
|
|
|
|
.line-2 {
|
|
border-top-style: dotted;
|
|
}
|
|
|
|
.line-3 {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
currentColor 0 45%,
|
|
transparent 45% 60%,
|
|
currentColor 60% 75%,
|
|
transparent 75% 90%,
|
|
currentColor 90% 100%
|
|
);
|
|
background-repeat: repeat-x;
|
|
background-size: 1.8rem 100%;
|
|
border-top: 0;
|
|
height: 4px;
|
|
}
|
|
|
|
.marker-0 {
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.marker-1 {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.marker-2 {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.marker-3 {
|
|
background: transparent;
|
|
border-bottom: 0.9rem solid currentColor;
|
|
border-left: 0.45rem solid transparent;
|
|
border-right: 0.45rem solid transparent;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.footer {
|
|
border-top: 1px solid #12362f;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
padding: 1.1rem;
|
|
}
|
|
|
|
.footer span {
|
|
border-right: 1px solid #31514a;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.footer span:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.setup-error {
|
|
margin-top: 3rem;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.setup-error pre {
|
|
background: #020c0a;
|
|
border: 1px solid #284b44;
|
|
border-radius: 6px;
|
|
color: #d3e5e0;
|
|
overflow: auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.sr-only {
|
|
clip: rect(0, 0, 0, 0);
|
|
border: 0;
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.page-heading,
|
|
.controls-grid,
|
|
.rankings-grid,
|
|
.topic-panels,
|
|
.compare-card,
|
|
.login-panel {
|
|
display: block;
|
|
}
|
|
|
|
.heading-actions,
|
|
.chamber-card {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.ranking-card + .ranking-card {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.topbar {
|
|
align-items: flex-start;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.account-nav {
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.primary-nav {
|
|
order: 3;
|
|
margin: 0.7rem 0 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.primary-nav a {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.topic-panels article + article {
|
|
border-left: 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.profile-header {
|
|
align-items: flex-start;
|
|
display: block;
|
|
}
|
|
|
|
.overall-score {
|
|
margin-top: 1rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.compare-legend {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.chart-legend-row {
|
|
grid-template-columns: 2.25rem 1rem minmax(0, 1fr);
|
|
}
|
|
|
|
.chart-legend-meta {
|
|
justify-self: start;
|
|
text-align: left;
|
|
}
|
|
|
|
.wide-search {
|
|
align-items: stretch;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
.wide-search input {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.phonebook-results header,
|
|
.pagination,
|
|
.phonebook-list a {
|
|
align-items: flex-start;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.phonebook-meta {
|
|
white-space: normal;
|
|
}
|
|
|
|
.login-copy {
|
|
border-right: 0;
|
|
border-bottom: 1px solid rgba(44, 123, 109, 0.45);
|
|
margin-bottom: 1rem;
|
|
padding: 0 0 1rem;
|
|
}
|
|
}
|