:root, html[data-theme="dark"] {
--bg: #140814;
--bg-elev: rgba(42, 12, 28, .78);
--ink: #fff3f0;
--muted: #c9a8b4;
--brand: #ff4d8d;
--gold: #ffc24d;
--line: rgba(255, 77, 141, .18);
--line-strong: rgba(255, 194, 77, .32);
--header-fill: rgba(22, 8, 18, .78);
--panel: rgba(22, 8, 16, .96);
--hover: rgba(255, 244, 240, .06);
--nav-on: #fff;
--price: #ffe08a;
--photo-bg: #2a1020;
--sheet: #1a0a14;
--page: 1200px;
--gutter: 24px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 40px;
--space-2xl: 64px;
--radius: 16px;
--radius-sm: 10px;
--header: 64px;
--header-offset: 16px;
--avatar: 48px;
--font-display: "Exo 2", "Avenir Next", "Segoe UI", sans-serif;
--font-body: "Karla", "Avenir Next", "Segoe UI", sans-serif;
--z-scene: 0;
--z-content: 2;
--z-nav: 20;
--z-modal: 40;
--ease: cubic-bezier(.16, 1, .3, 1);
color-scheme: dark;
}
/* Three-board home and URL-first website ranking */
.page-dashboard main, .page-sites main {
min-height: calc(100dvh - 150px);
background:
radial-gradient(circle at 12% 8%, rgba(255, 77, 141, .18), transparent 30rem),
radial-gradient(circle at 88% 18%, rgba(255, 194, 77, .12), transparent 28rem),
var(--bg);
}
.dashboard-home, .sites-page { padding-block: clamp(34px, 6vw, 76px); }
.dashboard-mobile-scroll { display: contents; }
.dashboard-mobile-story.rank-story { display: none; }
.home-dashboard.has-scene main { overflow: visible; }
.home-dashboard .scene-toggle { display: none; }
.home-dashboard .dashboard-home {
position: absolute;
z-index: 7;
inset: clamp(180px, 31vh, 250px) max(var(--gutter), calc((100% - var(--page)) / 2)) 86px;
width: auto;
padding: 0;
pointer-events: auto;
transition: inset-block-start .45s var(--ease);
}
.home-dashboard .dashboard-tabs { height: 100%; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
.home-dashboard .dashboard-tabs > label { align-self: start; min-height: 42px; display: grid; place-items: center; }
.home-dashboard .dashboard-columns { grid-row: 2; height: 100%; min-height: 0; }
.home-dashboard .dashboard-panel {
max-height: 100%;
overflow: auto;
padding: 2px 7px 12px;
border: 0;
background: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html[data-theme="light"] .home-dashboard .dashboard-panel { background: transparent; }
.dashboard-hero, .sites-hero { max-width: 850px; margin: 0 auto 30px; text-align: center; }
.dashboard-hero h1, .sites-hero h1 { margin: 8px 0 0; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: .98; }
.dashboard-hero p { margin: 14px auto 0; max-width: 680px; color: var(--muted); font-size: 1.05rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.dashboard-tabs { display: grid; min-width: 0; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; border: 0; }
.dashboard-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.dashboard-tabs > label {
padding: 11px 10px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
background: var(--bg-elev);
text-align: center;
font-weight: 750;
cursor: pointer;
}
#tab-people:checked + label,
#tab-companies:checked + label,
#tab-sites:checked + label { color: var(--nav-on); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.dashboard-tabs > input:focus-visible + label { outline: 3px solid color-mix(in oklab, var(--brand) 55%, transparent); outline-offset: 2px; }
.dashboard-columns { grid-column: 1 / -1; }
.dashboard-column-claim { display: none; }
.dashboard-panel {
display: none;
min-width: 0;
padding: 18px;
border: 1px solid var(--line);
border-radius: 20px;
background: color-mix(in oklab, var(--bg-elev) 94%, transparent);
box-shadow: 0 20px 60px rgba(0, 0, 0, .14);
}
#tab-people:checked ~ .dashboard-columns .panel-people,
#tab-companies:checked ~ .dashboard-columns .panel-companies,
#tab-sites:checked ~ .dashboard-columns .panel-sites { display: block; }
.dashboard-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dashboard-panel-head h2 { margin: 0; font-size: 1.3rem; }
.dashboard-panel-head a { color: var(--brand); font-size: .82rem; text-decoration: none; }
.dashboard-rank-list, .site-rank-list { list-style: none; margin: 0; padding: 0; }
.dashboard-rank-list { display: grid; grid-auto-rows: 68px; gap: 8px; }
.dashboard-rank-list li {
height: 68px;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(7, 14, 31, .8);
box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
html[data-theme="light"] .dashboard-rank-list li { background: rgba(255, 255, 255, .82); }
.dashboard-rank-list a {
display: grid;
grid-template-columns: 28px 44px minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
min-height: 68px;
height: 100%;
padding-inline: 9px;
color: var(--ink);
text-decoration: none;
}
.dashboard-position { color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.dashboard-avatar, .dashboard-avatar img { width: 42px; height: 56px; border-radius: 8px; object-fit: cover; }
.dashboard-avatar { overflow: hidden; border: 1px solid var(--line); }
.dashboard-name { min-width: 0; }
.dashboard-name strong, .dashboard-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-name small { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.dashboard-profile-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dashboard-profile-meta .dashboard-country { flex: none; margin-top: 2px; }
.dashboard-profile-meta .dashboard-categories { min-width: 0; margin-top: 2px; }
.dashboard-country { width: fit-content; line-height: 1; filter: saturate(.92); }
.dashboard-price { color: var(--price); font-size: .8rem; }
.dashboard-claim { width: 100%; margin-top: 16px; }
.site-submit { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-elev); text-align: left; }
.site-submit > label { display: block; margin-bottom: 12px; color: var(--ink); font-weight: 650; line-height: 1.45; }
.site-submit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.site-submit input, .site-pot input {
width: 100%;
min-height: 44px;
border: 1px solid var(--line-strong);
border-radius: 10px;
padding: 0 12px;
color: var(--ink);
background: var(--field);
}
.site-submit small { display: block; margin-top: 9px; color: var(--muted); }
.site-submit.is-compact { margin-bottom: 12px; padding: 12px; }
.site-submit.is-compact > label { font-size: .82rem; }
.site-submit.is-compact .site-submit-row { grid-template-columns: 1fr; }
.site-submit.is-compact button { width: 100%; white-space: normal; }
.site-rank-list { display: grid; gap: 10px; }
.site-rank-card {
position: relative;
display: grid;
grid-template-columns: 34px 120px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 13px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--bg-elev);
}
.site-rank-site-link {
position: absolute;
z-index: 1;
inset: 0;
border-radius: inherit;
}
.site-rank-position,
.site-rank-image,
.site-rank-copy { pointer-events: none; }
.site-rank-copy .site-categories a,
.site-rank-actions {
position: relative;
z-index: 2;
pointer-events: auto;
}
.site-rank-card.is-lead { border-color: color-mix(in oklab, var(--brand) 68%, var(--line)); box-shadow: 0 12px 36px rgba(255, 77, 141, .14); }
.site-rank-position { display: grid; justify-items: center; color: var(--muted); }
.site-rank-image, .site-rank-image img { width: 120px; height: 76px; border-radius: 10px; }
.site-rank-image { display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: var(--photo-bg); color: var(--brand); font: 800 2rem var(--font-display); }
.site-rank-image img { object-fit: cover; }
.site-rank-copy { min-width: 0; }
.site-rank-copy > strong, .site-rank-copy > small { display: block; }
.site-rank-copy > strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.site-rank-copy > small { margin-top: 2px; color: var(--muted); }
.site-categories { display: flex; gap: 5px; margin-top: 5px; overflow: hidden; }
.site-categories a, .site-categories > span { border: 1px solid color-mix(in oklab, var(--brand) 34%, var(--line)); border-radius: 999px; padding: 2px 7px; color: var(--muted); font-size: .62rem; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.site-categories a:hover { border-color: var(--brand); color: var(--ink); }
.site-rank-copy p { display: -webkit-box; margin: 7px 0; overflow: hidden; color: color-mix(in oklab, var(--ink) 72%, var(--muted)); font-size: .84rem; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.site-visits { color: var(--muted); font-size: .78rem; }
.site-visits b { color: var(--brand); }
.site-rank-actions { display: grid; gap: 7px; justify-items: stretch; }
.site-rank-actions form, .site-rank-actions button, .site-rank-actions a { width: 100%; }
.site-pot summary { color: var(--muted); font-size: .78rem; text-align: center; cursor: pointer; }
.site-pot form { display: grid; gap: 7px; width: 190px; margin-top: 8px; }
.site-pot label { color: var(--muted); font-size: .75rem; }
.site-pot input { min-height: 38px; margin-top: 4px; }
.site-rank-empty { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 110px; border: 1px dashed var(--line-strong); border-radius: 16px; color: var(--muted); }
.site-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.panel-sites .site-rank-card { grid-template-columns: 26px 38px minmax(0, 1fr); gap: 9px; padding: 9px; }
.panel-sites .site-rank-image, .panel-sites .site-rank-image img { width: 38px; height: 38px; border-radius: 8px; }
.panel-sites .site-rank-image img { object-fit: contain; padding: 3px; }
.panel-sites .site-rank-copy p, .panel-sites .site-rank-actions { display: none; }
.panel-sites .site-rank-copy > strong { font-size: .86rem; }
.panel-sites .site-rank-copy > small { display: none; }
.panel-sites .site-visits { font-size: .68rem; }
.panel-sites .site-categories { display: flex; margin-top: 3px; }
.panel-sites .site-categories > :nth-child(n + 2) { display: none; }
.panel-sites .site-categories > span { padding: 1px 5px; font-size: .56rem; }
.home-dashboard .panel-sites .site-rank-card,
.home-dashboard .panel-sites .site-rank-empty { height: 58px; min-height: 58px; }
.home-dashboard .panel-sites .site-rank-card {
align-items: center;
width: 100%;
height: 58px;
min-height: 58px;
overflow: hidden;
}
.home-dashboard .panel-sites .site-rank-copy > strong {
display: block;
overflow: hidden;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-quick-claim {
width: min(540px, calc(100% - 32px));
padding: 22px;
border: 1px solid var(--line-strong);
border-radius: 20px;
color: var(--ink);
background: var(--bg-elev);
box-shadow: 0 28px 90px rgba(0, 0, 0, .48);
}
.site-quick-claim::backdrop { background: rgba(2, 6, 18, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.site-quick-claim h2 { margin: 0 44px 16px 0; font-size: 1.45rem; }
.site-quick-close { position: absolute; top: 12px; right: 12px; }
.site-quick-close button { width: 36px; height: 36px; border: 0; border-radius: 999px; color: var(--muted); background: var(--hover); font-size: 1.4rem; }
.site-rank-intro { width: min(760px, calc(100% - 32px)); }
.site-rank-intro .rank-story { max-height: none; overflow: visible; pointer-events: auto; }
.site-rank-intro .site-submit { margin-top: 4px; padding: 12px; background: rgba(7, 14, 31, .86); }
.site-rank-intro .site-submit > label { margin-bottom: 8px; font-size: .86rem; }
.site-rank-intro .site-submit small { margin-top: 5px; font-size: .72rem; }
.site-scene-card .rank-hit { grid-template-columns: 34px 58px minmax(0, 1fr) auto; padding-right: 46px; }
.site-scene-card .rank-photo, .site-scene-card .rank-photo img { width: 58px; height: 42px; border-radius: 8px; }
.site-scene-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: var(--brand); font-weight: 800; }
.site-scene-card .rank-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-scene-actions { position: absolute; z-index: 12; top: 50%; right: 10px; translate: 0 -50%; }
.site-scene-card.has-open-actions {
z-index: 1000 !important;
overflow: visible;
}
body.has-open-site-actions .rank-board { z-index: 50 !important; }
.site-scene-card.has-open-actions .site-scene-actions { z-index: 1001; }
.site-scene-actions > summary { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 999px; color: var(--muted); cursor: pointer; list-style: none; }
.site-scene-actions > summary::-webkit-details-marker { display: none; }
.site-scene-actions[open] > summary { color: var(--ink); background: var(--hover); }
.site-scene-actions > div {
position: absolute;
z-index: 1002;
right: 0;
bottom: calc(100% + 8px);
display: grid;
width: 210px;
gap: 8px;
padding: 10px;
border: 1px solid var(--line-strong);
border-radius: 12px;
background: var(--bg-elev);
box-shadow: 0 16px 42px rgba(0, 0, 0, .35);
}
.site-scene-actions form { display: grid; gap: 6px; }
.site-pot-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; color: var(--muted); font-size: .72rem; }
.site-pot-total strong { color: var(--price); font-size: .9rem; white-space: nowrap; }
.site-scene-actions label { color: var(--muted); font-size: .72rem; }
.site-scene-actions input { width: 100%; min-height: 36px; margin-top: 3px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 9px; background: var(--field); }
.site-scene-actions button { width: 100%; }
@media (min-width: 1100px) {
.dashboard-tabs { display: block; }
.dashboard-tabs > label, .home-dashboard .dashboard-tabs > label { display: none; }
.dashboard-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 14px; min-height: 0; }
.dashboard-panel, #tab-people:checked ~ .dashboard-columns .panel-people,
#tab-companies:checked ~ .dashboard-columns .panel-companies,
#tab-sites:checked ~ .dashboard-columns .panel-sites { display: block; }
.home-dashboard .dashboard-columns { height: 100%; }
.home-dashboard .dashboard-column {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
min-width: 0;
min-height: 0;
gap: 10px;
}
.home-dashboard .dashboard-panel {
height: 100%;
min-height: 0;
max-height: 100%;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
scrollbar-gutter: stable;
}
.home-dashboard .dashboard-column-claim {
display: inline-flex;
width: 100%;
min-height: 42px;
flex: none;
box-shadow: 0 10px 30px rgba(13, 88, 220, .28);
}
}
@media (max-width: 1099px) {
.home-dashboard.has-scene main {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
scroll-behavior: smooth;
}
.home-dashboard.has-scene .page-ranking {
display: flex;
min-height: 100%;
height: auto;
flex-direction: column;
overflow: visible;
padding: 16px 0 92px;
}
.home-dashboard .rank-intro {
position: relative;
inset: auto;
flex: none;
width: min(640px, calc(100% - 32px));
margin: 0 auto;
transform: none;
}
.home-dashboard .dashboard-home {
position: relative;
inset: auto;
flex: none;
width: calc(100% - 28px);
min-height: 0;
margin: 24px auto 0;
transition: none;
}
.home-dashboard .dashboard-tabs,
.home-dashboard .dashboard-columns {
height: auto;
}
.home-dashboard .dashboard-panel {
max-height: none;
overflow: visible;
}
}
/* Site scene cards keep metadata inside their own responsive column. */
body.page-sites[data-template="space"] .site-scene-card {
width: min(680px, 66vw);
}
body.page-sites[data-template="space"] .site-scene-card .rank-hit {
grid-template-columns: 34px 58px minmax(0, 1fr);
gap: 11px;
min-height: 82px;
padding: 9px 46px 9px 12px;
}
body.page-sites .site-scene-card .rank-copy {
min-width: 0;
overflow: hidden;
}
body.page-sites .site-scene-card .rank-copy strong {
display: block;
overflow: visible;
line-height: 1.2;
white-space: normal;
}
body.page-sites .site-scene-card .rank-photo img { object-fit: contain; padding: 5px; }
body.page-sites .site-scene-card .rank-copy > small {
display: block;
overflow: hidden;
margin-top: 3px;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-scene-meta {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
margin-top: 5px;
}
.site-scene-meta .site-categories {
flex: 1;
min-width: 0;
margin-top: 0;
}
.site-scene-visits {
flex: none;
color: var(--price);
font-size: .68rem;
font-weight: 700;
white-space: nowrap;
}
body.page-sites[data-template="stairs"] .site-scene-card .rank-copy > small,
body.page-sites[data-template="mountain"] .site-scene-card .rank-copy > small,
body.page-sites[data-template="stairs"] .site-scene-card .site-categories,
body.page-sites[data-template="mountain"] .site-scene-card .site-categories {
display: none;
}
body.page-sites[data-template="stairs"] .site-scene-card .site-scene-meta,
body.page-sites[data-template="mountain"] .site-scene-card .site-scene-meta {
justify-content: center;
margin-top: 2px;
}
body.page-sites[data-template="stairs"] .site-scene-card .site-scene-visits,
body.page-sites[data-template="mountain"] .site-scene-card .site-scene-visits {
padding: 2px 7px;
border-radius: 999px;
background: color-mix(in oklab, var(--price) 14%, transparent);
font-size: .62rem;
}
@media (max-width: 720px) {
body.page-sites[data-template="space"] .site-scene-card {
width: min(640px, calc(100% - 24px));
}
body.page-sites[data-template="space"] .site-scene-card .rank-hit {
grid-template-columns: 28px 48px minmax(0, 1fr);
gap: 8px;
min-height: 76px;
padding: 8px 42px 8px 9px;
}
body.page-sites[data-template="space"] .site-scene-card .rank-photo,
body.page-sites[data-template="space"] .site-scene-card .rank-photo img {
width: 48px;
height: 38px;
}
body.page-sites[data-template="space"] .site-scene-card .rank-copy strong {
font-size: .82rem;
}
body.page-sites[data-template="space"] .site-scene-card .rank-copy > small {
font-size: .66rem;
}
body.page-sites[data-template="space"] .site-scene-card .site-categories > :nth-child(n + 2) {
display: none;
}
}
@media (max-width: 720px) {
.dashboard-home, .sites-page { padding-block: 28px 48px; }
.dashboard-hero h1, .sites-hero h1 { font-size: clamp(2rem, 12vw, 3.2rem); }
.site-submit-row, .site-rank-card { grid-template-columns: 1fr; }
.site-submit-row button { width: 100%; }
.site-rank-card { position: relative; padding-top: 46px; }
.site-rank-position { position: absolute; top: 12px; left: 14px; display: flex; gap: 4px; }
.site-rank-image, .site-rank-image img { width: 100%; height: auto; aspect-ratio: 16 / 8; }
.site-rank-actions { grid-template-columns: 1fr 1fr; }
.site-pot { grid-column: 1 / -1; }
.site-pot form { width: 100%; }
.home-dashboard .panel-sites .site-rank-card {
grid-template-columns: 26px 38px minmax(0, 1fr);
width: 100%;
height: 58px;
min-height: 58px;
padding: 8px;
overflow: hidden;
}
.panel-sites .site-rank-position { position: static; display: grid; }
.panel-sites .site-rank-image, .panel-sites .site-rank-image img { width: 38px; height: 38px; aspect-ratio: auto; }
.home-dashboard .panel-sites .site-rank-copy > strong {
display: block;
overflow: hidden;
font-size: .78rem;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-dashboard .panel-sites .site-rank-copy > small,
.home-dashboard .panel-sites .site-visits {
overflow: hidden;
font-size: .62rem;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-dashboard .dashboard-home { width: calc(100% - 28px); margin-top: 20px; }
.home-dashboard .dashboard-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-dashboard .dashboard-panel { padding: 10px; }
.home-dashboard .dashboard-rank-list a { min-height: 42px; }
.home-dashboard .dashboard-avatar, .home-dashboard .dashboard-avatar img { width: 36px; height: 48px; }
.home-dashboard .rank-fixed-cta {
right: max(16px, env(safe-area-inset-right));
bottom: max(18px, env(safe-area-inset-bottom));
max-width: calc(100% - 32px);
min-height: 44px;
padding-inline: 22px;
}
.site-rank-intro { top: 8px; }
.site-rank-intro .site-submit-row { grid-template-columns: 1fr; }
.site-rank-intro .site-submit button { min-height: 38px; }
.site-scene-actions > div { right: -4px; }
.site-quick-claim { padding: 18px; }
}
html[data-theme="light"] {
--bg: #fff4f0;
--bg-elev: #ffffff;
--ink: #2a1018;
--muted: #7a5060;
--brand: #d91f6a;
--gold: #a36a00;
--line: rgba(180, 40, 90, .16);
--line-strong: rgba(180, 40, 90, .3);
--header-fill: #ffffff;
--panel: #ffffff;
--hover: rgba(180, 40, 90, .06);
--nav-on: #2a1018;
--price: #7a3a10;
--photo-bg: #f3d5df;
--sheet: #ffffff;
color-scheme: light;
}
html[data-theme="light"] .claim-form input,
html[data-theme="light"] .claim-form select,
html[data-theme="light"] .claim-form textarea,
html[data-theme="light"] .donate-form input { background: #fff; color: var(--ink); }
html[data-theme="light"] .person-metric,
html[data-theme="light"] .social-icons a,
html[data-theme="light"] .sheet-close,
html[data-theme="light"] .donate-math { color: var(--ink) !important; }
html[data-theme="light"] .person-photo { background: var(--photo-bg); }
html[data-theme="light"] .social-icons a:hover { background: var(--hover); color: var(--ink); }
html[data-theme="light"] .pager a { color: var(--brand); }
html[data-theme="light"] .profile-sheet::backdrop { background: rgba(20, 30, 50, .35); }
html[data-theme="light"] .rank-num { color: #4d628c; }
html[data-theme="light"] .rank-card.is-lead .rank-num { color: var(--brand); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
.has-scene-root { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.55;
overflow-x: hidden;
font-kerning: normal;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: block; flex: none; }
.wrap {
width: min(var(--page), calc(100% - var(--gutter) * 2));
margin-inline: auto;
}
.stack { display: flex; flex-direction: column; gap: var(--space-xl); position: relative; z-index: var(--z-content); padding: var(--space-xl) 0 var(--space-2xl); }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 80; background: var(--brand); color: #fff; padding: 12px 18px; }
.skip-link:focus { top: 12px; }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.site-header {
position: sticky;
top: 0;
z-index: var(--z-nav);
padding-top: max(var(--header-offset), env(safe-area-inset-top));
background: transparent;
}
.header-bar { display: block; }
.header-nav { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.header-nav::-webkit-scrollbar { display: none; }
.nav-toggle, .nav-backdrop, .button.header-claim-menu { display: none; }
.header-inner {
position: relative;
z-index: 4;
min-height: var(--header);
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 16px;
min-width: 0;
padding: 0 14px 0 18px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--header-fill);
box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
overflow: visible;
}
.header-inner::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
backdrop-filter: blur(22px);
z-index: -1;
pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; letter-spacing: -.03em; flex: none; }
.brand img, .footer-brand img {
width: 32px;
height: 32px;
object-fit: contain;
background: transparent;
}
.brand span { font-size: 1.05rem; letter-spacing: -.04em; }
.main-nav { display: flex; align-items: center; gap: 18px; min-width: max-content; padding: 4px 8px; }
.main-nav a, .picker summary {
display: inline-flex;
align-items: center;
min-height: 32px;
border: 0;
background: none;
padding: 0;
color: var(--muted);
text-decoration: none;
font-size: .92rem;
font-weight: 500;
list-style: none;
}
.picker summary::-webkit-details-marker { display: none; }
.main-nav a[aria-current="page"], .main-nav a:hover, .picker summary:hover { color: var(--nav-on); }
.picker-nav summary, .picker-rankings summary { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.picker-nav summary::after, .picker-rankings summary::after { content: "⌄"; font-size: .72rem; opacity: .65; }
.picker-rankings summary small {
padding: 1px 6px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--brand);
font-size: .62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
}
.picker-nav.is-current summary,
.picker-nav[open] summary,
.picker-rankings.is-current summary,
.picker-rankings[open] summary { color: var(--nav-on); }
.picker-nav-links, .picker-ranking-links { left: 0; right: auto; width: 270px; }
.picker-nav-links p, .picker-ranking-links p {
margin: 0 8px 5px;
color: var(--muted);
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
}
.picker-nav-links a, .picker-ranking-links a {
display: block;
padding: 9px 10px;
border-radius: var(--radius-sm);
color: var(--ink);
text-decoration: none;
}
.picker-nav-links a:hover,
.picker-nav-links a[aria-current="page"],
.picker-ranking-links a:hover,
.picker-ranking-links a[aria-current="page"] { background: var(--hover); color: var(--nav-on); }
.header-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.picker-lang summary { justify-content: center; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; min-width: 32px; text-align: center; }
.picker-lang[open] summary, .picker-lang summary:hover { color: var(--nav-on); }
.theme-toggle {
width: 38px;
height: 38px;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: var(--hover);
color: var(--ink);
display: grid;
place-items: center;
padding: 0;
}
.theme-toggle:hover { color: var(--nav-on); background: var(--panel); }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; line-height: 0; }
html[data-theme="dark"] .theme-toggle .icon-moon,
html:not([data-theme]) .theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.scene-toggle .icon-view-space,
.scene-toggle .icon-view-mountain,
.scene-toggle .icon-view-stairs { display: none; line-height: 0; }
.scene-toggle .icon-view-space { display: block; }
body[data-template="mountain"] .scene-toggle .icon-view-space,
body[data-template="stairs"] .scene-toggle .icon-view-space { display: none; }
body[data-template="mountain"] .scene-toggle .icon-view-mountain,
body[data-template="stairs"] .scene-toggle .icon-view-stairs { display: block; }
.picker { position: relative; }
.picker-panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 50;
width: min(240px, calc(100vw - 24px));
max-height: min(70dvh, 420px);
overflow: auto;
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
display: none;
gap: 4px;
}
.picker[open] > .picker-panel,
.picker-panel.is-open { display: grid; }
.picker-langs a {
display: block;
padding: 8px 10px;
color: var(--ink);
text-decoration: none;
border-radius: var(--radius-sm);
}
.picker-langs a[aria-current="page"], .picker-langs a:hover { background: var(--hover); color: var(--nav-on); }
@media (min-width: 901px) {
.header-nav { overflow: visible; }
}
@media (max-width: 900px) {
html { font-size: 106.25%; }
body { line-height: 1.62; }
.lede, .content-intro, .hero-lede { font-size: 1.08rem; line-height: 1.5; }
.content-block h2 { font-size: 1.28rem; }
.content-block p, .content-block li { font-size: 1.05rem; line-height: 1.65; }
.footer-bar p,
.footer-brand,
.site-footer nav a { font-size: .7rem; }
.site-footer {
padding-block: 3px;
padding-bottom: max(3px, env(safe-area-inset-bottom));
}
.footer-bar {
flex-wrap: nowrap;
gap: 8px;
}
.footer-brand img,
.footer-rights { display: none; }
.footer-brand { min-width: 0; }
.footer-brand span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-footer nav {
flex: none;
flex-wrap: nowrap;
gap: 8px;
}
.site-footer nav a {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0;
white-space: nowrap;
}
.claim-form label,
.category-toolbar > p { font-size: .92rem; }
.person-copy strong { font-size: 1.18rem; }
.person-meta { font-size: .92rem; }
.button-small { min-height: 44px; font-size: .95rem; }
.sheet-close { width: 44px; height: 44px; }
.profile-kicker, .profile-metrics dt { font-size: .82rem; }
.profile-bio { font-size: 1.2rem; line-height: 1.6; }
.nav-toggle {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: var(--hover);
color: var(--ink);
padding: 0;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
display: block;
width: 16px;
height: 2px;
border-radius: 1px;
background: currentColor;
transition: transform .2s var(--ease), top .2s var(--ease), background-color .2s var(--ease);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
content: "";
position: absolute;
inset-inline-start: 0;
}
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }
.site-header.is-nav-open .nav-toggle-bars { background: transparent; }
.site-header.is-nav-open .nav-toggle-bars::before {
top: 0;
transform: rotate(45deg);
}
.site-header.is-nav-open .nav-toggle-bars::after {
top: 0;
transform: rotate(-45deg);
}
.nav-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 1;
border: 0;
margin: 0;
padding: 0;
background: rgba(4, 7, 14, .58);
cursor: pointer;
}
html[data-theme="light"] .nav-backdrop { background: rgba(20, 30, 50, .32); }
.site-header.is-nav-open .nav-backdrop { display: block; }
.header-tools { margin-inline-start: auto; gap: 8px; }
.header-tools .header-claim { display: none; }
.theme-toggle { width: 44px; height: 44px; }
.picker-lang summary {
display: grid;
place-items: center;
min-width: 44px;
min-height: 44px;
font-size: .82rem;
}
.header-nav {
display: none;
position: fixed;
top: calc(max(var(--header-offset), env(safe-area-inset-top)) + var(--header) + 8px);
right: max(12px, env(safe-area-inset-right));
left: max(12px, env(safe-area-inset-left));
z-index: 3;
flex: none;
width: auto;
max-height: min(78dvh, calc(100dvh - var(--header) - 28px));
overflow: auto;
overscroll-behavior: contain;
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
box-shadow: 0 18px 48px rgba(0, 0, 0, .32);
}
.site-header.is-nav-open .header-nav {
display: flex;
flex-direction: column;
gap: 8px;
}
.main-nav {
flex-direction: column;
align-items: stretch;
min-width: 0;
gap: 2px;
padding: 4px;
}
.main-nav > a,
.picker-nav summary,
.picker-rankings summary {
display: flex;
align-items: center;
min-height: 44px;
padding: 10px 12px;
border-radius: var(--radius-sm);
font-size: 1.05rem;
white-space: normal;
}
.picker-nav summary::after,
.picker-rankings summary::after { margin-inline-start: auto; }
.picker-rankings summary { flex-wrap: wrap; }
.picker-rankings summary small {
font-size: .68rem;
}
.header-nav .picker-nav-links,
.header-nav .picker-ranking-links {
position: static;
inset: auto;
width: auto;
max-height: none;
overflow: visible;
padding: 0 0 8px 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.header-nav .picker-nav-links p,
.header-nav .picker-ranking-links p {
margin: 4px 10px 6px;
font-size: .72rem;
}
.header-nav .picker-nav-links a,
.header-nav .picker-ranking-links a {
display: flex;
align-items: center;
min-height: 44px;
font-size: 1rem;
}
.button.header-claim-menu {
display: inline-flex;
width: 100%;
min-height: 48px;
margin-top: 4px;
}
html.is-nav-open,
html.is-nav-open body { overflow: hidden; }
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 16px;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: transparent;
color: var(--ink);
text-decoration: none;
font-weight: 600;
}
.button-primary {
border: 0;
background: linear-gradient(180deg, #4d8dff, #2f66f0);
box-shadow: 0 12px 32px rgba(255, 77, 141, .35);
color: #fff;
}
.button-gold {
border: 0;
background: linear-gradient(180deg, #e8c56a, #c4922a);
box-shadow: 0 12px 32px rgba(196, 146, 42, .32);
color: #2a1c05;
}
.button-cta { min-height: 50px; padding: 0 28px; font-size: 1rem; }
.button-small { min-height: 36px; font-size: .88rem; }
.button-wide { width: 100%; }
.button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, .nav-toggle:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
}
.kicker {
margin: 0 0 10px;
color: var(--gold);
letter-spacing: .14em;
text-transform: uppercase;
font-size: .72rem;
}
.page-head h1, .rank-stage h1, .rank-intro h1, .claim-summary h1, .profile-identity h1, .not-found h1 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 650;
letter-spacing: -.04em;
line-height: 1.05;
text-wrap: balance;
}
.rank-stage h1, .rank-intro h1 { text-align: center; }
.page-head h1 em, .rank-stage h1 em, .rank-intro h1 em, .claim-summary h1 em { color: var(--brand); font-style: normal; }
.lede, .content-intro, .hero-lede {
margin: 12px 0 0;
color: var(--muted);
font-size: 1.02rem;
text-align: center;
}
.page-ranking {
position: relative;
isolation: isolate;
height: 100%;
overflow: hidden;
background:
radial-gradient(circle at 72% 38%, rgba(21, 91, 210, .12), transparent 30%),
linear-gradient(180deg, #050918 0%, #030713 100%);
}
.page-ranking::before,
.page-ranking::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 1;
}
.page-ranking::before {
display: none;
}
.page-ranking::after {
inset: auto 10% -36% 38%;
height: 72%;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(24, 113, 255, .16), transparent 68%);
filter: blur(24px);
}
.has-scene { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.has-scene .site-header { position: relative; flex: none; }
.has-scene main { flex: 1; min-height: 0; overflow: visible; }
.has-scene .page-ranking { height: 100%; }
.has-scene .site-footer { flex: none; }
body[data-template="space"] .page-ranking {
overflow: visible;
clip-path: inset(-160px 0px 0px 0px);
}
.rank-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.plexus {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
pointer-events: none;
}
.plexus-foreground { z-index: 4; }
.rank-drift {
position: absolute;
inset: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
contain: layout style;
}
body[data-template="space"] .rank-drift { z-index: 2; }
.rank-drift [data-drift-phrase] {
position: absolute;
left: 0;
top: 0;
margin: 0;
color: color-mix(in oklab, var(--ink) 62%, var(--muted));
font-family: var(--font-display);
font-size: clamp(.66rem, 1.05vw, .88rem);
font-weight: 650;
letter-spacing: .03em;
line-height: 1.1;
white-space: nowrap;
user-select: none;
unicode-bidi: isolate;
opacity: 0;
text-shadow: 0 0 18px rgba(90, 140, 255, .16);
}
body[data-template="space"] .rank-drift [data-drift-phrase] {
color: color-mix(in oklab, var(--ink) 78%, var(--muted));
text-shadow: 0 0 22px rgba(140, 180, 255, .32);
}
html[data-theme="light"] .rank-drift [data-drift-phrase] { text-shadow: none; }
.rank-intro {
position: absolute;
z-index: 6;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
left: 50%;
top: clamp(18px, 3.5vh, 34px);
transform: translate3d(-50%, 0, 0);
width: min(640px, calc(100% - 32px));
pointer-events: none;
-webkit-transform: translate3d(-50%, 0, 0);
backface-visibility: hidden;
}
.rank-intro > .lede {
margin: 0;
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(1rem, 1.2vw, 1.08rem);
font-weight: 700;
line-height: 1.3;
}
.rank-story {
display: grid;
align-content: start;
gap: 6px;
width: 100%;
margin-top: 4px;
max-height: min(28vh, 10.5rem);
overflow: hidden;
padding: 0;
text-align: center;
text-wrap: pretty;
pointer-events: none;
}
.rank-story h2 {
margin: 0 0 2px;
color: color-mix(in oklab, var(--ink) 82%, var(--muted));
font-family: var(--font-body);
font-size: clamp(.86rem, .88vw, .92rem);
font-weight: 600;
letter-spacing: 0;
line-height: 1.42;
text-wrap: pretty;
}
.rank-story p {
margin: 0;
color: color-mix(in oklab, var(--ink) 70%, var(--muted));
font-size: clamp(.84rem, .82vw, .9rem);
line-height: 1.5;
}
.rank-benefits-link {
justify-self: center;
margin-top: 4px;
color: var(--brand);
font-size: .88rem;
font-weight: 750;
text-decoration: none;
pointer-events: auto;
}
.rank-benefits-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.rank-fixed-cta {
position: absolute;
right: max(var(--gutter), calc((100% - var(--page)) / 2));
bottom: clamp(16px, 3vh, 30px);
z-index: 7;
box-shadow: 0 10px 34px rgba(13, 88, 220, .34);
transition: opacity .28s ease, translate .38s var(--ease), visibility .28s ease;
}
.rank-scroll-cue {
display: none;
}
.rank-board {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
body[data-template="space"] .rank-board { z-index: 3; }
.rank-card {
position: absolute;
left: 0;
top: 0;
width: min(640px, calc(100% - 32px));
pointer-events: auto;
}
body[data-template="stairs"] .rank-intro,
body[data-template="mountain"] .rank-intro {
left: max(var(--gutter), calc((100% - var(--page)) / 2));
top: clamp(42px, 9vh, 86px);
transform: none;
align-items: flex-start;
text-align: left;
width: min(560px, calc(100% - 48px));
}
body[data-template="stairs"] .rank-story,
body[data-template="mountain"] .rank-story { text-align: left; }
body[data-template="stairs"] .rank-intro h1,
body[data-template="mountain"] .rank-intro h1 {
text-align: left;
font-size: clamp(2rem, 3.4vw, 3.25rem);
}
body[data-template="stairs"] .rank-intro .lede,
body[data-template="mountain"] .rank-intro .lede {
text-align: left;
}
body[data-template="stairs"] .rank-card,
body[data-template="mountain"] .rank-card {
position: absolute;
width: min(148px, 14vw);
transform: translate(-50%, calc(-100% - 14px));
z-index: 4;
}
body[data-template="stairs"] .rank-card.is-lead,
body[data-template="mountain"] .rank-card.is-lead {
width: min(160px, 15vw);
z-index: 8;
}
body[data-template="mountain"] .rank-num,
body[data-template="stairs"] .rank-num {
position: absolute;
top: 9px;
left: 10px;
font-size: .8rem;
}
body[data-template="stairs"] .rank-hit,
body[data-template="mountain"] .rank-hit {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 3px;
min-height: 0;
padding: 24px 9px 10px;
}
body[data-template="stairs"] .rank-price,
body[data-template="mountain"] .rank-price {
margin-top: 3px;
padding: 3px 11px;
border-radius: 999px;
background: rgba(40, 90, 200, .22);
border: 1px solid rgba(110, 170, 255, .3);
font-size: .82rem;
}
body[data-template="space"] .rank-intro {
top: clamp(14px, 3vh, 28px);
gap: 7px;
}
body[data-template="space"] .rank-intro h1 {
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
text-shadow: 0 2px 24px rgba(1, 7, 22, .88), 0 1px 4px rgba(1, 7, 22, .75);
}
body[data-template="space"] .rank-intro .lede {
margin-top: 0;
color: #eef4ff;
font-size: 1rem;
text-shadow: 0 1px 12px rgba(1, 7, 22, .9);
}
html[data-theme="light"] body[data-template="space"] .rank-intro h1,
html[data-theme="light"] body[data-template="space"] .rank-intro .lede {
text-shadow: 0 1px 18px rgba(255, 255, 255, .96), 0 1px 3px rgba(255, 255, 255, .9);
}
html[data-theme="light"] body[data-template="space"] .rank-intro .lede { color: #172744; }
body[data-template="space"] .rank-intro .button-cta {
min-height: 40px;
padding-inline: 22px;
font-size: .9rem;
margin-top: clamp(18px, 3vh, 30px);
}
body[data-template="space"] .rank-card {
width: min(500px, 46vw);
}
body[data-template="space"] .rank-card.is-lead {
box-shadow: 0 0 0 1px rgba(80, 160, 255, .45), 0 12px 40px rgba(30, 80, 200, .28);
}
body[data-template="stairs"] .rank-copy,
body[data-template="mountain"] .rank-copy {
width: 100%;
}
body[data-template="stairs"] .rank-copy strong,
body[data-template="mountain"] .rank-copy strong {
overflow-wrap: anywhere;
line-height: 1.2;
font-size: .86rem;
}
body[data-template="stairs"] .rank-copy small,
body[data-template="mountain"] .rank-copy small {
display: block;
margin-top: 1px;
font-size: .68rem;
}
body[data-template="stairs"] .rank-price,
body[data-template="mountain"] .rank-price,
body[data-template="stairs"] .rank-flag,
body[data-template="mountain"] .rank-flag {
grid-column: auto;
justify-self: center;
}
body[data-template="stairs"] .pager,
body[data-template="mountain"] .pager { display: none; }
.rank-card {
border: 1px solid var(--line);
border-radius: 13px;
background: rgba(7, 14, 31, .9);
box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
transform: translateZ(0);
}
.rank-card.is-lead {
border-color: rgba(90, 170, 255, .7);
box-shadow: 0 0 0 1px rgba(70, 150, 255, .28), 0 16px 48px rgba(30, 80, 200, .32);
}
html[data-theme="light"] .page-ranking {
background:
radial-gradient(circle at 72% 38%, rgba(43, 99, 240, .14), transparent 30%),
linear-gradient(180deg, #f5f8ff 0%, #eaf0fb 100%);
}
html[data-theme="light"] .rank-card {
background: rgba(255, 255, 255, .9);
box-shadow: 0 14px 34px rgba(38, 64, 116, .12);
}
.rank-hit {
display: grid;
grid-template-columns: 44px var(--avatar) minmax(0, 1fr) auto auto;
align-items: center;
gap: 14px;
min-height: 76px;
padding: 10px 18px;
text-decoration: none;
}
.rank-card.is-empty {
width: min(520px, calc(100% - 32px)) !important;
}
.rank-card.is-empty .rank-hit {
grid-template-columns: 44px 1fr;
justify-items: start;
text-align: left;
min-height: 88px;
padding: 16px 18px;
}
.rank-card.is-empty .rank-copy {
min-width: 0;
}
.rank-card.is-empty .rank-num {
position: static !important;
inset: auto !important;
width: 44px;
min-height: 44px;
display: grid;
place-content: center;
gap: 1px;
justify-self: center;
border: 1px solid rgba(110, 170, 255, .28);
border-radius: 12px;
background: rgba(40, 90, 200, .14);
}
.rank-card.is-empty .rank-copy {
grid-column: 2;
width: auto !important;
align-self: center;
}
.rank-card.is-empty .rank-copy strong,
.rank-card.is-empty .rank-copy small {
overflow-wrap: break-word;
word-break: normal;
white-space: normal;
font-size: 1rem;
}
.rank-card.is-empty .rank-copy small {
display: block;
margin-top: 6px;
font-size: .92rem;
line-height: 1.45;
}
body[data-template="stairs"] .rank-card.is-empty .rank-hit,
body[data-template="mountain"] .rank-card.is-empty .rank-hit {
grid-template-columns: 44px 1fr;
justify-items: start;
text-align: left;
padding: 16px 18px;
}
body[data-template="stairs"] .rank-card.is-empty .rank-copy strong,
body[data-template="mountain"] .rank-card.is-empty .rank-copy strong {
font-size: 1.05rem;
}
body[data-template="stairs"] .rank-card.is-empty .rank-copy small,
body[data-template="mountain"] .rank-card.is-empty .rank-copy small {
display: block;
font-size: .88rem;
}
.page-browse .page-ranking {
height: auto;
min-height: 72vh;
overflow: visible;
}
.rank-stage {
position: relative;
z-index: 3;
padding: 110px 0 72px;
}
.rank-stage .lede {
margin-bottom: 28px;
}
body[data-template="space"] .rank-hit {
grid-template-columns: 34px 42px minmax(0, 1fr) auto auto;
gap: 11px;
min-height: 58px;
padding: 6px 14px;
}
body[data-template="space"] .rank-photo,
body[data-template="space"] .rank-photo img {
width: 36px;
height: 48px;
border-radius: 8px;
}
body[data-template="space"] .rank-copy strong { font-size: .96rem; }
body[data-template="space"] .rank-copy small { font-size: .74rem; }
.rank-num {
display: flex;
flex-direction: column;
align-items: center;
color: var(--muted);
font-weight: 700;
}
.rank-card.is-lead .rank-num { color: var(--gold); }
.rank-photo, .rank-photo img {
width: var(--avatar);
height: calc(var(--avatar) * 1.28);
border-radius: 10px;
object-fit: cover;
aspect-ratio: 3 / 4;
}
.rank-photo { overflow: hidden; border: 1px solid var(--line); background: var(--photo-bg); }
body[data-template="stairs"] .rank-photo,
body[data-template="stairs"] .rank-photo img,
body[data-template="mountain"] .rank-photo,
body[data-template="mountain"] .rank-photo img {
width: 44px;
height: 44px;
}
.rank-copy { min-width: 0; }
.rank-copy strong { display: block; overflow-wrap: anywhere; font-size: 1.05rem; letter-spacing: -.02em; }
.rank-copy small { overflow-wrap: anywhere; color: var(--muted); font-size: .84rem; }
.rank-flag { font-size: 1.25rem; line-height: 1; }
.rank-price { color: var(--price); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scene { display: none; }
.scene-svg { width: 100%; height: 100%; display: block; }
.scene-grid circle,
.scene-line,
.scene-earth,
.scene-moon circle,
.scene-peak,
.scene-flag {
fill: none;
stroke: rgba(155, 176, 220, .28);
stroke-width: 1.2;
}
.scene-moon circle { stroke: rgba(212, 177, 92, .7); }
.scene-earth { fill: rgba(40, 70, 140, .08); stroke: rgba(90, 140, 255, .35); }
.scene-nodes circle { fill: #9eb0ff; stroke: none; }
.scene-line-a { stroke: rgba(77, 125, 255, .55); stroke-dasharray: 8 10; animation: dash 18s linear infinite; }
.scene-line-b { stroke: rgba(212, 177, 92, .45); stroke-dasharray: 5 12; animation: dash 22s linear infinite reverse; }
.scene-line-c { stroke: rgba(180, 210, 255, .28); stroke-dasharray: 3 14; animation: dash 26s linear infinite; }
.scene-peak, .scene-flag { stroke: var(--gold); }
@keyframes dash { to { stroke-dashoffset: -220; } }
.mode-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px 4px;
border-bottom: 1px solid var(--line);
}
.mode-tabs a {
padding: 10px 14px;
color: var(--muted);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.mode-tabs a[aria-current="page"], .mode-tabs a:hover { color: var(--nav-on); border-bottom-color: var(--gold); }
.board {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-elev);
overflow: hidden;
}
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-row {
display: grid;
grid-template-columns: 28px 1fr;
min-height: var(--row);
border-bottom: 1px solid var(--line);
}
.timeline-row:last-child { border-bottom: 0; }
.timeline-mark { position: relative; }
.timeline-mark::before {
content: "";
position: absolute;
left: 13px;
top: 0;
bottom: 0;
width: 1px;
background: var(--line-strong);
}
.timeline-row:first-child .timeline-mark::before { top: 50%; }
.timeline-row:last-child .timeline-mark::before { bottom: 50%; }
.timeline-mark i {
position: absolute;
left: 8px;
top: 50%;
width: 11px;
height: 11px;
margin-top: -5px;
border-radius: 50%;
border: 1.5px solid var(--muted);
background: var(--bg-elev);
z-index: 1;
}
.timeline-row.is-lead .timeline-mark i { background: var(--gold); border-color: var(--gold); }
.timeline-row.is-on .timeline-mark i { box-shadow: 0 0 0 4px rgba(77, 125, 255, .18); border-color: var(--brand); }
.person-row {
display: grid;
grid-template-columns: 56px var(--avatar) 1fr auto;
align-items: center;
gap: 16px;
min-width: 0;
padding: 12px 20px 12px 8px;
text-decoration: none;
}
.timeline-row.is-on .person-row,
.timeline-row:hover .person-row { background: rgba(255,255,255,.03); }
.person-rank {
display: flex;
flex-direction: column;
align-items: center;
color: var(--muted);
letter-spacing: .06em;
font-size: .92rem;
}
.timeline-row.is-lead .person-rank { color: var(--gold); }
.person-photo {
width: var(--avatar);
height: var(--avatar);
border-radius: 50%;
overflow: hidden;
flex: none;
border: 1px solid var(--line);
background: #1a2233;
}
.person-photo img {
width: 64px;
height: 64px;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
}
.person-copy { min-width: 0; }
.person-copy strong {
display: block;
font-size: 1.12rem;
font-weight: 650;
letter-spacing: -.02em;
}
.person-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted); font-size: .86rem; }
.chip {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 8px;
border: 1px solid var(--line);
border-radius: 999px;
font-size: .78rem;
}
.flag { font-size: 1.05rem; line-height: 1; }
.person-metric { color: #d5deee; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.pager { display: flex; justify-content: space-between; }
.pager a { color: #9eb0ff; text-decoration: none; }
.page-cta { display: flex; justify-content: center; }
.browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.browse-countries { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.browse-card {
display: flex;
align-items: center;
gap: 10px;
min-height: 64px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-elev);
text-decoration: none;
}
.browse-card:hover { border-color: var(--line-strong); }
.browse-flag { font-size: 1.4rem; }
.claim-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 36px; padding: 110px 0 80px; align-items: start; }
.claim-form { display: flex; flex-direction: column; gap: 16px; }
.claim-form-wrap {
padding: 28px;
border: 1px solid var(--line);
border-radius: 20px;
background: var(--panel);
}
.claim-summary h1 {
display: flex;
align-items: center;
gap: .4em;
}
.claim-summary h1 svg {
flex: 0 0 auto;
width: .72em;
height: .72em;
color: var(--brand);
}
.claim-summary h2 { margin: 28px 0 12px; font-size: 1.05rem; }
.claim-summary > p { color: var(--muted); }
.claim-summary .claim-lead { margin: 14px 0 0; font-size: 1.02rem; line-height: 1.45; }
.claim-summary .claim-form-note { margin: 10px 0 0; font-size: .9rem; }
.claim-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.claim-perks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: var(--ink); }
.claim-perks svg { margin-top: 3px; color: var(--brand); }
.claim-perks strong { display: block; font-size: .95rem; }
.claim-perks span { display: block; margin-top: 3px; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.claim-benefits-link { margin: 18px 0 0; }
.claim-benefits-link a { color: var(--brand); text-decoration: none; font-weight: 650; }
.claim-benefits-link a:hover { text-decoration: underline; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-field .field-error {
margin: 0;
color: #ffb4b4;
font-size: .82rem;
line-height: 1.35;
}
html[data-theme="light"] .form-field .field-error,
html[data-theme="light"] .claim-form .form-status { color: #9b1c1c; }
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea {
border-color: #e07878;
box-shadow: 0 0 0 3px rgba(224, 120, 120, .18);
}
.form-field.is-invalid .category-pick,
.form-field.is-invalid .site-fields { border-color: #e07878; }
.form-field.is-over [data-bio-count] { color: #ffb4b4; font-weight: 650; }
.claim-form .form-status:empty { display: none; }
.claim-form .form-status {
margin: 0;
color: #ffb4b4;
font-size: .9rem;
}
.claim-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: .82rem; }
.claim-form label small { line-height: 1.4; }
.claim-form label small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.claim-form input, .claim-form select, .claim-form textarea, .donate-form input {
min-height: 46px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--sheet);
padding: 10px 12px;
}
.claim-form textarea { min-height: 168px; resize: vertical; }
.social-fields, .site-fields, .cta-fields { border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.category-pick { margin: 0; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.category-pick legend { padding-inline: 6px; font-weight: 650; }
.category-toolbar { display: grid; gap: 10px; margin: 0 0 12px; }
.category-toolbar > p { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--muted); font-size: .82rem; }
.category-search { margin: 0; }
.category-search input { width: 100%; min-height: 42px; }
.category-picked { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.category-picked:empty { display: none; }
.category-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 0 10px 0 12px;
border: 1px solid var(--brand);
border-radius: 999px;
background: color-mix(in oklab, var(--brand) 18%, transparent);
color: var(--nav-on);
font-size: .82rem;
}
.category-chip button {
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: inherit;
font-size: 1rem;
line-height: 1;
}
.category-chip button:hover { background: var(--hover); }
.category-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 8px;
max-height: 280px;
overflow-y: auto;
padding: 2px;
scrollbar-gutter: stable;
}
.category-option {
position: relative;
display: block !important;
margin: 0;
color: var(--ink) !important;
}
.category-option[hidden] { display: none !important; }
.category-option input { position: absolute; opacity: 0; pointer-events: none; }
.category-option span {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 44px;
width: 100%;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--hover);
cursor: pointer;
line-height: 1.25;
font-size: .84rem;
}
.category-option input:checked + span { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 18%, transparent); color: var(--nav-on); }
.category-option input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.check-label { display: grid !important; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; color: var(--ink) !important; }
.check-label input { min-height: 18px; margin-top: 2px; }
.cf-turnstile { margin: 4px 0; }
.price-stamp { margin: 24px 0; }
.price-stamp strong { display: block; font-size: 2rem; }
.claim-summary ul { padding-left: 18px; color: var(--muted); }
.claim-summary .claim-perks { padding-left: 0; color: inherit; }
.notice { padding: 14px 0; }
.notice-success { color: #8fd0a6; }
.kind-pick { border: 0; padding: 0; display: grid; gap: 10px; }
.kind-pick legend { padding-inline: 0; font-weight: 650; }
.kind-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kind-card {
display: block !important;
margin: 0;
color: var(--ink) !important;
}
.kind-card input { position: absolute; opacity: 0; pointer-events: none; }
.kind-card span {
display: grid;
gap: 4px;
min-height: 88px;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--hover);
cursor: pointer;
}
.kind-card strong { font-size: .95rem; }
.kind-card small { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.kind-card input:checked + span { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 16%, transparent); }
.kind-card input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.site-pair { display: grid; grid-template-columns: 1.4fr .8fr; gap: 10px; margin-top: 10px; }
.indication-picker { display: grid; gap: 8px; }
.indication-picker small { color: var(--muted); }
.indication-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--hover);
}
.indication-chip[hidden] { display: none; }
.indication-chip img {
width: 40px;
height: 40px;
border-radius: 10px;
object-fit: cover;
background: var(--photo-bg);
}
.indication-chip span { display: grid; min-width: 0; }
.indication-chip strong { font-size: .92rem; }
.indication-chip small { color: var(--muted); }
.indication-clear {
margin-inline-start: auto;
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
font: inherit;
font-size: .82rem;
min-height: 36px;
}
.indication-clear:hover { color: var(--ink); }
.indication-results {
list-style: none;
margin: 0;
padding: 6px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--panel, var(--bg));
max-height: 240px;
overflow: auto;
}
.indication-results[hidden] { display: none; }
.indication-results button {
display: grid;
grid-template-columns: 36px 1fr;
gap: 10px;
align-items: center;
width: 100%;
margin: 0;
padding: 8px;
border: 0;
border-radius: 10px;
background: transparent;
color: inherit;
text-align: start;
cursor: pointer;
font: inherit;
}
.indication-results button:hover,
.indication-results button[aria-selected="true"] { background: var(--hover); }
.indication-results img {
width: 36px;
height: 36px;
border-radius: 8px;
object-fit: cover;
}
.indication-results strong { display: block; font-size: .9rem; }
.indication-results small { color: var(--muted); }
.profile-card { padding: 96px 0 80px; }
.profile-kicker { margin: 0 0 18px; color: var(--gold); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
.profile-hero { display: flex; gap: 32px; align-items: end; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.profile-avatar img {
width: 168px;
height: 224px;
border-radius: 18px;
object-fit: cover;
aspect-ratio: 3 / 4;
border: 1px solid var(--line);
background: var(--photo-bg);
}
.profile-headline {
margin: 10px 0 0;
color: var(--muted);
font-size: 1.2rem;
line-height: 1.4;
}
.profile-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.profile-lead .button { min-height: 44px; }
.profile-board { margin: 8px 0 0; color: var(--muted); font-size: .86rem; }
.profile-indicated { margin: 8px 0 0; color: var(--ink); font-size: .95rem; }
.profile-indicated a { color: var(--brand); text-decoration: none; font-weight: 650; }
.profile-indicated a:hover { text-decoration: underline; }
.profile-board a, .profile-metrics a { color: var(--brand); text-decoration: none; }
.profile-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--muted); }
.profile-cat .rail-tag {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 3px 9px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--hover);
color: var(--ink);
text-decoration: none;
font-size: .78rem;
}
.profile-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin: 12px 0 0;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.profile-metrics div { padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-metrics div:nth-child(4n) { border-right: 0; }
.profile-metrics div:nth-last-child(-n+4) { border-bottom: 0; }
.profile-metrics dt { color: var(--muted); font-size: .75rem; }
.profile-metrics dd { margin: 4px 0 0; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.profile-metrics dd small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.profile-metrics .metric-value { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.profile-metrics .metric-empty { min-height: 0; padding: 0; background: transparent; }
.metric-medal {
display: inline-grid;
place-items: center;
flex: none;
width: 30px;
height: 30px;
border: 1px solid currentColor;
border-radius: 50%;
color: #c99424;
background: rgba(201, 148, 36, .12);
font-size: .72rem;
font-weight: 850;
text-decoration: none;
box-shadow: inset 0 0 0 3px rgba(201, 148, 36, .08);
}
.metric-medal.medal-2 { color: #8994a8; background: rgba(137, 148, 168, .12); box-shadow: inset 0 0 0 3px rgba(137, 148, 168, .08); }
.metric-medal.medal-3 { color: #ad7048; background: rgba(173, 112, 72, .12); box-shadow: inset 0 0 0 3px rgba(173, 112, 72, .08); }
.profile-about, .profile-stats, .video-section, .profile-featured, .profile-contact, .profile-achievements { margin-top: 32px; }
.profile-about h2, .profile-stats h2, .video-section h2, .profile-featured h2, .profile-contact h2, .profile-achievements h2 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 600; }
.profile-bio { margin: 0; color: var(--muted); font-size: 1.15rem; }
.featured-card {
display: grid;
gap: 8px;
padding: 20px 22px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--bg-elev);
text-decoration: none;
}
.featured-card strong { font-size: 1.15rem; }
.featured-card span { color: var(--muted); }
.featured-card em { color: var(--brand); font-style: normal; font-size: .82rem; }
.profile-contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.profile-contact li span { display: block; color: var(--muted); font-size: .75rem; }
.profile-contact a, .profile-contact p { margin: 2px 0 0; }
.profile-achievements ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.profile-achievements li {
display: grid;
gap: 4px;
padding: 16px 16px 14px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--bg-elev);
}
.profile-achievements strong { font-size: .95rem; }
.profile-achievements span { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.social-icons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.profile-lead .social-icons { margin-top: 0; }
.social-icons a {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
color: #e8eef8;
}
.social-icons a:hover { background: #182238; color: #fff; }
.site-links { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.site-links .button { gap: 8px; }
.donate-box {
display: grid;
grid-template-columns: 1fr minmax(280px, .8fr);
gap: 8px 40px;
margin-top: 40px;
padding: 28px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 14%, transparent), var(--bg-elev) 58%);
}
.donate-box .notice { grid-column: 1 / -1; }
.donate-copy { grid-row: span 2; align-self: center; }
.donate-box h2 { margin: 4px 0 8px; font-size: clamp(1.25rem, 2vw, 1.7rem); }
.donate-box p { color: var(--muted); }
.donate-progress, .donate-actions { grid-column: 2; }
.donate-actions { display: grid; gap: 8px; align-content: start; }
.donate-form .form-status:empty { display: none; }
.donate-bar {
height: 10px;
margin-top: 14px;
border-radius: 999px;
background: var(--line);
overflow: hidden;
}
.donate-bar i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--brand), var(--gold));
}
.donate-scale {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 8px 0 16px;
color: var(--muted);
font-size: .88rem;
font-variant-numeric: tabular-nums;
}
.donate-form textarea {
width: 100%;
min-height: 5.5rem;
resize: vertical;
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px 12px;
background: var(--sheet);
color: inherit;
font: inherit;
}
html[data-theme="light"] .donate-form textarea { background: #fff; color: var(--ink); }
.donate-field { display: grid; gap: 6px; color: var(--ink); font-size: .92rem; }
.donate-field small { color: var(--muted); font-size: .8rem; }
.support-wall, .related-characters { margin-top: 36px; }
.support-wall ol, .related-characters ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.support-wall li {
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 16px;
background: color-mix(in srgb, var(--bg-elev) 88%, var(--brand) 12%);
}
.support-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin: 0; }
.support-handle { font-weight: 700; letter-spacing: .01em; }
.support-meta b { font-variant-numeric: tabular-nums; color: var(--gold); }
.support-meta time { margin-left: auto; color: var(--muted); font-size: .82rem; }
.support-body { margin: 8px 0 0; font-size: 1.02rem; line-height: 1.45; }
.related-characters ul { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.related-characters a {
display: grid;
grid-template-columns: 72px 1fr;
gap: 4px 10px;
align-items: center;
padding: 8px;
border: 1px solid var(--line);
border-radius: 14px;
text-decoration: none;
color: inherit;
}
.related-characters img { grid-row: span 2; border-radius: 10px; object-fit: cover; }
.related-characters b { font-size: .82rem; color: var(--muted); }
.donate-stepper {
display: grid;
grid-template-columns: 42px 1fr 42px;
align-items: stretch;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
background: var(--sheet);
}
.donate-stepper button {
border: 0;
background: var(--hover);
font-size: 1.25rem;
line-height: 1;
color: var(--ink);
cursor: pointer;
}
.donate-amount {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--gold);
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.donate-form .donate-amount input {
width: 5.5rem;
min-height: 46px;
border: 0;
background: transparent;
text-align: center;
font-variant-numeric: tabular-nums;
font-weight: 650;
color: var(--ink);
padding: 0;
}
html[data-theme="light"] .donate-stepper { background: #fff; }
.claim-existing-box { margin-top: 18px; }
.claim-existing-box .existing-claim { grid-column: 2; }
.existing-claim { display: flex; flex-direction: column; gap: 12px; }
.existing-claim-due { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.existing-claim-due strong { font-size: 1.4rem; color: var(--ink); }
.video-frame { aspect-ratio: 16/9; margin-top: 12px; border-radius: 16px; overflow: hidden; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.content-page { padding: 96px 0 80px; }
.content-sections { display: flex; flex-direction: column; gap: 16px; }
.content-block {
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px;
padding: 22px 0;
border-top: 1px solid var(--line);
}
.section-index { color: var(--gold); letter-spacing: .08em; font-size: .82rem; }
.content-block h2 { margin: 0 0 8px; font-size: 1.2rem; }
.content-block p, .content-block li { color: var(--muted); }
.benefits-page .page-head .lede { text-align: left; }
.benefits-page .content-sections {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 40px;
}
.benefits-page .content-block {
grid-template-columns: 42px 1fr;
min-height: 0;
padding: 24px;
border: 1px solid var(--line);
border-radius: 18px;
background:
radial-gradient(circle at 100% 0, rgba(55, 125, 255, .13), transparent 38%),
var(--panel);
}
.benefits-page .content-block:first-child { grid-column: 1 / -1; }
.benefits-page .content-block ul { margin: 10px 0 0; padding-left: 18px; }
.benefits-page .content-block:last-child { border-style: dashed; }
.benefits-page .section-index {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(48, 112, 255, .13);
color: var(--brand);
font-weight: 800;
}
.benefits-page .content-block h2 { font-size: 1.28rem; }
.benefits-page .content-block p { margin-bottom: 0; line-height: 1.58; }
.benefits-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 18px;
padding: 26px 28px;
border: 1px solid rgba(67, 132, 255, .34);
border-radius: 18px;
background: linear-gradient(120deg, rgba(37, 104, 241, .16), rgba(25, 181, 158, .08));
}
.benefits-cta p { margin: 0; font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 650; }
.sitemap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sitemap-grid a {
display: flex;
justify-content: space-between;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: var(--radius);
text-decoration: none;
background: var(--bg-elev);
}
.not-found, .error-page { min-height: 70dvh; display: flex; flex-direction: column; justify-content: center; padding: 96px 0; }
.lost-orbit { display: flex; align-items: center; gap: 16px; color: var(--gold); margin-bottom: 16px; }
.not-found .button, .error-page .button { margin-top: 20px; align-self: flex-start; }
.error-page[data-error-status="500"] .lost-orbit { color: var(--brand); }
.error-page[data-error-status="405"] .lost-orbit { color: var(--muted); }
.site-footer {
border-top: 1px solid var(--line);
padding-block: 7px 8px;
}
.footer-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 18px;
}
.footer-bar p,
.footer-brand,
.site-footer nav a {
margin: 0;
color: var(--muted);
font-size: .72rem;
letter-spacing: .01em;
line-height: 1.3;
}
.footer-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.footer-brand:hover span { color: var(--ink); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.profile-sheet {
width: min(760px, calc(100vw - 28px));
max-height: calc(100dvh - 28px);
overflow: auto;
margin: auto;
padding: 28px;
border: 1px solid var(--line);
border-radius: 20px;
background: var(--sheet);
color: var(--ink);
}
.profile-sheet::backdrop { background: rgba(4,7,14,.72); }
.sheet-close {
float: right;
width: 36px;
height: 36px;
border: 1px solid var(--line);
border-radius: 50%;
background: transparent;
color: #fff;
}
.profile-sheet .profile-card { width: 100%; margin: 0; padding: 0; }
@media (max-width: 900px) {
.claim-layout, .profile-metrics, .sitemap-grid, .field-grid, .kind-cards { grid-template-columns: 1fr; }
.profile-metrics div:nth-child(4n), .profile-metrics div:nth-last-child(-n+4) { border-right: 0; }
.profile-metrics div:not(:last-child) { border-bottom: 1px solid var(--line); }
.profile-metrics .metric-empty { display: none; }
.profile-hero { flex-direction: column; align-items: flex-start; }
.profile-avatar img { width: 108px; height: 144px; border-radius: 16px; }
.donate-box { grid-template-columns: 1fr; }
.donate-copy, .donate-progress, .donate-form, .donate-actions, .claim-existing-box .existing-claim { grid-column: 1; grid-row: auto; }
.rank-hit { grid-template-columns: 36px var(--avatar) 1fr auto; }
.rank-price { grid-column: 4; }
body[data-template="space"] .rank-hit {
grid-template-columns: 30px 42px 1fr auto auto;
}
body[data-template="space"] .rank-price { grid-column: auto; }
}
@media (max-width: 720px) {
:root { --avatar: 44px; --gutter: 16px; --header-offset: 10px; }
html { font-size: 112.5%; }
.rank-story {
max-height: min(22vh, 8.25rem);
}
.rank-fixed-cta { right: 16px; bottom: 14px; }
body[data-template="stairs"] .rank-story,
body[data-template="mountain"] .rank-story { text-align: center; }
.benefits-page .content-sections { grid-template-columns: 1fr; }
.benefits-page .content-block { min-height: 0; }
.benefits-cta { align-items: flex-start; flex-direction: column; }
.rank-flag { display: none; }
.site-pair { grid-template-columns: 1fr; }
body[data-template="stairs"] .rank-card,
body[data-template="mountain"] .rank-card {
width: min(112px, 31vw);
}
body[data-template="stairs"] .rank-card.is-lead,
body[data-template="mountain"] .rank-card.is-lead {
width: min(120px, 33vw);
}
body[data-template="space"] .rank-card {
width: min(520px, calc(100% - 32px));
}
body[data-template="space"] .rank-hit {
grid-template-columns: 30px 42px minmax(0, 1fr) auto;
}
body[data-template="space"] .rank-price { grid-column: 4; }
body[data-template="space"] .rank-copy strong { font-size: 1.05rem; }
body[data-template="space"] .rank-copy small { font-size: .82rem; }
body[data-template="stairs"] .rank-intro,
body[data-template="mountain"] .rank-intro {
left: 50%;
top: 22px;
transform: translateX(-50%);
align-items: center;
width: calc(100% - 32px);
}
body[data-template="stairs"] .rank-intro h1,
body[data-template="mountain"] .rank-intro h1,
body[data-template="stairs"] .rank-intro .lede,
body[data-template="mountain"] .rank-intro .lede {
text-align: center;
}
body[data-template="stairs"] .rank-intro .lede,
body[data-template="mountain"] .rank-intro .lede {
display: block;
font-size: 1rem;
}
body[data-template="stairs"] .rank-copy strong,
body[data-template="mountain"] .rank-copy strong {
font-size: .86rem;
}
body[data-template="stairs"] .rank-copy small,
body[data-template="mountain"] .rank-copy small {
display: none;
}
body[data-template="stairs"] .rank-hit,
body[data-template="mountain"] .rank-hit {
padding: 16px 5px 6px;
gap: 2px;
}
body[data-template="stairs"] .rank-photo,
body[data-template="stairs"] .rank-photo img,
body[data-template="mountain"] .rank-photo,
body[data-template="mountain"] .rank-photo img {
width: 34px;
height: 34px;
}
body[data-template="stairs"] .rank-price,
body[data-template="mountain"] .rank-price {
padding: 2px 8px;
font-size: .78rem;
}
}
@media (max-width: 420px) {
.header-inner { gap: 8px; padding-inline: 9px; }
.header-tools { gap: 6px; }
}
@media (max-width: 380px) {
.brand span { display: none; }
}
@media (max-height: 600px) {
body[data-template="stairs"] .rank-story,
body[data-template="mountain"] .rank-story { display: none; }
.rank-story {
gap: 4px;
margin-top: 2px;
max-height: min(18vh, 6.25rem);
}
.rank-story p { font-size: .8rem; line-height: 1.35; }
.rank-fixed-cta {
right: 12px;
bottom: 8px;
min-height: 36px;
padding-inline: 15px;
font-size: .82rem;
}
.rank-scroll-cue {
position: absolute;
left: 12px;
bottom: 8px;
z-index: 7;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 36px;
padding: 5px 11px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg-elev);
color: var(--ink);
font: 700 .78rem/1 var(--font-body);
cursor: pointer;
}
.rank-scroll-cue:hover,
.rank-scroll-cue:focus-visible {
border-color: var(--brand);
color: var(--brand);
}
body[data-template="space"] .rank-intro {
top: 4px;
gap: 3px;
}
body[data-template="space"] .rank-intro h1 {
font-size: 1.45rem;
}
body[data-template="space"] .rank-intro .lede {
display: block;
font-size: .9rem;
}
body[data-template="space"] .rank-intro .button-cta {
min-height: 32px;
padding-inline: 15px;
font-size: .8rem;
margin-top: 5px;
}
body[data-template="space"] .rank-card {
width: min(470px, 48vw);
}
body[data-template="space"] .rank-hit {
grid-template-columns: 26px 24px 1fr auto auto;
gap: 7px;
min-height: 34px;
padding: 2px 10px;
}
body[data-template="space"] .rank-photo,
body[data-template="space"] .rank-photo img {
width: 24px;
height: 24px;
}
body[data-template="space"] .rank-copy strong { font-size: .84rem; }
body[data-template="space"] .rank-copy small { display: none; }
body[data-template="space"] .rank-price { font-size: .8rem; }
body[data-template="stairs"] .rank-intro,
body[data-template="mountain"] .rank-intro {
top: 14px;
gap: 5px;
}
body[data-template="stairs"] .rank-intro h1,
body[data-template="mountain"] .rank-intro h1 {
font-size: 1.65rem;
}
body[data-template="stairs"] .rank-intro .lede,
body[data-template="mountain"] .rank-intro .lede {
display: block;
font-size: .88rem;
}
body[data-template="stairs"] .rank-intro .button-cta,
body[data-template="mountain"] .rank-intro .button-cta {
min-height: 34px;
padding-inline: 16px;
font-size: .82rem;
}
body[data-template="stairs"] .rank-card,
body[data-template="mountain"] .rank-card {
width: min(102px, 11vw);
}
body[data-template="stairs"] .rank-card.is-lead,
body[data-template="mountain"] .rank-card.is-lead {
width: min(110px, 12vw);
}
body[data-template="stairs"] .rank-hit,
body[data-template="mountain"] .rank-hit {
gap: 1px;
padding: 16px 5px 6px;
}
body[data-template="stairs"] .rank-photo,
body[data-template="stairs"] .rank-photo img,
body[data-template="mountain"] .rank-photo,
body[data-template="mountain"] .rank-photo img {
width: 28px;
height: 28px;
}
body[data-template="stairs"] .rank-copy strong,
body[data-template="mountain"] .rank-copy strong {
font-size: .74rem;
}
body[data-template="stairs"] .rank-copy small,
body[data-template="mountain"] .rank-copy small {
display: none;
}
body[data-template="stairs"] .rank-price,
body[data-template="mountain"] .rank-price {
margin-top: 1px;
padding: 1px 7px;
font-size: .7rem;
}
}
@media (max-width: 720px) and (max-height: 600px) {
body[data-template="space"] .rank-card {
width: min(520px, calc(100% - 32px));
}
body[data-template="stairs"] .rank-intro,
body[data-template="mountain"] .rank-intro {
left: 12px;
top: 16px;
width: 58vw;
transform: none;
align-items: flex-start;
}
body[data-template="stairs"] .rank-intro h1,
body[data-template="stairs"] .rank-intro .lede,
body[data-template="mountain"] .rank-intro h1,
body[data-template="mountain"] .rank-intro .lede,
body[data-template="stairs"] .rank-story,
body[data-template="mountain"] .rank-story {
text-align: left;
}
body[data-template="stairs"] .rank-card,
body[data-template="mountain"] .rank-card {
width: min(72px, 20vw);
}
body[data-template="stairs"] .rank-card.is-lead,
body[data-template="mountain"] .rank-card.is-lead {
width: min(78px, 22vw);
}
body[data-template="stairs"] .rank-hit,
body[data-template="mountain"] .rank-hit {
padding: 13px 4px 4px;
}
body[data-template="stairs"] .rank-photo,
body[data-template="stairs"] .rank-photo img,
body[data-template="mountain"] .rank-photo,
body[data-template="mountain"] .rank-photo img {
width: 24px;
height: 24px;
}
body[data-template="stairs"] .rank-copy strong,
body[data-template="mountain"] .rank-copy strong {
font-size: .68rem;
}
body[data-template="stairs"] .rank-price,
body[data-template="mountain"] .rank-price {
padding: 1px 5px;
font-size: .64rem;
}
}
/* A faixa inteira do cabeçalho permanece acessível por rolagem horizontal. */
@media (max-width: 900px) {
.header-bar {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding-inline: var(--gutter);
scrollbar-width: none;
scroll-padding-inline: var(--gutter);
}
.header-bar::-webkit-scrollbar { display: none; }
.header-inner {
width: max-content;
min-width: 100%;
gap: 12px;
}
.header-nav,
.site-header.is-nav-open .header-nav {
position: static;
display: flex;
flex: none;
width: auto;
max-height: none;
overflow: visible;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.main-nav {
flex-direction: row;
align-items: center;
min-width: max-content;
gap: 4px;
padding: 0;
}
.main-nav > a,
.picker-nav summary,
.picker-rankings summary {
min-height: 44px;
padding: 8px 10px;
font-size: .94rem;
white-space: nowrap;
}
.picker-rankings summary { flex-wrap: nowrap; }
.header-tools { margin-inline-start: 0; }
.header-tools .header-claim {
display: inline-flex;
min-height: 44px;
}
.nav-toggle,
.nav-backdrop,
.button.header-claim-menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.rank-drift [data-drift-phrase] { letter-spacing: .02em; }
.site-header.is-nav-open .nav-toggle-bars::before,
.site-header.is-nav-open .nav-toggle-bars::after { transform: none; }
.site-header.is-nav-open .nav-toggle-bars { background: currentColor; }
}
@media (max-width: 1099px) {
body.home-dashboard.has-scene main {
overflow: hidden;
}
body.home-dashboard.has-scene .page-ranking {
display: block;
min-height: 100%;
height: 100%;
overflow: hidden;
padding: 0;
}
body.home-dashboard[data-template="space"] .rank-intro {
position: absolute;
left: 50%;
top: clamp(4px, 2vh, 18px);
width: min(640px, calc(100% - 32px));
margin: 0;
transform: translateX(-50%);
}
body.home-dashboard .rank-intro .rank-story {
display: none;
}
body.home-dashboard .dashboard-mobile-scroll {
position: absolute;
z-index: 7;
inset: clamp(92px, 15vh, 122px) 0 0;
display: block;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
padding-bottom: 92px;
}
body.home-dashboard .dashboard-mobile-story {
display: grid;
align-content: start;
gap: 6px;
width: min(640px, calc(100% - 32px));
margin: 0 auto;
max-height: none;
overflow: visible;
text-align: center;
text-wrap: pretty;
pointer-events: auto;
}
body.home-dashboard .dashboard-home {
position: relative;
inset: auto;
width: calc(100% - 28px);
margin: 20px auto 0;
}
body.home-dashboard .dashboard-panel {
max-height: none;
overflow: visible;
}
body.home-dashboard .dashboard-column-claim {
display: none;
width: 100%;
margin-top: 10px;
}
#tab-people:checked ~ .dashboard-columns .column-people .dashboard-column-claim,
#tab-companies:checked ~ .dashboard-columns .column-companies .dashboard-column-claim,
#tab-sites:checked ~ .dashboard-columns .column-sites .dashboard-column-claim {
display: inline-flex;
}
}
h1, h2, .brand span { font-family: var(--font-display); }
.donate-min { margin: 8px 0 0; color: var(--muted); font-size: .82rem; }
.youtube-full a {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 100%;
margin-top: 12px;
color: var(--brand);
text-decoration: none;
font-size: .88rem;
overflow-wrap: anywhere;
}
.youtube-full a:hover { text-decoration: underline; }
.support-empty { color: var(--muted); }
.support-url { display: block; margin: 4px 0 8px; color: var(--brand); font-size: .8rem; overflow-wrap: anywhere; }
.support-finder label span { display: block; margin-bottom: 8px; font-weight: 650; }
.support-finder input[type="search"] {
width: 100%;
min-height: 48px;
border: 1px solid var(--line-strong);
border-radius: 12px;
padding: 0 14px;
color: var(--ink);
background: var(--sheet);
}
.support-kind-tabs { display: flex; gap: 8px; margin: 12px 0; }
.support-kind-tabs button {
flex: 1;
min-height: 40px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
background: var(--bg-elev);
cursor: pointer;
}
.support-kind-tabs button[aria-selected="true"] { color: var(--nav-on); border-color: var(--brand); }
.support-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.support-results button {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: 10px;
width: 100%;
align-items: center;
padding: 8px;
border: 1px solid var(--line);
border-radius: 12px;
color: var(--ink);
background: var(--bg-elev);
text-align: left;
cursor: pointer;
}
.support-results img { width: 40px; height: 52px; object-fit: cover; border-radius: 8px; }
.support-results strong, .support-chip strong { display: block; }
.support-results small, .support-chip small { color: var(--muted); }
.support-chip {
display: flex;
gap: 10px;
align-items: center;
margin: 12px 0;
}
.support-chip img { width: 48px; height: 64px; object-fit: cover; border-radius: 10px; }
.donate-box { margin-top: 28px; }
.profile-hero { align-items: start; }