mirror of
https://gh-proxy.org/https://github.com/klinsmaya/workdsh.git
synced 2026-11-09 01:47:06 +08:00
2886 lines
48 KiB
CSS
2886 lines
48 KiB
CSS
:root {
|
|
color-scheme:dark;
|
|
--bg:#070a10;
|
|
--surface:#0e131e;
|
|
--line:#ffffff12;
|
|
--text:#eef2fa;
|
|
--muted:#8792a6;
|
|
--blue:#377dff;
|
|
--ice:#8bb8ff;
|
|
--mint:#6fddce;
|
|
--display:'Avenir Next','Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;
|
|
--body:'Avenir Next','PingFang SC','Microsoft YaHei',sans-serif;
|
|
--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
|
|
scroll-behavior:smooth;
|
|
scroll-padding-top:100px
|
|
}
|
|
|
|
@media(max-width:680px) {
|
|
.site-header .changelog-nav {
|
|
position:static;
|
|
width:auto;
|
|
padding:0;
|
|
border:0;
|
|
border-radius:0;
|
|
box-shadow:none;
|
|
background:transparent;
|
|
display:flex!important;
|
|
grid-template-columns:none;
|
|
gap:14px!important;
|
|
font-size:10px!important
|
|
}
|
|
.site-header .changelog-nav a {
|
|
padding:6px 0
|
|
}
|
|
}
|
|
* {
|
|
box-sizing:border-box
|
|
}
|
|
body {
|
|
margin:0;
|
|
background:var(--bg);
|
|
color:var(--text);
|
|
font:15px/1.7 var(--body);
|
|
-webkit-font-smoothing:antialiased
|
|
}
|
|
button,input {
|
|
font:inherit
|
|
}
|
|
button,a {
|
|
-webkit-tap-highlight-color:transparent
|
|
}
|
|
button {
|
|
cursor:pointer
|
|
}
|
|
button,a,summary {
|
|
touch-action:manipulation
|
|
}
|
|
a {
|
|
color:inherit;
|
|
text-decoration:none
|
|
}
|
|
button {
|
|
color:inherit
|
|
}
|
|
img {
|
|
max-width:100%;
|
|
display:block
|
|
}
|
|
h1,h2,h3,p {
|
|
margin:0
|
|
}
|
|
h1,h2,h3 {
|
|
font-family:var(--display);
|
|
font-weight:600
|
|
}
|
|
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
|
|
outline:2px solid var(--ice);
|
|
outline-offset:5px
|
|
}
|
|
::selection {
|
|
background:#377dff66;
|
|
color:white
|
|
}
|
|
.wrap {
|
|
max-width:1280px;
|
|
width:calc(100% - 112px);
|
|
margin-inline:auto
|
|
}
|
|
.section-space {
|
|
padding-block:112px
|
|
}
|
|
.icon-library {
|
|
position:absolute;
|
|
width:0;
|
|
height:0;
|
|
overflow:hidden
|
|
}
|
|
.icon {
|
|
height:20px;
|
|
width:20px;
|
|
flex-shrink:0;
|
|
fill:none;
|
|
stroke:currentColor;
|
|
stroke-width:1.6;
|
|
stroke-linecap:round;
|
|
stroke-linejoin:round
|
|
}
|
|
.skip-link {
|
|
position:fixed;
|
|
z-index:100;
|
|
left:20px;
|
|
top:15px;
|
|
background:white;
|
|
color:#070a10;
|
|
padding:10px 20px;
|
|
transform:translateY(-200%)
|
|
}
|
|
.skip-link:focus {
|
|
transform:none
|
|
}
|
|
.site-glow {
|
|
position:absolute;
|
|
top:0;
|
|
right:0;
|
|
width:70%;
|
|
height:850px;
|
|
pointer-events:none;
|
|
background:radial-gradient(ellipse at 70% 10%,#102a5c35,transparent 60%)
|
|
}
|
|
/* Navigation */
|
|
.site-header {
|
|
height:92px;
|
|
position:relative;
|
|
z-index:20
|
|
}
|
|
.nav-wrap {
|
|
max-width:1392px;
|
|
width:calc(100% - 64px);
|
|
margin:auto;
|
|
height:100%;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
border-bottom:1px solid var(--line)
|
|
}
|
|
.brand {
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:11px;
|
|
font-size:22px;
|
|
font-weight:700;
|
|
letter-spacing:-.8px;
|
|
white-space:nowrap
|
|
}
|
|
.brand b {
|
|
font:9px/1 var(--mono);
|
|
letter-spacing:1.2px;
|
|
color:#8b9ab3;
|
|
padding:5px 6px;
|
|
border:1px solid #344055;
|
|
border-radius:4px;
|
|
margin-left:4px
|
|
}
|
|
.site-header nav {
|
|
display:flex;
|
|
align-items:center;
|
|
gap:31px;
|
|
font-size:12px;
|
|
color:#a8b2c4
|
|
}
|
|
.site-header nav a {
|
|
transition:color .2s
|
|
}
|
|
.site-header nav a:hover {
|
|
color:white
|
|
}
|
|
.nav-divider {
|
|
height:15px;
|
|
width:1px;
|
|
background:#ffffff20
|
|
}
|
|
.nav-source {
|
|
display:flex;
|
|
align-items:center;
|
|
gap:9px;
|
|
border:1px solid #ffffff1c;
|
|
border-radius:7px;
|
|
padding:9px 13px;
|
|
color:#dce5f5
|
|
}
|
|
.nav-source .icon {
|
|
width:15px;
|
|
height:15px
|
|
}
|
|
.nav-source .icon:last-child {
|
|
width:12px;
|
|
height:12px;
|
|
margin-left:4px
|
|
}
|
|
.nav-toggle {
|
|
display:none!important
|
|
}
|
|
.language-link {
|
|
font-family:var(--mono)
|
|
}
|
|
.icon-button {
|
|
border:1px solid #ffffff18;
|
|
background:#ffffff07;
|
|
border-radius:50%;
|
|
width:40px;
|
|
height:40px;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
transition:background .2s
|
|
}
|
|
.icon-button:hover {
|
|
background:#ffffff18
|
|
}
|
|
/* Hero */
|
|
.hero {
|
|
display:grid;
|
|
grid-template-columns:1.15fr 1fr;
|
|
align-items:center;
|
|
position:relative;
|
|
padding-top:80px;
|
|
padding-bottom:74px;
|
|
min-height:684px
|
|
}
|
|
.hero-copy {
|
|
position:relative;
|
|
z-index:2
|
|
}
|
|
.release-link {
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:9px;
|
|
font-size:10px;
|
|
font-weight:500;
|
|
letter-spacing:1.1px;
|
|
color:#a3b3ce;
|
|
padding:6px 9px 6px 0
|
|
}
|
|
.release-link .icon {
|
|
width:13px;
|
|
height:13px;
|
|
margin-left:7px
|
|
}
|
|
.status-dot {
|
|
display:inline-block;
|
|
width:5px;
|
|
height:5px;
|
|
border-radius:100%;
|
|
background:#619bff;
|
|
box-shadow:0 0 10px #438aff60;
|
|
flex-shrink:0
|
|
}
|
|
.hero h1 {
|
|
font-size:clamp(62px,6.2vw,90px);
|
|
letter-spacing:-5px;
|
|
line-height:1.13;
|
|
margin-top:26px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
font-weight:600
|
|
}
|
|
.hero h1>span:first-child {
|
|
letter-spacing:-3px
|
|
}
|
|
.hero-word {
|
|
background:linear-gradient(100deg,#a6cbff 0,#6c9efb 48%,#3474f2 86%);
|
|
background-clip:text;
|
|
-webkit-background-clip:text;
|
|
-webkit-text-fill-color:transparent;
|
|
font-weight:650
|
|
}
|
|
.hero-statement {
|
|
font-size:21px;
|
|
line-height:1.65;
|
|
margin-top:25px;
|
|
letter-spacing:.4px;
|
|
color:#d4deed
|
|
}
|
|
.hero-detail {
|
|
font-size:13px;
|
|
color:var(--muted);
|
|
line-height:1.9;
|
|
margin-top:13px
|
|
}
|
|
.hero-actions {
|
|
display:flex;
|
|
gap:20px;
|
|
align-items:center;
|
|
margin-top:30px
|
|
}
|
|
.button {
|
|
border:0;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
gap:22px;
|
|
padding:14px 23px;
|
|
border-radius:7px;
|
|
min-height:48px;
|
|
font-size:13px;
|
|
font-weight:600;
|
|
transition:transform .2s,background .2s,box-shadow .2s
|
|
}
|
|
.button:hover {
|
|
transform:translateY(-3px)
|
|
}
|
|
.button .icon {
|
|
height:17px;
|
|
width:17px
|
|
}
|
|
.button-primary {
|
|
color:white;
|
|
background:linear-gradient(180deg,#4285ff,#2264e7);
|
|
box-shadow:inset 0 1px #ffffff30,0 5px 20px #176bff20
|
|
}
|
|
.button-primary:hover {
|
|
box-shadow:inset 0 1px #ffffff30,0 8px 30px #176bff45;
|
|
background:linear-gradient(180deg,#5792ff,#3474f2)
|
|
}
|
|
.button-quiet {
|
|
background:transparent;
|
|
padding:10px 0;
|
|
gap:10px;
|
|
color:#c9d3e3;
|
|
font-size:12px
|
|
}
|
|
.play-circle {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
width:29px;
|
|
height:29px;
|
|
border:1px solid #677998;
|
|
border-radius:50%
|
|
}
|
|
.play-circle .icon {
|
|
width:12px;
|
|
height:12px;
|
|
fill:currentColor;
|
|
stroke-width:0;
|
|
margin-left:1px
|
|
}
|
|
.hero-note {
|
|
font-size:10px;
|
|
color:#6c7890;
|
|
margin-top:21px;
|
|
letter-spacing:.8px
|
|
}
|
|
.hero-art {
|
|
position:relative;
|
|
margin-left:-25px;
|
|
margin-right:-30px;
|
|
align-self:stretch;
|
|
min-height:500px
|
|
}
|
|
.orbit-scene {
|
|
position:absolute;
|
|
inset:0;
|
|
perspective:800px;
|
|
--px:0px;
|
|
--py:0px;
|
|
transform:translate(var(--px),var(--py));
|
|
transition:transform .6s ease-out
|
|
}
|
|
.orbital-grid {
|
|
position:absolute;
|
|
inset:5% -10% -15%;
|
|
background-image:linear-gradient(#4168a417 1px,transparent 1px),linear-gradient(90deg,#4168a417 1px,transparent 1px);
|
|
background-size:42px 42px;
|
|
transform:rotateX(58deg) rotateZ(-27deg);
|
|
mask-image:radial-gradient(ellipse,black,transparent 64%)
|
|
}
|
|
.orbital-haze {
|
|
position:absolute;
|
|
inset:-10%;
|
|
background:radial-gradient(ellipse at 50% 50%,#1a58c426 0,transparent 56%)
|
|
}
|
|
.orbital-label {
|
|
position:absolute;
|
|
left:50%;
|
|
top:9%;
|
|
transform:translateX(-50%);
|
|
font:8px var(--mono);
|
|
letter-spacing:3px;
|
|
color:#506788;
|
|
white-space:nowrap
|
|
}
|
|
.orbit {
|
|
position:absolute;
|
|
left:50%;
|
|
top:47%;
|
|
border:1px solid #4f7bc127;
|
|
border-radius:50%;
|
|
transform:translate(-50%,-50%) rotate(-22deg);
|
|
pointer-events:none
|
|
}
|
|
.orbit-outer {
|
|
width:105%;
|
|
height:80%;
|
|
border-color:#446dab13
|
|
}
|
|
.orbit-middle {
|
|
width:86%;
|
|
height:66%;
|
|
box-shadow:0 0 65px #1b5bd90a,inset 0 0 60px #1b5bd908;
|
|
border-top-color:#426daf3b
|
|
}
|
|
.orbit-inner {
|
|
width:61%;
|
|
height:46%;
|
|
border-style:dashed;
|
|
border-color:#5d8de522
|
|
}
|
|
.orbit-track {
|
|
position:absolute;
|
|
left:50%;
|
|
top:47%;
|
|
width:86%;
|
|
height:66%;
|
|
border-radius:50%;
|
|
transform:translate(-50%,-50%) rotate(-22deg)
|
|
}
|
|
.orbit-track span {
|
|
position:absolute;
|
|
top:50%;
|
|
left:0;
|
|
width:5px;
|
|
height:5px;
|
|
background:#a2c7ff;
|
|
border-radius:100%;
|
|
box-shadow:0 0 18px 4px #397effa0;
|
|
offset-path:ellipse(50% 50% at 50% 50%);
|
|
offset-distance:0%;
|
|
animation:orbital-run 20s linear infinite
|
|
}
|
|
.track-two {
|
|
width:61%;
|
|
height:46%;
|
|
transform:translate(-50%,-50%) rotate(-22deg)
|
|
}
|
|
.track-two span {
|
|
width:3px;
|
|
height:3px;
|
|
animation-duration:15s;
|
|
animation-direction:reverse;
|
|
box-shadow:0 0 10px 3px #56c9dd90
|
|
}
|
|
.orb-core {
|
|
position:absolute;
|
|
top:46%;
|
|
left:50%;
|
|
width:142px;
|
|
height:142px;
|
|
transform:translate(-50%,-50%) rotate(-9deg);
|
|
border-radius:35px;
|
|
background:linear-gradient(135deg,#3b64945c,#16356790 45%,#14294380);
|
|
border:1px solid #699cf16b;
|
|
box-shadow:inset 0 0 40px #3c82ee20,0 0 60px #1c67ed27,0 20px 70px #0008;
|
|
animation:core-float 6s ease-in-out infinite
|
|
}
|
|
.core-inset {
|
|
position:absolute;
|
|
inset:8px;
|
|
border-radius:28px;
|
|
border:1px solid #8abdff20;
|
|
background:linear-gradient(150deg,#213a5d,#101b2f 60%);
|
|
display:grid;
|
|
place-items:center
|
|
}
|
|
.core-inset img {
|
|
transform:rotate(9deg);
|
|
filter:drop-shadow(0 0 12px #176bff35);
|
|
width:87px;
|
|
height:87px
|
|
}
|
|
.core-reflection {
|
|
position:absolute;
|
|
left:20%;
|
|
right:20%;
|
|
height:1px;
|
|
top:-1px;
|
|
background:#c4e8ff;
|
|
box-shadow:0 0 20px 3px #76b2ff60
|
|
}
|
|
.orbit-node {
|
|
position:absolute;
|
|
z-index:3;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:8px;
|
|
align-items:center;
|
|
animation:node-float 7s ease-in-out infinite
|
|
}
|
|
.orbit-node>div {
|
|
display:grid;
|
|
place-items:center;
|
|
width:55px;
|
|
height:55px;
|
|
border-radius:14px;
|
|
border:1px solid #7897c144;
|
|
background:linear-gradient(150deg,#203453e6,#0d1829f0);
|
|
box-shadow:0 12px 40px #0005,inset 0 1px #bcd5ff1a;
|
|
backdrop-filter:blur(10px)
|
|
}
|
|
.orbit-node .icon {
|
|
width:22px;
|
|
height:22px;
|
|
color:#9fc4ff
|
|
}
|
|
.orbit-node>span {
|
|
font:10px var(--mono);
|
|
letter-spacing:.6px;
|
|
color:#8ba5cb
|
|
}
|
|
.node-skills {
|
|
top:21%;
|
|
left:18%;
|
|
animation-delay:-2s
|
|
}
|
|
.node-experts {
|
|
right:6%;
|
|
top:38%;
|
|
animation-delay:-4s
|
|
}
|
|
.node-office {
|
|
left:29%;
|
|
bottom:16%
|
|
}
|
|
.node-experts .icon {
|
|
color:#91d6d6
|
|
}
|
|
.node-office .icon {
|
|
color:#bdcbff
|
|
}
|
|
.star {
|
|
position:absolute;
|
|
border-radius:50%;
|
|
background:#7cadf9;
|
|
box-shadow:0 0 10px #397eff80;
|
|
animation:twinkle 5s ease-in-out infinite
|
|
}
|
|
.star-a {
|
|
top:20%;
|
|
right:26%;
|
|
width:3px;
|
|
height:3px
|
|
}
|
|
.star-b {
|
|
bottom:29%;
|
|
right:14%;
|
|
width:2px;
|
|
height:2px;
|
|
animation-delay:-1s
|
|
}
|
|
.star-c {
|
|
top:47%;
|
|
left:8%;
|
|
width:2px;
|
|
height:2px;
|
|
animation-delay:-3s
|
|
}
|
|
.star-d {
|
|
top:8%;
|
|
right:4%;
|
|
width:2px;
|
|
height:2px
|
|
}
|
|
.orbital-caption {
|
|
position:absolute;
|
|
left:50%;
|
|
top:64%;
|
|
transform:translateX(-50%);
|
|
display:flex;
|
|
align-items:center;
|
|
flex-direction:column;
|
|
gap:4px
|
|
}
|
|
.orbital-caption>span {
|
|
font-size:15px;
|
|
font-weight:600;
|
|
letter-spacing:.3px;
|
|
color:#b4cae9
|
|
}
|
|
.orbital-caption small {
|
|
font-size:9px;
|
|
color:#5b7291;
|
|
white-space:nowrap
|
|
}
|
|
.orbit-coord {
|
|
position:absolute;
|
|
bottom:7%;
|
|
right:3%;
|
|
font:8px var(--mono);
|
|
letter-spacing:2px;
|
|
color:#3a5275
|
|
}
|
|
/* WorkBuddy package compatibility */
|
|
.compatibility-section {
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr;
|
|
gap:80px;
|
|
align-items:center;
|
|
padding-bottom:64px;
|
|
border-bottom:1px solid var(--line)
|
|
}
|
|
.openness {
|
|
border-block:1px solid var(--line)
|
|
}
|
|
.openness .section-heading {
|
|
margin-bottom:60px
|
|
}
|
|
.compatibility-copy h3,.modules-copy h3 {
|
|
font-size:27px;
|
|
line-height:1.5;
|
|
letter-spacing:-.6px
|
|
}
|
|
.compatibility-copy {
|
|
min-width:0
|
|
}
|
|
.compatibility-intro {
|
|
max-width:420px;
|
|
margin-top:24px;
|
|
color:#a0adc1;
|
|
font-size:14px;
|
|
line-height:1.95
|
|
}
|
|
.compatibility-copy .text-link {
|
|
margin-top:28px
|
|
}
|
|
.compatibility-packages {
|
|
min-width:0;
|
|
padding:30px 32px 22px;
|
|
border:1px solid #7d9fdb26;
|
|
border-radius:16px;
|
|
background:linear-gradient(135deg,#377dff0e,transparent 65%),var(--surface)
|
|
}
|
|
.compatibility-route {
|
|
display:flex;
|
|
align-items:center;
|
|
gap:18px;
|
|
font-size:20px;
|
|
font-weight:600;
|
|
letter-spacing:-.5px
|
|
}
|
|
.compatibility-route>span {
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:8px
|
|
}
|
|
.compatibility-route-arrow {
|
|
flex:1;
|
|
min-width:22px;
|
|
color:var(--ice);
|
|
justify-content:center
|
|
}
|
|
.compatibility-row {
|
|
display:flex;
|
|
gap:18px;
|
|
padding:25px 0;
|
|
border-bottom:1px solid var(--line)
|
|
}
|
|
.compatibility-icon {
|
|
display:grid;
|
|
place-items:center;
|
|
width:40px;
|
|
height:40px;
|
|
flex:none;
|
|
border:1px solid #377dff33;
|
|
border-radius:10px;
|
|
color:var(--ice);
|
|
background:#377dff0a
|
|
}
|
|
.compatibility-icon .icon {
|
|
width:19px;
|
|
height:19px
|
|
}
|
|
.compatibility-row h4 {
|
|
font-size:17px;
|
|
font-weight:600;
|
|
margin:0
|
|
}
|
|
.compatibility-row:last-child {
|
|
border-bottom:0;
|
|
padding-bottom:0
|
|
}
|
|
.compatibility-row p {
|
|
margin-top:8px;
|
|
color:#a0adc1;
|
|
font-size:12px;
|
|
line-height:1.85
|
|
}
|
|
#compatibility-faq {
|
|
scroll-margin-top:100px
|
|
}
|
|
@media(max-width:1050px) {
|
|
.compatibility-section {
|
|
gap:40px
|
|
}
|
|
.compatibility-packages {
|
|
padding-inline:24px
|
|
}
|
|
.compatibility-route {
|
|
font-size:17px;
|
|
gap:10px
|
|
}
|
|
}
|
|
@media(max-width:760px) {
|
|
.compatibility-copy h3,.modules-copy h3 {
|
|
font-size:23px
|
|
}
|
|
.compatibility-section {
|
|
grid-template-columns:1fr;
|
|
gap:32px
|
|
}
|
|
.compatibility-packages {
|
|
padding:24px 20px 20px
|
|
}
|
|
.compatibility-intro {
|
|
font-size:13px
|
|
}
|
|
.compatibility-row {
|
|
gap:12px
|
|
}
|
|
.compatibility-row p {
|
|
font-size:12px
|
|
}
|
|
}
|
|
/* Product showcase */
|
|
.section-heading {
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:flex-end;
|
|
gap:50px;
|
|
margin-bottom:40px
|
|
}
|
|
.eyebrow {
|
|
font:9px/1.6 var(--mono);
|
|
letter-spacing:2px;
|
|
color:#7499cf;
|
|
margin-bottom:20px
|
|
}
|
|
h2 {
|
|
font-size:clamp(35px,3.4vw,49px);
|
|
line-height:1.3;
|
|
letter-spacing:-1.8px
|
|
}
|
|
h2 span {
|
|
color:#727f95
|
|
}
|
|
.section-aside {
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
line-height:1.9;
|
|
max-width:310px;
|
|
padding-bottom:5px
|
|
}
|
|
.product-showcase {
|
|
position:relative;
|
|
border:1px solid #7d9fdb33;
|
|
border-radius:13px;
|
|
background:linear-gradient(160deg,#172234,#0c121e 55%);
|
|
box-shadow:0 25px 90px #0005,0 -8px 70px #2366e110;
|
|
overflow:hidden
|
|
}
|
|
.product-tabs {
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
gap:6px;
|
|
padding:16px;
|
|
border-bottom:1px solid var(--line)
|
|
}
|
|
.product-tabs button {
|
|
display:flex;
|
|
align-items:center;
|
|
gap:9px;
|
|
padding:10px 19px;
|
|
border:1px solid transparent;
|
|
border-radius:6px;
|
|
background:transparent;
|
|
color:#8091ae;
|
|
font-size:12px;
|
|
transition:all .2s
|
|
}
|
|
.product-tabs .icon {
|
|
width:15px;
|
|
height:15px
|
|
}
|
|
.product-tabs button:hover {
|
|
background:#ffffff05;
|
|
color:#dce6f6
|
|
}
|
|
.product-tabs button[aria-selected=true] {
|
|
background:#225ab925;
|
|
border-color:#5a8cee55;
|
|
color:#c1d8ff;
|
|
box-shadow:inset 0 1px #c3dcff0a
|
|
}
|
|
.product-panel[hidden] {
|
|
display:none
|
|
}
|
|
.product-bar {
|
|
display:flex;
|
|
justify-content:space-between;
|
|
padding:12px 21px;
|
|
font:8px var(--mono);
|
|
letter-spacing:1.2px;
|
|
color:#7491b9;
|
|
background:#0a101a
|
|
}
|
|
.product-bar>div {
|
|
display:flex;
|
|
gap:8px;
|
|
align-items:center
|
|
}
|
|
.panel-index {
|
|
color:#586882
|
|
}
|
|
.screen-button {
|
|
display:block;
|
|
border:0;
|
|
border-block:1px solid #ffffff0d;
|
|
padding:0;
|
|
width:100%;
|
|
position:relative;
|
|
background:#101114;
|
|
overflow:hidden
|
|
}
|
|
.screen-button>img {
|
|
width:100%;
|
|
height:auto;
|
|
aspect-ratio:3006/1640;
|
|
object-fit:contain
|
|
}
|
|
.zoom-pill {
|
|
position:absolute;
|
|
bottom:17px;
|
|
right:18px;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
color:#dce8fa;
|
|
font-size:10px;
|
|
padding:8px 12px;
|
|
border:1px solid #91abca44;
|
|
border-radius:30px;
|
|
background:#142235e8;
|
|
backdrop-filter:blur(10px);
|
|
opacity:0;
|
|
transform:translateY(4px);
|
|
transition:all .2s
|
|
}
|
|
.screen-button:hover .zoom-pill,.screen-button:focus-visible .zoom-pill {
|
|
opacity:1;
|
|
transform:none
|
|
}
|
|
.zoom-pill .icon {
|
|
width:13px;
|
|
height:13px
|
|
}
|
|
.product-caption {
|
|
padding:23px 27px;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:30px
|
|
}
|
|
.product-caption h3 {
|
|
font-size:16px;
|
|
letter-spacing:.1px
|
|
}
|
|
.product-caption p {
|
|
font-size:11px;
|
|
line-height:1.7;
|
|
color:#7e8ea8;
|
|
margin-top:5px
|
|
}
|
|
.caption-arrow {
|
|
border-radius:50%;
|
|
width:36px;
|
|
height:36px;
|
|
flex-shrink:0;
|
|
display:grid;
|
|
place-items:center;
|
|
border:1px solid #ffffff14;
|
|
color:#8aa5ce
|
|
}
|
|
.caption-arrow .icon {
|
|
height:16px;
|
|
width:16px
|
|
}
|
|
.screenshot-note {
|
|
font-size:10px;
|
|
color:#67778f;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
gap:7px;
|
|
margin-top:20px
|
|
}
|
|
.screenshot-note .icon {
|
|
width:11px;
|
|
height:11px
|
|
}
|
|
/* Capability composition */
|
|
.capabilities {
|
|
padding-top:35px
|
|
}
|
|
.file-dot {
|
|
width:5px;
|
|
height:5px;
|
|
background:#80c1b2;
|
|
border-radius:50%;
|
|
margin-left:auto
|
|
}
|
|
.code-muted {
|
|
color:#536b8b
|
|
}
|
|
.code-blue {
|
|
color:#7faeff
|
|
}
|
|
.code-mint {
|
|
color:#8ed8c7
|
|
}
|
|
.text-link {
|
|
font-size:11px;
|
|
font-weight:500;
|
|
color:#95bbff;
|
|
display:inline-flex;
|
|
gap:11px;
|
|
align-items:center;
|
|
margin-top:22px
|
|
}
|
|
.text-link .icon {
|
|
width:14px;
|
|
height:14px;
|
|
transition:transform .2s
|
|
}
|
|
.text-link:hover .icon {
|
|
transform:translateX(3px)
|
|
}
|
|
/* Architecture */
|
|
.modules-layout {
|
|
padding-top:64px;
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr;
|
|
gap:115px;
|
|
align-items:center
|
|
}
|
|
.modules-copy>p:not(.eyebrow) {
|
|
font-size:13px;
|
|
line-height:1.9;
|
|
color:#8492a9;
|
|
max-width:390px;
|
|
margin-top:25px
|
|
}
|
|
.module-stack {
|
|
position:relative;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:9px
|
|
}
|
|
.module-stack:before {
|
|
content:'';
|
|
position:absolute;
|
|
inset:-35px 30px;
|
|
background:radial-gradient(ellipse,#2160bf1c,transparent 65%);
|
|
pointer-events:none
|
|
}
|
|
.module {
|
|
position:relative;
|
|
display:grid;
|
|
grid-template-columns:30px 72px 1fr 18px;
|
|
gap:12px;
|
|
align-items:center;
|
|
border:1px solid #809fc123;
|
|
border-radius:8px;
|
|
background:linear-gradient(100deg,#121e31,#0c1422);
|
|
padding:15px 18px;
|
|
transition:transform .25s,border-color .25s
|
|
}
|
|
.module:hover {
|
|
transform:translateX(-7px);
|
|
border-color:#669ced66
|
|
}
|
|
.module-icon {
|
|
display:grid;
|
|
place-items:center;
|
|
height:30px;
|
|
width:30px;
|
|
background:#467eff0d;
|
|
border:1px solid #729fe52c;
|
|
border-radius:6px;
|
|
color:#a8c6f1
|
|
}
|
|
.module .icon {
|
|
width:15px;
|
|
height:15px
|
|
}
|
|
.module strong {
|
|
font-weight:500;
|
|
font-size:13px;
|
|
letter-spacing:.1px
|
|
}
|
|
.module>span:not(.module-icon):not(.module-number) {
|
|
font-size:10px;
|
|
color:#778ba9
|
|
}
|
|
.module .module-number {
|
|
font:9px var(--mono);
|
|
color:#405c80
|
|
}
|
|
.runtime {
|
|
padding:21px 19px;
|
|
border:1px solid #5586d635;
|
|
border-radius:8px;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
margin-top:13px;
|
|
background:#142c4b44;
|
|
position:relative
|
|
}
|
|
.runtime:before {
|
|
content:'';
|
|
width:1px;
|
|
height:23px;
|
|
position:absolute;
|
|
top:-23px;
|
|
left:50%;
|
|
background:linear-gradient(#5078b432,#5586d669)
|
|
}
|
|
.runtime>span:nth-child(2) {
|
|
font-size:13px;
|
|
color:#b5cbeb
|
|
}
|
|
.runtime small {
|
|
margin-left:auto;
|
|
font:7px var(--mono);
|
|
letter-spacing:1px;
|
|
color:#4f75a5
|
|
}
|
|
/* Installation + FAQ */
|
|
.start-layout {
|
|
display:grid;
|
|
grid-template-columns:1fr 1.08fr;
|
|
gap:90px;
|
|
align-items:start
|
|
}
|
|
.start-copy>p:not(.eyebrow) {
|
|
font-size:13px;
|
|
color:#8593aa;
|
|
line-height:1.95;
|
|
margin-top:24px
|
|
}
|
|
.start-copy>.button {
|
|
margin-top:27px
|
|
}
|
|
.setup-guide {
|
|
display:flex;
|
|
width:max-content;
|
|
margin-top:17px
|
|
}
|
|
.terminal {
|
|
background:#0b121d;
|
|
border:1px solid #7292c533;
|
|
border-radius:11px;
|
|
overflow:hidden;
|
|
box-shadow:0 20px 70px #0003
|
|
}
|
|
.terminal-header {
|
|
height:50px;
|
|
background:#131e2d;
|
|
display:flex;
|
|
align-items:center;
|
|
padding:0 16px;
|
|
gap:14px;
|
|
font-size:10px;
|
|
color:#8394af;
|
|
border-bottom:1px solid var(--line)
|
|
}
|
|
.terminal-dots {
|
|
display:flex;
|
|
gap:5px
|
|
}
|
|
.terminal-dots i {
|
|
width:5px;
|
|
height:5px;
|
|
border-radius:50%;
|
|
background:#3e5371
|
|
}
|
|
.copy-button {
|
|
border:0;
|
|
background:none;
|
|
color:#8aa4c7;
|
|
padding:7px;
|
|
margin-left:auto;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:5px;
|
|
font-size:9px
|
|
}
|
|
.copy-button .icon {
|
|
width:12px;
|
|
height:12px
|
|
}
|
|
.copy-button:hover {
|
|
color:#cfddf2
|
|
}
|
|
.source-tabs {
|
|
display:flex;
|
|
gap:5px;
|
|
padding:12px 17px 0;
|
|
align-items:center
|
|
}
|
|
.source-tabs button {
|
|
border:0;
|
|
background:none;
|
|
color:#596f91;
|
|
padding:5px 11px;
|
|
border-radius:5px;
|
|
font:10px var(--mono)
|
|
}
|
|
.source-tabs button[aria-selected=true] {
|
|
background:#223d672e;
|
|
color:#a2bef0
|
|
}
|
|
.source-tabs>span {
|
|
font:8px var(--mono);
|
|
margin-left:auto;
|
|
color:#3f5473
|
|
}
|
|
.terminal pre {
|
|
font:10px/2.9 var(--mono);
|
|
color:#c6d2e7;
|
|
overflow-x:auto;
|
|
white-space:pre;
|
|
padding:17px 23px 24px;
|
|
margin:0;
|
|
tab-size:2
|
|
}
|
|
.shell-prompt {
|
|
color:#4c6282;
|
|
margin-right:9px;
|
|
user-select:none
|
|
}
|
|
.terminal-bottom {
|
|
display:flex;
|
|
align-items:center;
|
|
gap:7px;
|
|
border-top:1px solid #7091c113;
|
|
padding:12px 21px;
|
|
font:7px var(--mono);
|
|
letter-spacing:1.3px;
|
|
color:#516b91
|
|
}
|
|
.terminal-bottom .status-dot {
|
|
width:4px;
|
|
height:4px
|
|
}
|
|
.terminal-note {
|
|
font-size:10px;
|
|
line-height:1.9;
|
|
color:#687994;
|
|
margin-top:14px
|
|
}
|
|
.faq {
|
|
margin-top:95px;
|
|
display:grid;
|
|
grid-template-columns:1fr 1.4fr;
|
|
gap:65px;
|
|
align-items:start
|
|
}
|
|
.faq>h3 {
|
|
font-size:21px;
|
|
line-height:1.5;
|
|
letter-spacing:-.5px
|
|
}
|
|
.faq details {
|
|
border-top:1px solid #849bc620
|
|
}
|
|
.faq details:last-child {
|
|
border-bottom:1px solid #849bc620
|
|
}
|
|
.faq summary {
|
|
cursor:pointer;
|
|
list-style:none;
|
|
padding:19px 0;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:22px;
|
|
font-size:12px;
|
|
color:#b7c4d9
|
|
}
|
|
.faq summary::-webkit-details-marker {
|
|
display:none
|
|
}
|
|
.faq-plus {
|
|
height:13px;
|
|
width:13px;
|
|
position:relative;
|
|
flex-shrink:0
|
|
}
|
|
.faq-plus:before,.faq-plus:after {
|
|
content:'';
|
|
position:absolute;
|
|
background:#6f8ab1;
|
|
left:0;
|
|
right:0;
|
|
height:1px;
|
|
top:6px
|
|
}
|
|
.faq-plus:after {
|
|
transform:rotate(90deg);
|
|
transition:transform .2s
|
|
}
|
|
.faq details[open] .faq-plus:after {
|
|
transform:rotate(0deg)
|
|
}
|
|
.faq details p {
|
|
font-size:11px;
|
|
line-height:2;
|
|
color:#8090a9;
|
|
padding:0 28px 21px 0
|
|
}
|
|
/* Closing */
|
|
.button-secondary {
|
|
background:#122543;
|
|
border:1px solid #4d77b753;
|
|
color:#c1d4f1
|
|
}
|
|
.button-secondary:hover {
|
|
background:#1a3357
|
|
}
|
|
.site-footer {
|
|
padding-top:35px;
|
|
display:flex;
|
|
align-items:center;
|
|
flex-wrap:wrap;
|
|
justify-content:space-between;
|
|
gap:25px
|
|
}
|
|
.site-footer .brand {
|
|
font-size:19px
|
|
}
|
|
.site-footer>div:first-child>p {
|
|
font-size:9px;
|
|
color:#6b7c98;
|
|
margin-top:10px
|
|
}
|
|
.site-footer>nav {
|
|
display:flex;
|
|
align-items:center;
|
|
gap:25px;
|
|
font-size:10px;
|
|
color:#8a9cba
|
|
}
|
|
.site-footer nav a:hover {
|
|
color:white
|
|
}
|
|
.back-top {
|
|
height:29px;
|
|
width:29px;
|
|
border:1px solid #ffffff1a;
|
|
border-radius:50%;
|
|
display:grid;
|
|
place-items:center
|
|
}
|
|
.back-top .icon {
|
|
transform:rotate(-90deg);
|
|
width:14px;
|
|
height:14px
|
|
}
|
|
.footer-fine {
|
|
width:100%;
|
|
border-top:1px solid var(--line);
|
|
display:flex;
|
|
justify-content:space-between;
|
|
gap:25px;
|
|
margin-top:10px;
|
|
padding:20px 0 28px;
|
|
font-size:8px;
|
|
color:#53637e
|
|
}
|
|
.footer-fine>span:nth-child(2) {
|
|
margin-left:auto
|
|
}
|
|
/* Changelog */
|
|
.changelog-page {
|
|
min-height:100vh
|
|
}
|
|
.changelog-nav a[aria-current=page] {
|
|
color:white
|
|
}
|
|
.changelog-main {
|
|
max-width:1120px
|
|
}
|
|
.changelog-hero {
|
|
padding:92px 0 72px;
|
|
border-bottom:1px solid var(--line)
|
|
}
|
|
.changelog-hero h1 {
|
|
max-width:780px;
|
|
margin-top:14px;
|
|
font-size:clamp(44px,6vw,76px);
|
|
line-height:1.08;
|
|
letter-spacing:-3px
|
|
}
|
|
.changelog-hero>p:not(.eyebrow) {
|
|
max-width:650px;
|
|
margin-top:24px;
|
|
color:#9aa8be;
|
|
font-size:17px
|
|
}
|
|
.changelog-summary {
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
gap:10px;
|
|
margin-top:32px
|
|
}
|
|
.changelog-summary span {
|
|
padding:7px 11px;
|
|
border:1px solid #ffffff17;
|
|
border-radius:999px;
|
|
color:#8595ae;
|
|
font:10px var(--mono);
|
|
letter-spacing:.3px
|
|
}
|
|
.release-list {
|
|
position:relative;
|
|
padding:24px 0 48px
|
|
}
|
|
.release-entry {
|
|
display:grid;
|
|
grid-template-columns:150px minmax(0,1fr);
|
|
gap:44px;
|
|
padding:38px 0;
|
|
border-bottom:1px solid var(--line)
|
|
}
|
|
.release-entry time {
|
|
padding-top:5px;
|
|
color:#64738b;
|
|
font:10px/1.5 var(--mono);
|
|
letter-spacing:.6px
|
|
}
|
|
.release-heading {
|
|
display:flex;
|
|
align-items:flex-start;
|
|
justify-content:space-between;
|
|
gap:22px
|
|
}
|
|
.release-heading h2 {
|
|
font-size:24px;
|
|
line-height:1.35;
|
|
letter-spacing:-.5px
|
|
}
|
|
.release-entry p {
|
|
max-width:760px;
|
|
margin-top:13px;
|
|
color:#98a6bb;
|
|
font-size:15px;
|
|
line-height:1.85
|
|
}
|
|
.release-featured {
|
|
margin-top:18px;
|
|
padding:34px 28px;
|
|
border:1px solid #4e86e950;
|
|
border-radius:14px;
|
|
background:linear-gradient(120deg,#11213c99,#0d1420 68%)
|
|
}
|
|
.release-featured+.release-entry {
|
|
margin-top:18px;
|
|
border-top:1px solid var(--line)
|
|
}
|
|
.tag,.tag-group {
|
|
flex-shrink:0
|
|
}
|
|
.tag {
|
|
display:inline-flex;
|
|
padding:5px 8px;
|
|
border:1px solid #5e82bd45;
|
|
border-radius:5px;
|
|
background:#1a2b472e;
|
|
color:#8fb6f6;
|
|
font:9px/1.4 var(--mono);
|
|
white-space:nowrap
|
|
}
|
|
.tag:hover {
|
|
border-color:#75a6f48c;
|
|
color:#c9ddff
|
|
}
|
|
.tag-group {
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content:flex-end;
|
|
gap:6px;
|
|
max-width:440px
|
|
}
|
|
.release-keywords {
|
|
margin-top:17px;
|
|
color:#6681ab;
|
|
font:9px/1.5 var(--mono);
|
|
letter-spacing:.4px
|
|
}
|
|
.changelog-cta {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:36px;
|
|
margin:48px 0 110px;
|
|
padding:34px 38px;
|
|
border:1px solid #ffffff14;
|
|
border-radius:12px;
|
|
background:#0d1420
|
|
}
|
|
.changelog-cta h2 {
|
|
font-size:22px
|
|
}
|
|
.changelog-cta p {
|
|
margin-top:8px;
|
|
color:#8290a5;
|
|
font-size:13px
|
|
}
|
|
.changelog-cta .button {
|
|
flex-shrink:0
|
|
}
|
|
.search-intent {
|
|
margin:56px 0 0;
|
|
padding:40px;
|
|
border-left:2px solid #4c86ea;
|
|
background:linear-gradient(90deg,#101c2f,#0b1019 74%)
|
|
}
|
|
.search-intent h2 {
|
|
margin-top:11px;
|
|
font-size:28px;
|
|
letter-spacing:-.7px
|
|
}
|
|
.search-intent>p:not(.eyebrow) {
|
|
max-width:850px;
|
|
margin-top:15px;
|
|
color:#9aa8bd;
|
|
font-size:15px;
|
|
line-height:1.9
|
|
}
|
|
.search-intent code {
|
|
padding:2px 5px;
|
|
border-radius:4px;
|
|
background:#ffffff0d;
|
|
color:#b9cef0;
|
|
font:12px var(--mono)
|
|
}
|
|
.search-intent>div {
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
gap:22px;
|
|
margin-top:19px
|
|
}
|
|
.search-intent a {
|
|
color:#87b1f6;
|
|
font-size:12px
|
|
}
|
|
.search-intent a:hover {
|
|
color:white
|
|
}
|
|
@media(max-width:760px) {
|
|
.changelog-nav {
|
|
display:flex!important;
|
|
gap:14px!important;
|
|
font-size:10px!important
|
|
}
|
|
.changelog-nav a:nth-child(2),.changelog-nav a:nth-child(4),.changelog-nav .nav-divider {
|
|
display:none
|
|
}
|
|
.changelog-hero {
|
|
padding:58px 0 46px
|
|
}
|
|
.changelog-hero h1 {
|
|
font-size:44px;
|
|
letter-spacing:-2px
|
|
}
|
|
.release-entry,.release-featured {
|
|
grid-template-columns:1fr;
|
|
gap:13px;
|
|
padding:28px 0
|
|
}
|
|
.release-featured {
|
|
padding:25px 20px
|
|
}
|
|
.release-heading {
|
|
display:block
|
|
}
|
|
.release-heading h2 {
|
|
font-size:21px
|
|
}
|
|
.tag,.tag-group {
|
|
margin-top:12px
|
|
}
|
|
.tag-group {
|
|
justify-content:flex-start
|
|
}
|
|
.changelog-cta {
|
|
align-items:flex-start;
|
|
flex-direction:column;
|
|
margin-bottom:70px;
|
|
padding:28px 24px
|
|
}
|
|
.search-intent {
|
|
margin-top:38px;
|
|
padding:28px 22px
|
|
}
|
|
.search-intent h2 {
|
|
font-size:23px
|
|
}
|
|
}
|
|
/* Dialogs and state */
|
|
body.dialog-open {
|
|
overflow:hidden
|
|
}
|
|
dialog {
|
|
padding:0;
|
|
color:var(--text);
|
|
background:#101925;
|
|
border:1px solid #6888b643;
|
|
border-radius:13px;
|
|
max-height:94dvh;
|
|
box-shadow:0 35px 140px #000b
|
|
}
|
|
dialog::backdrop {
|
|
background:#030811e8;
|
|
backdrop-filter:blur(10px)
|
|
}
|
|
.dialog-top {
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:20px;
|
|
padding:14px 17px;
|
|
font:9px var(--mono);
|
|
letter-spacing:.5px
|
|
}
|
|
.dialog-top>div {
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:3px
|
|
}
|
|
.dialog-top strong {
|
|
font:500 13px var(--body)
|
|
}
|
|
.dialog-top>div>span {
|
|
font:9px var(--body);
|
|
color:#7890b2
|
|
}
|
|
.image-dialog {
|
|
width:min(1600px,95vw)
|
|
}
|
|
.image-dialog>img {
|
|
width:100%;
|
|
max-height:calc(94dvh - 128px);
|
|
object-fit:contain;
|
|
background:#090b10
|
|
}
|
|
.image-dialog>p {
|
|
padding:13px 18px;
|
|
font-size:11px;
|
|
color:#94a7c5
|
|
}
|
|
.film-dialog {
|
|
width:min(480px,92vw)
|
|
}
|
|
.film-dialog video {
|
|
display:block;
|
|
max-height:calc(90dvh - 123px);
|
|
width:100%;
|
|
aspect-ratio:9/16;
|
|
background:#03050a
|
|
}
|
|
.film-download {
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
gap:10px;
|
|
font-size:11px;
|
|
padding:12px
|
|
}
|
|
.film-download .icon {
|
|
width:13px;
|
|
height:13px
|
|
}
|
|
.toast {
|
|
position:fixed;
|
|
z-index:100;
|
|
bottom:25px;
|
|
left:50%;
|
|
transform:translate(-50%,15px);
|
|
padding:10px 20px;
|
|
border:1px solid #799bc34a;
|
|
background:#14253b;
|
|
color:#d0e0f8;
|
|
border-radius:7px;
|
|
font-size:12px;
|
|
box-shadow:0 10px 50px #0008;
|
|
opacity:0;
|
|
pointer-events:none;
|
|
transition:opacity .2s,transform .2s
|
|
}
|
|
.toast.visible {
|
|
opacity:1;
|
|
transform:translate(-50%,0)
|
|
}
|
|
/* Motion remains decorative; content is visible without JS. */
|
|
@keyframes orbital-run {
|
|
to {
|
|
offset-distance:100%
|
|
}
|
|
}
|
|
@keyframes core-float {
|
|
0%,100% {
|
|
transform:translate(-50%,-50%) rotate(-9deg)
|
|
}
|
|
50% {
|
|
transform:translate(-50%,-54%) rotate(-6deg)
|
|
}
|
|
}
|
|
@keyframes node-float {
|
|
0%,100% {
|
|
transform:translateY(0)
|
|
}
|
|
50% {
|
|
transform:translateY(-7px)
|
|
}
|
|
}
|
|
@keyframes twinkle {
|
|
0%,100% {
|
|
opacity:.3
|
|
}
|
|
50% {
|
|
opacity:1
|
|
}
|
|
}
|
|
@keyframes intro {
|
|
from {
|
|
opacity:0;
|
|
transform:translateY(18px)
|
|
}
|
|
to {
|
|
opacity:1;
|
|
transform:none
|
|
}
|
|
}
|
|
.hero-copy>* {
|
|
animation:intro .8s both
|
|
}
|
|
.hero-copy>h1 {
|
|
animation-delay:.08s
|
|
}
|
|
.hero-statement {
|
|
animation-delay:.16s
|
|
}
|
|
.hero-detail {
|
|
animation-delay:.23s
|
|
}
|
|
.hero-actions {
|
|
animation-delay:.3s
|
|
}
|
|
.hero-note {
|
|
animation-delay:.36s
|
|
}
|
|
.enhanced .reveal {
|
|
opacity:0;
|
|
transform:translateY(20px);
|
|
transition:opacity .7s,transform .7s
|
|
}
|
|
.enhanced .reveal.is-visible {
|
|
opacity:1;
|
|
transform:none
|
|
}
|
|
/* Responsive */
|
|
@media(min-width:1600px) {
|
|
.hero {
|
|
min-height:760px;
|
|
padding-top:95px
|
|
}
|
|
.hero-art {
|
|
margin-right:-55px
|
|
}
|
|
.hero h1 {
|
|
font-size:97px
|
|
}
|
|
.hero-statement {
|
|
font-size:23px
|
|
}
|
|
.hero-detail {
|
|
font-size:14px
|
|
}
|
|
.hero-art .orb-core {
|
|
width:160px;
|
|
height:160px
|
|
}
|
|
.hero-art .core-inset img {
|
|
width:100px;
|
|
height:100px
|
|
}
|
|
}
|
|
@media(max-width:1150px) {
|
|
.wrap {
|
|
width:calc(100% - 72px)
|
|
}
|
|
.hero h1 {
|
|
font-size:72px;
|
|
letter-spacing:-4px
|
|
}
|
|
.hero {
|
|
padding-top:65px;
|
|
min-height:640px
|
|
}
|
|
.hero-statement {
|
|
font-size:19px
|
|
}
|
|
.hero-art {
|
|
min-height:450px;
|
|
margin-left:-10px
|
|
}
|
|
.orb-core {
|
|
width:122px;
|
|
height:122px;
|
|
border-radius:29px
|
|
}
|
|
.core-inset {
|
|
border-radius:23px
|
|
}
|
|
.core-inset img {
|
|
width:76px;
|
|
height:76px
|
|
}
|
|
.orbit-node>div {
|
|
height:46px;
|
|
width:46px;
|
|
border-radius:12px
|
|
}
|
|
.orbital-caption {
|
|
top:63%
|
|
}
|
|
.modules-layout {
|
|
gap:55px
|
|
}
|
|
.start-layout {
|
|
gap:50px
|
|
}
|
|
.terminal pre {
|
|
font-size:9px;
|
|
padding-inline:17px
|
|
}
|
|
.section-aside {
|
|
max-width:260px
|
|
}
|
|
.site-header nav {
|
|
gap:22px
|
|
}
|
|
.nav-wrap {
|
|
width:calc(100% - 48px)
|
|
}
|
|
}
|
|
@media(max-width:900px) {
|
|
.hero {
|
|
grid-template-columns:1.13fr 1fr;
|
|
min-height:610px;
|
|
padding-top:50px
|
|
}
|
|
.hero h1 {
|
|
font-size:62px;
|
|
letter-spacing:-4px
|
|
}
|
|
.hero-statement {
|
|
font-size:18px
|
|
}
|
|
.hero-detail {
|
|
font-size:11px
|
|
}
|
|
.hero-actions {
|
|
gap:13px
|
|
}
|
|
.hero-actions .button {
|
|
padding:12px 17px;
|
|
font-size:11px;
|
|
gap:12px
|
|
}
|
|
.hero-actions .button-quiet {
|
|
padding:0;
|
|
gap:6px;
|
|
font-size:10px
|
|
}
|
|
.hero-note {
|
|
font-size:8px
|
|
}
|
|
.hero-art {
|
|
margin-left:-15px;
|
|
margin-right:-15px;
|
|
min-height:410px
|
|
}
|
|
.orbital-label {
|
|
font-size:7px;
|
|
letter-spacing:1.5px
|
|
}
|
|
.orbit-node>div {
|
|
height:40px;
|
|
width:40px
|
|
}
|
|
.orbit-node .icon {
|
|
height:18px;
|
|
width:18px
|
|
}
|
|
.node-skills {
|
|
left:10%;
|
|
top:23%
|
|
}
|
|
.node-office {
|
|
left:20%;
|
|
bottom:21%
|
|
}
|
|
.node-experts {
|
|
right:0
|
|
}
|
|
.orbit-coord {
|
|
bottom:10%;
|
|
font-size:6px
|
|
}
|
|
.orb-core {
|
|
width:105px;
|
|
height:105px;
|
|
border-radius:26px
|
|
}
|
|
.core-inset {
|
|
inset:6px;
|
|
border-radius:21px
|
|
}
|
|
.core-inset img {
|
|
width:66px;
|
|
height:66px
|
|
}
|
|
.orbital-caption {
|
|
top:60%
|
|
}
|
|
.orbital-caption small {
|
|
font-size:7px
|
|
}
|
|
.orbital-caption>span {
|
|
font-size:12px
|
|
}
|
|
.section-space {
|
|
padding-block:80px
|
|
}
|
|
.section-heading {
|
|
gap:30px
|
|
}
|
|
.section-aside {
|
|
max-width:230px;
|
|
font-size:11px
|
|
}
|
|
.modules-layout {
|
|
gap:38px
|
|
}
|
|
.module {
|
|
padding:13px 12px;
|
|
gap:8px;
|
|
grid-template-columns:28px 58px 1fr 13px
|
|
}
|
|
.module strong {
|
|
font-size:11px
|
|
}
|
|
.module>span:not(.module-icon):not(.module-number) {
|
|
font-size:9px
|
|
}
|
|
.runtime small {
|
|
font-size:6px;
|
|
letter-spacing:.5px
|
|
}
|
|
.start-layout {
|
|
grid-template-columns:1fr;
|
|
gap:35px
|
|
}
|
|
.start-copy {
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr;
|
|
column-gap:30px;
|
|
align-items:center
|
|
}
|
|
.start-copy .eyebrow,.start-copy h2 {
|
|
grid-column:1
|
|
}
|
|
.start-copy>p:not(.eyebrow) {
|
|
grid-column:2;
|
|
grid-row:2;
|
|
margin-top:0
|
|
}
|
|
.start-copy>.button {
|
|
grid-column:1;
|
|
width:max-content
|
|
}
|
|
.start-copy>.setup-guide {
|
|
grid-column:2;
|
|
grid-row:3
|
|
}
|
|
.terminal pre {
|
|
font-size:12px
|
|
}
|
|
.faq {
|
|
grid-template-columns:1fr 1.4fr;
|
|
gap:40px
|
|
}
|
|
.nav-source .icon:first-child {
|
|
display:none
|
|
}
|
|
.site-header nav {
|
|
font-size:10px;
|
|
gap:18px
|
|
}
|
|
.brand {
|
|
font-size:20px
|
|
}
|
|
.brand b {
|
|
font-size:8px
|
|
}
|
|
h2 {
|
|
font-size:35px
|
|
}
|
|
}
|
|
@media(max-width:680px) {
|
|
:root {
|
|
scroll-padding-top:25px
|
|
}
|
|
.wrap {
|
|
width:calc(100% - 40px)
|
|
}
|
|
.site-header {
|
|
height:75px
|
|
}
|
|
.nav-wrap {
|
|
width:calc(100% - 40px)
|
|
}
|
|
.brand {
|
|
font-size:20px;
|
|
gap:9px
|
|
}
|
|
.brand>img {
|
|
width:29px;
|
|
height:29px
|
|
}
|
|
.brand b {
|
|
font-size:7px;
|
|
padding:4px 5px
|
|
}
|
|
.nav-toggle {
|
|
display:inline-flex!important;
|
|
width:34px;
|
|
height:34px;
|
|
border-radius:7px
|
|
}
|
|
.site-header nav {
|
|
position:absolute;
|
|
top:66px;
|
|
left:20px;
|
|
right:20px;
|
|
padding:16px;
|
|
border:1px solid #6683b038;
|
|
border-radius:10px;
|
|
box-shadow:0 15px 40px #000a;
|
|
background:#101928;
|
|
display:none;
|
|
grid-template-columns:1fr 1fr;
|
|
gap:5px;
|
|
font-size:13px
|
|
}
|
|
.site-header nav.is-open {
|
|
display:grid
|
|
}
|
|
.site-header nav a {
|
|
padding:10px
|
|
}
|
|
.site-header .nav-divider {
|
|
display:none
|
|
}
|
|
.site-header .language-link {
|
|
grid-column:2;
|
|
grid-row:1;
|
|
text-align:right
|
|
}
|
|
.nav-source {
|
|
grid-column:2;
|
|
grid-row:2/4;
|
|
align-self:center;
|
|
justify-content:center
|
|
}
|
|
.nav-source .icon:first-child {
|
|
display:block
|
|
}
|
|
.hero {
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items:stretch;
|
|
padding-top:39px;
|
|
padding-bottom:0;
|
|
min-height:0
|
|
}
|
|
.hero h1 {
|
|
font-size:clamp(53px,13.6vw,88px);
|
|
line-height:1.12;
|
|
letter-spacing:-3.5px;
|
|
margin-top:21px
|
|
}
|
|
.hero h1>span:first-child {
|
|
letter-spacing:-2px
|
|
}
|
|
.release-link {
|
|
font-size:8px;
|
|
letter-spacing:.9px
|
|
}
|
|
.hero-statement {
|
|
font-size:18px;
|
|
margin-top:23px;
|
|
line-height:1.7
|
|
}
|
|
.hero-detail {
|
|
font-size:11px;
|
|
margin-top:12px;
|
|
line-height:1.85
|
|
}
|
|
.hero-actions {
|
|
margin-top:25px;
|
|
gap:17px
|
|
}
|
|
.hero-actions .button {
|
|
padding:13px 21px;
|
|
font-size:12px;
|
|
gap:20px
|
|
}
|
|
.hero-actions .button-quiet {
|
|
font-size:11px;
|
|
padding:0;
|
|
gap:8px
|
|
}
|
|
.hero-note {
|
|
font-size:9px;
|
|
margin-top:17px;
|
|
letter-spacing:.5px
|
|
}
|
|
.hero-art {
|
|
height:350px;
|
|
min-height:0;
|
|
margin:0 -10px -5px
|
|
}
|
|
.orbit-scene {
|
|
max-width:480px;
|
|
width:100%;
|
|
margin:auto
|
|
}
|
|
.orbital-label {
|
|
top:8%;
|
|
font-size:7px;
|
|
letter-spacing:2px
|
|
}
|
|
.orbit-outer {
|
|
width:96%;
|
|
height:91%
|
|
}
|
|
.orbit-middle,.track-one {
|
|
width:81%;
|
|
height:74%
|
|
}
|
|
.orbit-inner,.track-two {
|
|
width:59%;
|
|
height:55%
|
|
}
|
|
.orb-core {
|
|
width:107px;
|
|
height:107px;
|
|
top:47%
|
|
}
|
|
.orbit-node>div {
|
|
height:41px;
|
|
width:41px;
|
|
border-radius:11px
|
|
}
|
|
.orbit-node>span {
|
|
font-size:8px
|
|
}
|
|
.node-skills {
|
|
left:12%;
|
|
top:22%
|
|
}
|
|
.node-experts {
|
|
right:4%;
|
|
top:37%
|
|
}
|
|
.node-office {
|
|
left:27%;
|
|
bottom:10%
|
|
}
|
|
.orbital-caption {
|
|
top:66%
|
|
}
|
|
.orbital-caption small {
|
|
font-size:7px
|
|
}
|
|
.orbit-coord {
|
|
font-size:6px;
|
|
bottom:6%;
|
|
right:5%
|
|
}
|
|
.orbital-grid {
|
|
inset:0
|
|
}
|
|
.section-space {
|
|
padding-block:65px
|
|
}
|
|
.section-heading {
|
|
display:block;
|
|
margin-bottom:26px
|
|
}
|
|
.eyebrow {
|
|
font-size:8px;
|
|
letter-spacing:1.4px;
|
|
margin-bottom:16px
|
|
}
|
|
h2 {
|
|
font-size:31px;
|
|
line-height:1.4;
|
|
letter-spacing:-1px
|
|
}
|
|
.section-aside {
|
|
font-size:11px;
|
|
max-width:none;
|
|
margin-top:17px
|
|
}
|
|
.product-tabs {
|
|
padding:9px 7px;
|
|
gap:2px;
|
|
justify-content:space-between
|
|
}
|
|
.product-tabs button {
|
|
padding:9px 8px;
|
|
gap:5px;
|
|
font-size:9px
|
|
}
|
|
.product-tabs .icon {
|
|
width:12px;
|
|
height:12px
|
|
}
|
|
.product-showcase {
|
|
border-radius:9px
|
|
}
|
|
.product-bar {
|
|
padding:10px 11px;
|
|
font-size:6px;
|
|
letter-spacing:.5px
|
|
}
|
|
.product-bar .status-dot {
|
|
width:4px;
|
|
height:4px
|
|
}
|
|
.product-caption {
|
|
padding:15px;
|
|
gap:10px;
|
|
align-items:start
|
|
}
|
|
.product-caption h3 {
|
|
font-size:12px;
|
|
line-height:1.7
|
|
}
|
|
.product-caption p {
|
|
font-size:9px;
|
|
line-height:1.85;
|
|
margin-top:6px
|
|
}
|
|
.caption-arrow {
|
|
width:26px;
|
|
height:26px
|
|
}
|
|
.caption-arrow .icon {
|
|
width:12px;
|
|
height:12px
|
|
}
|
|
.zoom-pill {
|
|
opacity:1;
|
|
transform:none;
|
|
bottom:9px;
|
|
right:9px;
|
|
font-size:7px;
|
|
padding:4px 7px;
|
|
gap:4px
|
|
}
|
|
.zoom-pill .icon {
|
|
width:9px;
|
|
height:9px
|
|
}
|
|
.screenshot-note {
|
|
font-size:8px;
|
|
margin-top:15px
|
|
}
|
|
.capabilities {
|
|
padding-top:8px
|
|
}
|
|
.modules-layout {
|
|
grid-template-columns:1fr;
|
|
gap:32px
|
|
}
|
|
.modules-copy>p:not(.eyebrow) {
|
|
font-size:11px;
|
|
margin-top:17px
|
|
}
|
|
.text-link {
|
|
font-size:10px;
|
|
margin-top:17px
|
|
}
|
|
.module {
|
|
grid-template-columns:30px 69px 1fr 15px;
|
|
padding:14px 15px;
|
|
gap:11px
|
|
}
|
|
.module strong {
|
|
font-size:12px
|
|
}
|
|
.module>span:not(.module-icon):not(.module-number) {
|
|
font-size:9px
|
|
}
|
|
.runtime>span:nth-child(2) {
|
|
font-size:12px
|
|
}
|
|
.runtime small {
|
|
font-size:6px
|
|
}
|
|
.start-copy {
|
|
display:block
|
|
}
|
|
.start-copy>p:not(.eyebrow) {
|
|
font-size:11px;
|
|
margin-top:19px
|
|
}
|
|
.start-copy>.button {
|
|
margin-top:24px;
|
|
font-size:12px;
|
|
gap:18px
|
|
}
|
|
.start-copy>.setup-guide {
|
|
margin-top:18px
|
|
}
|
|
.start-layout {
|
|
gap:32px
|
|
}
|
|
.terminal-header {
|
|
height:44px;
|
|
padding:0 11px;
|
|
gap:9px;
|
|
font-size:9px
|
|
}
|
|
.terminal-dots {
|
|
gap:4px
|
|
}
|
|
.terminal-dots i {
|
|
width:4px;
|
|
height:4px
|
|
}
|
|
.copy-button {
|
|
font-size:8px;
|
|
padding:6px 0;
|
|
gap:4px
|
|
}
|
|
.copy-button .icon {
|
|
width:11px;
|
|
height:11px
|
|
}
|
|
.terminal pre {
|
|
font-size:8px;
|
|
line-height:3;
|
|
padding:13px 12px 18px
|
|
}
|
|
.shell-prompt {
|
|
margin-right:3px
|
|
}
|
|
.source-tabs {
|
|
padding:10px 9px 0
|
|
}
|
|
.source-tabs button {
|
|
font-size:9px
|
|
}
|
|
.source-tabs>span {
|
|
font-size:7px
|
|
}
|
|
.terminal-bottom {
|
|
font-size:6px;
|
|
letter-spacing:1px;
|
|
padding:12px
|
|
}
|
|
.terminal-note {
|
|
font-size:9px
|
|
}
|
|
.faq {
|
|
margin-top:60px;
|
|
grid-template-columns:1fr;
|
|
gap:25px
|
|
}
|
|
.faq>h3 {
|
|
font-size:19px
|
|
}
|
|
.faq summary {
|
|
font-size:11px;
|
|
padding:17px 0
|
|
}
|
|
.faq details p {
|
|
font-size:10px
|
|
}
|
|
.site-footer {
|
|
padding-top:28px;
|
|
gap:21px
|
|
}
|
|
.site-footer .brand {
|
|
font-size:18px
|
|
}
|
|
.site-footer>nav {
|
|
width:100%;
|
|
gap:23px;
|
|
font-size:10px
|
|
}
|
|
.back-top {
|
|
margin-left:auto
|
|
}
|
|
.site-footer>div:first-child>p {
|
|
font-size:8px;
|
|
margin-top:9px
|
|
}
|
|
.footer-fine {
|
|
display:grid;
|
|
grid-template-columns:1fr auto;
|
|
gap:10px;
|
|
margin-top:3px;
|
|
font-size:7px
|
|
}
|
|
.footer-fine>span:nth-child(2) {
|
|
grid-column:1/-1;
|
|
grid-row:2;
|
|
margin:0
|
|
}
|
|
.image-dialog {
|
|
width:96vw;
|
|
border-radius:9px
|
|
}
|
|
.dialog-top {
|
|
padding:11px;
|
|
font-size:7px
|
|
}
|
|
.dialog-top .icon-button {
|
|
width:30px;
|
|
height:30px
|
|
}
|
|
.dialog-top .icon {
|
|
height:16px;
|
|
width:16px
|
|
}
|
|
.image-dialog>p {
|
|
font-size:9px;
|
|
padding:11px
|
|
}
|
|
.film-dialog {
|
|
width:min(440px,92vw)
|
|
}
|
|
.toast {
|
|
font-size:11px;
|
|
max-width:90vw;
|
|
text-align:center;
|
|
white-space:normal
|
|
}
|
|
}
|
|
@media(prefers-reduced-motion:reduce) {
|
|
:root {
|
|
scroll-behavior:auto
|
|
}
|
|
*,*:before,*:after {
|
|
animation:none!important;
|
|
transition:none!important;
|
|
scroll-behavior:auto!important
|
|
}
|
|
.enhanced .reveal {
|
|
opacity:1;
|
|
transform:none
|
|
}
|
|
.orbit-scene {
|
|
transform:none!important
|
|
}
|
|
}
|
|
/* The source navigation intentionally contains only the two repository addresses. */
|
|
.source-navigation {
|
|
position:relative
|
|
}
|
|
.source-navigation>summary {
|
|
list-style:none;
|
|
cursor:pointer;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:9px;
|
|
border:1px solid #ffffff1c;
|
|
border-radius:7px;
|
|
padding:9px 13px;
|
|
color:#dce5f5;
|
|
min-height:38px
|
|
}
|
|
.source-navigation>summary::-webkit-details-marker {
|
|
display:none
|
|
}
|
|
.source-navigation>summary>.icon {
|
|
width:15px;
|
|
height:15px
|
|
}
|
|
.source-chevron {
|
|
height:5px;
|
|
width:5px;
|
|
border-right:1px solid #92afd5;
|
|
border-bottom:1px solid #92afd5;
|
|
transform:rotate(45deg);
|
|
margin-left:9px;
|
|
margin-top:-3px;
|
|
transition:transform .2s
|
|
}
|
|
.source-navigation[open] .source-chevron {
|
|
transform:rotate(225deg);
|
|
margin-top:3px
|
|
}
|
|
.source-menu {
|
|
position:absolute;
|
|
right:0;
|
|
top:calc(100% + 10px);
|
|
width:277px;
|
|
background:#111c2c;
|
|
border:1px solid #6683b03b;
|
|
border-radius:10px;
|
|
padding:6px;
|
|
box-shadow:0 18px 50px #0009
|
|
}
|
|
.source-menu>a {
|
|
display:flex;
|
|
align-items:center;
|
|
gap:11px;
|
|
padding:12px!important;
|
|
border-radius:6px
|
|
}
|
|
.source-menu>a:hover {
|
|
background:#243c5d66
|
|
}
|
|
.source-menu>a>.icon {
|
|
width:18px;
|
|
height:18px;
|
|
color:#97b9ed
|
|
}
|
|
.source-menu>a>.icon:last-child {
|
|
margin-left:auto;
|
|
width:13px;
|
|
height:13px
|
|
}
|
|
.source-menu>a>span {
|
|
font-size:12px;
|
|
color:#d6e2f4
|
|
}
|
|
.source-menu small {
|
|
display:block;
|
|
font:8px/1.8 var(--mono);
|
|
color:#6f87a9;
|
|
margin-top:2px
|
|
}
|
|
@media(max-width:680px) {
|
|
.source-navigation {
|
|
grid-column:1/-1;
|
|
margin-top:5px
|
|
}
|
|
.source-navigation>summary {
|
|
font-size:12px;
|
|
padding:11px
|
|
}
|
|
.source-menu {
|
|
position:static;
|
|
width:100%;
|
|
margin-top:7px;
|
|
box-shadow:none;
|
|
background:#0b1422
|
|
}
|
|
.site-header nav a.language-link {
|
|
padding:10px
|
|
}
|
|
.site-header .source-menu>a {
|
|
padding:11px!important
|
|
}
|
|
.source-menu small {
|
|
font-size:9px
|
|
}
|
|
}
|
|
.hero-art {
|
|
overflow:clip
|
|
}
|
|
@media(min-width:681px) {
|
|
.hero {
|
|
padding-top:68px;
|
|
padding-bottom:64px
|
|
}
|
|
.section-aside {
|
|
font-size:13px
|
|
}
|
|
.hero-detail {
|
|
color:#96a2b6
|
|
}
|
|
.hero-note {
|
|
color:#8290a7
|
|
}
|
|
.hero-art {
|
|
min-height:490px
|
|
}
|
|
}
|
|
@media(prefers-reduced-motion:reduce) {
|
|
.source-chevron {
|
|
transition:none
|
|
}
|
|
}
|
|
/* Editorial tour of the actual sidebar; status is explicit for each area. */
|
|
.workspace-section {
|
|
padding-bottom:35px
|
|
}
|
|
.workspace-section .section-aside {
|
|
max-width:335px
|
|
}
|
|
.workspace-tour {
|
|
display:grid;
|
|
grid-template-columns:267px minmax(0,1fr);
|
|
border:1px solid #6683b034;
|
|
border-radius:13px;
|
|
background:linear-gradient(115deg,#111a27,#0b121c 70%);
|
|
overflow:hidden;
|
|
box-shadow:0 30px 70px #0003
|
|
}
|
|
.workspace-sidebar {
|
|
background:#111925;
|
|
border-right:1px solid #7091c11a;
|
|
padding:25px 16px 21px;
|
|
display:flex;
|
|
flex-direction:column
|
|
}
|
|
.workspace-wordmark {
|
|
display:flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
font-size:17px;
|
|
letter-spacing:-.5px;
|
|
font-weight:600;
|
|
padding:0 13px 26px
|
|
}
|
|
.workspace-tabs {
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:5px
|
|
}
|
|
.workspace-tabs button {
|
|
display:flex;
|
|
align-items:center;
|
|
gap:12px;
|
|
text-align:left;
|
|
padding:12px 13px;
|
|
border:1px solid transparent;
|
|
border-radius:6px;
|
|
background:none;
|
|
color:#8290a6;
|
|
font-size:12px;
|
|
min-height:47px;
|
|
transition:background .2s,color .2s
|
|
}
|
|
.workspace-tabs button>.icon:first-child {
|
|
width:18px;
|
|
height:18px
|
|
}
|
|
.workspace-tabs button>.icon:last-child {
|
|
margin-left:auto;
|
|
opacity:0;
|
|
width:13px;
|
|
height:13px
|
|
}
|
|
.workspace-tabs button[aria-selected=true] {
|
|
color:#d5e4ff;
|
|
background:#326ed522;
|
|
border-color:#608ede38
|
|
}
|
|
.workspace-tabs button[aria-selected=true]>.icon:last-child {
|
|
opacity:1
|
|
}
|
|
.workspace-tabs button:hover {
|
|
color:#c4d5ef;
|
|
background:#ffffff04
|
|
}
|
|
.workspace-tabs button:nth-child(8) {
|
|
margin-top:15px;
|
|
border-top:1px solid #ffffff12
|
|
}
|
|
.workspace-panel {
|
|
padding:35px 42px 32px;
|
|
min-height:500px
|
|
}
|
|
.workspace-panel[hidden] {
|
|
display:none
|
|
}
|
|
.workspace-panel-top {
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
gap:20px;
|
|
color:#6883a8;
|
|
font-size:10px;
|
|
margin-bottom:30px
|
|
}
|
|
.feature-state {
|
|
display:flex;
|
|
gap:7px;
|
|
align-items:center;
|
|
font-size:9px;
|
|
letter-spacing:.4px;
|
|
color:#b1bccd;
|
|
padding:4px 9px;
|
|
border:1px solid #ffffff16;
|
|
border-radius:20px;
|
|
white-space:nowrap
|
|
}
|
|
.feature-state>i {
|
|
height:4px;
|
|
width:4px;
|
|
background:#7c8aa1;
|
|
border-radius:50%
|
|
}
|
|
.feature-state.available {
|
|
color:#89c6b3;
|
|
border-color:#54988230;
|
|
background:#38735f0d
|
|
}
|
|
.feature-state.available>i {
|
|
background:#75baaa
|
|
}
|
|
.feature-state.partial {
|
|
color:#b1c6e6;
|
|
border-color:#547bac45;
|
|
background:#417aba0d
|
|
}
|
|
.feature-state.partial>i {
|
|
background:#709ddd
|
|
}
|
|
.workspace-panel h3 {
|
|
font-size:27px;
|
|
letter-spacing:-.6px;
|
|
line-height:1.45
|
|
}
|
|
.workspace-lead {
|
|
color:#8a9ab3;
|
|
font-size:12px;
|
|
line-height:2;
|
|
margin-top:18px;
|
|
max-width:610px
|
|
}
|
|
.workspace-panel ul {
|
|
list-style:none;
|
|
padding:0;
|
|
margin:26px 0 24px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:18px
|
|
}
|
|
.workspace-panel li {
|
|
display:flex;
|
|
gap:15px;
|
|
align-items:baseline
|
|
}
|
|
.workspace-panel h4 {
|
|
font-size:12px;
|
|
font-weight:500;
|
|
margin:0 0 4px;
|
|
color:#becce0
|
|
}
|
|
.workspace-panel li p {
|
|
font-size:11px;
|
|
line-height:1.8;
|
|
color:#6f829f
|
|
}
|
|
.workspace-panel>.text-link {
|
|
margin-top:23px
|
|
}
|
|
.workspace-footnote {
|
|
font-size:9px;
|
|
text-align:center;
|
|
color:#60748e;
|
|
margin-top:19px
|
|
}
|
|
.developer-paths {
|
|
margin-top:25px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:12px
|
|
}
|
|
.developer-paths>a {
|
|
display:flex;
|
|
align-items:center;
|
|
gap:12px;
|
|
padding:11px 0;
|
|
border-top:1px solid #6f8fb41c;
|
|
font-size:11px;
|
|
color:#c4d3e8
|
|
}
|
|
.developer-paths>a>.icon {
|
|
width:15px;
|
|
height:15px;
|
|
color:#81aaf0
|
|
}
|
|
.developer-paths>a>.icon:last-child {
|
|
margin-left:auto;
|
|
width:13px;
|
|
height:13px
|
|
}
|
|
.developer-paths>a>span>small {
|
|
display:block;
|
|
font-size:10px;
|
|
color:#6c81a2;
|
|
margin-top:3px
|
|
}
|
|
.developer-paths>a:hover {
|
|
color:#94beff
|
|
}
|
|
.module-code {
|
|
margin-top:9px;
|
|
display:block;
|
|
border:1px solid #5c7dab21;
|
|
border-radius:6px;
|
|
background:#090f19;
|
|
padding:12px 15px;
|
|
overflow:auto;
|
|
color:#708fbd;
|
|
font:9px/1.9 var(--mono)
|
|
}
|
|
@media(max-width:1150px) {
|
|
.workspace-tour {
|
|
grid-template-columns:239px minmax(0,1fr)
|
|
}
|
|
.workspace-panel {
|
|
padding:30px
|
|
}
|
|
.workspace-panel h3 {
|
|
font-size:24px
|
|
}
|
|
.workspace-tabs button {
|
|
font-size:11px;
|
|
gap:9px
|
|
}
|
|
}
|
|
@media(max-width:900px) {
|
|
.workspace-tour {
|
|
grid-template-columns:218px minmax(0,1fr)
|
|
}
|
|
.workspace-panel {
|
|
padding:26px;
|
|
min-height:500px
|
|
}
|
|
.workspace-panel h3 {
|
|
font-size:23px
|
|
}
|
|
.workspace-lead {
|
|
font-size:11px
|
|
}
|
|
.workspace-panel li p {
|
|
font-size:10px
|
|
}
|
|
.workspace-tabs button {
|
|
padding-inline:10px;
|
|
font-size:10px
|
|
}
|
|
.workspace-sidebar {
|
|
padding-inline:10px
|
|
}
|
|
.workspace-tabs button>.icon:first-child {
|
|
width:16px;
|
|
height:16px
|
|
}
|
|
.workspace-panel-top {
|
|
margin-bottom:23px
|
|
}
|
|
.workspace-panel h4 {
|
|
font-size:11px
|
|
}
|
|
}
|
|
@media(max-width:680px) {
|
|
.workspace-section {
|
|
padding-bottom:12px
|
|
}
|
|
.workspace-tour {
|
|
display:block;
|
|
border-radius:9px
|
|
}
|
|
.workspace-sidebar {
|
|
padding:16px 10px 12px;
|
|
border-right:0;
|
|
border-bottom:1px solid #7091c121
|
|
}
|
|
.workspace-wordmark {
|
|
padding:0 8px 15px;
|
|
font-size:15px
|
|
}
|
|
.workspace-wordmark img {
|
|
width:21px;
|
|
height:21px
|
|
}
|
|
.workspace-tabs {
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr;
|
|
gap:5px
|
|
}
|
|
.workspace-tabs button {
|
|
min-height:37px;
|
|
padding:8px 7px;
|
|
gap:7px;
|
|
font-size:9px
|
|
}
|
|
.workspace-tabs button:nth-child(8) {
|
|
margin-top:0;
|
|
border-top-color:transparent
|
|
}
|
|
.workspace-tabs button>.icon:first-child {
|
|
width:14px;
|
|
height:14px
|
|
}
|
|
.workspace-tabs button>.icon:last-child {
|
|
display:none
|
|
}
|
|
.workspace-panel {
|
|
padding:24px 19px 27px;
|
|
min-height:0
|
|
}
|
|
.workspace-panel-top {
|
|
font-size:9px;
|
|
margin-bottom:21px
|
|
}
|
|
.feature-state {
|
|
font-size:8px;
|
|
padding:3px 8px
|
|
}
|
|
.workspace-panel h3 {
|
|
font-size:23px;
|
|
letter-spacing:-.3px
|
|
}
|
|
.workspace-lead {
|
|
font-size:11px;
|
|
margin-top:15px
|
|
}
|
|
.workspace-panel ul {
|
|
gap:18px;
|
|
margin-top:24px
|
|
}
|
|
.workspace-panel li {
|
|
gap:11px
|
|
}
|
|
.workspace-panel li p {
|
|
font-size:10px;
|
|
line-height:1.85
|
|
}
|
|
.workspace-footnote {
|
|
font-size:8px;
|
|
line-height:1.8;
|
|
text-align:left;
|
|
margin-top:13px
|
|
}
|
|
.developer-paths {
|
|
margin-top:22px
|
|
}
|
|
.developer-paths>a {
|
|
font-size:11px
|
|
}
|
|
.developer-paths>a>span>small {
|
|
font-size:9px
|
|
}
|
|
.module-code {
|
|
font-size:8px;
|
|
padding:12px
|
|
}
|
|
}
|