Spaces:
Running
Running
| :root { | |
| --ink: #18231f; | |
| --ink-2: #2d3934; | |
| --ink-soft: #5c6863; | |
| --paper: #f7f5ef; | |
| --paper-deep: #eeebe1; | |
| --white: #fffef9; | |
| --line: rgba(24, 35, 31, 0.14); | |
| --line-strong: rgba(24, 35, 31, 0.26); | |
| --blue: #4b7bec; | |
| --blue-soft: #e6efff; | |
| --green: #6f9659; | |
| --green-soft: #e8f0df; | |
| --coral: #cc664e; | |
| --coral-soft: #fae9e1; | |
| --purple: #7969ad; | |
| --purple-soft: #eee9fa; | |
| --gold: #c88b2f; | |
| --gold-soft: #fff4d8; | |
| --silver: #71818a; | |
| --silver-soft: #edf2f4; | |
| --radius: 20px; | |
| --shadow: 0 26px 90px rgba(47, 58, 49, 0.1); | |
| --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| --serif: "DM Serif Display", Georgia, serif; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| scroll-padding-top: 88px; | |
| } | |
| body { | |
| margin: 0; | |
| color: var(--ink); | |
| background: var(--paper); | |
| font-family: var(--sans); | |
| font-size: 16px; | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| } | |
| button, | |
| input, | |
| select { | |
| color: inherit; | |
| font: inherit; | |
| } | |
| button, | |
| a { | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| button { | |
| cursor: pointer; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| p { | |
| margin-top: 0; | |
| } | |
| .shell { | |
| width: min(1320px, calc(100% - 56px)); | |
| margin-inline: auto; | |
| } | |
| .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; | |
| } | |
| .skip-link { | |
| position: fixed; | |
| z-index: 1000; | |
| top: 12px; | |
| left: 12px; | |
| padding: 9px 14px; | |
| color: var(--white); | |
| background: var(--ink); | |
| border-radius: 9px; | |
| transform: translateY(-180%); | |
| } | |
| .skip-link:focus { | |
| transform: translateY(0); | |
| } | |
| .site-header { | |
| position: sticky; | |
| z-index: 100; | |
| top: 0; | |
| height: 74px; | |
| background: rgba(247, 245, 239, 0.9); | |
| border-bottom: 1px solid var(--line); | |
| backdrop-filter: blur(18px); | |
| } | |
| .header-inner { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 100%; | |
| } | |
| .brand, | |
| .footer-brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 11px; | |
| } | |
| .brand-mark { | |
| width: 36px; | |
| height: 36px; | |
| color: var(--ink); | |
| flex: none; | |
| } | |
| .brand > span, | |
| .footer-brand > span { | |
| display: flex; | |
| flex-direction: column; | |
| line-height: 1.15; | |
| } | |
| .brand strong, | |
| .footer-brand strong { | |
| font-size: 15px; | |
| letter-spacing: -0.02em; | |
| } | |
| .brand small, | |
| .footer-brand small { | |
| margin-top: 3px; | |
| color: var(--ink-soft); | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| .site-header nav { | |
| display: flex; | |
| align-items: center; | |
| gap: 30px; | |
| color: var(--ink-soft); | |
| font-size: 14px; | |
| font-weight: 700; | |
| } | |
| .site-header nav a { | |
| transition: color 150ms ease; | |
| } | |
| .site-header nav a:hover { | |
| color: var(--ink); | |
| } | |
| .hero { | |
| position: relative; | |
| padding: 70px 0 64px; | |
| overflow: hidden; | |
| } | |
| .hero-grid { | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| linear-gradient(rgba(24, 35, 31, 0.037) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(24, 35, 31, 0.037) 1px, transparent 1px); | |
| background-size: 48px 48px; | |
| mask-image: linear-gradient(to bottom, #000, transparent 94%); | |
| pointer-events: none; | |
| } | |
| .hero-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(2px); | |
| pointer-events: none; | |
| } | |
| .hero-orb-one { | |
| top: -80px; | |
| right: -90px; | |
| width: 360px; | |
| height: 360px; | |
| background: var(--blue-soft); | |
| opacity: 0.75; | |
| } | |
| .hero-orb-two { | |
| bottom: -150px; | |
| left: -130px; | |
| width: 330px; | |
| height: 330px; | |
| background: var(--coral-soft); | |
| opacity: 0.8; | |
| } | |
| .hero-inner { | |
| position: relative; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.05fr) minmax(400px, 0.9fr); | |
| align-items: center; | |
| gap: 64px; | |
| } | |
| .kicker, | |
| .table-kicker { | |
| color: var(--coral); | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.13em; | |
| text-transform: uppercase; | |
| } | |
| .hero h1 { | |
| max-width: 760px; | |
| margin-bottom: 20px; | |
| font-family: var(--serif); | |
| font-size: clamp(56px, 6.4vw, 90px); | |
| font-weight: 400; | |
| line-height: 0.93; | |
| letter-spacing: -0.055em; | |
| } | |
| .hero h1 em { | |
| display: block; | |
| color: var(--blue); | |
| font-weight: inherit; | |
| } | |
| .hero-tagline { | |
| margin-bottom: 12px; | |
| font-size: clamp(20px, 2vw, 28px); | |
| font-weight: 600; | |
| letter-spacing: -0.035em; | |
| } | |
| .hero-description { | |
| max-width: 650px; | |
| margin-bottom: 24px; | |
| color: var(--ink-soft); | |
| font-size: 17px; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .hero-resources { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 8px; | |
| max-width: 680px; | |
| margin-top: 20px; | |
| } | |
| .hero-resource { | |
| display: grid; | |
| grid-template-columns: auto minmax(0, 1fr); | |
| align-items: center; | |
| gap: 9px; | |
| min-height: 58px; | |
| padding: 8px 10px; | |
| text-align: left; | |
| background: rgba(255, 254, 249, 0.72); | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| transition: background 150ms ease, border-color 150ms ease, transform 150ms ease; | |
| } | |
| .hero-resource:hover:not(.is-disabled) { | |
| background: var(--white); | |
| border-color: var(--line-strong); | |
| transform: translateY(-2px); | |
| } | |
| .hero-resource-icon { | |
| display: grid; | |
| width: 32px; | |
| height: 32px; | |
| place-items: center; | |
| color: var(--blue); | |
| background: var(--blue-soft); | |
| border-radius: 8px; | |
| font-size: 11px; | |
| font-weight: 800; | |
| } | |
| .hero-resource > span:last-child { | |
| display: flex; | |
| min-width: 0; | |
| flex-direction: column; | |
| } | |
| .hero-resource strong { | |
| font-size: 13px; | |
| line-height: 1.2; | |
| } | |
| .hero-resource small { | |
| margin-top: 2px; | |
| overflow: hidden; | |
| color: var(--ink-soft); | |
| font-size: 11px; | |
| line-height: 1.2; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 14px; | |
| min-height: 48px; | |
| padding: 11px 18px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 12px; | |
| font-size: 13px; | |
| font-weight: 700; | |
| transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; | |
| } | |
| .button:hover:not(.is-disabled) { | |
| transform: translateY(-2px); | |
| } | |
| .button-primary { | |
| color: var(--paper); | |
| background: var(--ink); | |
| border-color: var(--ink); | |
| box-shadow: 0 10px 24px rgba(24, 35, 31, 0.16); | |
| } | |
| .button-secondary { | |
| background: rgba(255, 254, 249, 0.7); | |
| } | |
| .stream-card { | |
| position: relative; | |
| min-height: 410px; | |
| padding: 20px; | |
| background: rgba(255, 254, 249, 0.9); | |
| border: 1px solid var(--line); | |
| border-radius: 28px; | |
| box-shadow: var(--shadow); | |
| } | |
| .stream-card::before { | |
| position: absolute; | |
| z-index: -1; | |
| inset: 22px -18px -18px 22px; | |
| content: ""; | |
| background: var(--green-soft); | |
| border-radius: 28px; | |
| transform: rotate(2deg); | |
| } | |
| .stream-card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding-bottom: 14px; | |
| border-bottom: 1px solid var(--line); | |
| color: var(--ink-soft); | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .stream-card-header i { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 10px; | |
| font-style: normal; | |
| } | |
| .stream-card-header i b { | |
| width: 7px; | |
| height: 7px; | |
| background: var(--green); | |
| border-radius: 50%; | |
| box-shadow: 0 0 0 4px rgba(111, 150, 89, 0.12); | |
| } | |
| .signal-group { | |
| padding: 21px 6px; | |
| } | |
| .signal-label { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| margin-bottom: 12px; | |
| } | |
| .signal-label strong { | |
| font-size: 15px; | |
| } | |
| .signal-label small { | |
| color: var(--ink-soft); | |
| font-size: 11px; | |
| font-weight: 600; | |
| } | |
| .signal-track { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| align-items: end; | |
| gap: 7px; | |
| height: 68px; | |
| padding: 10px; | |
| background: var(--green-soft); | |
| border-radius: 13px; | |
| } | |
| .signal-track span { | |
| position: relative; | |
| height: var(--level); | |
| background: var(--green); | |
| border-radius: 5px 5px 2px 2px; | |
| } | |
| .signal-track span::after { | |
| position: absolute; | |
| inset: 7px 4px auto; | |
| height: 2px; | |
| content: ""; | |
| background: rgba(255, 255, 255, 0.48); | |
| border-radius: 999px; | |
| } | |
| .signal-times { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 8px; | |
| color: var(--ink-soft); | |
| font-size: 10px; | |
| font-weight: 600; | |
| } | |
| .signal-divider { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--ink-soft); | |
| font-size: 9px; | |
| font-weight: 700; | |
| letter-spacing: 0.09em; | |
| text-transform: uppercase; | |
| } | |
| .signal-divider::before, | |
| .signal-divider::after { | |
| height: 1px; | |
| content: ""; | |
| background: var(--line); | |
| flex: 1; | |
| } | |
| .update-track { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .update-track span { | |
| display: grid; | |
| width: 32px; | |
| height: 32px; | |
| place-items: center; | |
| color: white; | |
| background: var(--blue); | |
| border-radius: 8px; | |
| font-size: 10px; | |
| font-weight: 700; | |
| } | |
| .update-track span:first-child { | |
| background: var(--ink); | |
| } | |
| .update-track span:nth-of-type(3) { | |
| background: var(--purple); | |
| } | |
| .update-track span:nth-of-type(4) { | |
| background: var(--green); | |
| } | |
| .update-track span:nth-of-type(5) { | |
| background: var(--coral); | |
| } | |
| .update-track span:nth-of-type(6) { | |
| color: var(--ink); | |
| background: #edb755; | |
| } | |
| .update-track i { | |
| height: 2px; | |
| background: var(--line-strong); | |
| flex: 1; | |
| } | |
| .response-line { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 9px; | |
| margin: 11px 16px 0 48px; | |
| } | |
| .response-line b { | |
| position: relative; | |
| height: 5px; | |
| overflow: hidden; | |
| background: var(--blue-soft); | |
| border-radius: 99px; | |
| } | |
| .response-line b::after { | |
| position: absolute; | |
| inset: 0 var(--delay) 0 0; | |
| content: ""; | |
| background: var(--blue); | |
| border-radius: inherit; | |
| } | |
| .stream-card-note { | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| margin: 3px 7px 0; | |
| padding: 11px 14px; | |
| color: var(--ink-soft); | |
| background: var(--paper); | |
| border-radius: 11px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .stream-card-note span { | |
| color: var(--coral); | |
| } | |
| .stat-band { | |
| color: var(--paper); | |
| background: var(--ink); | |
| } | |
| .stats { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| padding: 32px 0; | |
| } | |
| .stats > div { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| border-right: 1px solid rgba(255, 255, 255, 0.14); | |
| text-align: center; | |
| } | |
| .stats > div:last-child { | |
| border-right: 0; | |
| } | |
| .stats strong { | |
| font-family: var(--serif); | |
| font-size: clamp(32px, 3.4vw, 48px); | |
| font-weight: 400; | |
| line-height: 1; | |
| } | |
| .stats span { | |
| margin-top: 7px; | |
| color: rgba(255, 255, 255, 0.58); | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.09em; | |
| text-transform: uppercase; | |
| } | |
| .section { | |
| padding: 112px 0; | |
| } | |
| .leaderboard-section { | |
| padding-top: 84px; | |
| } | |
| .leaderboard-section .section-heading { | |
| margin-bottom: 34px; | |
| } | |
| .section-heading { | |
| max-width: 840px; | |
| margin-bottom: 54px; | |
| } | |
| .section-heading .kicker { | |
| margin-bottom: 16px; | |
| } | |
| .section-heading h2 { | |
| margin-bottom: 0; | |
| font-family: var(--serif); | |
| font-size: clamp(40px, 5vw, 66px); | |
| font-weight: 400; | |
| line-height: 1.02; | |
| letter-spacing: -0.04em; | |
| } | |
| .split-heading { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.65fr); | |
| align-items: end; | |
| gap: 80px; | |
| max-width: none; | |
| } | |
| .results-heading { | |
| max-width: 880px; | |
| } | |
| .results-heading .section-intro { | |
| max-width: 760px; | |
| margin: 16px 0 0; | |
| color: var(--ink-soft); | |
| font-size: 17px; | |
| } | |
| .explorer { | |
| display: grid; | |
| gap: 18px; | |
| } | |
| .track-switcher { | |
| display: grid; | |
| grid-template-columns: minmax(460px, 0.9fr) 1fr; | |
| align-items: center; | |
| gap: 34px; | |
| padding: 13px; | |
| background: var(--paper-deep); | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| } | |
| .track-tabs { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 7px; | |
| } | |
| .track-tab { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| min-height: 48px; | |
| padding: 9px 12px; | |
| color: var(--ink-soft); | |
| background: transparent; | |
| border: 1px solid transparent; | |
| border-radius: 11px; | |
| font-size: 14px; | |
| font-weight: 700; | |
| } | |
| .track-tab b { | |
| display: grid; | |
| width: auto; | |
| min-width: 24px; | |
| height: 24px; | |
| padding: 0 5px; | |
| place-items: center; | |
| color: var(--ink-soft); | |
| background: rgba(255, 255, 255, 0.55); | |
| border-radius: 7px; | |
| font-size: 11px; | |
| } | |
| .track-tab.is-active { | |
| color: var(--ink); | |
| background: var(--white); | |
| border-color: var(--line); | |
| box-shadow: 0 8px 20px rgba(47, 58, 49, 0.06); | |
| } | |
| .track-tab.is-active b { | |
| color: var(--blue); | |
| background: var(--blue-soft); | |
| } | |
| .track-tab[data-track="diagnostics"].is-active b { | |
| color: var(--purple); | |
| background: var(--purple-soft); | |
| } | |
| .track-switcher > p { | |
| margin: 0; | |
| padding-right: 18px; | |
| color: var(--ink-soft); | |
| font-size: 14px; | |
| } | |
| .category-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| min-height: 46px; | |
| padding: 0 6px; | |
| } | |
| .category-bar > span { | |
| color: var(--ink-soft); | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| .category-tabs { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .category-tab { | |
| padding: 8px 13px; | |
| color: var(--ink-soft); | |
| background: transparent; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .category-tab.is-active { | |
| color: var(--paper); | |
| background: var(--ink); | |
| border-color: var(--ink); | |
| } | |
| .table-panel { | |
| overflow: hidden; | |
| background: var(--white); | |
| border: 1px solid var(--line); | |
| border-radius: 24px; | |
| box-shadow: var(--shadow); | |
| } | |
| .table-panel.is-diagnostics { | |
| border-color: rgba(121, 105, 173, 0.34); | |
| } | |
| .table-panel.is-diagnostics .table-kicker { | |
| color: var(--purple); | |
| } | |
| .table-panel-header { | |
| display: flex; | |
| align-items: end; | |
| justify-content: space-between; | |
| gap: 30px; | |
| padding: 28px 30px 24px; | |
| } | |
| .table-panel-header > div { | |
| max-width: 720px; | |
| } | |
| .table-kicker { | |
| margin-bottom: 7px; | |
| } | |
| .table-panel-header h3 { | |
| margin-bottom: 5px; | |
| font-family: var(--serif); | |
| font-size: 32px; | |
| font-weight: 400; | |
| line-height: 1.1; | |
| letter-spacing: -0.03em; | |
| } | |
| .table-panel-header > div > p:last-child { | |
| margin: 0; | |
| color: var(--ink-soft); | |
| font-size: 14px; | |
| } | |
| .ranking-label { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: end; | |
| margin: 0; | |
| color: var(--ink-soft); | |
| font-size: 12px; | |
| } | |
| .ranking-label strong { | |
| color: var(--ink); | |
| font-size: 15px; | |
| } | |
| .ranking-label span { | |
| margin-top: 2px; | |
| color: var(--green); | |
| font-weight: 700; | |
| } | |
| .toolbar { | |
| display: grid; | |
| grid-template-columns: minmax(180px, 1fr) minmax(190px, 1fr) 150px 130px auto auto; | |
| gap: 9px; | |
| padding: 15px 20px; | |
| background: var(--paper); | |
| border-top: 1px solid var(--line); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .toolbar label { | |
| position: relative; | |
| } | |
| .toolbar label > span:not(.sr-only) { | |
| position: absolute; | |
| z-index: 1; | |
| top: 6px; | |
| left: 12px; | |
| color: var(--ink-soft); | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| pointer-events: none; | |
| text-transform: uppercase; | |
| } | |
| .toolbar input, | |
| .toolbar select, | |
| .tool-button { | |
| width: 100%; | |
| height: 50px; | |
| background: var(--white); | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| outline: none; | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| .toolbar select { | |
| padding: 17px 32px 3px 11px; | |
| } | |
| .toolbar .metric-select-control > span { | |
| color: var(--blue); | |
| } | |
| .metric-select-control select { | |
| background: var(--blue-soft); | |
| border-color: rgba(75, 123, 236, 0.28); | |
| } | |
| .search-control svg { | |
| position: absolute; | |
| top: 16px; | |
| left: 13px; | |
| width: 18px; | |
| fill: none; | |
| stroke: var(--ink-soft); | |
| stroke-linecap: round; | |
| stroke-width: 1.8; | |
| } | |
| .search-control input { | |
| padding: 0 12px 0 40px; | |
| } | |
| .toolbar input:focus, | |
| .toolbar select:focus, | |
| .tool-button:focus-visible, | |
| .track-tab:focus-visible, | |
| .category-tab:focus-visible, | |
| .metric-card button:focus-visible { | |
| border-color: var(--blue); | |
| box-shadow: 0 0 0 3px rgba(75, 123, 236, 0.15); | |
| } | |
| .tool-button { | |
| width: auto; | |
| min-width: 78px; | |
| padding: 0 12px; | |
| } | |
| .download-button { | |
| color: var(--paper); | |
| background: var(--ink); | |
| border-color: var(--ink); | |
| } | |
| .table-scroll { | |
| overflow-x: auto; | |
| outline: none; | |
| scrollbar-color: var(--line-strong) transparent; | |
| scrollbar-width: thin; | |
| } | |
| .table-scroll:focus-visible { | |
| box-shadow: inset 0 0 0 3px rgba(75, 123, 236, 0.16); | |
| } | |
| table { | |
| width: 100%; | |
| min-width: 1180px; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| thead th { | |
| position: sticky; | |
| z-index: 3; | |
| top: 0; | |
| height: 68px; | |
| padding: 0 15px; | |
| color: var(--ink-soft); | |
| background: var(--white); | |
| border-bottom: 1px solid var(--line-strong); | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| text-align: left; | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| thead th.metric-column { | |
| min-width: 94px; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| .metric-column button { | |
| display: grid; | |
| grid-template-columns: auto auto; | |
| align-content: center; | |
| justify-content: center; | |
| gap: 0 6px; | |
| width: 100%; | |
| height: 67px; | |
| padding: 0 8px; | |
| color: inherit; | |
| background: transparent; | |
| border: 0; | |
| } | |
| .metric-column button span { | |
| color: var(--ink); | |
| font-size: 13px; | |
| letter-spacing: 0; | |
| text-transform: none; | |
| } | |
| .metric-column button i { | |
| color: var(--ink-soft); | |
| font-size: 12px; | |
| font-style: normal; | |
| } | |
| .metric-column button small { | |
| grid-column: 1 / -1; | |
| margin-top: 2px; | |
| color: var(--ink-soft); | |
| font-size: 10px; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| } | |
| thead th.is-sorted { | |
| background: var(--blue-soft); | |
| } | |
| thead th.is-sorted button span, | |
| thead th.is-sorted button i { | |
| color: var(--blue); | |
| } | |
| tbody th, | |
| tbody td { | |
| height: 76px; | |
| padding: 12px 15px; | |
| background: var(--white); | |
| border-bottom: 1px solid var(--line); | |
| font-size: 14px; | |
| text-align: left; | |
| } | |
| tbody tr:last-child th, | |
| tbody tr:last-child td { | |
| border-bottom: 0; | |
| } | |
| tbody tr:hover th, | |
| tbody tr:hover td { | |
| background: #fbfaf5; | |
| } | |
| .rank-heading, | |
| .rank-cell { | |
| position: sticky; | |
| z-index: 5; | |
| left: 0; | |
| width: 54px; | |
| min-width: 54px; | |
| text-align: center; | |
| } | |
| .model-heading, | |
| .model-cell { | |
| position: sticky; | |
| z-index: 4; | |
| left: 54px; | |
| width: 210px; | |
| min-width: 210px; | |
| box-shadow: 1px 0 0 var(--line); | |
| } | |
| thead .rank-heading, | |
| thead .model-heading { | |
| z-index: 8; | |
| } | |
| .rank-badge { | |
| display: inline-grid; | |
| width: 27px; | |
| height: 27px; | |
| place-items: center; | |
| color: var(--ink-soft); | |
| background: var(--paper); | |
| border-radius: 8px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .rank-badge.rank-1 { | |
| color: #8b5b17; | |
| background: var(--gold-soft); | |
| } | |
| .rank-badge.rank-2 { | |
| color: #53636c; | |
| background: var(--silver-soft); | |
| } | |
| .rank-badge.rank-3 { | |
| color: #9d5848; | |
| background: var(--coral-soft); | |
| } | |
| .model-cell a { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| font-size: 14px; | |
| font-weight: 700; | |
| } | |
| .model-cell a i { | |
| color: var(--blue); | |
| font-size: 11px; | |
| font-style: normal; | |
| } | |
| .model-cell small { | |
| display: block; | |
| max-width: 184px; | |
| margin-top: 3px; | |
| overflow: hidden; | |
| color: var(--ink-soft); | |
| font-size: 10px; | |
| font-weight: 500; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .meta-cell { | |
| min-width: 126px; | |
| color: var(--ink-soft); | |
| white-space: nowrap; | |
| } | |
| .tag { | |
| display: inline-block; | |
| padding: 5px 8px; | |
| border-radius: 7px; | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.03em; | |
| text-transform: uppercase; | |
| } | |
| .tag-native { | |
| color: #3a609e; | |
| background: var(--blue-soft); | |
| } | |
| .tag-cascaded { | |
| color: #557741; | |
| background: var(--green-soft); | |
| } | |
| .access-dot { | |
| display: inline-block; | |
| width: 6px; | |
| height: 6px; | |
| margin-right: 6px; | |
| background: var(--green); | |
| border-radius: 50%; | |
| } | |
| .access-web { | |
| background: var(--coral); | |
| } | |
| .score-cell { | |
| min-width: 94px; | |
| text-align: center; | |
| white-space: nowrap; | |
| } | |
| .score-cell span { | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| .score-cell small { | |
| margin-left: 2px; | |
| color: var(--ink-soft); | |
| font-size: 10px; | |
| } | |
| .score-cell.is-sorted { | |
| background: rgba(230, 239, 255, 0.5); | |
| } | |
| .score-cell.is-best span { | |
| display: inline-block; | |
| padding: 4px 7px; | |
| color: #8b5b17; | |
| background: var(--gold-soft); | |
| border-radius: 7px; | |
| font-weight: 700; | |
| } | |
| .score-cell.is-runner-up span { | |
| color: #596b74; | |
| font-weight: 700; | |
| text-decoration: underline; | |
| text-decoration-color: #b0bdc4; | |
| text-decoration-thickness: 2px; | |
| text-underline-offset: 4px; | |
| } | |
| .empty-row { | |
| height: 180px; | |
| color: var(--ink-soft); | |
| text-align: center; | |
| } | |
| .table-footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| min-height: 54px; | |
| padding: 10px 22px; | |
| color: var(--ink-soft); | |
| background: var(--paper); | |
| border-top: 1px solid var(--line); | |
| font-size: 11px; | |
| font-weight: 600; | |
| } | |
| .table-footer p { | |
| margin: 0; | |
| } | |
| .legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| gap: 15px; | |
| } | |
| .legend span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .legend i { | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 3px; | |
| } | |
| .legend-best { | |
| background: var(--gold-soft); | |
| border: 1px solid rgba(200, 139, 47, 0.4); | |
| } | |
| .legend-second { | |
| background: var(--silver-soft); | |
| border-bottom: 2px solid #b0bdc4; | |
| } | |
| .evidence-note { | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| gap: 12px; | |
| align-items: start; | |
| padding: 16px 18px; | |
| color: var(--ink-soft); | |
| background: rgba(230, 239, 255, 0.65); | |
| border: 1px solid rgba(75, 123, 236, 0.16); | |
| border-radius: 14px; | |
| } | |
| .evidence-note > span { | |
| display: grid; | |
| width: 24px; | |
| height: 24px; | |
| place-items: center; | |
| color: var(--blue); | |
| background: var(--white); | |
| border-radius: 50%; | |
| font-family: var(--serif); | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .evidence-note p { | |
| margin: 1px 0 0; | |
| font-size: 13px; | |
| } | |
| .evidence-note p + p { | |
| margin-top: 7px; | |
| } | |
| .evidence-note strong { | |
| color: var(--ink); | |
| } | |
| .data-error { | |
| margin: 20px; | |
| padding: 16px; | |
| color: #8e3e2b; | |
| background: var(--coral-soft); | |
| border: 1px solid rgba(204, 102, 78, 0.22); | |
| border-radius: 12px; | |
| } | |
| .data-error p { | |
| margin: 4px 0 0; | |
| font-size: 12px; | |
| } | |
| .metrics-section { | |
| color: var(--paper); | |
| background: var(--ink); | |
| } | |
| .metrics-section .section-intro { | |
| margin: 0 0 5px; | |
| color: rgba(255, 255, 255, 0.56); | |
| font-size: 16px; | |
| } | |
| .metric-guide { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 13px; | |
| } | |
| .metric-card { | |
| min-height: 230px; | |
| padding: 22px; | |
| color: var(--ink); | |
| background: var(--white); | |
| border: 2px solid transparent; | |
| border-radius: 18px; | |
| transition: transform 150ms ease, border-color 150ms ease; | |
| } | |
| .metric-card:hover { | |
| transform: translateY(-3px); | |
| } | |
| .metric-card.is-active { | |
| background: var(--blue-soft); | |
| border-color: var(--blue); | |
| } | |
| .metric-card > button { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| width: 100%; | |
| margin-bottom: 22px; | |
| padding: 0; | |
| background: transparent; | |
| border: 0; | |
| } | |
| .metric-abbr { | |
| padding: 6px 9px; | |
| color: var(--ink); | |
| background: var(--paper); | |
| border-radius: 7px; | |
| font-size: 12px; | |
| font-weight: 800; | |
| letter-spacing: 0.04em; | |
| } | |
| .metric-card.is-active .metric-abbr { | |
| color: var(--blue); | |
| background: var(--white); | |
| } | |
| .direction { | |
| padding: 5px 8px; | |
| border-radius: 999px; | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| .direction-higher { | |
| color: #557741; | |
| background: var(--green-soft); | |
| } | |
| .direction-lower { | |
| color: #a34f3c; | |
| background: var(--coral-soft); | |
| } | |
| .metric-card h3 { | |
| margin-bottom: 8px; | |
| font-size: 20px; | |
| line-height: 1.2; | |
| letter-spacing: -0.025em; | |
| } | |
| .metric-card > p { | |
| min-height: 58px; | |
| margin-bottom: 16px; | |
| color: var(--ink-soft); | |
| font-size: 14px; | |
| } | |
| .metric-card dl { | |
| display: grid; | |
| gap: 7px; | |
| margin: 0; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .metric-card dl div { | |
| display: grid; | |
| grid-template-columns: 78px 1fr; | |
| gap: 10px; | |
| } | |
| .metric-card dt { | |
| color: var(--ink-soft); | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .metric-card dd { | |
| margin: 0; | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-align: right; | |
| } | |
| .protocol-section { | |
| background: var(--paper-deep); | |
| } | |
| .protocol-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| } | |
| .protocol-grid article { | |
| min-height: 280px; | |
| padding: 28px; | |
| background: var(--white); | |
| border: 1px solid var(--line); | |
| border-radius: 20px; | |
| } | |
| .protocol-grid article:nth-child(2) { | |
| background: var(--green-soft); | |
| } | |
| .protocol-grid article:nth-child(3) { | |
| background: var(--blue-soft); | |
| } | |
| .protocol-grid article > span { | |
| display: block; | |
| margin-bottom: 70px; | |
| color: var(--coral); | |
| font-family: var(--serif); | |
| font-size: 24px; | |
| } | |
| .protocol-grid h3 { | |
| margin-bottom: 10px; | |
| font-size: 22px; | |
| letter-spacing: -0.03em; | |
| } | |
| .protocol-grid p { | |
| margin: 0; | |
| color: var(--ink-soft); | |
| font-size: 15px; | |
| } | |
| .is-disabled { | |
| cursor: default; | |
| opacity: 0.56; | |
| pointer-events: none; | |
| } | |
| footer { | |
| padding: 34px 0; | |
| color: var(--paper); | |
| background: #101815; | |
| } | |
| .footer-inner { | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| align-items: center; | |
| gap: 30px; | |
| } | |
| .footer-brand .brand-mark { | |
| color: var(--paper); | |
| } | |
| .footer-brand small { | |
| color: rgba(255, 255, 255, 0.46); | |
| } | |
| .footer-inner > p { | |
| margin: 0; | |
| color: rgba(255, 255, 255, 0.46); | |
| font-size: 12px; | |
| text-align: center; | |
| } | |
| .footer-inner > a { | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .noscript { | |
| position: fixed; | |
| z-index: 1000; | |
| right: 20px; | |
| bottom: 20px; | |
| padding: 12px 16px; | |
| color: white; | |
| background: #a34f3c; | |
| border-radius: 10px; | |
| font-size: 12px; | |
| } | |
| @media (max-width: 1080px) { | |
| .hero-inner { | |
| grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr); | |
| gap: 52px; | |
| } | |
| .toolbar { | |
| grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(130px, 0.8fr); | |
| } | |
| .tool-button { | |
| width: 100%; | |
| } | |
| .metric-guide { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| @media (max-width: 860px) { | |
| .shell { | |
| width: min(100% - 36px, 1320px); | |
| } | |
| .site-header nav { | |
| display: none; | |
| } | |
| .hero { | |
| padding: 60px 0; | |
| } | |
| .hero-inner, | |
| .split-heading, | |
| .track-switcher { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero-inner { | |
| gap: 40px; | |
| } | |
| .hero-copy { | |
| text-align: center; | |
| } | |
| .hero h1, | |
| .hero-description { | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| .hero-actions { | |
| justify-content: center; | |
| } | |
| .hero-resources { | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| .stream-card { | |
| width: min(100%, 600px); | |
| min-height: auto; | |
| margin: 0 auto; | |
| } | |
| .stats { | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 28px 0; | |
| } | |
| .stats > div:nth-child(3) { | |
| border-right: 0; | |
| } | |
| .section { | |
| padding: 88px 0; | |
| } | |
| .split-heading { | |
| align-items: start; | |
| gap: 28px; | |
| } | |
| .track-switcher { | |
| gap: 16px; | |
| } | |
| .track-switcher > p { | |
| padding: 0 8px 7px; | |
| } | |
| .toolbar { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .search-control, | |
| .metric-select-control { | |
| grid-column: 1 / -1; | |
| } | |
| .protocol-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .protocol-grid article { | |
| min-height: 220px; | |
| } | |
| .protocol-grid article > span { | |
| margin-bottom: 45px; | |
| } | |
| .footer-inner { | |
| grid-template-columns: 1fr; | |
| justify-items: center; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .shell { | |
| width: min(100% - 24px, 1320px); | |
| } | |
| .site-header { | |
| height: 66px; | |
| } | |
| .brand-mark { | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .hero { | |
| padding: 48px 0 52px; | |
| } | |
| .hero h1 { | |
| font-size: clamp(52px, 16vw, 76px); | |
| } | |
| .hero-tagline { | |
| font-size: 20px; | |
| } | |
| .hero-description { | |
| font-size: 14px; | |
| } | |
| .hero-actions { | |
| display: grid; | |
| } | |
| .hero-resources { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .stream-card { | |
| padding: 17px; | |
| border-radius: 20px; | |
| } | |
| .stream-card::before { | |
| display: none; | |
| } | |
| .stream-card-header { | |
| gap: 15px; | |
| font-size: 11px; | |
| } | |
| .signal-group { | |
| padding: 20px 2px; | |
| } | |
| .update-track span { | |
| width: 27px; | |
| height: 27px; | |
| font-size: 9px; | |
| } | |
| .stats { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .stats > div { | |
| border-right: 0; | |
| } | |
| .stats > div:last-child { | |
| grid-column: 1 / -1; | |
| } | |
| .section { | |
| padding: 72px 0; | |
| } | |
| .section-heading { | |
| margin-bottom: 40px; | |
| } | |
| .section-heading h2 { | |
| font-size: 40px; | |
| } | |
| .track-switcher { | |
| padding: 8px; | |
| } | |
| .track-tabs { | |
| gap: 4px; | |
| } | |
| .track-tab { | |
| justify-content: center; | |
| min-height: 46px; | |
| padding: 7px; | |
| } | |
| .track-tab b { | |
| display: none; | |
| } | |
| .category-bar { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| gap: 8px; | |
| padding: 3px; | |
| } | |
| .category-tabs { | |
| width: 100%; | |
| } | |
| .category-tab { | |
| flex: 1; | |
| } | |
| .table-panel { | |
| border-radius: 17px; | |
| } | |
| .table-panel-header { | |
| align-items: start; | |
| flex-direction: column; | |
| padding: 22px 18px 18px; | |
| } | |
| .table-panel-header h3 { | |
| font-size: 28px; | |
| } | |
| .ranking-label { | |
| align-items: start; | |
| } | |
| .toolbar { | |
| grid-template-columns: 1fr 1fr; | |
| padding: 12px; | |
| } | |
| .search-control { | |
| grid-column: 1 / -1; | |
| } | |
| .tool-button { | |
| min-width: 0; | |
| } | |
| .model-heading, | |
| .model-cell { | |
| width: 155px; | |
| min-width: 155px; | |
| } | |
| .model-cell small { | |
| max-width: 132px; | |
| } | |
| .table-footer { | |
| align-items: start; | |
| flex-direction: column; | |
| padding: 14px 16px; | |
| } | |
| .legend { | |
| justify-content: flex-start; | |
| } | |
| .metric-guide { | |
| grid-template-columns: 1fr; | |
| } | |
| .metric-card { | |
| min-height: auto; | |
| } | |
| .protocol-grid article { | |
| min-height: 200px; | |
| padding: 23px; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { | |
| scroll-behavior: auto; | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |