490 lines
9.6 KiB
CSS
490 lines
9.6 KiB
CSS
:root {
|
|
--bg0: #07070b;
|
|
--bg1: #0b0b11;
|
|
--bg2: #11111a;
|
|
--card: rgba(17, 17, 26, 0.72);
|
|
--card2: rgba(12, 12, 18, 0.64);
|
|
--stroke: rgba(255, 255, 255, 0.08);
|
|
--stroke2: rgba(255, 255, 255, 0.05);
|
|
--text: #f3f4f6;
|
|
--muted: rgba(243, 244, 246, 0.7);
|
|
--dim: rgba(243, 244, 246, 0.46);
|
|
|
|
--b: #4285f4;
|
|
--r: #ea4335;
|
|
--y: #fbbc05;
|
|
--g: #34a853;
|
|
|
|
--shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
|
|
--shadow2: 0 16px 40px rgba(0, 0, 0, 0.45);
|
|
|
|
--radius: 16px;
|
|
--radius2: 22px;
|
|
|
|
--serif: "Fraunces", ui-serif, Georgia, serif;
|
|
--sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: radial-gradient(1200px 800px at 50% -20%, rgba(66, 133, 244, 0.18), transparent 60%),
|
|
radial-gradient(900px 700px at 80% 18%, rgba(234, 67, 53, 0.14), transparent 55%),
|
|
radial-gradient(1000px 900px at 18% 62%, rgba(52, 168, 83, 0.14), transparent 55%),
|
|
radial-gradient(900px 900px at 65% 88%, rgba(251, 188, 5, 0.12), transparent 55%),
|
|
linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg0));
|
|
color: var(--text);
|
|
font-family: var(--sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
line-height: 1.55;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
code {
|
|
font-family: var(--mono);
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.skip {
|
|
position: absolute;
|
|
left: -999px;
|
|
top: 10px;
|
|
background: var(--bg2);
|
|
border: 1px solid var(--stroke);
|
|
color: var(--text);
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
z-index: 20;
|
|
}
|
|
.skip:focus {
|
|
left: 12px;
|
|
}
|
|
|
|
.bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.bg__mesh {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(1200px 800px at 20% 20%, rgba(66, 133, 244, 0.18), transparent 60%),
|
|
radial-gradient(1000px 800px at 82% 30%, rgba(234, 67, 53, 0.12), transparent 55%),
|
|
radial-gradient(1000px 900px at 40% 85%, rgba(52, 168, 83, 0.12), transparent 55%);
|
|
filter: blur(4px) saturate(1.12);
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.bg__grid {
|
|
position: absolute;
|
|
inset: -2px;
|
|
background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
|
|
background-size: 72px 72px;
|
|
opacity: 0.055;
|
|
transform: perspective(900px) rotateX(58deg) translateY(-18%);
|
|
transform-origin: top;
|
|
mask-image: radial-gradient(60% 60% at 50% 30%, rgba(0, 0, 0, 1), transparent 72%);
|
|
}
|
|
|
|
.bg__grain {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.2;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
|
|
mix-blend-mode: overlay;
|
|
}
|
|
|
|
.wrap {
|
|
width: min(1100px, calc(100% - 48px));
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.top {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
background: rgba(7, 7, 11, 0.58);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.top__row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 0;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.brand__mark {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 10px;
|
|
background: conic-gradient(from 200deg, var(--b), var(--g), var(--y), var(--r), var(--b));
|
|
box-shadow: 0 10px 24px rgba(66, 133, 244, 0.15), 0 10px 24px rgba(52, 168, 83, 0.12);
|
|
}
|
|
|
|
.brand__mark--small {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.brand__name {
|
|
font-family: var(--mono);
|
|
font-weight: 500;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.brand__tag {
|
|
font-size: 12px;
|
|
color: var(--dim);
|
|
border: 1px solid var(--stroke2);
|
|
background: rgba(17, 17, 26, 0.55);
|
|
padding: 3px 8px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.nav a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav a:hover {
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav__cta {
|
|
color: var(--text) !important;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
padding: 8px 12px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.main {
|
|
padding-bottom: 70px;
|
|
}
|
|
|
|
.hero {
|
|
padding: 56px 0 26px;
|
|
}
|
|
|
|
.hero__grid {
|
|
display: grid;
|
|
grid-template-columns: 1.05fr 0.95fr;
|
|
gap: 28px;
|
|
align-items: start;
|
|
}
|
|
|
|
.kicker {
|
|
display: inline-flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: rgba(243, 244, 246, 0.58);
|
|
margin: 0 0 14px;
|
|
}
|
|
|
|
.kicker::before {
|
|
content: "";
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 3px;
|
|
background: linear-gradient(135deg, rgba(66, 133, 244, 0.9), rgba(52, 168, 83, 0.85));
|
|
box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.08);
|
|
}
|
|
|
|
h1 {
|
|
font-family: var(--serif);
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
line-height: 0.95;
|
|
margin: 0 0 14px;
|
|
font-size: clamp(44px, 5.5vw, 68px);
|
|
}
|
|
|
|
.hero__word {
|
|
display: block;
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
animation: rise 700ms cubic-bezier(0.2, 1, 0.2, 1) forwards;
|
|
}
|
|
|
|
.hero__word:nth-child(1) {
|
|
animation-delay: 80ms;
|
|
}
|
|
.hero__word:nth-child(2) {
|
|
animation-delay: 160ms;
|
|
}
|
|
.hero__word:nth-child(3) {
|
|
animation-delay: 260ms;
|
|
}
|
|
|
|
.hero__word--mono {
|
|
font-family: var(--mono);
|
|
font-weight: 500;
|
|
letter-spacing: -0.04em;
|
|
color: rgba(243, 244, 246, 0.92);
|
|
}
|
|
|
|
@keyframes rise {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.lede {
|
|
margin: 0 0 18px;
|
|
font-size: 16.5px;
|
|
color: var(--muted);
|
|
max-width: 52ch;
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
animation: rise 700ms cubic-bezier(0.2, 1, 0.2, 1) 320ms forwards;
|
|
}
|
|
|
|
.lede strong {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin: 0 0 20px;
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
animation: rise 700ms cubic-bezier(0.2, 1, 0.2, 1) 380ms forwards;
|
|
}
|
|
|
|
.pill {
|
|
font-size: 12px;
|
|
border-radius: 999px;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--stroke2);
|
|
background: rgba(17, 17, 26, 0.55);
|
|
color: rgba(243, 244, 246, 0.76);
|
|
}
|
|
|
|
.pill--b {
|
|
box-shadow: inset 0 0 0 1px rgba(66, 133, 244, 0.25);
|
|
}
|
|
.pill--r {
|
|
box-shadow: inset 0 0 0 1px rgba(234, 67, 53, 0.22);
|
|
}
|
|
.pill--y {
|
|
box-shadow: inset 0 0 0 1px rgba(251, 188, 5, 0.22);
|
|
}
|
|
.pill--g {
|
|
box-shadow: inset 0 0 0 1px rgba(52, 168, 83, 0.22);
|
|
}
|
|
|
|
.hero__actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin: 0 0 12px;
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
animation: rise 700ms cubic-bezier(0.2, 1, 0.2, 1) 440ms forwards;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
text-decoration: none !important;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
|
|
}
|
|
|
|
.btn--primary {
|
|
background: linear-gradient(135deg, rgba(66, 133, 244, 0.92), rgba(52, 168, 83, 0.86));
|
|
color: #091018;
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
box-shadow: 0 18px 44px rgba(66, 133, 244, 0.18), 0 18px 44px rgba(52, 168, 83, 0.14);
|
|
}
|
|
|
|
.btn--ghost {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: var(--text);
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.note {
|
|
margin: 0;
|
|
color: rgba(243, 244, 246, 0.56);
|
|
font-size: 13px;
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
animation: rise 700ms cubic-bezier(0.2, 1, 0.2, 1) 520ms forwards;
|
|
}
|
|
|
|
.note code {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
padding: 2px 6px;
|
|
border-radius: 8px;
|
|
color: rgba(243, 244, 246, 0.84);
|
|
}
|
|
|
|
.hero__panel {
|
|
display: grid;
|
|
gap: 14px;
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
animation: rise 700ms cubic-bezier(0.2, 1, 0.2, 1) 260ms forwards;
|
|
}
|
|
|
|
.card {
|
|
border: 1px solid var(--stroke);
|
|
background: var(--card);
|
|
border-radius: var(--radius2);
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.term__bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
background: rgba(12, 12, 18, 0.58);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.dots {
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.dot {
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.dot--r {
|
|
background: #ff5f57;
|
|
}
|
|
.dot--y {
|
|
background: #febc2e;
|
|
}
|
|
.dot--g {
|
|
background: #28c840;
|
|
}
|
|
|
|
.term__title {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
color: rgba(243, 244, 246, 0.55);
|
|
}
|
|
|
|
.term__body {
|
|
padding: 14px 14px 16px;
|
|
background: rgba(11, 11, 17, 0.6);
|
|
}
|
|
|
|
.term__pre {
|
|
margin: 0;
|
|
font-family: var(--mono);
|
|
font-size: 12.5px;
|
|
color: rgba(243, 244, 246, 0.86);
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.term__pre code {
|
|
display: block;
|
|
}
|
|
|
|
.meta {
|
|
padding: 14px 14px;
|
|
background: var(--card2);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
box-shadow: var(--shadow2);
|
|
}
|
|
|
|
.meta__item {
|
|
display: grid;
|
|
grid-template-columns: 90px 1fr;
|
|
gap: 12px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.meta__item + .meta__item {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.meta__k {
|
|
color: rgba(243, 244, 246, 0.55);
|
|
font-size: 12px;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.meta__v {
|
|
color: rgba(243, 244, 246, 0.86);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.meta__v code {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
padding: 2px 6px;
|
|
border-radius: 8px;
|
|
color: rgba(243, 244, 246, 0.9);
|
|
}
|