mirror of
https://gitee.com/zhangsken/opencode.git
synced 2026-10-16 10:30:01 +08:00
Jack
1553 lines
34 KiB
CSS
1553 lines
34 KiB
CSS
::selection {
|
|
background: var(--color-background-interactive);
|
|
color: var(--color-text-strong);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background: var(--color-background-interactive);
|
|
color: var(--color-text-inverted);
|
|
}
|
|
}
|
|
|
|
@keyframes go-graph-line {
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes go-graph-point {
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes go-graph-reveal {
|
|
to {
|
|
clip-path: inset(0 0 0 0) fill-box;
|
|
}
|
|
}
|
|
|
|
@keyframes go-graph-label {
|
|
to {
|
|
mask-position: 0 0;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes go-graph-grid {
|
|
to {
|
|
mask-position: 0 100%;
|
|
}
|
|
}
|
|
|
|
[data-page="go"] {
|
|
--color-background: hsl(0, 20%, 99%);
|
|
--color-background-weak: hsl(0, 8%, 97%);
|
|
--color-background-strong: hsl(0, 5%, 12%);
|
|
--color-background-strong-hover: hsl(0, 5%, 18%);
|
|
--color-background-interactive: hsl(62, 84%, 88%);
|
|
--color-background-interactive-weaker: hsl(64, 74%, 95%);
|
|
|
|
--color-go-1: hsl(61.9, 82.6%, 77.5%);
|
|
--color-go-2: hsl(62.4, 78.6%, 56.1%);
|
|
--color-go-3: hsl(62.1, 100%, 39.8%);
|
|
|
|
--color-text: hsl(0, 1%, 39%);
|
|
--color-text-weak: hsl(0, 1%, 74%);
|
|
--color-text-weaker: hsl(30, 2%, 81%);
|
|
--color-text-strong: hsl(0, 5%, 12%);
|
|
--color-text-inverted: hsl(0, 20%, 99%);
|
|
|
|
--color-border: hsl(30, 2%, 81%);
|
|
--color-border-weak: hsl(0, 1%, 85%);
|
|
|
|
--color-icon: hsl(0, 1%, 55%);
|
|
}
|
|
|
|
[data-page="go"] {
|
|
@media (prefers-color-scheme: dark) {
|
|
--color-background: hsl(0, 9%, 7%);
|
|
--color-background-weak: hsl(0, 6%, 10%);
|
|
--color-background-strong: hsl(0, 15%, 94%);
|
|
--color-background-strong-hover: hsl(0, 15%, 97%);
|
|
--color-background-interactive: hsl(62, 100%, 90%);
|
|
--color-background-interactive-weaker: hsl(60, 20%, 8%);
|
|
|
|
--color-go-1: hsl(62.1, 64.9%, 25.7%);
|
|
--color-go-2: hsl(61.7, 46.4%, 53.9%);
|
|
--color-go-3: hsl(61.9, 100%, 50%);
|
|
|
|
--color-text: hsl(0, 4%, 71%);
|
|
--color-text-weak: hsl(0, 2%, 49%);
|
|
--color-text-weaker: hsl(0, 3%, 28%);
|
|
--color-text-strong: hsl(0, 15%, 94%);
|
|
--color-text-inverted: hsl(0, 9%, 7%);
|
|
|
|
--color-border: hsl(0, 3%, 28%);
|
|
--color-border-weak: hsl(0, 4%, 23%);
|
|
|
|
--color-icon: hsl(10, 3%, 43%);
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: var(--color-background);
|
|
}
|
|
|
|
@supports (background: -webkit-named-image(i)) {
|
|
[data-page="opencode"] {
|
|
border-top: 1px solid var(--color-border-weak);
|
|
}
|
|
}
|
|
|
|
[data-page="go"] {
|
|
background: var(--color-background);
|
|
overflow-x: clip;
|
|
--padding: 5rem;
|
|
--vertical-padding: 4rem;
|
|
|
|
@media (max-width: 60rem) {
|
|
--padding: 1.5rem;
|
|
--vertical-padding: 3rem;
|
|
}
|
|
|
|
display: flex;
|
|
gap: var(--vertical-padding);
|
|
flex-direction: column;
|
|
font-family: var(--font-mono);
|
|
color: var(--color-text);
|
|
padding-bottom: 5rem;
|
|
|
|
a {
|
|
color: var(--color-text-strong);
|
|
text-decoration: underline;
|
|
text-underline-offset: var(--space-1);
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
|
|
p {
|
|
line-height: 200%;
|
|
|
|
@media (max-width: 60rem) {
|
|
line-height: 180%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 60rem) {
|
|
font-size: 15px;
|
|
}
|
|
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
input:-webkit-autofill:active {
|
|
transition: background-color 5000000s ease-in-out 0s;
|
|
}
|
|
|
|
input:-webkit-autofill {
|
|
-webkit-text-fill-color: var(--color-text-strong) !important;
|
|
}
|
|
|
|
input:-moz-autofill {
|
|
-moz-text-fill-color: var(--color-text-strong) !important;
|
|
}
|
|
|
|
[data-component="container"] {
|
|
max-width: 67.5rem;
|
|
margin: 0 auto;
|
|
border: 1px solid var(--color-border-weak);
|
|
border-top: none;
|
|
|
|
@media (max-width: 65rem) {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
[data-component="content"] {
|
|
}
|
|
|
|
[data-component="top"] {
|
|
padding: 24px var(--padding);
|
|
height: 80px;
|
|
position: sticky;
|
|
top: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: var(--color-background);
|
|
border-bottom: 1px solid var(--color-border-weak);
|
|
|
|
z-index: 10;
|
|
|
|
img {
|
|
height: 34px;
|
|
width: auto;
|
|
}
|
|
|
|
[data-component="nav-desktop"] {
|
|
ul {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 32px;
|
|
|
|
@media (max-width: 55rem) {
|
|
gap: 24px;
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
gap: 24px;
|
|
}
|
|
li {
|
|
display: inline-block;
|
|
a {
|
|
text-decoration: none;
|
|
span {
|
|
color: var(--color-text-weak);
|
|
}
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: var(--space-1);
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
[data-slot="cta-button"] {
|
|
background: var(--color-background-strong);
|
|
color: var(--color-text-inverted);
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
|
|
@media (max-width: 55rem) {
|
|
display: none;
|
|
}
|
|
}
|
|
[data-slot="cta-button"]:hover {
|
|
background: var(--color-background-strong-hover);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-component="nav-mobile"] {
|
|
button > svg {
|
|
color: var(--color-icon);
|
|
}
|
|
}
|
|
|
|
[data-component="nav-mobile-toggle"] {
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
height: 40px;
|
|
width: 40px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-component="nav-mobile-toggle"]:hover {
|
|
background: var(--color-background-weak);
|
|
}
|
|
|
|
[data-component="nav-mobile"] {
|
|
display: none;
|
|
|
|
@media (max-width: 40rem) {
|
|
display: block;
|
|
|
|
[data-component="nav-mobile-icon"] {
|
|
cursor: pointer;
|
|
height: 40px;
|
|
width: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
[data-component="nav-mobile-menu-list"] {
|
|
position: fixed;
|
|
background: var(--color-background);
|
|
top: 80px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100vh;
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 20px 0;
|
|
|
|
li {
|
|
a {
|
|
text-decoration: none;
|
|
padding: 20px;
|
|
display: block;
|
|
|
|
span {
|
|
color: var(--color-text-weak);
|
|
}
|
|
}
|
|
|
|
a:hover {
|
|
background: var(--color-background-weak);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-slot="logo dark"] {
|
|
display: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
[data-slot="logo light"] {
|
|
display: none;
|
|
}
|
|
[data-slot="logo dark"] {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-component="hero"] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: calc(var(--vertical-padding) * 1.5) var(--padding);
|
|
|
|
[data-slot="zen logo dark"] {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 30rem) {
|
|
padding: var(--vertical-padding) var(--padding);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
[data-slot="zen logo light"] {
|
|
display: none;
|
|
}
|
|
[data-slot="zen logo dark"] {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-component="desktop-app-banner"] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 32px;
|
|
|
|
[data-slot="badge"] {
|
|
background: var(--color-background-strong);
|
|
color: var(--color-text-inverted);
|
|
font-weight: 500;
|
|
padding: 4px 8px;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-slot="content"] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1ch;
|
|
}
|
|
|
|
[data-slot="text"] {
|
|
color: var(--color-text-strong);
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
[data-slot="hero-copy"] {
|
|
img {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 28px;
|
|
color: var(--color-text-strong);
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
display: block;
|
|
|
|
@media (max-width: 60rem) {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
color: var(--color-text);
|
|
margin-bottom: 24px;
|
|
max-width: 82%;
|
|
|
|
@media (max-width: 50rem) {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
a {
|
|
background: var(--color-background-strong);
|
|
padding: 8px 12px 8px 20px;
|
|
color: var(--color-text-inverted);
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
margin-bottom: 40px;
|
|
display: flex;
|
|
width: fit-content;
|
|
gap: 12px;
|
|
text-decoration: none;
|
|
|
|
[data-slot="cta-price"] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
[data-slot="cta-price-old"] {
|
|
opacity: 0.45;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
[data-slot="cta-price-new"] {
|
|
opacity: 1;
|
|
}
|
|
|
|
svg {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
a:hover {
|
|
background: var(--color-background-strong-hover);
|
|
}
|
|
}
|
|
[data-slot="model-logos"] {
|
|
display: flex;
|
|
gap: 24px;
|
|
margin-bottom: 56px;
|
|
|
|
svg {
|
|
color: var(--color-background-strong);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
svg {
|
|
color: var(--color-background-strong);
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-slot="pricing-copy"] {
|
|
strong {
|
|
color: var(--color-text-strong);
|
|
font-weight: 500;
|
|
}
|
|
|
|
p:first-child {
|
|
margin-bottom: 0;
|
|
color: var(--color-text);
|
|
display: flex;
|
|
gap: 8px;
|
|
|
|
@media (max-width: 40rem) {
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-component="comparison"] {
|
|
border-top: 1px solid var(--color-border-weak);
|
|
padding: 0;
|
|
background:
|
|
radial-gradient(1200px 400px at 15% 0%, rgba(0, 0, 0, 0.035), transparent 55%),
|
|
radial-gradient(900px 320px at 85% 15%, rgba(0, 0, 0, 0.02), transparent 60%), var(--color-background-weak);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background:
|
|
radial-gradient(1200px 400px at 15% 0%, rgba(255, 255, 255, 0.03), transparent 55%),
|
|
radial-gradient(900px 320px at 85% 15%, rgba(255, 255, 255, 0.02), transparent 60%),
|
|
var(--color-background-weak);
|
|
|
|
[data-component="limit-graph"] {
|
|
--bar-go: #f7ff00;
|
|
}
|
|
}
|
|
|
|
[data-component="limit-graph"] {
|
|
--reveal-duration: 950ms;
|
|
--bonus-duration: 1500ms;
|
|
--digit-easing: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--grid-duration: 2000ms;
|
|
--grid-easing: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--bar-delay: 240ms;
|
|
/* Critically damped response, shared by the bars, labels, and rolling digits. */
|
|
--spring-easing: linear(
|
|
0,
|
|
0.02991,
|
|
0.10078,
|
|
0.19179,
|
|
0.28962,
|
|
0.38611,
|
|
0.47651,
|
|
0.55839,
|
|
0.63079,
|
|
0.69365,
|
|
0.74748,
|
|
0.79306,
|
|
0.83131,
|
|
0.86315,
|
|
0.8895,
|
|
0.91117,
|
|
0.92892,
|
|
0.94339,
|
|
0.95515,
|
|
0.96467,
|
|
0.97236,
|
|
0.97855,
|
|
0.98352,
|
|
0.98751,
|
|
0.9907,
|
|
0.99324,
|
|
0.99527,
|
|
0.99689,
|
|
0.99817,
|
|
0.99919,
|
|
1
|
|
);
|
|
margin: 0 auto;
|
|
width: calc(100% - 120px);
|
|
max-width: calc(100% - 120px);
|
|
border: none;
|
|
background: transparent;
|
|
padding: 58px var(--padding) 56px;
|
|
--bar-go: var(--color-go-2);
|
|
|
|
@media (max-width: 60rem) {
|
|
width: calc(100% - 32px);
|
|
max-width: calc(100% - 32px);
|
|
}
|
|
|
|
[data-slot="plot"] {
|
|
container-type: inline-size;
|
|
position: relative;
|
|
overflow: visible;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
margin-left: -56px;
|
|
|
|
@media (max-width: 60rem) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
[data-slot="ylabels"] {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-slot="xlabels"] {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-slot="xlabels"] [data-xlabel] {
|
|
opacity: 0;
|
|
position: absolute;
|
|
left: var(--x);
|
|
top: var(--y);
|
|
transform: translate(-50%, -50%);
|
|
color: var(--color-text-weak);
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
color: color-mix(in srgb, var(--color-text-weak) 82%, var(--color-text-strong));
|
|
}
|
|
|
|
@media (max-width: 60rem) {
|
|
&:not([data-tick="1"], [data-tick="10"], [data-tick="50"], [data-tick="250"]) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-slot="ylabels"] [data-ylabel] {
|
|
position: absolute;
|
|
left: var(--x);
|
|
top: var(--y);
|
|
transform: translate(-100%, -50%);
|
|
color: var(--color-text-strong);
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
|
|
@media (max-width: 60rem) {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
[data-slot="xlabels"] [data-xlabel],
|
|
[data-slot="pills"] [data-label],
|
|
[data-bonus] {
|
|
mask-image: linear-gradient(to right, #000 40%, transparent 60%);
|
|
mask-size: 250% 100%;
|
|
mask-position: 100% 0;
|
|
mask-repeat: no-repeat;
|
|
}
|
|
|
|
[data-slot="pills"] {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
|
|
[data-label] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
[data-item] {
|
|
position: absolute;
|
|
left: var(--x);
|
|
top: var(--y);
|
|
transform: translate(12px, -50%);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: none;
|
|
background: transparent;
|
|
height: 20px;
|
|
padding: 0 8px;
|
|
border-radius: 2px;
|
|
max-width: calc(100% - 12px);
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media (max-width: 60rem) {
|
|
[data-item][data-edge] {
|
|
right: 0;
|
|
left: auto;
|
|
transform: translateY(-50%);
|
|
max-width: none;
|
|
padding-left: 16px;
|
|
background: linear-gradient(90deg, transparent, var(--color-background-weak) 12px);
|
|
}
|
|
}
|
|
|
|
[data-name] {
|
|
color: var(--color-text);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:is([data-regions], [data-limited]) {
|
|
color: var(--color-text-weak);
|
|
white-space: nowrap;
|
|
|
|
a {
|
|
color: inherit;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
[data-value] {
|
|
color: var(--color-text-strong);
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
|
|
number-flow {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
[data-bonus] {
|
|
opacity: 0;
|
|
color: var(--color-text-weak);
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: inherit;
|
|
white-space: nowrap;
|
|
|
|
@media (max-width: 40rem) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-slot="plot-labels"] {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-row-label] {
|
|
position: absolute;
|
|
left: 0;
|
|
top: var(--y);
|
|
transform: translateY(-50%);
|
|
color: var(--color-text-strong);
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 260px;
|
|
display: block;
|
|
}
|
|
|
|
[data-grid] {
|
|
stroke: var(--color-border);
|
|
stroke-width: 1;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
[data-tick] {
|
|
fill: var(--color-text-weak);
|
|
font-size: 12px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
[data-tick] {
|
|
fill: color-mix(in srgb, var(--color-text-weak) 82%, var(--color-text-strong));
|
|
}
|
|
}
|
|
|
|
[data-row] {
|
|
fill: var(--color-text-strong);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
[data-row],
|
|
[data-val] {
|
|
opacity: 0;
|
|
}
|
|
|
|
&[data-visible] [data-row],
|
|
&[data-visible] [data-val] {
|
|
opacity: 1;
|
|
transition: opacity 240ms ease;
|
|
transition-delay: var(--d, 0ms);
|
|
}
|
|
|
|
[data-stub] {
|
|
stroke: var(--color-border);
|
|
stroke-width: 1;
|
|
stroke-linecap: round;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
[data-grid],
|
|
[data-stub] {
|
|
mask-image: linear-gradient(to top, #000 48%, transparent 52%);
|
|
mask-size: 100% 250%;
|
|
mask-position: 0 0;
|
|
mask-repeat: no-repeat;
|
|
mask-origin: stroke-box;
|
|
mask-clip: stroke-box;
|
|
}
|
|
|
|
[data-animate="bar"],
|
|
[data-animate="bonus"] {
|
|
clip-path: inset(0 100% 0 0) fill-box;
|
|
}
|
|
|
|
[data-bar] {
|
|
fill: var(--bar-go);
|
|
stroke: none;
|
|
}
|
|
|
|
[data-bar][data-kind="promo"] {
|
|
fill: color-mix(in srgb, var(--bar-go) 50%, transparent);
|
|
}
|
|
|
|
[data-item][data-infinite] [data-value] {
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
}
|
|
|
|
[data-val] {
|
|
fill: var(--color-text-strong);
|
|
font-size: 13px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
[data-range] {
|
|
stroke: var(--color-text-strong);
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
[data-point] {
|
|
vector-effect: non-scaling-stroke;
|
|
stroke-width: 1;
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
}
|
|
|
|
[data-point][data-kind="go"] {
|
|
fill: var(--color-background-interactive);
|
|
stroke: var(--color-text-strong);
|
|
}
|
|
|
|
[data-point][data-kind="go"][data-model="glm"] {
|
|
fill: var(--color-go-1);
|
|
}
|
|
|
|
[data-point][data-kind="go"][data-model="kimi"] {
|
|
fill: var(--color-go-2);
|
|
}
|
|
|
|
[data-point][data-kind="go"][data-model="minimax"] {
|
|
fill: var(--color-go-3);
|
|
}
|
|
|
|
[data-animate="line"] {
|
|
stroke-dasharray: 900;
|
|
stroke-dashoffset: 900;
|
|
}
|
|
|
|
&[data-visible] [data-animate="line"] {
|
|
animation: go-graph-line 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
|
|
animation-delay: 80ms;
|
|
}
|
|
|
|
[data-point] {
|
|
opacity: 0;
|
|
transform: scale(0.85);
|
|
}
|
|
|
|
&[data-visible] [data-point] {
|
|
animation: go-graph-point 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
|
|
animation-delay: var(--d, 0ms);
|
|
}
|
|
|
|
&[data-visible] [data-grid],
|
|
&[data-visible] [data-stub] {
|
|
animation: go-graph-grid var(--grid-duration) var(--grid-easing) forwards;
|
|
animation-delay: var(--d, 0ms);
|
|
}
|
|
|
|
&[data-visible] [data-slot="xlabels"] [data-xlabel] {
|
|
animation: go-graph-label 300ms ease-out forwards;
|
|
animation-delay: var(--d, 0ms);
|
|
}
|
|
|
|
&[data-visible] [data-animate="bar"] {
|
|
animation: go-graph-reveal var(--reveal-duration) var(--spring-easing) forwards;
|
|
animation-delay: calc(var(--bar-delay) + var(--d, 0ms));
|
|
}
|
|
|
|
&[data-visible] [data-slot="pills"] [data-label] {
|
|
animation: go-graph-label 400ms ease-out forwards;
|
|
animation-delay: calc(var(--bar-delay) + var(--d, 0ms) + var(--reveal-duration) * 0.4);
|
|
}
|
|
|
|
&[data-boosted] [data-animate="bonus"] {
|
|
animation: go-graph-reveal var(--bonus-duration) var(--spring-easing) forwards;
|
|
animation-delay: var(--bonus-delay);
|
|
}
|
|
|
|
&[data-boosted] [data-slot="pills"] [data-item][data-promo] {
|
|
translate: var(--travel) 0;
|
|
transition: translate var(--bonus-duration) var(--spring-easing) var(--bonus-delay);
|
|
|
|
@media (max-width: 60rem) {
|
|
&[data-edge] {
|
|
translate: none;
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-boosted] [data-bonus] {
|
|
animation: go-graph-label 400ms ease-out forwards;
|
|
animation-delay: var(--bonus-delay);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-grid],
|
|
[data-stub],
|
|
&[data-visible] [data-grid],
|
|
&[data-visible] [data-stub] {
|
|
mask-image: none;
|
|
animation: none;
|
|
}
|
|
|
|
[data-slot="xlabels"] [data-xlabel],
|
|
&[data-visible] [data-slot="xlabels"] [data-xlabel] {
|
|
opacity: 1;
|
|
mask-image: none;
|
|
animation: none;
|
|
}
|
|
|
|
[data-animate="line"] {
|
|
stroke-dashoffset: 0;
|
|
animation: none;
|
|
}
|
|
[data-point] {
|
|
opacity: 1;
|
|
transform: none;
|
|
animation: none;
|
|
}
|
|
[data-animate="bar"],
|
|
&[data-visible] [data-animate="bar"],
|
|
[data-animate="bonus"],
|
|
&[data-boosted] [data-animate="bonus"] {
|
|
opacity: 1;
|
|
clip-path: none;
|
|
animation: none;
|
|
}
|
|
[data-row],
|
|
[data-val] {
|
|
opacity: 1;
|
|
transition: none;
|
|
}
|
|
|
|
[data-slot="pills"] [data-label],
|
|
&[data-visible] [data-slot="pills"] [data-label],
|
|
[data-bonus],
|
|
&[data-boosted] [data-bonus] {
|
|
opacity: 1;
|
|
mask-image: none;
|
|
animation: none;
|
|
}
|
|
|
|
&[data-boosted] [data-slot="pills"] [data-item][data-promo] {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
figcaption {
|
|
margin-top: 34px;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
|
|
[data-slot="caption-row"] {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
[data-slot="caption-left"] {
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
[data-slot="caption-meta"] {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
gap: 16px;
|
|
align-items: baseline;
|
|
width: 100%;
|
|
max-width: none;
|
|
justify-content: center;
|
|
}
|
|
|
|
[data-slot="caption-label"] {
|
|
color: var(--color-text-strong);
|
|
font-weight: 650;
|
|
white-space: nowrap;
|
|
line-height: 1;
|
|
}
|
|
|
|
[data-slot="caption-link"] {
|
|
color: var(--color-text-strong);
|
|
text-decoration-thickness: 1px;
|
|
width: fit-content;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
[data-slot="caption-note"] {
|
|
color: var(--color-text-weak);
|
|
font-size: 12px;
|
|
}
|
|
|
|
@media (max-width: 56.25rem) {
|
|
[data-slot="caption-meta"] {
|
|
gap: 14px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 32rem) {
|
|
svg {
|
|
overflow: visible;
|
|
}
|
|
|
|
[data-slot="xlabels"] {
|
|
transform: translateY(62px);
|
|
|
|
[data-tick="10"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-slot="bars"] > [data-model="ox-alpha-free"] {
|
|
transform: translateY(39px);
|
|
}
|
|
|
|
[data-slot="pills"] [data-item][data-edge] {
|
|
left: 3.846153846%;
|
|
right: auto;
|
|
width: calc(100% - 3.846153846%);
|
|
max-width: 100%;
|
|
height: auto;
|
|
padding: 0;
|
|
background: none;
|
|
line-height: 16px;
|
|
gap: 3px 8px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
|
|
[data-label] {
|
|
max-width: 100%;
|
|
flex-wrap: wrap;
|
|
gap: 3px 8px;
|
|
}
|
|
|
|
&[data-model="muse-spark-1.3-contributor"] {
|
|
transform: translateY(11px);
|
|
|
|
[data-regions] {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
|
|
&[data-model="ox-alpha-free"] {
|
|
transform: translateY(51px);
|
|
}
|
|
}
|
|
|
|
figcaption {
|
|
margin-top: 90px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 21.25rem) {
|
|
[data-slot="xlabels"] {
|
|
transform: translateY(100px);
|
|
}
|
|
|
|
[data-slot="bars"] > [data-model="ox-alpha-free"] {
|
|
transform: translateY(58px);
|
|
}
|
|
|
|
[data-slot="pills"] [data-item][data-edge][data-model="ox-alpha-free"] {
|
|
transform: translateY(70px);
|
|
}
|
|
|
|
figcaption {
|
|
margin-top: 128px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-slot="plans"] {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.75rem;
|
|
margin-top: 2rem;
|
|
font-family: "Inter", sans-serif;
|
|
font-size: 0.8125rem;
|
|
font-weight: 440;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.04px;
|
|
text-rendering: geometricPrecision;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
[data-slot="plan"] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 1.75rem;
|
|
padding: 1rem;
|
|
border: 1px solid var(--go-console-border);
|
|
border-radius: 6px;
|
|
background: var(--go-console-surface);
|
|
color: var(--go-console-text);
|
|
}
|
|
[data-slot="name"] {
|
|
color: var(--go-console-secondary);
|
|
line-height: 1.25rem;
|
|
}
|
|
[data-slot="price"] {
|
|
margin-top: 1rem;
|
|
font-size: 1.625rem;
|
|
font-weight: 610;
|
|
line-height: 2rem;
|
|
letter-spacing: -0.5px;
|
|
span {
|
|
font-size: 0.8125rem;
|
|
font-weight: 440;
|
|
letter-spacing: -0.04px;
|
|
color: var(--go-console-secondary);
|
|
}
|
|
}
|
|
ul {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
margin-top: 1.25rem;
|
|
padding: 0;
|
|
list-style: none;
|
|
color: var(--go-console-secondary);
|
|
}
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
li span {
|
|
display: inline-flex;
|
|
flex: none;
|
|
color: var(--go-console-icon);
|
|
}
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 2rem;
|
|
padding: 0 1rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 530;
|
|
border: 1px solid var(--go-console-border);
|
|
border-radius: 6px;
|
|
background: var(--go-console-bg);
|
|
color: var(--go-console-text);
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
background: var(--go-console-track);
|
|
}
|
|
a:focus-visible {
|
|
outline: 2px solid var(--go-console-text);
|
|
outline-offset: 2px;
|
|
}
|
|
@media (max-width: 42rem) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
[data-component="comparison"] {
|
|
background: var(--go-console-bg);
|
|
border-top: 0;
|
|
}
|
|
|
|
[data-component="hero"] {
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
[data-slot="section-title"] {
|
|
margin-bottom: 24px;
|
|
|
|
h3 {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--color-text-strong);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 12px;
|
|
color: var(--color-text);
|
|
}
|
|
}
|
|
|
|
[data-component="problem"] {
|
|
border-top: 1px solid var(--color-border-weak);
|
|
padding: var(--vertical-padding) var(--padding);
|
|
color: var(--color-text);
|
|
|
|
p {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
li {
|
|
list-style: none;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
gap: 12px;
|
|
|
|
span {
|
|
color: var(--color-icon);
|
|
}
|
|
}
|
|
li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-component="how"] {
|
|
border-top: 1px solid var(--color-border-weak);
|
|
padding: var(--vertical-padding) var(--padding);
|
|
color: var(--color-text);
|
|
|
|
ul {
|
|
padding: 0;
|
|
li {
|
|
list-style: none;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
gap: 12px;
|
|
|
|
span {
|
|
color: var(--color-icon);
|
|
}
|
|
strong {
|
|
font-weight: 500;
|
|
color: var(--color-text-strong);
|
|
}
|
|
}
|
|
li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-component="email"] {
|
|
border-top: 1px solid var(--color-border-weak);
|
|
padding: var(--vertical-padding) var(--padding);
|
|
color: var(--color-text);
|
|
|
|
[data-slot="dock"] {
|
|
border-radius: 14px;
|
|
border: 0.5px solid rgba(176, 176, 176, 0.6);
|
|
background: #f2f1f0;
|
|
margin-bottom: 32px;
|
|
overflow: hidden;
|
|
height: 64px;
|
|
width: 185px;
|
|
box-shadow:
|
|
0 6px 80px 0 rgba(0, 0, 0, 0.05),
|
|
0 2.507px 33.422px 0 rgba(0, 0, 0, 0.04),
|
|
0 1.34px 17.869px 0 rgba(0, 0, 0, 0.03),
|
|
0 0.751px 10.017px 0 rgba(0, 0, 0, 0.03),
|
|
0 0.399px 5.32px 0 rgba(0, 0, 0, 0.02),
|
|
0 0.166px 2.214px 0 rgba(0, 0, 0, 0.01);
|
|
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background: #312d2d;
|
|
}
|
|
}
|
|
|
|
[data-slot="form"] {
|
|
position: relative;
|
|
|
|
input {
|
|
background: var(--color-background-weak);
|
|
border-radius: 6px;
|
|
border: 1px solid var(--color-border-weak);
|
|
padding: 20px;
|
|
width: 100%;
|
|
|
|
/* Use color, not -moz-text-fill-color, for normal text */
|
|
color: var(--color-text-strong);
|
|
|
|
@media (max-width: 30rem) {
|
|
padding-bottom: 80px;
|
|
}
|
|
|
|
&:not(:focus) {
|
|
color: var(--color-text-strong);
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--color-text-weak);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Optional legacy */
|
|
&::-moz-placeholder {
|
|
color: var(--color-text-weak);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
input:focus {
|
|
background: var(--color-background-interactive-weaker);
|
|
outline: none;
|
|
border: none;
|
|
color: var(--color-text-strong);
|
|
|
|
border: 1px solid var(--color-background-strong); /* Tailwind blue-600 as example */
|
|
|
|
/* Tailwind-style ring */
|
|
box-shadow: 0 0 0 3px var(--color-background-interactive);
|
|
/* mimics "ring-2 ring-blue-600/50" */
|
|
}
|
|
|
|
button {
|
|
position: absolute;
|
|
height: 40px;
|
|
right: 12px;
|
|
background: var(--color-background-strong);
|
|
padding: 4px 20px;
|
|
color: var(--color-text-inverted);
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
top: 50%;
|
|
margin-top: -20px;
|
|
|
|
@media (max-width: 30rem) {
|
|
left: 20px;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
top: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-component="faq"] {
|
|
border-top: 1px solid var(--color-border-weak);
|
|
padding: var(--vertical-padding) var(--padding);
|
|
|
|
ul {
|
|
padding: 0;
|
|
|
|
li {
|
|
list-style: none;
|
|
margin-bottom: 24px;
|
|
line-height: 200%;
|
|
|
|
@media (max-width: 60rem) {
|
|
line-height: 180%;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-slot="faq-question"] {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 8px;
|
|
color: var(--color-text-strong);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
|
|
[data-slot="faq-icon-plus"] {
|
|
flex-shrink: 0;
|
|
color: var(--color-text-weak);
|
|
margin-top: 2px;
|
|
|
|
[data-closed] & {
|
|
display: block;
|
|
}
|
|
[data-expanded] & {
|
|
display: none;
|
|
}
|
|
}
|
|
[data-slot="faq-icon-minus"] {
|
|
flex-shrink: 0;
|
|
color: var(--color-text-weak);
|
|
margin-top: 2px;
|
|
|
|
[data-closed] & {
|
|
display: none;
|
|
}
|
|
[data-expanded] & {
|
|
display: block;
|
|
}
|
|
}
|
|
[data-slot="faq-question-text"] {
|
|
flex-grow: 1;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
[data-slot="faq-answer"] {
|
|
margin-left: 40px;
|
|
margin-bottom: 32px;
|
|
|
|
[data-slot="faq-models"] {
|
|
margin: 16px 0 0;
|
|
padding-left: 20px;
|
|
|
|
li {
|
|
margin-bottom: 0;
|
|
list-style: disc;
|
|
}
|
|
}
|
|
|
|
[data-slot="faq-model-table"] {
|
|
max-width: 560px;
|
|
margin-top: 16px;
|
|
overflow-x: auto;
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
line-height: 150%;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--color-border-weak);
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
th {
|
|
color: var(--color-text-strong);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
[data-slot="faq-retention-notes"] {
|
|
margin-top: 16px;
|
|
|
|
p {
|
|
margin: 8px 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-component="copy-status"] {
|
|
@media (max-width: 38rem) {
|
|
display: none;
|
|
}
|
|
|
|
[data-slot="copy"] {
|
|
display: block;
|
|
width: var(--space-4);
|
|
height: var(--space-4);
|
|
color: var(--color-text-weaker);
|
|
|
|
[data-copied] & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-slot="check"] {
|
|
display: none;
|
|
width: var(--space-4);
|
|
height: var(--space-4);
|
|
color: var(--color-text-strong);
|
|
|
|
[data-copied] & {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-component="footer"] {
|
|
border-top: 1px solid var(--color-border-weak);
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
@media (max-width: 65rem) {
|
|
border-bottom: 1px solid var(--color-border-weak);
|
|
}
|
|
|
|
[data-slot="cell"] {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
padding: 2rem 0;
|
|
width: 100%;
|
|
display: block;
|
|
|
|
span {
|
|
color: var(--color-text-weak);
|
|
|
|
@media (max-width: 40rem) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
a:hover {
|
|
background: var(--color-background-weak);
|
|
text-decoration: underline;
|
|
text-underline-offset: var(--space-1);
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
}
|
|
|
|
[data-slot="cell"] + [data-slot="cell"] {
|
|
border-left: 1px solid var(--color-border-weak);
|
|
|
|
@media (max-width: 40rem) {
|
|
border-left: none;
|
|
}
|
|
}
|
|
|
|
/* Mobile: third column on its own row */
|
|
@media (max-width: 25rem) {
|
|
flex-wrap: wrap;
|
|
|
|
[data-slot="cell"] {
|
|
flex: 1 0 100%;
|
|
border-left: none;
|
|
border-top: 1px solid var(--color-border-weak);
|
|
}
|
|
|
|
[data-slot="cell"]:nth-child(1) {
|
|
border-top: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-component="legal"] {
|
|
color: var(--color-text-weak);
|
|
text-align: center;
|
|
display: flex;
|
|
gap: 32px;
|
|
justify-content: center;
|
|
|
|
a {
|
|
color: var(--color-text-weak);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-text);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|