diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro
index 8d6dc03fe..d5c7ef04f 100644
--- a/apps/marketing/src/pages/index.astro
+++ b/apps/marketing/src/pages/index.astro
@@ -43,10 +43,14 @@ import { AnimatedBeamDemo } from '../components/animated-beam-demo'
@@ -291,3 +295,23 @@ import { AnimatedBeamDemo } from '../components/animated-beam-demo'
+
+
diff --git a/apps/marketing/src/styles/global.css b/apps/marketing/src/styles/global.css
index a1bf02793..93bf010a0 100644
--- a/apps/marketing/src/styles/global.css
+++ b/apps/marketing/src/styles/global.css
@@ -55,8 +55,9 @@ body {
z-index: 1;
}
.pattern-graph {
- -webkit-mask-image: url("/pattern-graph-paper.svg");
- mask-image: url("/pattern-graph-paper.svg");
+ --pattern-graph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%3E%3Cg%20fill-rule='evenodd'%3E%3Cg%20fill='%23000'%3E%3Cpath%20opacity='.5'%20d='M96%2095h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9z'/%3E%3Cpath%20d='M6%205V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ -webkit-mask-image: var(--pattern-graph);
+ mask-image: var(--pattern-graph);
-webkit-mask-size: 100px 100px;
mask-size: 100px 100px;
opacity: 0.08;
@@ -141,11 +142,44 @@ body {
align-items: center;
gap: 0.4rem;
transition: color 0.15s ease;
+ background: transparent;
+ border: 0;
+ padding: 0;
+ font-family: inherit;
+ cursor: pointer;
}
.btn-link:hover {
color: var(--color-ink);
}
+.copy-icons {
+ position: relative;
+ display: inline-flex;
+ width: 14px;
+ height: 14px;
+ margin-left: 0.15rem;
+}
+.copy-icons > svg {
+ position: absolute;
+ inset: 0;
+ transition:
+ opacity 0.15s ease,
+ transform 0.15s ease;
+}
+.copy-icon-check {
+ opacity: 0;
+ transform: scale(0.8);
+ color: var(--color-accent);
+}
+.copy-btn[data-copied="true"] .copy-icon-copy {
+ opacity: 0;
+ transform: scale(0.8);
+}
+.copy-btn[data-copied="true"] .copy-icon-check {
+ opacity: 1;
+ transform: scale(1);
+}
+
/* Legal pages */
.legal-prose {
color: color-mix(in srgb, var(--color-ink) 85%, transparent);