| :root { |
| --ink: #14243d; |
| --ink-soft: #263852; |
| --navy-deep: #071a33; |
| --paper: #e4e9ef; |
| --paper-deep: #edf1f5; |
| --card: #f5f7fa; |
| --white: #ffffff; |
| --muted: #65748b; |
| --annotation: #8a97a9; |
| --line: #dce3ea; |
| --blue: #7fa8ff; |
| --highlight: #5574c7; |
| --mint: #72e1be; |
| --mint-deep: #2d8b72; |
| --orange: #ff775c; |
| --shadow: 0 18px 46px rgba(20, 36, 61, 0.08); |
| --display: "Inter", sans-serif; |
| --mono: "Inter", sans-serif; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| margin: 0; |
| color: var(--ink); |
| background: var(--paper); |
| font-family: var(--display); |
| font-size: 15px; |
| line-height: 1.6; |
| } |
|
|
| button, |
| a { |
| font: inherit; |
| } |
|
|
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
|
|
| button { |
| color: inherit; |
| } |
|
|
| button, |
| a { |
| -webkit-tap-highlight-color: transparent; |
| } |
|
|
| :focus-visible { |
| outline: 3px solid var(--orange); |
| outline-offset: 3px; |
| } |
|
|
| .page-shell { |
| width: min(1180px, calc(100% - 48px)); |
| margin-inline: auto; |
| } |
|
|
| .site-header { |
| position: sticky; |
| z-index: 50; |
| top: 0; |
| display: grid; |
| grid-template-columns: 1fr auto 1fr; |
| align-items: center; |
| min-height: 82px; |
| padding: 10px 28px; |
| border-bottom: 1px solid var(--line); |
| background: rgba(245, 247, 250, 0.96); |
| backdrop-filter: blur(16px); |
| } |
|
|
| .brand, |
| .footer-brand { |
| display: inline-flex; |
| align-items: center; |
| gap: 16px; |
| width: max-content; |
| } |
|
|
| .brand img { |
| width: 56px; |
| height: 56px; |
| object-fit: contain; |
| border-radius: 8px; |
| background: var(--white); |
| } |
|
|
| .brand span, |
| .footer-brand span { |
| display: grid; |
| line-height: 1.1; |
| } |
|
|
| .brand strong, |
| .footer-brand strong { |
| font-size: 13px; |
| font-weight: 700; |
| } |
|
|
| .brand small, |
| .footer-brand small { |
| margin-top: 4px; |
| color: var(--annotation); |
| font: 500 10px/1 var(--mono); |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| } |
|
|
| .primary-nav { |
| align-self: stretch; |
| display: flex; |
| align-items: stretch; |
| gap: 30px; |
| } |
|
|
| .nav-link { |
| position: relative; |
| padding: 0; |
| border: 0; |
| background: transparent; |
| cursor: pointer; |
| font: 600 11px/1 var(--mono); |
| letter-spacing: 0.13em; |
| text-transform: uppercase; |
| } |
|
|
| .nav-link::after { |
| position: absolute; |
| right: 0; |
| bottom: -10px; |
| left: 0; |
| height: 3px; |
| background: linear-gradient(90deg, var(--mint), var(--blue)); |
| content: ""; |
| opacity: 0; |
| transform: scaleX(0.4); |
| transition: 180ms ease; |
| } |
|
|
| .nav-link.is-active::after { |
| opacity: 1; |
| transform: scaleX(1); |
| } |
|
|
| .header-links { |
| display: flex; |
| justify-content: flex-end; |
| align-items: center; |
| gap: 10px; |
| color: var(--muted); |
| font-size: 12px; |
| font-weight: 600; |
| } |
|
|
| .header-links > a:hover { |
| color: var(--ink); |
| } |
|
|
| .rules-link { |
| margin-right: 8px; |
| } |
|
|
| .header-github { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| min-height: 40px; |
| padding: 9px 12px; |
| border: 1px solid var(--line); |
| border-radius: 6px; |
| color: var(--ink); |
| background: rgba(255, 255, 255, 0.7); |
| } |
|
|
| .header-github svg, |
| .repo-lockup svg { |
| width: 17px; |
| height: 17px; |
| fill: currentColor; |
| } |
|
|
| .header-github:hover { |
| border-color: var(--ink); |
| background: var(--white); |
| } |
|
|
| .header-cta { |
| display: inline-flex; |
| align-items: center; |
| gap: 9px; |
| padding: 10px 14px; |
| border: 1px solid var(--ink); |
| border-radius: 6px; |
| color: var(--ink); |
| background: var(--white); |
| box-shadow: 3px 3px 0 rgba(20, 36, 61, 0.18); |
| } |
|
|
| .view[hidden] { |
| display: none !important; |
| } |
|
|
| .view.is-active { |
| animation: view-in 300ms ease both; |
| } |
|
|
| @keyframes view-in { |
| from { opacity: 0; transform: translateY(7px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .hero { |
| position: relative; |
| isolation: isolate; |
| overflow: hidden; |
| display: grid; |
| grid-template-columns: minmax(0, 1.18fr) minmax(380px, 0.82fr); |
| gap: clamp(40px, 7vw, 92px); |
| align-items: center; |
| min-height: 660px; |
| margin-block: 24px; |
| padding: 76px clamp(28px, 4vw, 58px) 84px; |
| border: 1px solid rgba(20, 36, 61, 0.09); |
| border-radius: 12px; |
| background: var(--card); |
| } |
|
|
| .hero::before { |
| position: absolute; |
| z-index: -2; |
| inset: 0; |
| background: url("assets/aml-textile-light.png") center / cover no-repeat; |
| content: ""; |
| opacity: 0.5; |
| } |
|
|
| .hero::after { |
| position: absolute; |
| z-index: -1; |
| top: 9%; |
| bottom: 9%; |
| left: 0; |
| width: 3px; |
| background: var(--mint); |
| content: ""; |
| } |
|
|
| .eyebrow, |
| .section-index, |
| .challenge-topline, |
| .benchmark-tag, |
| .release-pill, |
| .result-panel-head > div > span, |
| .category-panel > span { |
| font: 600 11px/1.2 var(--mono); |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| } |
|
|
| .eyebrow { |
| display: flex; |
| align-items: center; |
| gap: 11px; |
| margin: 0 0 24px; |
| color: var(--highlight); |
| } |
|
|
| .eyebrow > span { |
| width: 30px; |
| height: 2px; |
| background: currentColor; |
| } |
|
|
| .hero h1, |
| .leaderboard-hero h1 { |
| margin: 0; |
| line-height: 0.98; |
| letter-spacing: -0.055em; |
| } |
|
|
| .hero h1 { |
| font-size: clamp(44px, 4.8vw, 68px); |
| } |
|
|
| .hero h1 > span { |
| white-space: nowrap; |
| } |
|
|
| .hero h1 em, |
| .leaderboard-hero h1 em { |
| color: var(--ink); |
| font-style: normal; |
| box-shadow: inset 0 -0.16em rgba(127, 168, 255, 0.34); |
| } |
|
|
| .hero-lede { |
| max-width: 680px; |
| margin: 28px 0 0; |
| color: #3f4d60; |
| font-size: clamp(16px, 1.7vw, 19px); |
| line-height: 1.7; |
| } |
|
|
| .hero-actions, |
| .closing-actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| margin-top: 34px; |
| } |
|
|
| .button { |
| display: inline-flex; |
| justify-content: center; |
| align-items: center; |
| gap: 14px; |
| min-height: 48px; |
| padding: 12px 18px; |
| border: 1px solid var(--ink); |
| border-radius: 6px; |
| cursor: pointer; |
| font-size: 12px; |
| font-weight: 700; |
| transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; |
| } |
|
|
| .button:hover { |
| transform: translate(-2px, -2px); |
| } |
|
|
| .button-primary { |
| color: var(--white); |
| background: var(--ink); |
| box-shadow: 4px 4px 0 rgba(114, 225, 190, 0.72); |
| } |
|
|
| .button-primary:hover { |
| box-shadow: 7px 7px 0 rgba(114, 225, 190, 0.72); |
| } |
|
|
| .button-secondary { |
| background: transparent; |
| } |
|
|
| .button-secondary:hover { |
| background: var(--white); |
| box-shadow: 4px 4px 0 var(--ink); |
| } |
|
|
| .hero-note { |
| margin: 18px 0 0; |
| color: var(--muted); |
| font: 500 11px/1.5 var(--mono); |
| } |
|
|
| .challenge-card { |
| position: relative; |
| overflow: hidden; |
| display: flex; |
| flex-direction: column; |
| min-height: 466px; |
| padding: 27px; |
| border: 1px solid var(--ink); |
| border-radius: 10px; |
| color: var(--white); |
| background: |
| linear-gradient(rgba(114, 225, 190, 0.07) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(114, 225, 190, 0.07) 1px, transparent 1px), |
| var(--navy-deep); |
| background-size: 36px 36px; |
| box-shadow: 10px 10px 0 rgba(114, 225, 190, 0.62); |
| transition: transform 180ms ease, box-shadow 180ms ease; |
| } |
|
|
| .challenge-card::before, |
| .challenge-card::after { |
| position: absolute; |
| border: 1px solid rgba(114, 225, 190, 0.32); |
| border-radius: 50%; |
| content: ""; |
| } |
|
|
| .challenge-card::before { |
| top: 46px; |
| right: -84px; |
| width: 250px; |
| height: 250px; |
| } |
|
|
| .challenge-card::after { |
| top: 77px; |
| right: -53px; |
| width: 186px; |
| height: 186px; |
| } |
|
|
| .challenge-card:hover { |
| transform: translate(-3px, -3px); |
| box-shadow: 14px 14px 0 rgba(114, 225, 190, 0.62); |
| } |
|
|
| .challenge-topline, |
| .challenge-footer, |
| .challenge-title, |
| .countdown { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .challenge-topline, |
| .challenge-footer { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| .challenge-topline { |
| color: #b6c4d8; |
| } |
|
|
| .challenge-topline > span:first-child { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .challenge-brand { |
| display: flex; |
| align-items: center; |
| gap: 14px; |
| } |
|
|
| .challenge-brand > img { |
| width: 52px; |
| height: 52px; |
| object-fit: contain; |
| border-radius: 7px; |
| background: var(--white); |
| } |
|
|
| .challenge-brand > span { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .challenge-topline i, |
| .release-pill i { |
| display: inline-block; |
| width: 7px; |
| height: 7px; |
| border-radius: 50%; |
| background: var(--mint); |
| box-shadow: 0 0 0 5px rgba(114, 225, 190, 0.14); |
| } |
|
|
| .challenge-title { |
| margin-top: 56px; |
| } |
|
|
| .challenge-title p { |
| margin: 0 0 10px; |
| color: var(--mint); |
| font: 600 12px/1.3 var(--mono); |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .challenge-title h2 { |
| margin: 0; |
| font-size: clamp(28px, 3.1vw, 42px); |
| line-height: 1.12; |
| letter-spacing: -0.04em; |
| } |
|
|
| .countdown { |
| display: flex; |
| align-items: flex-start; |
| gap: 9px; |
| margin-top: 36px; |
| } |
|
|
| .countdown > span { |
| display: grid; |
| gap: 7px; |
| min-width: 54px; |
| } |
|
|
| .countdown strong { |
| font: 600 clamp(27px, 3vw, 40px)/1 var(--mono); |
| letter-spacing: -0.05em; |
| } |
|
|
| .countdown small, |
| .challenge-footer small { |
| color: #9cacbf; |
| font: 500 9px/1 var(--mono); |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| } |
|
|
| .countdown b { |
| padding-top: 2px; |
| color: var(--orange); |
| font: 500 28px/1 var(--mono); |
| } |
|
|
| .challenge-footer { |
| margin-top: auto; |
| padding-top: 24px; |
| border-top: 1px solid rgba(255, 255, 255, 0.16); |
| } |
|
|
| .challenge-footer > span:first-child { |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .challenge-footer strong { |
| font: 600 14px/1 var(--mono); |
| } |
|
|
| .challenge-arrow { |
| display: grid; |
| place-items: center; |
| width: 42px; |
| height: 42px; |
| border: 1px solid var(--mint); |
| color: var(--mint); |
| font-size: 19px; |
| } |
|
|
| .signal-strip { |
| border-block: 1px solid var(--line); |
| background: var(--card); |
| } |
|
|
| .signal-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| } |
|
|
| .signal-grid > span { |
| position: relative; |
| display: flex; |
| align-items: baseline; |
| gap: 12px; |
| padding: 24px 20px; |
| border-right: 1px solid var(--line); |
| } |
|
|
| .signal-grid > span::before { |
| position: absolute; |
| top: 18px; |
| bottom: 18px; |
| left: 0; |
| width: 3px; |
| background: var(--mint); |
| content: ""; |
| } |
|
|
| .signal-grid > span:first-child { |
| border-left: 1px solid var(--line); |
| } |
|
|
| .signal-grid strong { |
| font-size: 25px; |
| line-height: 1; |
| letter-spacing: -0.05em; |
| } |
|
|
| .signal-grid small { |
| font: 500 10px/1.4 var(--mono); |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| } |
|
|
| .section { |
| padding-block: 116px; |
| } |
|
|
| .section-heading { |
| display: grid; |
| grid-template-columns: 190px minmax(0, 1fr); |
| gap: 46px; |
| align-items: start; |
| } |
|
|
| .section-index { |
| margin: 8px 0 0; |
| color: var(--highlight); |
| } |
|
|
| .section-heading h2, |
| .protocol-grid h2, |
| .capability-heading h2, |
| .closing-grid h2 { |
| margin: 0; |
| font-size: clamp(34px, 4vw, 58px); |
| line-height: 1.08; |
| letter-spacing: -0.045em; |
| } |
|
|
| .section-heading > div > p { |
| max-width: 760px; |
| margin: 28px 0 0; |
| color: var(--muted); |
| font-size: 17px; |
| line-height: 1.78; |
| } |
|
|
| .principle-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 16px; |
| margin-top: 70px; |
| } |
|
|
| .principle-grid article { |
| position: relative; |
| min-height: 250px; |
| padding: 30px; |
| border: 1px solid var(--line); |
| border-left: 3px solid var(--mint); |
| border-radius: 8px; |
| background: var(--card); |
| } |
|
|
| .principle-grid article > span, |
| .benchmark-number { |
| color: var(--highlight); |
| font: 600 12px/1 var(--mono); |
| } |
|
|
| .principle-grid h3 { |
| margin: 58px 0 12px; |
| font-size: 21px; |
| } |
|
|
| .principle-grid p { |
| margin: 0; |
| color: var(--muted); |
| font-size: 14px; |
| } |
|
|
| .protocol-section { |
| position: relative; |
| overflow: hidden; |
| padding-block: 112px; |
| color: var(--white); |
| background: var(--navy-deep); |
| } |
|
|
| .protocol-section::before { |
| position: absolute; |
| inset: 0; |
| background: |
| linear-gradient(rgba(114, 225, 190, 0.045) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(114, 225, 190, 0.045) 1px, transparent 1px); |
| background-size: 44px 44px; |
| content: ""; |
| } |
|
|
| .protocol-grid { |
| position: relative; |
| display: grid; |
| grid-template-columns: 0.8fr 1.2fr; |
| gap: 76px; |
| align-items: center; |
| } |
|
|
| .section-index-light { |
| color: var(--mint); |
| } |
|
|
| .protocol-grid h2 { |
| margin-top: 24px; |
| } |
|
|
| .protocol-grid h2 em { |
| color: var(--mint); |
| font-style: normal; |
| } |
|
|
| .protocol-grid > div > p:not(.section-index) { |
| margin: 26px 0 0; |
| color: #b9c6d6; |
| font-size: 16px; |
| } |
|
|
| .protocol-grid > div > a { |
| display: inline-flex; |
| gap: 10px; |
| margin-top: 30px; |
| padding-bottom: 4px; |
| border-bottom: 1px solid var(--mint); |
| color: var(--mint); |
| font: 600 12px/1.5 var(--mono); |
| } |
|
|
| .protocol-flow { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 8px; |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| } |
|
|
| .protocol-flow li { |
| position: relative; |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-end; |
| min-height: 255px; |
| padding: 22px; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.04); |
| } |
|
|
| .protocol-flow li:not(:last-child)::after { |
| position: absolute; |
| z-index: 1; |
| top: 50%; |
| right: -15px; |
| display: grid; |
| place-items: center; |
| width: 22px; |
| height: 22px; |
| border-radius: 50%; |
| color: var(--ink); |
| background: var(--white); |
| content: "→"; |
| font-size: 11px; |
| } |
|
|
| .protocol-flow li > span, |
| .protocol-flow li > small { |
| font: 500 9px/1.35 var(--mono); |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .protocol-flow li > span { |
| margin-bottom: auto; |
| color: #8fa2b9; |
| } |
|
|
| .protocol-flow li > strong { |
| margin-bottom: 11px; |
| font-size: 24px; |
| } |
|
|
| .candidate-step { |
| border-top-color: var(--mint) !important; |
| } |
|
|
| .platform-step { |
| border-top-color: var(--orange) !important; |
| } |
|
|
| .compact-heading { |
| margin-bottom: 64px; |
| } |
|
|
| .benchmark-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 20px; |
| } |
|
|
| .benchmark-card { |
| position: relative; |
| overflow: hidden; |
| display: flex; |
| flex-direction: column; |
| min-height: 610px; |
| padding: 34px; |
| border: 1px solid var(--ink); |
| border-left: 3px solid var(--mint); |
| border-radius: 10px; |
| background: var(--card); |
| box-shadow: var(--shadow); |
| } |
|
|
| .benchmark-card::after { |
| position: absolute; |
| top: -70px; |
| right: -70px; |
| width: 220px; |
| height: 220px; |
| border: 34px solid rgba(49, 94, 251, 0.08); |
| border-radius: 50%; |
| content: ""; |
| } |
|
|
| .coding-card::after { |
| border-color: rgba(255, 107, 66, 0.1); |
| } |
|
|
| .benchmark-card-head { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| .benchmark-tag { |
| padding: 7px 10px; |
| border: 1px solid currentColor; |
| color: var(--highlight); |
| } |
|
|
| .coding-card .benchmark-tag, |
| .coding-card .benchmark-number { |
| color: var(--orange); |
| } |
|
|
| .benchmark-card h3 { |
| margin: 76px 0 12px; |
| font-size: clamp(30px, 3.2vw, 45px); |
| letter-spacing: -0.045em; |
| } |
|
|
| .benchmark-card > p { |
| max-width: 530px; |
| margin: 0; |
| color: var(--muted); |
| font-size: 15px; |
| } |
|
|
| .benchmark-metrics { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| margin-top: 34px; |
| border-block: 1px solid var(--line); |
| } |
|
|
| .benchmark-metrics > span { |
| display: grid; |
| gap: 5px; |
| padding: 21px 0; |
| } |
|
|
| .benchmark-metrics > span + span { |
| padding-left: 23px; |
| border-left: 1px solid var(--line); |
| } |
|
|
| .benchmark-metrics strong { |
| font-size: 22px; |
| } |
|
|
| .benchmark-metrics small, |
| .coding-types small { |
| color: var(--muted); |
| font: 500 10px/1.4 var(--mono); |
| text-transform: uppercase; |
| } |
|
|
| .dataset-list, |
| .coding-types { |
| margin: 29px 0 0; |
| padding: 0; |
| list-style: none; |
| } |
|
|
| .dataset-list { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .dataset-list li { |
| padding: 7px 9px; |
| border: 1px solid var(--line); |
| background: var(--paper); |
| font: 500 10px/1 var(--mono); |
| } |
|
|
| .coding-types { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 8px; |
| } |
|
|
| .coding-types li { |
| display: grid; |
| grid-template-columns: auto 1fr; |
| gap: 4px 10px; |
| padding: 16px; |
| border: 1px solid var(--line); |
| background: var(--paper); |
| } |
|
|
| .coding-types li > span { |
| grid-row: 1 / 3; |
| color: var(--orange); |
| font: 600 10px/1.4 var(--mono); |
| } |
|
|
| .coding-types strong { |
| font-size: 12px; |
| } |
|
|
| .coding-types small { |
| font-size: 8px; |
| } |
|
|
| .benchmark-card > button { |
| align-self: flex-start; |
| margin-top: auto; |
| padding: 10px 0 5px; |
| border: 0; |
| border-bottom: 1px solid var(--ink); |
| background: transparent; |
| cursor: pointer; |
| font: 600 11px/1 var(--mono); |
| } |
|
|
| .capability-section { |
| padding-block: 110px 118px; |
| border-block: 1px solid var(--line); |
| background: var(--paper-deep); |
| } |
|
|
| .capability-heading { |
| display: grid; |
| grid-template-columns: 1fr 0.72fr; |
| gap: 80px; |
| align-items: end; |
| } |
|
|
| .capability-heading h2 { |
| margin-top: 25px; |
| } |
|
|
| .capability-heading > p { |
| margin: 0; |
| color: var(--muted); |
| font-size: 16px; |
| } |
|
|
| .capability-groups { |
| display: grid; |
| grid-template-columns: 1.18fr 0.91fr 0.91fr; |
| gap: 12px; |
| margin-top: 60px; |
| } |
|
|
| .capability-groups > section { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| overflow: hidden; |
| background: var(--card); |
| } |
|
|
| .capability-groups header { |
| display: grid; |
| grid-template-columns: auto 1fr auto; |
| gap: 12px; |
| align-items: center; |
| padding: 18px; |
| border-bottom: 1px solid var(--line); |
| background: var(--navy-deep); |
| color: var(--white); |
| } |
|
|
| .capability-groups header span, |
| .capability-groups header small, |
| .capability-groups article b { |
| font: 600 10px/1 var(--mono); |
| } |
|
|
| .capability-groups header span { color: var(--mint); } |
| .capability-groups header small { color: #8fa2b9; text-transform: uppercase; } |
|
|
| .capability-groups article { |
| display: grid; |
| grid-template-columns: 44px 1fr; |
| gap: 14px; |
| align-items: center; |
| padding: 17px; |
| } |
|
|
| .capability-groups article + article { |
| border-top: 1px solid var(--line); |
| } |
|
|
| .capability-groups article b { |
| display: grid; |
| place-items: center; |
| width: 38px; |
| height: 38px; |
| border: 1px solid var(--ink); |
| color: var(--blue); |
| background: var(--paper); |
| } |
|
|
| .capability-groups article > span { |
| display: grid; |
| gap: 3px; |
| } |
|
|
| .capability-groups article strong { |
| font-size: 12px; |
| } |
|
|
| .capability-groups article small { |
| color: var(--muted); |
| font-size: 10px; |
| } |
|
|
| .open-contract-section { |
| position: relative; |
| overflow: hidden; |
| padding-block: 112px; |
| color: var(--white); |
| background: var(--navy-deep); |
| } |
|
|
| .open-contract-section::before { |
| position: absolute; |
| inset: 0; |
| background: |
| linear-gradient(rgba(114, 225, 190, 0.045) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(114, 225, 190, 0.045) 1px, transparent 1px); |
| background-size: 48px 48px; |
| content: ""; |
| } |
|
|
| .open-contract-section::after { |
| position: absolute; |
| right: -120px; |
| bottom: -210px; |
| width: 520px; |
| height: 520px; |
| border: 72px solid rgba(127, 168, 255, 0.09); |
| border-radius: 50%; |
| content: ""; |
| } |
|
|
| .open-contract-section > .page-shell { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .open-contract-heading { |
| display: grid; |
| grid-template-columns: 190px minmax(0, 1fr); |
| gap: 46px; |
| align-items: start; |
| } |
|
|
| .open-contract-heading > div { |
| max-width: 850px; |
| } |
|
|
| .repo-lockup { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| color: var(--mint); |
| font: 600 11px/1.4 var(--mono); |
| letter-spacing: 0.08em; |
| } |
|
|
| .open-contract-heading h2 { |
| max-width: 760px; |
| margin: 24px 0 0; |
| font-size: clamp(34px, 4vw, 58px); |
| line-height: 1.08; |
| letter-spacing: -0.045em; |
| } |
|
|
| .open-contract-heading > div > p { |
| max-width: 790px; |
| margin: 28px 0 0; |
| color: #b9c6d6; |
| font-size: 16px; |
| line-height: 1.75; |
| } |
|
|
| .repo-button { |
| display: inline-flex; |
| align-items: center; |
| gap: 16px; |
| min-height: 48px; |
| margin-top: 30px; |
| padding: 12px 18px; |
| border: 1px solid var(--mint); |
| border-radius: 6px; |
| color: var(--ink); |
| background: var(--mint); |
| font-size: 12px; |
| font-weight: 700; |
| transition: transform 160ms ease, box-shadow 160ms ease; |
| } |
|
|
| .repo-button:hover { |
| transform: translate(-2px, -2px); |
| box-shadow: 5px 5px 0 rgba(127, 168, 255, 0.65); |
| } |
|
|
| .open-contract-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 1px; |
| margin-top: 64px; |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| background: rgba(255, 255, 255, 0.18); |
| } |
|
|
| .open-contract-grid article { |
| min-height: 205px; |
| padding: 25px; |
| background: rgba(7, 26, 51, 0.94); |
| } |
|
|
| .open-contract-grid article > span { |
| color: var(--mint); |
| font: 600 10px/1 var(--mono); |
| } |
|
|
| .open-contract-grid strong { |
| display: block; |
| margin-top: 54px; |
| font-size: 17px; |
| } |
|
|
| .open-contract-grid p { |
| margin: 8px 0 0; |
| color: #aebdce; |
| font-size: 12px; |
| line-height: 1.65; |
| } |
|
|
| .divisions-section { |
| padding-bottom: 126px; |
| } |
|
|
| .division-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 16px; |
| } |
|
|
| .division-grid article { |
| min-height: 260px; |
| padding: 30px; |
| border: 1px solid var(--ink); |
| border-radius: 8px; |
| background: var(--card); |
| } |
|
|
| .division-grid article:first-child { |
| box-shadow: inset 3px 0 0 var(--mint); |
| } |
|
|
| .division-grid article:last-child { |
| box-shadow: inset 3px 0 0 var(--blue); |
| } |
|
|
| .division-grid article > span { |
| color: var(--highlight); |
| font: 600 10px/1 var(--mono); |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| } |
|
|
| .division-grid article:last-child > span { color: var(--highlight); } |
|
|
| .division-grid h3 { |
| margin: 80px 0 10px; |
| font-size: 25px; |
| } |
|
|
| .division-grid p { |
| max-width: 510px; |
| margin: 0; |
| color: var(--muted); |
| font-size: 14px; |
| } |
|
|
| .closing-cta { |
| padding-block: 75px; |
| border-top: 1px solid var(--ink); |
| color: var(--white); |
| background: var(--navy-deep); |
| } |
|
|
| .closing-grid { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 40px; |
| } |
|
|
| .closing-grid > div:first-child > p, |
| .closing-grid > div:first-child > span { |
| font: 500 10px/1.5 var(--mono); |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| } |
|
|
| .closing-grid > div:first-child > p { |
| margin: 0 0 13px; |
| color: var(--mint); |
| } |
|
|
| .closing-grid > div:first-child > span { |
| display: block; |
| margin-top: 12px; |
| color: #d5defd; |
| } |
|
|
| .closing-actions { |
| margin-top: 0; |
| } |
|
|
| .button-mint { |
| border-color: var(--mint); |
| color: var(--ink); |
| background: var(--mint); |
| } |
|
|
| .button-ghost { |
| border-color: rgba(255, 255, 255, 0.7); |
| color: var(--white); |
| background: transparent; |
| } |
|
|
| .leaderboard-hero { |
| position: relative; |
| display: grid; |
| grid-template-columns: 1fr 0.78fr; |
| gap: 90px; |
| align-items: end; |
| padding-block: 90px 65px; |
| } |
|
|
| .leaderboard-hero::before { |
| position: absolute; |
| top: 90px; |
| bottom: 65px; |
| left: -18px; |
| width: 3px; |
| background: var(--mint); |
| content: ""; |
| } |
|
|
| .leaderboard-hero h1 { |
| font-size: clamp(48px, 6vw, 76px); |
| } |
|
|
| .leaderboard-intro { |
| padding-bottom: 6px; |
| } |
|
|
| .release-pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 12px; |
| border: 1px solid var(--line); |
| border-radius: 6px; |
| background: var(--card); |
| } |
|
|
| .leaderboard-intro p { |
| margin: 22px 0 0; |
| color: var(--muted); |
| font-size: 16px; |
| } |
|
|
| .leaderboard-workspace { |
| width: min(1760px, calc(100% - 48px)); |
| padding-bottom: 110px; |
| } |
|
|
| .control-row { |
| display: flex; |
| justify-content: space-between; |
| gap: 20px; |
| padding: 14px; |
| border: 1px solid var(--ink); |
| border-left: 3px solid var(--mint); |
| border-radius: 8px; |
| background: var(--card); |
| box-shadow: var(--shadow); |
| } |
|
|
| .segmented-control, |
| .division-control { |
| display: flex; |
| gap: 7px; |
| } |
|
|
| .segmented-control button, |
| .division-control button, |
| .category-tabs button { |
| border: 1px solid transparent; |
| background: transparent; |
| cursor: pointer; |
| } |
|
|
| .segmented-control button { |
| display: inline-flex; |
| align-items: center; |
| gap: 12px; |
| min-height: 45px; |
| padding: 9px 15px; |
| font-size: 12px; |
| font-weight: 700; |
| } |
|
|
| .segmented-control button span { |
| color: var(--blue); |
| font: 600 10px/1 var(--mono); |
| } |
|
|
| .segmented-control button.is-active { |
| color: var(--white); |
| background: var(--ink); |
| } |
|
|
| .segmented-control button.is-active span { color: var(--mint); } |
|
|
| .division-control button { |
| padding: 10px 13px; |
| color: var(--muted); |
| font: 600 10px/1 var(--mono); |
| } |
|
|
| .division-control button.is-active { |
| border-color: var(--ink); |
| color: var(--ink); |
| background: var(--paper); |
| } |
|
|
| .result-note { |
| margin: 10px 0 0; |
| max-width: 58ch; |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.6; |
| } |
|
|
| .category-panel { |
| display: grid; |
| grid-template-columns: 130px 1fr; |
| gap: 20px; |
| align-items: start; |
| padding: 32px 0 25px; |
| } |
|
|
| .category-panel > span { |
| padding-top: 10px; |
| color: var(--muted); |
| } |
|
|
| .category-tabs { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 7px; |
| } |
|
|
| .category-tabs button { |
| padding: 8px 10px; |
| border-color: var(--line); |
| border-radius: 4px; |
| color: var(--muted); |
| background: rgba(255, 254, 249, 0.66); |
| font: 500 10px/1.2 var(--mono); |
| } |
|
|
| .category-tabs button:hover, |
| .category-tabs button.is-active { |
| border-color: var(--highlight); |
| color: var(--highlight); |
| background: #edf2ff; |
| } |
|
|
| .result-panel { |
| border: 1px solid rgba(20, 36, 61, 0.18); |
| border-top-color: rgba(20, 36, 61, 0.34); |
| border-bottom-color: rgba(20, 36, 61, 0.34); |
| border-radius: 8px; |
| overflow: hidden; |
| background: var(--card); |
| } |
|
|
| .result-panel-head { |
| display: flex; |
| justify-content: space-between; |
| gap: 30px; |
| align-items: flex-start; |
| padding: 28px 30px; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .result-panel-head > div > span { |
| color: var(--highlight); |
| } |
|
|
| .result-panel-head h2 { |
| margin: 10px 0 5px; |
| font-size: 29px; |
| letter-spacing: -0.035em; |
| } |
|
|
| .result-panel-head p { |
| margin: 0; |
| color: var(--muted); |
| font-size: 13px; |
| } |
|
|
| .medal-legend { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| gap: 8px; |
| max-width: 390px; |
| color: var(--muted); |
| font: 700 10px/1.2 var(--mono); |
| letter-spacing: 0.055em; |
| text-transform: uppercase; |
| } |
|
|
| .medal-legend span { |
| display: inline-flex; |
| align-items: center; |
| gap: 5px; |
| padding: 6px 8px; |
| border: 1px solid rgba(220, 227, 234, 0.82); |
| border-radius: 999px; |
| background: rgba(255, 255, 255, 0.48); |
| } |
|
|
| .medal-legend b { |
| font-size: 13px; |
| line-height: 1; |
| } |
|
|
| .table-shell { |
| overflow-x: auto; |
| } |
|
|
| .table-scroll-hint { |
| display: none; |
| padding: 9px 18px 0; |
| color: var(--muted); |
| font: 700 10px/1.2 var(--mono); |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| } |
|
|
| .table-header { |
| position: sticky; |
| top: 0; |
| z-index: 20; |
| display: grid; |
| grid-template-columns: 70px 220px repeat(var(--metric-count), minmax(132px, 1fr)); |
| min-width: calc(290px + var(--metric-count) * 168px); |
| border-bottom: 1px solid rgba(220, 227, 234, 0.78); |
| background: rgba(237, 241, 245, 0.82); |
| } |
|
|
| .table-header button.header-link { |
| appearance: none; |
| border: 0; |
| color: inherit; |
| font: 800 10.5px/1.28 var(--mono); |
| letter-spacing: 0.025em; |
| text-transform: uppercase; |
| cursor: pointer; |
| padding: 0; |
| text-align: center; |
| } |
|
|
| .table-header button.header-link:not(:nth-child(-n + 3)) { |
| background: transparent; |
| } |
|
|
| .table-header button.header-link:hover, |
| .table-header button.header-link:focus-visible { |
| color: var(--accent); |
| text-decoration: underline; |
| text-underline-offset: 0.15em; |
| } |
|
|
| .table-header > span, |
| .table-header > button { |
| display: grid; |
| align-items: center; |
| justify-items: center; |
| min-height: 74px; |
| padding: 14px 14px; |
| border-right: 1px solid rgba(220, 227, 234, 0.62); |
| text-align: center; |
| white-space: normal; |
| overflow-wrap: anywhere; |
| word-break: normal; |
| font: 800 10.5px/1.28 var(--mono); |
| letter-spacing: 0.025em; |
| text-transform: uppercase; |
| } |
|
|
| .leaderboard-table { |
| display: grid; |
| min-width: calc(290px + var(--metric-count) * 168px); |
| } |
|
|
| .leaderboard-row { |
| display: grid; |
| grid-template-columns: 70px 220px repeat(var(--metric-count), minmax(132px, 1fr)); |
| align-items: stretch; |
| min-height: 74px; |
| position: relative; |
| border-bottom: 1px solid rgba(220, 227, 234, 0.56); |
| background: transparent; |
| transition: background 160ms ease, box-shadow 160ms ease; |
| } |
|
|
| .leaderboard-row::before { |
| position: absolute; |
| top: 12px; |
| bottom: 12px; |
| left: 0; |
| width: 3px; |
| border-radius: 999px; |
| background: var(--blue); |
| content: ""; |
| opacity: 0; |
| transform: scaleY(0.55); |
| transition: opacity 160ms ease, transform 160ms ease; |
| } |
|
|
| .leaderboard-row:hover { |
| background: rgba(127, 168, 255, 0.07); |
| box-shadow: inset 0 0 0 1px rgba(127, 168, 255, 0.12); |
| } |
|
|
| .leaderboard-row:hover::before { |
| opacity: 1; |
| transform: scaleY(1); |
| } |
|
|
| .leaderboard-row:nth-child(even) { |
| background: transparent; |
| } |
|
|
| .leaderboard-row:nth-child(even):hover { |
| background: rgba(127, 168, 255, 0.07); |
| } |
|
|
| .leaderboard-row > span { |
| display: grid; |
| align-content: center; |
| padding: 15px 16px; |
| border-right: 1px solid rgba(220, 227, 234, 0.62); |
| } |
|
|
| .table-header > :nth-child(-n + 2), |
| .leaderboard-row > span:nth-child(-n + 2) { |
| position: sticky; |
| z-index: 6; |
| background: #fff; |
| } |
|
|
| .table-header > :nth-child(-n + 2) { |
| z-index: 24; |
| background: #eef3f7 !important; |
| } |
|
|
| .table-header > :nth-child(1), |
| .leaderboard-row > span:nth-child(1) { |
| left: 0; |
| } |
|
|
| .table-header > :nth-child(2), |
| .leaderboard-row > span:nth-child(2) { |
| left: 70px; |
| } |
|
|
| .leaderboard-row:hover > span:nth-child(-n + 2), |
| .leaderboard-row:nth-child(even):hover > span:nth-child(-n + 2) { |
| background: rgb(246, 249, 255); |
| } |
|
|
|
|
| .rank-cell { |
| justify-items: center; |
| color: var(--highlight); |
| font: 800 15px/1 var(--mono); |
| letter-spacing: 0.08em; |
| } |
|
|
|
|
| .rank-medal { |
| place-items: center; |
| font-size: 25px; |
| letter-spacing: 0; |
| filter: saturate(0.96); |
| } |
|
|
| .rank-medal-1 { |
| font-size: 27px; |
| filter: saturate(1.18) brightness(1.05); |
| text-shadow: 0 5px 14px rgba(176, 124, 20, 0.28); |
| } |
|
|
| .rank-medal-2, |
| .rank-medal-3 { |
| transform: translateY(1px); |
| } |
|
|
| .leaderboard-row > .system-cell { |
| display: flex; |
| min-width: 0; |
| flex-direction: column; |
| align-items: flex-start; |
| justify-content: center; |
| gap: 6px; |
| } |
|
|
| .system-meta { |
| display: flex; |
| min-width: 0; |
| max-width: 100%; |
| align-items: center; |
| justify-content: flex-start; |
| gap: 6px; |
| } |
|
|
| .system-meta > small { |
| min-width: 0; |
| } |
|
|
| .leaderboard-row > .system-cell strong { |
| display: block; |
| min-width: 0; |
| overflow: hidden; |
| color: var(--ink); |
| font-weight: 500; |
| font-size: 15px; |
| line-height: 1.25; |
| text-align: left; |
| text-decoration: none; |
| text-overflow: ellipsis; |
| } |
|
|
| .github-icon-link { |
| display: inline-flex; |
| flex: 0 0 auto; |
| width: 18px; |
| height: 18px; |
| align-items: center; |
| justify-content: center; |
| color: rgba(31, 42, 55, 0.58); |
| transition: color 140ms ease, transform 140ms ease; |
| } |
|
|
| .github-icon-link svg { |
| display: block; |
| width: 14px; |
| height: 14px; |
| fill: currentColor; |
| } |
|
|
| .github-icon-link:hover, |
| .github-icon-link:focus-visible { |
| color: var(--ink); |
| transform: translateY(-1px); |
| } |
|
|
| .is-podium-row > .system-cell strong { |
| color: var(--navy-deep); |
| font-weight: 800; |
| } |
|
|
| .leaderboard-row > .system-cell small { |
| overflow: hidden; |
| color: var(--muted); |
| font: 600 10px/1.3 var(--mono); |
| letter-spacing: 0.02em; |
| text-overflow: ellipsis; |
| text-transform: uppercase; |
| white-space: nowrap; |
| } |
|
|
| .system-cate { |
| max-width: 100%; |
| overflow: hidden; |
| border: 1px solid rgba(31, 42, 55, 0.12); |
| border-radius: 999px; |
| background: rgba(245, 247, 250, 0.92); |
| padding: 3px 7px; |
| cursor: help; |
| outline: none; |
| } |
|
|
|
|
| .system-version { |
| max-width: clamp(64px, 8.5vw, 132px); |
| overflow: hidden; |
| border: 1px solid rgba(38, 97, 156, 0.15); |
| border-radius: 999px; |
| background: linear-gradient(135deg, rgba(237, 246, 255, 0.98), rgba(248, 251, 255, 0.96)); |
| color: #315a80 !important; |
| padding: 3px 7px; |
| cursor: help; |
| outline: none; |
| text-overflow: ellipsis; |
| text-transform: none !important; |
| } |
|
|
| .badge-floating-tooltip { |
| position: fixed; |
| z-index: 1000; |
| max-width: min(320px, 72vw); |
| padding: 8px 10px; |
| border: 1px solid rgba(38, 97, 156, 0.16); |
| border-radius: 10px; |
| background: rgba(255, 255, 255, 0.98); |
| box-shadow: 0 14px 30px rgba(20, 39, 77, 0.16); |
| color: var(--ink); |
| font: 600 12px/1.35 var(--sans); |
| pointer-events: none; |
| white-space: normal; |
| } |
|
|
| .score-cell { |
| justify-items: center; |
| text-align: center; |
| color: var(--ink-soft); |
| font: 650 15px/1 var(--mono); |
| } |
|
|
| .text-cell { |
| justify-items: center; |
| text-align: center; |
| color: var(--ink); |
| font: 650 12px/1.25 var(--mono); |
| letter-spacing: 0.01em; |
| } |
|
|
| .score-value { |
| display: inline-grid; |
| place-items: center; |
| min-width: 52px; |
| min-height: 30px; |
| border-radius: 999px; |
| font-weight: 650; |
| } |
|
|
| .score-rank-1 { |
| color: #4f3100; |
| background: linear-gradient(135deg, rgba(255, 210, 64, 0.9), rgba(255, 246, 184, 0.58)); |
| box-shadow: 0 0 0 1px rgba(176, 124, 20, 0.34), 0 9px 20px rgba(176, 124, 20, 0.18); |
| font-weight: 900; |
| } |
|
|
| .score-rank-2 { |
| color: #263852; |
| background: linear-gradient(135deg, rgba(194, 207, 226, 0.92), rgba(241, 245, 249, 0.62)); |
| box-shadow: 0 0 0 1px rgba(92, 108, 132, 0.32), 0 7px 16px rgba(92, 108, 132, 0.12); |
| font-weight: 900; |
| } |
|
|
| .score-rank-3 { |
| color: var(--ink-soft); |
| background: linear-gradient(135deg, rgba(190, 126, 78, 0.22), rgba(246, 214, 188, 0.14)); |
| box-shadow: 0 0 0 1px rgba(150, 84, 39, 0.08); |
| font-weight: 800; |
| } |
|
|
| .speed-cell { |
| font-size: 13px; |
| } |
|
|
| .speed-inline { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| min-height: 26px; |
| padding: 0; |
| color: #111827; |
| font-weight: 720; |
| letter-spacing: 0.01em; |
| } |
|
|
| .speed-inline span:last-child { |
| color: #111827; |
| } |
|
|
| .speed-divider { |
| display: inline-block; |
| width: 4px; |
| height: 19px; |
| overflow: hidden; |
| flex: 0 0 4px; |
| border-radius: 3px; |
| background: var(--speed-accent); |
| color: transparent; |
| opacity: 0.92; |
| font-size: 0; |
| line-height: 0; |
| } |
|
|
| .speed-value { |
| --speed-accent: var(--muted); |
| --speed-bg: rgba(101, 116, 139, 0.08); |
| --speed-border: rgba(101, 116, 139, 0.18); |
| --speed-gap: 5px; |
| --speed-pad: 11px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: var(--speed-gap); |
| min-width: 82px; |
| min-height: 26px; |
| padding: 0 var(--speed-pad); |
| border: 1px solid var(--speed-border); |
| border-radius: 999px; |
| color: var(--speed-accent); |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), var(--speed-bg)); |
| box-shadow: inset 0 -1px 0 rgba(20, 36, 61, 0.04); |
| font-weight: 760; |
| letter-spacing: 0.01em; |
| } |
|
|
| .speed-value::before { |
| display: none; |
| } |
|
|
| .volume-cell .speed-value { |
| min-width: 92px; |
| } |
|
|
| .volume-value { |
| min-width: 92px; |
| } |
|
|
| .speed-fast { |
| --speed-accent: #237a47; |
| --speed-bg: rgba(53, 164, 96, 0.13); |
| --speed-border: rgba(42, 135, 78, 0.22); |
| } |
|
|
| .speed-medium { |
| --speed-accent: #9a6a00; |
| --speed-bg: rgba(232, 178, 56, 0.16); |
| --speed-border: rgba(180, 126, 17, 0.22); |
| } |
|
|
| .speed-slow { |
| --speed-accent: #a34242; |
| --speed-bg: rgba(203, 88, 88, 0.12); |
| --speed-border: rgba(165, 67, 67, 0.2); |
| } |
|
|
| .volume-compact { |
| --speed-accent: #237a47; |
| --speed-bg: rgba(53, 164, 96, 0.12); |
| --speed-border: rgba(42, 135, 78, 0.2); |
| } |
|
|
| .volume-balanced { |
| --speed-accent: #8a650d; |
| --speed-bg: rgba(232, 178, 56, 0.14); |
| --speed-border: rgba(180, 126, 17, 0.2); |
| } |
|
|
| .volume-verbose { |
| --speed-accent: #9b3f3f; |
| --speed-bg: rgba(203, 88, 88, 0.11); |
| --speed-border: rgba(165, 67, 67, 0.19); |
| } |
|
|
| .speed-unknown { |
| --speed-accent: var(--muted); |
| --speed-bg: rgba(101, 116, 139, 0.06); |
| --speed-border: rgba(101, 116, 139, 0.14); |
| } |
|
|
| .empty-state { |
| display: grid; |
| justify-items: center; |
| min-width: 820px; |
| min-height: 450px; |
| padding: 70px 24px; |
| text-align: center; |
| } |
|
|
| .coding-coming-soon { |
| min-width: 0; |
| width: 100%; |
| } |
|
|
| .empty-orbit { |
| position: relative; |
| display: grid; |
| place-items: center; |
| width: 100px; |
| height: 100px; |
| margin-bottom: 28px; |
| border: 1px solid var(--line); |
| border-radius: 50%; |
| } |
|
|
| .empty-orbit::before, |
| .empty-orbit::after { |
| position: absolute; |
| border: 1px solid var(--line); |
| border-radius: 50%; |
| content: ""; |
| } |
|
|
| .empty-orbit::before { width: 68px; height: 68px; } |
| .empty-orbit::after { width: 36px; height: 36px; background: var(--ink); } |
|
|
| .empty-orbit span { |
| position: absolute; |
| top: 11px; |
| right: 9px; |
| z-index: 2; |
| width: 11px; |
| height: 11px; |
| border-radius: 50%; |
| background: var(--mint); |
| box-shadow: 0 0 0 4px var(--white); |
| } |
|
|
| .empty-orbit i { |
| position: absolute; |
| z-index: 3; |
| width: 5px; |
| height: 5px; |
| border-radius: 50%; |
| background: var(--orange); |
| } |
|
|
| .empty-state > span { |
| color: var(--highlight); |
| font: 600 10px/1 var(--mono); |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| } |
|
|
| .empty-state h3 { |
| margin: 13px 0 8px; |
| font-size: clamp(31px, 4vw, 48px); |
| letter-spacing: -0.04em; |
| } |
|
|
| .empty-state p { |
| margin: 0; |
| color: var(--muted); |
| } |
|
|
| .empty-state a { |
| margin-top: 24px; |
| padding-bottom: 3px; |
| border-bottom: 1px solid var(--ink); |
| font: 600 11px/1.4 var(--mono); |
| } |
|
|
| .commercial-ack { |
| display: grid; |
| grid-template-columns: minmax(250px, 0.58fr) 1.42fr; |
| gap: 28px; |
| align-items: center; |
| margin: 22px 0 0; |
| padding: 24px; |
| border: 1px solid rgba(20, 36, 61, 0.14); |
| border-radius: 14px; |
| background: |
| radial-gradient(circle at 8% 18%, rgba(69, 121, 184, 0.10), transparent 32%), |
| linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 252, 0.94)); |
| box-shadow: 0 18px 38px rgba(20, 39, 77, 0.07); |
| } |
|
|
| .commercial-ack[hidden] { |
| display: none; |
| } |
|
|
| .commercial-ack-copy > span { |
| color: var(--highlight); |
| font: 850 18px/1.15 var(--mono); |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .commercial-ack-copy h3 { |
| margin: 9px 0 0; |
| max-width: 42ch; |
| color: var(--navy-deep); |
| font-size: 12px; |
| line-height: 1.55; |
| letter-spacing: 0; |
| } |
|
|
| .commercial-logo-marquee { |
| position: relative; |
| overflow: hidden; |
| padding: 4px 0; |
| mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); |
| } |
|
|
| .commercial-logo-track { |
| display: flex; |
| width: max-content; |
| gap: 12px; |
| animation: logoMarquee 28s linear infinite; |
| } |
|
|
| .commercial-logo-marquee:hover .commercial-logo-track { |
| animation-play-state: paused; |
| } |
|
|
| .logo-tile { |
| display: grid; |
| width: 178px; |
| height: 70px; |
| flex: 0 0 auto; |
| place-items: center; |
| overflow: hidden; |
| border: 1px solid rgba(20, 36, 61, 0.10); |
| border-radius: 14px; |
| background: #fff; |
| box-shadow: 0 8px 20px rgba(20, 39, 77, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.86); |
| } |
|
|
| .logo-tile img { |
| display: block; |
| width: auto; |
| height: auto; |
| max-width: 82%; |
| max-height: 46px; |
| object-fit: contain; |
| } |
|
|
| .logo-tile-memorax img { |
| max-width: 70%; |
| max-height: 42px; |
| } |
|
|
| .logo-tile-mempalace img { |
| max-width: 92%; |
| max-height: 49px; |
| } |
|
|
| .logo-tile-dongjian img { |
| max-width: 66%; |
| max-height: 38px; |
| } |
|
|
| .logo-tile-memtensor img { |
| max-width: 108%; |
| max-height: 56px; |
| } |
|
|
| .logo-tile-supermemory img { |
| max-width: 108%; |
| max-height: 54px; |
| } |
|
|
| .logo-tile-text { |
| color: #c81e1e; |
| font: 850 19px/1 var(--sans); |
| letter-spacing: -0.03em; |
| } |
|
|
| @keyframes logoMarquee { |
| from { transform: translateX(0); } |
| to { transform: translateX(calc(-50% - 6px)); } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .commercial-logo-track { animation: none; flex-wrap: wrap; width: auto; } |
| .commercial-logo-track [aria-hidden="true"] { display: none; } |
| } |
|
|
| .ranking-notes { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 1px; |
| margin-top: 28px; |
| border: 1px solid var(--line); |
| background: var(--line); |
| } |
|
|
| .ranking-notes article { |
| padding: 22px; |
| background: var(--card); |
| } |
|
|
| .ranking-notes article > span { |
| color: var(--highlight); |
| font: 600 10px/1 var(--mono); |
| } |
|
|
| .ranking-notes strong { |
| display: block; |
| margin-top: 29px; |
| font-size: 13px; |
| } |
|
|
| .ranking-notes p { |
| margin: 7px 0 0; |
| color: var(--muted); |
| font-size: 11px; |
| } |
|
|
| .leaderboard-footer-cta { |
| padding-block: 32px; |
| border-block: 1px solid var(--line); |
| border-top: 3px solid var(--mint); |
| background: var(--card); |
| } |
|
|
| .leaderboard-footer-cta > div { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 20px; |
| font-weight: 700; |
| } |
|
|
| .leaderboard-footer-cta > div > div { |
| display: flex; |
| gap: 22px; |
| font: 600 10px/1 var(--mono); |
| text-transform: uppercase; |
| } |
|
|
| .site-footer { |
| padding-block: 35px; |
| color: var(--white); |
| background: var(--navy-deep); |
| } |
|
|
| .footer-grid { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 30px; |
| } |
|
|
| .footer-brand img { |
| width: 56px; |
| height: 56px; |
| object-fit: contain; |
| border-radius: 8px; |
| background: var(--white); |
| } |
|
|
| .footer-brand small { color: #8fa2b9; } |
|
|
| .footer-links { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 24px; |
| color: #b9c6d6; |
| font: 500 10px/1 var(--mono); |
| text-transform: uppercase; |
| } |
|
|
| .footer-links a:hover { color: var(--mint); } |
|
|
| .reveal { |
| animation: reveal-in 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both; |
| } |
|
|
| .reveal-delay-1 { animation-delay: 100ms; } |
|
|
| @keyframes reveal-in { |
| from { opacity: 0; transform: translateY(18px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| @media (max-width: 980px) { |
| .site-header { |
| grid-template-columns: 1fr auto; |
| } |
|
|
| .primary-nav { |
| order: 3; |
| grid-column: 1 / -1; |
| justify-content: center; |
| min-height: 43px; |
| margin: 8px -28px -10px; |
| border-top: 1px solid var(--line); |
| } |
|
|
| .nav-link::after { bottom: -9px; } |
| .rules-link { display: none; } |
|
|
| .hero, |
| .leaderboard-hero, |
| .protocol-grid, |
| .capability-heading, |
| .open-contract-heading { |
| grid-template-columns: 1fr; |
| } |
|
|
| .hero { |
| gap: 56px; |
| padding-top: 68px; |
| } |
|
|
| .challenge-card { max-width: 660px; } |
| .protocol-grid { gap: 55px; } |
| .capability-heading { gap: 26px; } |
| .capability-groups { grid-template-columns: 1fr; } |
| .open-contract-heading { gap: 28px; } |
| .open-contract-grid { grid-template-columns: repeat(2, 1fr); } |
| .leaderboard-hero { gap: 36px; } |
| } |
|
|
| @media (max-width: 760px) { |
| .page-shell { width: min(100% - 30px, 1180px); } |
| .site-header { padding-inline: 15px; } |
| .primary-nav { margin-inline: -15px; } |
| .header-cta { padding: 9px 10px; font-size: 0; } |
| .header-cta span { font-size: 14px; } |
| .header-github { |
| justify-content: center; |
| width: 42px; |
| min-height: 42px; |
| padding: 0; |
| } |
| .header-github span { display: none; } |
|
|
| .hero { |
| min-height: auto; |
| padding-block: 58px 68px; |
| } |
|
|
| .hero h1 { font-size: clamp(34px, 9vw, 46px); } |
| .leaderboard-hero h1 { font-size: clamp(40px, 12vw, 62px); } |
| .hero-lede { font-size: 15px; } |
| .hero-actions { display: grid; } |
| .button { width: 100%; } |
|
|
| .challenge-card { |
| min-height: 430px; |
| padding: 22px; |
| box-shadow: 7px 7px 0 var(--mint); |
| } |
|
|
| .challenge-title { margin-top: 64px; } |
| .countdown { gap: 5px; } |
| .countdown > span { min-width: 48px; } |
| .countdown b { font-size: 23px; } |
|
|
| .signal-grid { grid-template-columns: repeat(2, 1fr); } |
| .signal-grid > span { border-bottom: 1px solid var(--line); } |
| .signal-grid > span:nth-child(odd) { border-left: 1px solid var(--line); } |
|
|
| .section { padding-block: 82px; } |
| .section-heading { grid-template-columns: 1fr; gap: 25px; } |
| .section-heading h2, |
| .protocol-grid h2, |
| .capability-heading h2, |
| .closing-grid h2 { font-size: clamp(31px, 9vw, 46px); } |
| .section-heading > div > p { font-size: 15px; } |
|
|
| .principle-grid, |
| .benchmark-grid, |
| .division-grid, |
| .ranking-notes { |
| grid-template-columns: 1fr; |
| } |
|
|
| .principle-grid article { min-height: 220px; } |
| .protocol-section { padding-block: 84px; } |
| .protocol-flow { grid-template-columns: repeat(2, 1fr); } |
| .protocol-flow li { min-height: 190px; } |
| .protocol-flow li:nth-child(2)::after { display: none; } |
|
|
| .benchmark-card { min-height: 580px; padding: 26px; } |
| .benchmark-card h3 { margin-top: 62px; } |
| .coding-types { grid-template-columns: 1fr; } |
| .capability-section { padding-block: 80px; } |
| .capability-groups { margin-top: 40px; } |
| .open-contract-section { padding-block: 82px; } |
| .open-contract-heading h2 { font-size: clamp(31px, 9vw, 46px); } |
| .open-contract-heading > div > p { font-size: 15px; } |
| .open-contract-grid { grid-template-columns: 1fr; margin-top: 46px; } |
| .open-contract-grid article { min-height: 170px; } |
| .open-contract-grid strong { margin-top: 40px; } |
| .compact-heading { margin-bottom: 44px; } |
| .closing-grid, |
| .footer-grid, |
| .leaderboard-footer-cta > div { |
| flex-direction: column; |
| align-items: flex-start; |
| } |
|
|
| .closing-actions { width: 100%; } |
| .leaderboard-hero { padding-block: 65px 46px; } |
| .control-row { flex-direction: column; } |
| .segmented-control, |
| .division-control { display: grid; grid-template-columns: repeat(2, 1fr); } |
| .commercial-ack { grid-template-columns: 1fr; padding: 18px; } |
| .logo-tile { width: 150px; height: 62px; } |
| .category-panel { grid-template-columns: 1fr; gap: 10px; } |
| .category-panel > span { padding-top: 0; } |
| .result-panel-head { flex-direction: column; } |
| .table-scroll-hint { display: block; } |
| .ranking-notes { gap: 0; } |
| .leaderboard-footer-cta > div > div { flex-wrap: wrap; } |
| .footer-links { gap: 17px; } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, |
| *::before, |
| *::after { |
| scroll-behavior: auto !important; |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| } |
| } |
|
|
