| .page { |
| --shell-gutter: 56px; |
| min-height: 100vh; |
| width: 100%; |
| max-width: 100%; |
| overflow-x: hidden; |
| padding: 36px clamp(16px, 2.8vw, 28px) 72px; |
| } |
|
|
| .shell { |
| width: 100%; |
| max-width: min(920px, calc(100vw - var(--shell-gutter))); |
| margin: 0 auto; |
| display: grid; |
| gap: 28px; |
| min-width: 0; |
| } |
|
|
| .hero { |
| width: 100%; |
| display: grid; |
| gap: 18px; |
| max-width: 920px; |
| min-width: 0; |
| } |
|
|
| .partnerRail { |
| display: grid; |
| gap: 0; |
| width: 100%; |
| padding: 18px; |
| border: 1px solid var(--border); |
| background: rgba(255, 255, 255, 0.02); |
| min-width: 0; |
| } |
|
|
| .partnerGrid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
| gap: 0; |
| align-items: center; |
| } |
|
|
| .partnerCard { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| min-height: 110px; |
| padding: 0 10px; |
| min-width: 0; |
| } |
|
|
| .partnerMarkSurface { |
| width: 100%; |
| min-height: 92px; |
| padding: 6px 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| min-width: 0; |
| } |
|
|
| .openaiWordmark { |
| width: min(198px, 100%); |
| height: auto; |
| display: block; |
| } |
|
|
| .hfPirateLogo { |
| width: min(70px, 100%); |
| height: auto; |
| display: block; |
| } |
|
|
| .gpuModeLogo { |
| width: min(168px, 100%); |
| height: auto; |
| display: block; |
| } |
|
|
| .executorchLogo { |
| width: min(72px, 100%); |
| height: auto; |
| display: block; |
| } |
|
|
| .title { |
| font-size: clamp(2.3rem, 7vw, 4.6rem); |
| line-height: 0.95; |
| letter-spacing: -0.05em; |
| text-transform: uppercase; |
| } |
|
|
| .subtitle { |
| width: 100%; |
| max-width: min(760px, 100%); |
| font-size: 1rem; |
| line-height: 1.7; |
| color: #c6c6c6; |
| } |
|
|
| .heroMeta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| width: 100%; |
| max-width: 100%; |
| } |
|
|
| .heroMeta span { |
| max-width: 100%; |
| border: 1px solid var(--border); |
| background: rgba(255, 255, 255, 0.03); |
| padding: 10px 12px; |
| font-size: 0.76rem; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .grid { |
| display: grid; |
| width: 100%; |
| max-width: 100%; |
| grid-template-columns: 1fr; |
| gap: 20px; |
| align-items: start; |
| } |
|
|
| .panel { |
| border: 1px solid var(--border); |
| background: linear-gradient(180deg, rgba(20, 20, 20, 0.96), rgba(8, 8, 8, 0.96)); |
| box-shadow: 0 28px 70px var(--shadow); |
| padding: 24px; |
| display: grid; |
| align-content: start; |
| gap: 18px; |
| min-width: 0; |
| } |
|
|
| .registrationPanel { |
| order: 1; |
| } |
|
|
| .challengePanel { |
| order: 2; |
| } |
|
|
| .panelLabel { |
| font-size: 0.74rem; |
| letter-spacing: 0.18em; |
| text-transform: uppercase; |
| color: var(--muted); |
| } |
|
|
| .panelTitle { |
| font-size: clamp(1.35rem, 3vw, 2rem); |
| line-height: 1.05; |
| } |
|
|
| .panelCopy { |
| color: #d0d0d0; |
| line-height: 1.7; |
| } |
|
|
| .list { |
| display: grid; |
| gap: 12px; |
| padding-left: 18px; |
| color: #d0d0d0; |
| line-height: 1.7; |
| } |
|
|
| .noteBlock { |
| border: 1px solid var(--border); |
| background: rgba(255, 255, 255, 0.03); |
| padding: 16px; |
| display: grid; |
| gap: 8px; |
| } |
|
|
| .noteTitle { |
| font-size: 0.76rem; |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| color: var(--muted); |
| } |
|
|
| .noteBody { |
| font-size: 1rem; |
| } |
|
|
| .noteFoot { |
| color: var(--muted); |
| font-size: 0.86rem; |
| line-height: 1.6; |
| } |
|
|
| .profileCard { |
| display: flex; |
| gap: 16px; |
| align-items: center; |
| border: 1px solid var(--border); |
| background: rgba(255, 255, 255, 0.03); |
| padding: 18px; |
| } |
|
|
| .avatar { |
| width: 72px; |
| height: 72px; |
| object-fit: cover; |
| border: 1px solid var(--border); |
| background: #111111; |
| } |
|
|
| .profileCopy { |
| display: grid; |
| gap: 6px; |
| } |
|
|
| .profileName { |
| font-size: 1.1rem; |
| } |
|
|
| .profileMeta { |
| color: var(--muted); |
| font-size: 0.9rem; |
| } |
|
|
| .inlineLink { |
| width: fit-content; |
| color: #ffffff; |
| text-decoration: underline; |
| text-underline-offset: 3px; |
| font-size: 0.86rem; |
| } |
|
|
| .detailGrid { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .detailRow { |
| display: grid; |
| gap: 6px; |
| border: 1px solid var(--border); |
| background: rgba(255, 255, 255, 0.02); |
| padding: 14px 16px; |
| } |
|
|
| .detailLabel { |
| font-size: 0.74rem; |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| color: var(--muted); |
| } |
|
|
| .detailValue { |
| line-height: 1.55; |
| word-break: break-word; |
| } |
|
|
| .actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| align-items: center; |
| } |
|
|
| .primaryButton, |
| .secondaryButton { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| min-height: 50px; |
| padding: 0 18px; |
| border: 1px solid var(--border); |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| font-size: 0.76rem; |
| transition: |
| background 0.18s ease, |
| color 0.18s ease, |
| border-color 0.18s ease, |
| transform 0.18s ease; |
| } |
|
|
| .primaryButton { |
| background: #ffffff; |
| color: #000000; |
| } |
|
|
| .primaryButton:disabled { |
| opacity: 0.6; |
| cursor: wait; |
| } |
|
|
| .secondaryButton { |
| background: transparent; |
| color: #ffffff; |
| } |
|
|
| .successBadge { |
| display: inline-flex; |
| align-items: center; |
| min-height: 44px; |
| padding: 0 14px; |
| border: 1px solid rgba(255, 255, 255, 0.35); |
| background: rgba(255, 255, 255, 0.08); |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| font-size: 0.72rem; |
| } |
|
|
| .status { |
| border: 1px solid var(--border); |
| background: rgba(255, 255, 255, 0.03); |
| padding: 14px 16px; |
| line-height: 1.6; |
| color: #d8d8d8; |
| } |
|
|
| .statusInfo { |
| border-color: rgba(255, 255, 255, 0.22); |
| } |
|
|
| .statusSuccess { |
| border-color: rgba(255, 255, 255, 0.42); |
| color: #ffffff; |
| } |
|
|
| .statusError { |
| border-color: rgba(255, 255, 255, 0.42); |
| background: rgba(255, 255, 255, 0.08); |
| } |
|
|
| @media (hover: hover) and (pointer: fine) { |
| .primaryButton:hover, |
| .secondaryButton:hover { |
| transform: translateY(-1px); |
| } |
|
|
| .primaryButton:hover { |
| background: transparent; |
| color: #ffffff; |
| } |
|
|
| .secondaryButton:hover { |
| background: rgba(255, 255, 255, 0.08); |
| } |
| } |
|
|
| @media (max-width: 720px) { |
| .page { |
| --shell-gutter: 28px; |
| padding: 24px 14px 40px; |
| } |
|
|
| .heroMeta span { |
| width: 100%; |
| } |
|
|
| .panel { |
| padding: 18px; |
| } |
|
|
| .partnerRail { |
| padding: 16px; |
| } |
|
|
| .partnerMarkSurface { |
| min-height: 72px; |
| } |
|
|
| .openaiWordmark { |
| width: min(176px, 100%); |
| } |
|
|
| .gpuModeLogo { |
| width: min(160px, 100%); |
| } |
|
|
| .executorchLogo { |
| width: 68px; |
| } |
|
|
| .profileCard { |
| align-items: flex-start; |
| } |
|
|
| .actions { |
| flex-direction: column; |
| align-items: stretch; |
| } |
|
|
| .primaryButton, |
| .secondaryButton, |
| .successBadge { |
| width: 100%; |
| } |
| } |
|
|
