mirror of
https://github.com/sudosylabs/vnidrop.git
synced 2026-08-05 02:29:55 +02:00
feat(docs): add animated product website
This commit is contained in:
325
docs/app/base.css
Normal file
325
docs/app/base.css
Normal file
@@ -0,0 +1,325 @@
|
||||
:root {
|
||||
--brand-700: #6f27e9;
|
||||
--brand-600: #842fee;
|
||||
--brand-500: #a855f7;
|
||||
--brand-400: #c084fc;
|
||||
--brand-300: #d8b4fe;
|
||||
--brand-200: #ead4ff;
|
||||
--brand-100: #f5eaff;
|
||||
--ink: #171419;
|
||||
--ink-soft: #4f4854;
|
||||
--ink-muted: #786f7d;
|
||||
--paper: #fbfafc;
|
||||
--paper-warm: #f7f4f8;
|
||||
--surface: #ffffff;
|
||||
--surface-soft: #f3eff5;
|
||||
--line: #e5dfe8;
|
||||
--line-strong: #d4cad8;
|
||||
--dark: #17131a;
|
||||
--dark-raised: #211a25;
|
||||
--dark-line: #362c3c;
|
||||
--success: #24a66b;
|
||||
--warning: #f59e0b;
|
||||
--font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-display: "Avenir Next", Avenir, "Segoe UI", ui-sans-serif, sans-serif;
|
||||
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||
--shadow-sm: 0 8px 30px rgba(41, 25, 48, 0.07);
|
||||
--shadow-lg: 0 30px 90px rgba(49, 25, 60, 0.14);
|
||||
--shell: 1220px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 92px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--brand-300);
|
||||
color: #28132f;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
a {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
button {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-display);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
p {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid rgba(168, 85, 247, 0.55);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
width: min(calc(100% - 48px), var(--shell));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
transform: translateY(-140%);
|
||||
padding: 10px 16px;
|
||||
border-radius: 10px;
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 16px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: min(calc(100% - 32px), 1260px);
|
||||
margin-inline: auto;
|
||||
border: 1px solid rgba(220, 212, 224, 0.82);
|
||||
border-radius: 18px;
|
||||
background: rgba(251, 250, 252, 0.82);
|
||||
box-shadow: 0 12px 40px rgba(42, 26, 49, 0.08);
|
||||
backdrop-filter: blur(20px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
padding: 0 10px 0 17px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: max-content;
|
||||
font-family: var(--font-display);
|
||||
font-size: 19px;
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.brand-mark-shell {
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
place-items: center;
|
||||
border: 1px solid #eadcf1;
|
||||
border-radius: 11px;
|
||||
background: white;
|
||||
box-shadow: 0 5px 15px rgba(105, 42, 145, 0.08);
|
||||
}
|
||||
|
||||
.brand-mark-shell svg {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.desktop-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
padding: 4px;
|
||||
border-radius: 13px;
|
||||
background: rgba(239, 235, 241, 0.7);
|
||||
}
|
||||
|
||||
.desktop-nav a {
|
||||
padding: 7px 14px;
|
||||
border-radius: 10px;
|
||||
color: var(--ink-soft);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
transition: background 160ms ease, color 160ms ease;
|
||||
}
|
||||
|
||||
.desktop-nav a:hover {
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.header-github {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
display: none;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 11px;
|
||||
background: var(--surface-soft);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-button svg {
|
||||
width: 21px;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
min-height: 52px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 0 21px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 730;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease,
|
||||
border-color 180ms ease;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.button svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
min-height: 44px;
|
||||
padding-inline: 16px;
|
||||
border-radius: 11px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
|
||||
box-shadow: 0 12px 28px rgba(132, 47, 238, 0.24), inset 0 1px rgba(255, 255, 255, 0.35);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
box-shadow: 0 16px 34px rgba(132, 47, 238, 0.3), inset 0 1px rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.button-ghost {
|
||||
border-color: var(--line);
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.button-ghost:hover {
|
||||
border-color: var(--line-strong);
|
||||
background: white;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.button-dark {
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button-light {
|
||||
background: white;
|
||||
color: #211925;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.button-dark-ghost {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.motion-ready .reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition: opacity 700ms cubic-bezier(0.2, 0.75, 0.25, 1),
|
||||
transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
|
||||
transition-delay: var(--reveal-delay, 0ms);
|
||||
}
|
||||
|
||||
.motion-ready .reveal.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
103
docs/app/footer.css
Normal file
103
docs/app/footer.css
Normal file
@@ -0,0 +1,103 @@
|
||||
.site-footer {
|
||||
padding-top: 75px;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 60px;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.footer-mark {
|
||||
display: grid;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.footer-mark svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
margin-bottom: 0;
|
||||
color: var(--ink-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footer-brand .footer-name {
|
||||
margin-bottom: 3px;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-display);
|
||||
font-size: 21px;
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(140px, 1fr));
|
||||
gap: 70px;
|
||||
}
|
||||
|
||||
.footer-links > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.footer-links .footer-label {
|
||||
margin-bottom: 7px;
|
||||
color: var(--ink-muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--ink-soft);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.footer-links svg {
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 22px;
|
||||
padding-bottom: 28px;
|
||||
border-top: 1px solid var(--line);
|
||||
color: var(--ink-muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.footer-bottom p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
701
docs/app/home.css
Normal file
701
docs/app/home.css
Normal file
@@ -0,0 +1,701 @@
|
||||
.hero-section {
|
||||
position: relative;
|
||||
min-height: 850px;
|
||||
overflow: hidden;
|
||||
padding: 150px 0 86px;
|
||||
background:
|
||||
radial-gradient(circle at 82% 18%, rgba(211, 165, 255, 0.24), transparent 28%),
|
||||
radial-gradient(circle at 12% 76%, rgba(184, 108, 255, 0.12), transparent 25%),
|
||||
linear-gradient(180deg, #fdfcfe 0%, #faf7fb 100%);
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: radial-gradient(rgba(93, 71, 102, 0.1) 0.7px, transparent 0.7px);
|
||||
background-size: 19px 19px;
|
||||
content: "";
|
||||
mask-image: linear-gradient(to bottom, black, transparent 82%);
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.hero-ambient {
|
||||
position: absolute;
|
||||
border: 1px solid rgba(168, 85, 247, 0.18);
|
||||
border-radius: 999px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-ambient-one {
|
||||
top: 120px;
|
||||
right: -80px;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
animation: ambient-drift 15s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.hero-ambient-two {
|
||||
bottom: -190px;
|
||||
left: -120px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
animation: ambient-drift 18s ease-in-out -5s infinite alternate-reverse;
|
||||
}
|
||||
|
||||
.hero-layout {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.88fr) minmax(540px, 1.12fr);
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.eyebrow-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin-bottom: 25px;
|
||||
padding: 7px 11px;
|
||||
border: 1px solid #dfd4e4;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
color: #665c6b;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.eyebrow-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--warning);
|
||||
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.13);
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
margin-bottom: 28px;
|
||||
font-size: clamp(3.5rem, 5.1vw, 5.4rem);
|
||||
font-weight: 760;
|
||||
letter-spacing: -0.072em;
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.hero-copy h1 span {
|
||||
background: linear-gradient(100deg, var(--brand-600), #ba62f8 58%, #7c2aef);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
max-width: 610px;
|
||||
margin-bottom: 30px;
|
||||
color: var(--ink-soft);
|
||||
font-size: 18px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 11px;
|
||||
}
|
||||
|
||||
.hero-platforms {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-top: 35px;
|
||||
color: var(--ink-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hero-platforms > span {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-platforms ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hero-platforms li {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 7px;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
.hero-art-reveal {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.trust-section {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
margin-top: -32px;
|
||||
}
|
||||
|
||||
.trust-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 23px;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow: var(--shadow-lg);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.trust-item {
|
||||
display: flex;
|
||||
min-height: 124px;
|
||||
align-items: center;
|
||||
gap: 19px;
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
.trust-item + .trust-item {
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.trust-number {
|
||||
color: var(--brand-500);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.trust-item strong {
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.trust-item p {
|
||||
margin: 0;
|
||||
color: var(--ink-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.word-stream {
|
||||
overflow: hidden;
|
||||
padding: 92px 0 28px;
|
||||
color: #ebe5ee;
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(3.5rem, 7vw, 7.6rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.word-stream > div {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
align-items: center;
|
||||
gap: 35px;
|
||||
animation: word-stream 36s linear infinite;
|
||||
}
|
||||
|
||||
.word-stream i {
|
||||
color: var(--brand-300);
|
||||
font-size: 0.18em;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.section {
|
||||
position: relative;
|
||||
padding: 132px 0;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.privacy-intro h2,
|
||||
.network-copy h2,
|
||||
.platforms-copy h2,
|
||||
.final-cta h2,
|
||||
.approval-copy h2 {
|
||||
margin-bottom: 20px;
|
||||
font-size: clamp(2.7rem, 4.4vw, 4.8rem);
|
||||
font-weight: 740;
|
||||
letter-spacing: -0.06em;
|
||||
line-height: 1.02;
|
||||
}
|
||||
|
||||
.section-heading p,
|
||||
.section-lead {
|
||||
color: var(--ink-soft);
|
||||
font-size: 17px;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.section-heading-centered {
|
||||
max-width: 810px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-heading-centered p {
|
||||
max-width: 620px;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.section-heading-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.72fr;
|
||||
align-items: end;
|
||||
gap: 90px;
|
||||
}
|
||||
|
||||
.section-heading-split h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-heading-split p {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.kicker {
|
||||
display: inline-block;
|
||||
margin-bottom: 18px;
|
||||
color: var(--brand-600);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.13em;
|
||||
}
|
||||
|
||||
.kicker-light {
|
||||
color: #d89bff;
|
||||
}
|
||||
|
||||
.flow-section {
|
||||
padding-top: 105px;
|
||||
}
|
||||
|
||||
.invitation-section {
|
||||
overflow: hidden;
|
||||
background: var(--paper-warm);
|
||||
}
|
||||
|
||||
.approval-section {
|
||||
padding: 150px 0;
|
||||
}
|
||||
|
||||
.approval-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.86fr) minmax(480px, 1.14fr);
|
||||
align-items: center;
|
||||
gap: 100px;
|
||||
}
|
||||
|
||||
.approval-copy h2 {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.approval-copy .section-lead {
|
||||
max-width: 570px;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
|
||||
.check-list {
|
||||
display: grid;
|
||||
gap: 13px;
|
||||
margin: 0 0 25px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.check-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
color: #3c3540;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.check-list svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
background: var(--brand-100);
|
||||
color: var(--brand-600);
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.approval-note {
|
||||
max-width: 555px;
|
||||
margin: 0;
|
||||
padding: 15px 17px;
|
||||
border: 1px solid #eadff0;
|
||||
border-radius: 12px;
|
||||
background: #faf7fb;
|
||||
color: var(--ink-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.approval-demo-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.demo-hint {
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
bottom: -45px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
color: var(--brand-600);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.07em;
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
.demo-hint svg {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.privacy-principles-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 145px 0 135px;
|
||||
background:
|
||||
radial-gradient(circle at 90% 8%, rgba(168, 85, 247, 0.18), transparent 25%),
|
||||
radial-gradient(circle at 5% 90%, rgba(124, 42, 239, 0.12), transparent 25%),
|
||||
var(--dark);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.privacy-principles-section::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: radial-gradient(rgba(255, 255, 255, 0.12) 0.7px, transparent 0.7px);
|
||||
background-size: 22px 22px;
|
||||
content: "";
|
||||
opacity: 0.13;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.privacy-principles-section .page-shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.privacy-intro {
|
||||
max-width: 890px;
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
|
||||
.privacy-intro h2 {
|
||||
max-width: 840px;
|
||||
}
|
||||
|
||||
.privacy-intro > p {
|
||||
max-width: 700px;
|
||||
margin-bottom: 0;
|
||||
color: #bdb4c2;
|
||||
font-size: 18px;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.privacy-point-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.privacy-point {
|
||||
min-height: 275px;
|
||||
padding: 24px;
|
||||
border: 1px solid var(--dark-line);
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
|
||||
}
|
||||
|
||||
.privacy-point:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: rgba(192, 132, 252, 0.45);
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
}
|
||||
|
||||
.privacy-point-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 43px;
|
||||
}
|
||||
|
||||
.privacy-point-top > span {
|
||||
display: grid;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(192, 132, 252, 0.28);
|
||||
border-radius: 12px;
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
color: var(--brand-400);
|
||||
}
|
||||
|
||||
.privacy-point-top svg {
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.privacy-point-top small {
|
||||
color: #706775;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.privacy-point h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 19px;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.privacy-point p {
|
||||
margin-bottom: 0;
|
||||
color: #a99fac;
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.privacy-policy-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
margin-top: 38px;
|
||||
padding-top: 27px;
|
||||
border-top: 1px solid var(--dark-line);
|
||||
}
|
||||
|
||||
.privacy-policy-link p {
|
||||
margin: 0;
|
||||
color: #a99fac;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.privacy-policy-link a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #dca7ff;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.privacy-policy-link svg {
|
||||
width: 18px;
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
|
||||
.privacy-policy-link a:hover svg {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.network-section {
|
||||
padding: 150px 0;
|
||||
background: #0f0c11;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.network-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.78fr) minmax(580px, 1.22fr);
|
||||
align-items: center;
|
||||
gap: 75px;
|
||||
}
|
||||
|
||||
.network-copy h2 {
|
||||
font-size: clamp(2.6rem, 4vw, 4.2rem);
|
||||
}
|
||||
|
||||
.network-copy > p {
|
||||
margin-bottom: 35px;
|
||||
color: #aaa0ae;
|
||||
font-size: 16px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.network-copy blockquote {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 20px 0 20px 25px;
|
||||
border-left: 2px solid var(--brand-500);
|
||||
color: #f0e9f3;
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 630;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.network-copy blockquote span {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: 12px;
|
||||
color: var(--brand-500);
|
||||
font-family: Georgia, serif;
|
||||
font-size: 44px;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.platforms-section {
|
||||
overflow: hidden;
|
||||
padding: 155px 0;
|
||||
}
|
||||
|
||||
.platforms-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1.14fr);
|
||||
align-items: center;
|
||||
gap: 75px;
|
||||
}
|
||||
|
||||
.platforms-copy .section-lead {
|
||||
max-width: 570px;
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
|
||||
.platform-feature-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.platform-feature-list span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 11px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 9px;
|
||||
background: white;
|
||||
color: var(--ink-soft);
|
||||
font-size: 12px;
|
||||
font-weight: 620;
|
||||
}
|
||||
|
||||
.platform-feature-list svg {
|
||||
width: 16px;
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.orbit-wrap {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.final-cta-section {
|
||||
padding: 0 0 40px;
|
||||
}
|
||||
|
||||
.final-cta {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 100px 50px;
|
||||
border-radius: 31px;
|
||||
background:
|
||||
linear-gradient(125deg, rgba(255, 255, 255, 0.06), transparent 40%),
|
||||
linear-gradient(135deg, #25172f, #171019 55%, #28143a);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.final-cta::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: inherit;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.final-cta h2 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 850px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
font-size: clamp(2.8rem, 5vw, 5.4rem);
|
||||
}
|
||||
|
||||
.final-cta > p {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 31px;
|
||||
color: #bfb4c4;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.final-cta > .kicker {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.final-cta-actions {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.final-cta-orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: var(--brand-500);
|
||||
filter: blur(90px);
|
||||
opacity: 0.18;
|
||||
}
|
||||
|
||||
.final-cta-orb-one {
|
||||
top: -140px;
|
||||
left: -70px;
|
||||
width: 380px;
|
||||
height: 380px;
|
||||
animation: cta-orb 12s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.final-cta-orb-two {
|
||||
right: -80px;
|
||||
bottom: -200px;
|
||||
width: 430px;
|
||||
height: 430px;
|
||||
animation: cta-orb 15s ease-in-out -4s infinite alternate-reverse;
|
||||
}
|
||||
|
||||
10
docs/app/icon.svg
Normal file
10
docs/app/icon.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="64" height="64" rx="16" fill="#FBF7FF"/>
|
||||
<path d="M16 12h8.2c2.1 0 3.8 1.7 3.8 3.8v20.4c0 7 4.8 12.2 11.5 12.2S51 43.2 51 36.2V15.8c0-2.1 1.7-3.8 3.8-3.8H58v24.4C58 47.7 50 56 39.5 56S21 47.7 21 36.4V24h-3v-5h-2v-7Z" fill="url(#a)"/>
|
||||
<path d="M39.5 26.5c-2.5 3.3-6.5 8.6-6.5 12.4 0 4 2.8 7.1 6.5 7.1s6.5-3.1 6.5-7.1c0-3.8-4-9.1-6.5-12.4Z" fill="url(#b)"/>
|
||||
<path d="M51 12h7v7l-7-7Z" fill="#E7CBFF"/>
|
||||
<defs>
|
||||
<linearGradient id="a" x1="16" y1="12" x2="59" y2="51" gradientUnits="userSpaceOnUse"><stop stop-color="#B45CFA"/><stop offset="1" stop-color="#7828ED"/></linearGradient>
|
||||
<linearGradient id="b" x1="33" y1="27" x2="47" y2="43" gradientUnits="userSpaceOnUse"><stop stop-color="#B45CFA"/><stop offset="1" stop-color="#7828ED"/></linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 893 B |
71
docs/app/layout.tsx
Normal file
71
docs/app/layout.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import type { ReactNode } from "react";
|
||||
import { SiteFooter } from "@/components/site-footer";
|
||||
import { SiteHeader } from "@/components/site-header";
|
||||
import "./base.css";
|
||||
import "./home.css";
|
||||
import "./footer.css";
|
||||
import "./privacy/privacy-document.css";
|
||||
import "../components/hero-scene.css";
|
||||
import "../components/transfer-flow.css";
|
||||
import "../components/invitation-scene.css";
|
||||
import "../components/approval-scene.css";
|
||||
import "../components/network-scene.css";
|
||||
import "../components/platform-scene.css";
|
||||
import "./responsive.css";
|
||||
import "./privacy/privacy-responsive.css";
|
||||
import "../components/illustration-motion.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
default: "VniDrop — Direct file transfer, on your terms",
|
||||
template: "%s · VniDrop",
|
||||
},
|
||||
description:
|
||||
"Send files and folders directly across Android, iOS, macOS, Windows, and Linux—with approval by default and no hosted transfer copy.",
|
||||
applicationName: "VniDrop",
|
||||
manifest: "/site.webmanifest",
|
||||
keywords: [
|
||||
"peer-to-peer file transfer",
|
||||
"encrypted file sharing",
|
||||
"cross-platform file transfer",
|
||||
"open source",
|
||||
],
|
||||
openGraph: {
|
||||
type: "website",
|
||||
siteName: "VniDrop",
|
||||
title: "VniDrop — Direct file transfer, on your terms",
|
||||
description:
|
||||
"Move files from your device to theirs, with no account and no hosted transfer copy.",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary",
|
||||
title: "VniDrop — Direct file transfer, on your terms",
|
||||
description:
|
||||
"Move files from your device to theirs, with no account and no hosted transfer copy.",
|
||||
},
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
themeColor: [
|
||||
{ media: "(prefers-color-scheme: light)", color: "#fbfafc" },
|
||||
{ media: "(prefers-color-scheme: dark)", color: "#17131a" },
|
||||
],
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<a className="skip-link" href="#main-content">
|
||||
Skip to content
|
||||
</a>
|
||||
<SiteHeader />
|
||||
{children}
|
||||
<SiteFooter />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
292
docs/app/page.tsx
Normal file
292
docs/app/page.tsx
Normal file
@@ -0,0 +1,292 @@
|
||||
import Link from "next/link";
|
||||
import { ApprovalDemo } from "@/components/approval-demo";
|
||||
import { HeroIllustration } from "@/components/hero-illustration";
|
||||
import { Icon, type IconName } from "@/components/icons";
|
||||
import { InvitationShowcase } from "@/components/invitation-showcase";
|
||||
import { NetworkIllustration } from "@/components/network-illustration";
|
||||
import { PlatformOrbit } from "@/components/platform-orbit";
|
||||
import { Reveal } from "@/components/reveal";
|
||||
import { TransferFlow } from "@/components/transfer-flow";
|
||||
|
||||
const trustItems = [
|
||||
{ value: "No account", detail: "Open the app and start sharing" },
|
||||
{ value: "No hosted copy", detail: "Your transfer is not parked in our cloud" },
|
||||
{ value: "No silent overwrite", detail: "Existing files stay untouched" },
|
||||
];
|
||||
|
||||
const privacyPoints: Array<{
|
||||
icon: IconName;
|
||||
number: string;
|
||||
title: string;
|
||||
text: string;
|
||||
}> = [
|
||||
{
|
||||
icon: "lock",
|
||||
number: "01",
|
||||
title: "Encrypted in transit",
|
||||
text: "Each connection is authenticated and end-to-end encrypted, including through a relay.",
|
||||
},
|
||||
{
|
||||
icon: "shield",
|
||||
number: "02",
|
||||
title: "Approval by default",
|
||||
text: "An invitation helps devices meet. It is not automatic permission to download.",
|
||||
},
|
||||
{
|
||||
icon: "verified",
|
||||
number: "03",
|
||||
title: "Verified on arrival",
|
||||
text: "Content addressing checks that incoming bytes match exactly what was offered.",
|
||||
},
|
||||
{
|
||||
icon: "stop",
|
||||
number: "04",
|
||||
title: "Revocable access",
|
||||
text: "Stop a share at any time and the invitation can no longer be used.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main id="main-content">
|
||||
<section className="hero-section">
|
||||
<div className="hero-ambient hero-ambient-one" aria-hidden="true" />
|
||||
<div className="hero-ambient hero-ambient-two" aria-hidden="true" />
|
||||
<div className="page-shell hero-layout">
|
||||
<div className="hero-copy">
|
||||
<Reveal>
|
||||
<div className="eyebrow-badge">
|
||||
<span className="eyebrow-dot" />
|
||||
OPEN SOURCE · EARLY DEVELOPMENT
|
||||
</div>
|
||||
<h1>
|
||||
Your files.
|
||||
<br />
|
||||
<span>A straight line</span>
|
||||
<br />
|
||||
between devices.
|
||||
</h1>
|
||||
<p className="hero-lead">
|
||||
Send files and folders directly when possible, with an end-to-end encrypted relay
|
||||
when needed. No account. No hosted transfer copy. You decide who receives them.
|
||||
</p>
|
||||
<div className="hero-actions">
|
||||
<a className="button button-primary" href="#how-it-works">
|
||||
See how it works
|
||||
<Icon name="arrow" />
|
||||
</a>
|
||||
<a
|
||||
className="button button-ghost"
|
||||
href="https://github.com/vnidrop/vnidrop"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Icon name="github" />
|
||||
Explore the project
|
||||
</a>
|
||||
</div>
|
||||
<div className="hero-platforms" aria-label="Supported platforms">
|
||||
<span>Available across</span>
|
||||
<ul>
|
||||
<li>Android</li>
|
||||
<li>iOS</li>
|
||||
<li>macOS</li>
|
||||
<li>Windows</li>
|
||||
<li>Linux</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
<Reveal className="hero-art-reveal" delay={120}>
|
||||
<HeroIllustration />
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="trust-section" aria-label="VniDrop principles">
|
||||
<div className="page-shell trust-grid">
|
||||
{trustItems.map((item, index) => (
|
||||
<Reveal key={item.value} className="trust-item" delay={index * 70}>
|
||||
<span className="trust-number">0{index + 1}</span>
|
||||
<div>
|
||||
<strong>{item.value}</strong>
|
||||
<p>{item.detail}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="word-stream" aria-hidden="true">
|
||||
<div>
|
||||
<span>FILES</span><i>◆</i><span>FOLDERS</span><i>◆</i><span>PHOTOS</span><i>◆</i>
|
||||
<span>PROJECTS</span><i>◆</i><span>FILES</span><i>◆</i><span>FOLDERS</span><i>◆</i>
|
||||
<span>PHOTOS</span><i>◆</i><span>PROJECTS</span><i>◆</i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="how-it-works" className="section flow-section">
|
||||
<div className="page-shell">
|
||||
<Reveal className="section-heading section-heading-centered">
|
||||
<span className="kicker">ONE DROP, FIVE MOMENTS</span>
|
||||
<h2>A handoff that stays in your hands.</h2>
|
||||
<p>
|
||||
VniDrop keeps the transfer understandable from first selection to final verified file.
|
||||
</p>
|
||||
</Reveal>
|
||||
<Reveal delay={100}>
|
||||
<TransferFlow />
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section invitation-section">
|
||||
<div className="page-shell">
|
||||
<Reveal className="section-heading section-heading-split">
|
||||
<div>
|
||||
<span className="kicker">MAKE THE INTRODUCTION</span>
|
||||
<h2>One transfer. Three ways to meet.</h2>
|
||||
</div>
|
||||
<p>
|
||||
The invitation is small enough to scan, tap, or send. Your files stay where they are
|
||||
until a receiver connects and you allow the transfer.
|
||||
</p>
|
||||
</Reveal>
|
||||
<Reveal delay={100}>
|
||||
<InvitationShowcase />
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section approval-section">
|
||||
<div className="page-shell approval-layout">
|
||||
<Reveal className="approval-copy">
|
||||
<span className="kicker">CONTROL IS BUILT IN</span>
|
||||
<h2>A link is not permission.</h2>
|
||||
<p className="section-lead">
|
||||
Every new receiver knocks by default. Approve people you recognize, refuse the rest,
|
||||
and follow progress for each device.
|
||||
</p>
|
||||
<ul className="check-list">
|
||||
<li><Icon name="check" /> See the receiver before anything moves</li>
|
||||
<li><Icon name="check" /> Cancel a transfer already in progress</li>
|
||||
<li><Icon name="check" /> Stop sharing to revoke future access</li>
|
||||
</ul>
|
||||
<p className="approval-note">
|
||||
Need an open handoff? An optional “Anyone with this transfer” mode is available for
|
||||
non-sensitive files.
|
||||
</p>
|
||||
</Reveal>
|
||||
<Reveal className="approval-demo-wrap" delay={120}>
|
||||
<ApprovalDemo />
|
||||
<span className="demo-hint"><Icon name="spark" /> Try the controls</span>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="privacy" className="privacy-principles-section">
|
||||
<div className="page-shell">
|
||||
<Reveal className="privacy-intro">
|
||||
<span className="kicker kicker-light">PRIVACY BY DESIGN</span>
|
||||
<h2>The file never becomes our file.</h2>
|
||||
<p>
|
||||
VniDrop coordinates a secure handoff. It does not turn your transfer into a hosted
|
||||
download sitting on someone else’s storage.
|
||||
</p>
|
||||
</Reveal>
|
||||
<div className="privacy-point-grid">
|
||||
{privacyPoints.map((point, index) => (
|
||||
<Reveal key={point.number} className="privacy-point" delay={index * 70}>
|
||||
<div className="privacy-point-top">
|
||||
<span><Icon name={point.icon} /></span>
|
||||
<small>{point.number}</small>
|
||||
</div>
|
||||
<h3>{point.title}</h3>
|
||||
<p>{point.text}</p>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
<Reveal className="privacy-policy-link" delay={120}>
|
||||
<p>Diagnostics are optional and exclude invitations, file paths, and transfer contents.</p>
|
||||
<Link href="/privacy/">
|
||||
Read the full privacy policy
|
||||
<Icon name="arrow" />
|
||||
</Link>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="network-section">
|
||||
<div className="page-shell network-layout">
|
||||
<Reveal className="network-copy">
|
||||
<span className="kicker kicker-light">DIRECT WHEN POSSIBLE</span>
|
||||
<h2>The shortest safe path, chosen automatically.</h2>
|
||||
<p>
|
||||
VniDrop tries to connect devices directly—even across home routers and mobile
|
||||
networks. If that path is not available, a relay forwards the same encrypted
|
||||
connection without becoming a file store.
|
||||
</p>
|
||||
<blockquote>
|
||||
<span>“</span>
|
||||
The relay can move the envelope. It cannot open it.
|
||||
</blockquote>
|
||||
</Reveal>
|
||||
<Reveal delay={120}>
|
||||
<NetworkIllustration />
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="platforms" className="section platforms-section">
|
||||
<div className="page-shell platforms-layout">
|
||||
<Reveal className="platforms-copy">
|
||||
<span className="kicker">ONE FAMILIAR HANDOFF</span>
|
||||
<h2>At home on every screen.</h2>
|
||||
<p className="section-lead">
|
||||
Android, iOS, macOS, Windows, and Linux share one clear transfer experience while each
|
||||
platform keeps control of its own file picker and save destination.
|
||||
</p>
|
||||
<div className="platform-feature-list">
|
||||
<span><Icon name="devices" /> Cross-platform by design</span>
|
||||
<span><Icon name="folder" /> Native file destinations</span>
|
||||
<span><Icon name="code" /> Open-source core</span>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal className="orbit-wrap" delay={100}>
|
||||
<PlatformOrbit />
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="final-cta-section">
|
||||
<div className="page-shell">
|
||||
<Reveal className="final-cta">
|
||||
<div className="final-cta-orb final-cta-orb-one" aria-hidden="true" />
|
||||
<div className="final-cta-orb final-cta-orb-two" aria-hidden="true" />
|
||||
<span className="kicker kicker-light">OPEN SOURCE · APACHE 2.0</span>
|
||||
<h2>Drop the cloud holding pen. Keep the control.</h2>
|
||||
<p>
|
||||
VniDrop is in early development. Explore the code, build the app, and help shape a
|
||||
more direct way to share.
|
||||
</p>
|
||||
<div className="final-cta-actions">
|
||||
<a
|
||||
className="button button-light"
|
||||
href="https://github.com/vnidrop/vnidrop"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Icon name="github" />
|
||||
View the source
|
||||
</a>
|
||||
<Link className="button button-dark-ghost" href="/privacy/">
|
||||
Privacy policy
|
||||
<Icon name="arrow" />
|
||||
</Link>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
381
docs/app/privacy/page.tsx
Normal file
381
docs/app/privacy/page.tsx
Normal file
@@ -0,0 +1,381 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { BrandMark } from "@/components/brand";
|
||||
import { Icon, type IconName } from "@/components/icons";
|
||||
import { Reveal } from "@/components/reveal";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Privacy policy",
|
||||
description:
|
||||
"How VniDrop handles transfers, local app data, optional diagnostics, bug reports, and website visits.",
|
||||
};
|
||||
|
||||
const summaries: Array<{ icon: IconName; label: string; value: string }> = [
|
||||
{ icon: "devices", label: "Transfers", value: "Device to device" },
|
||||
{ icon: "globe", label: "Accounts", value: "None" },
|
||||
{ icon: "shield", label: "Diagnostics", value: "Optional" },
|
||||
{ icon: "folder", label: "Hosted file copy", value: "None" },
|
||||
];
|
||||
|
||||
const sections = [
|
||||
["scope", "Scope"],
|
||||
["transfers", "Transfers"],
|
||||
["local-data", "Local data"],
|
||||
["diagnostics", "Diagnostics"],
|
||||
["website", "Website"],
|
||||
["permissions", "Permissions"],
|
||||
["providers", "Service providers"],
|
||||
["retention", "Retention"],
|
||||
["choices", "Your choices"],
|
||||
["security", "Security"],
|
||||
["changes", "Changes"],
|
||||
["contact", "Contact"],
|
||||
];
|
||||
|
||||
export default function PrivacyPage() {
|
||||
return (
|
||||
<main id="main-content" className="privacy-page">
|
||||
<section className="privacy-hero">
|
||||
<div className="privacy-hero-grid" aria-hidden="true" />
|
||||
<div className="page-shell privacy-hero-layout">
|
||||
<Reveal className="privacy-hero-copy">
|
||||
<Link className="privacy-back" href="/">
|
||||
<Icon name="arrow" />
|
||||
Back to VniDrop
|
||||
</Link>
|
||||
<span className="kicker">PRIVACY POLICY</span>
|
||||
<h1>Clear by design.<br />Specific by default.</h1>
|
||||
<p>
|
||||
This policy explains what moves between devices, what stays local, and what is sent
|
||||
only when you choose to share diagnostics or a bug report.
|
||||
</p>
|
||||
<div className="privacy-meta">
|
||||
<span>Effective July 16, 2026</span>
|
||||
<i />
|
||||
<span>Version 1.0</span>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal className="privacy-hero-art" delay={100}>
|
||||
<div className="privacy-art-orbit privacy-art-orbit-one" aria-hidden="true" />
|
||||
<div className="privacy-art-orbit privacy-art-orbit-two" aria-hidden="true" />
|
||||
<div className="privacy-mark-card" aria-hidden="true">
|
||||
<span className="privacy-mark-glow" />
|
||||
<BrandMark />
|
||||
<span className="privacy-mark-lock"><Icon name="lock" /></span>
|
||||
</div>
|
||||
<div className="privacy-data-pill privacy-data-pill-one" aria-hidden="true">
|
||||
<Icon name="file" /> CONTENT
|
||||
</div>
|
||||
<div className="privacy-data-pill privacy-data-pill-two" aria-hidden="true">
|
||||
<Icon name="shield" /> APPROVAL
|
||||
</div>
|
||||
<div className="privacy-data-pill privacy-data-pill-three" aria-hidden="true">
|
||||
<Icon name="verified" /> VERIFIED
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="privacy-summary" aria-label="Privacy summary">
|
||||
<div className="page-shell privacy-summary-grid">
|
||||
{summaries.map((summary, index) => (
|
||||
<Reveal key={summary.label} className="privacy-summary-card" delay={index * 60}>
|
||||
<span><Icon name={summary.icon} /></span>
|
||||
<small>{summary.label}</small>
|
||||
<strong>{summary.value}</strong>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="privacy-document-section">
|
||||
<div className="page-shell privacy-document-layout">
|
||||
<aside className="privacy-toc">
|
||||
<p>On this page</p>
|
||||
<nav aria-label="Privacy policy sections">
|
||||
{sections.map(([id, label], index) => (
|
||||
<a key={id} href={`#${id}`}>
|
||||
<span>{String(index + 1).padStart(2, "0")}</span>
|
||||
{label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<article className="privacy-document">
|
||||
<div className="privacy-callout">
|
||||
<Icon name="spark" />
|
||||
<div>
|
||||
<strong>The short version</strong>
|
||||
<p>
|
||||
VniDrop has no user accounts and does not upload your transfer to a VniDrop file
|
||||
store. Files travel over an authenticated, end-to-end encrypted connection.
|
||||
Product diagnostics are opt-in; a bug report is sent only when you submit one.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="scope" className="policy-section">
|
||||
<span className="policy-number">01</span>
|
||||
<h2>Scope and who “VniDrop” means</h2>
|
||||
<p>
|
||||
This policy covers the official VniDrop website, the VniDrop applications for
|
||||
Android, iOS, macOS, Windows, and Linux, and the diagnostics service configured by
|
||||
the official project. In this policy, “VniDrop,” “we,” and “us” refer to the
|
||||
maintainers of the official VniDrop project and the official builds they distribute.
|
||||
</p>
|
||||
<p>
|
||||
VniDrop is open-source software. A build distributed or operated by someone else
|
||||
may use different networking infrastructure, diagnostics settings, or website
|
||||
hosting. That distributor is responsible for explaining its own practices.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="transfers" className="policy-section">
|
||||
<span className="policy-number">02</span>
|
||||
<h2>What happens during a transfer</h2>
|
||||
<h3>File contents</h3>
|
||||
<p>
|
||||
The sender chooses files or folders on their device. VniDrop streams those bytes to
|
||||
an approved receiver and does not first upload them to a VniDrop-hosted storage
|
||||
bucket. The receiver saves the files to a destination they choose. Relayed traffic
|
||||
remains end-to-end encrypted.
|
||||
</p>
|
||||
<h3>Invitations and transfer metadata</h3>
|
||||
<p>
|
||||
A QR code, NFC tag, or <code>.vnd</code> file contains a transfer invitation. The
|
||||
invitation includes connection and content identifiers plus transfer metadata such
|
||||
as the transfer name, optional sender name, creation time, file count, and total
|
||||
size. It is a capability: anyone who receives it may be able to request the transfer
|
||||
while the share is active. Treat it like a private access link.
|
||||
</p>
|
||||
<h3>What peers and relays can see</h3>
|
||||
<p>
|
||||
A receive request can disclose the receiver’s chosen display or device name,
|
||||
application version, and a technical endpoint identifier to the sender. A direct
|
||||
connection exposes the peers’ IP addresses to one another. When a public relay is
|
||||
used, its operator can observe connection metadata such as source and destination IP
|
||||
addresses, connection time, and the amount of relayed data, but cannot read the
|
||||
encrypted transfer contents.
|
||||
</p>
|
||||
<div className="policy-note">
|
||||
<Icon name="shield" />
|
||||
<p>
|
||||
Approval is required by default. If the sender selects “Anyone with this transfer,”
|
||||
anyone holding the invitation may receive the files until sharing stops.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="local-data" className="policy-section">
|
||||
<span className="policy-number">03</span>
|
||||
<h2>Information kept on your device</h2>
|
||||
<p>VniDrop stores the information needed to operate the app locally, including:</p>
|
||||
<ul>
|
||||
<li>device identity and networking keys used to establish secure connections;</li>
|
||||
<li>active shares, transfer history, receiver requests, progress, and status;</li>
|
||||
<li>app preferences, including access and diagnostics choices;</li>
|
||||
<li>download destinations and locally managed transfer data; and</li>
|
||||
<li>an anonymous installation identifier used only for diagnostics correlation.</li>
|
||||
</ul>
|
||||
<p>
|
||||
This information remains until you remove the relevant history, stop or delete a
|
||||
share, clear the app’s data, or uninstall the app, subject to operating-system file
|
||||
behavior. Removing VniDrop history does not delete a file you already downloaded;
|
||||
delete that file through your operating system if you no longer want it.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="diagnostics" className="policy-section">
|
||||
<span className="policy-number">04</span>
|
||||
<h2>Optional diagnostics and bug reports</h2>
|
||||
<h3>Automatic product diagnostics</h3>
|
||||
<p>
|
||||
When an official build includes diagnostics, automatic usage events and crash
|
||||
reports are disabled until you enable “Share diagnostics.” If enabled, VniDrop may
|
||||
send an anonymous installation ID, app version, platform, sparse event names and
|
||||
properties, crash type and message, a redacted stack trace, timestamps, and recent
|
||||
in-app breadcrumbs. You can turn this off at any time; doing so also removes pending
|
||||
local crash reports.
|
||||
</p>
|
||||
<h3>User-submitted bug reports</h3>
|
||||
<p>
|
||||
A bug report is separate from the diagnostics toggle and is sent only when you press
|
||||
submit. It can contain what you say happened, what you expected, reproduction steps,
|
||||
an optional contact email, app and platform versions, an anonymous installation ID,
|
||||
device name and model, operating system, network and battery information, recent
|
||||
breadcrumbs, and optional recent logs. You can exclude logs before submitting.
|
||||
</p>
|
||||
<h3>Data deliberately excluded</h3>
|
||||
<p>
|
||||
Automatic diagnostics are designed to exclude transfer contents, invitations, and
|
||||
file paths. Before diagnostic text or optional logs are sent, VniDrop applies rules
|
||||
intended to redact invitation tokens, endpoint identifiers, absolute paths, file and
|
||||
content URIs, and platform document identifiers. No redaction system is perfect, so
|
||||
review anything you type into a bug report and avoid including secrets.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="website" className="policy-section">
|
||||
<span className="policy-number">05</span>
|
||||
<h2>The VniDrop website</h2>
|
||||
<p>
|
||||
This website is a static product site. It does not provide an account, contact form,
|
||||
advertising, behavioral analytics, marketing pixels, or non-essential cookies. It
|
||||
does not ask the browser for access to your files, camera, contacts, location, or
|
||||
nearby devices.
|
||||
</p>
|
||||
<p>
|
||||
The hosting and security infrastructure may process routine request information—such
|
||||
as IP address, time, requested page, referrer, and browser user agent—to deliver the
|
||||
site, maintain reliability, and prevent abuse. The live hosting provider must be
|
||||
identified in this policy before public deployment if it differs from the providers
|
||||
described below.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="permissions" className="policy-section">
|
||||
<span className="policy-number">06</span>
|
||||
<h2>Device permissions</h2>
|
||||
<div className="permission-grid">
|
||||
<div><Icon name="folder" /><strong>Files & folders</strong><p>Choose what to send and where received files are saved.</p></div>
|
||||
<div><Icon name="qr" /><strong>Camera / scanner</strong><p>Scan a QR invitation when you choose that receive method.</p></div>
|
||||
<div><Icon name="nfc" /><strong>NFC</strong><p>Read or write an invitation through a compatible NFC tag.</p></div>
|
||||
<div><Icon name="devices" /><strong>Network & notifications</strong><p>Connect peers and alert you to background receiver requests.</p></div>
|
||||
</div>
|
||||
<p>
|
||||
VniDrop requests a platform permission only for the related feature. On Android, QR
|
||||
scanning may be provided through Google Play services Code Scanner. Platform-level
|
||||
permission prompts and service-provider terms also apply.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="providers" className="policy-section">
|
||||
<span className="policy-number">07</span>
|
||||
<h2>Infrastructure and external services</h2>
|
||||
<div className="provider-list">
|
||||
<div>
|
||||
<span>I</span>
|
||||
<div><strong>Iroh / public relay operators</strong><p>Device discovery, connection establishment, and encrypted relay fallback. Relays process connection metadata but cannot decrypt transfer contents.</p></div>
|
||||
</div>
|
||||
<div>
|
||||
<span>C</span>
|
||||
<div><strong>Cloudflare</strong><p>The project’s diagnostics design uses Cloudflare Workers, D1, and R2. Cloudflare also processes source IPs for request delivery and abuse controls.</p></div>
|
||||
</div>
|
||||
<div>
|
||||
<span>G</span>
|
||||
<div><strong>Google Play services</strong><p>May provide the QR code scanner on supported Android devices when you choose to scan an invitation.</p></div>
|
||||
</div>
|
||||
<div>
|
||||
<span>GH</span>
|
||||
<div><strong>GitHub</strong><p>Hosts the source repository, issue tracker, and external pages linked from this site. GitHub’s own privacy terms apply after you follow those links.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="provider-links">
|
||||
Provider policies: {" "}
|
||||
<a href="https://services.iroh.computer/legal/privacy" target="_blank" rel="noreferrer">Iroh</a>, {" "}
|
||||
<a href="https://www.cloudflare.com/policies/privacy/" target="_blank" rel="noreferrer">Cloudflare</a>, {" "}
|
||||
<a href="https://policies.google.com/privacy" target="_blank" rel="noreferrer">Google</a>, and {" "}
|
||||
<a href="https://docs.github.com/en/site-policy/privacy-policies/github-general-privacy-statement" target="_blank" rel="noreferrer">GitHub</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="retention" className="policy-section">
|
||||
<span className="policy-number">08</span>
|
||||
<h2>Retention and deletion</h2>
|
||||
<div className="retention-table" role="table" aria-label="Data retention periods">
|
||||
<div className="retention-row retention-head" role="row">
|
||||
<span role="columnheader">Data</span><span role="columnheader">Typical retention</span>
|
||||
</div>
|
||||
<div className="retention-row" role="row">
|
||||
<span role="cell">Transfer history and settings</span><span role="cell">Until you delete them, clear app data, or uninstall</span>
|
||||
</div>
|
||||
<div className="retention-row" role="row">
|
||||
<span role="cell">Pending local crash reports</span><span role="cell">Up to 30 days and 20 reports; deleted when diagnostics is disabled</span>
|
||||
</div>
|
||||
<div className="retention-row" role="row">
|
||||
<span role="cell">Server diagnostics and bug reports</span><span role="cell">The current project configuration is 90 days, with scheduled deletion</span>
|
||||
</div>
|
||||
<div className="retention-row" role="row">
|
||||
<span role="cell">Downloaded files</span><span role="cell">Until you delete them through your operating system</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Operational backups, provider logs, and deletion backlogs may persist briefly beyond
|
||||
the stated period where necessary for security, integrity, or legal obligations. If
|
||||
the production diagnostics retention configuration changes, this policy should be
|
||||
updated to match it.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="choices" className="policy-section">
|
||||
<span className="policy-number">09</span>
|
||||
<h2>Your choices and rights</h2>
|
||||
<ul>
|
||||
<li>Enable or disable “Share diagnostics” in VniDrop settings.</li>
|
||||
<li>Submit a bug report only when you choose, omit contact information, and exclude logs.</li>
|
||||
<li>Approve or refuse each receiver, cancel a transfer, or stop sharing.</li>
|
||||
<li>Delete individual transfer history or clear completed, failed, and cancelled receive history.</li>
|
||||
<li>Delete downloaded files using your operating system, or clear all app data by uninstalling or resetting the app.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Depending on where you live, privacy law may provide rights to access, correct,
|
||||
delete, restrict, or object to processing of personal information. Because VniDrop
|
||||
has no account and automatic diagnostics use an anonymous installation ID, we may
|
||||
not be able to connect a server record to you without additional information. Use
|
||||
the contact method below and provide only what is needed to locate your submission.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="security" className="policy-section">
|
||||
<span className="policy-number">10</span>
|
||||
<h2>Security</h2>
|
||||
<p>
|
||||
VniDrop uses authenticated end-to-end encrypted connections, content verification,
|
||||
deny-by-default share access, bounded diagnostics payloads, redaction, and safe file
|
||||
publishing that avoids silently replacing an existing file. No system can guarantee
|
||||
absolute security. Keep invitations private, verify receiver names, keep your device
|
||||
updated, and stop sharing when a transfer is finished.
|
||||
</p>
|
||||
<p>
|
||||
Please report a suspected vulnerability through the private process in the {" "}
|
||||
<a href="https://github.com/vnidrop/vnidrop/blob/master/SECURITY.md" target="_blank" rel="noreferrer">VniDrop security policy</a>, not in a public issue.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="changes" className="policy-section">
|
||||
<span className="policy-number">11</span>
|
||||
<h2>Changes to this policy</h2>
|
||||
<p>
|
||||
VniDrop is in early development. Features and data practices may change. When this
|
||||
policy changes, we will update the effective date and version at the top of the page
|
||||
and publish the revised text with the project. Material changes should be called out
|
||||
in release notes or the application where practical.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="contact" className="policy-section policy-contact">
|
||||
<span className="policy-number">12</span>
|
||||
<h2>Contact</h2>
|
||||
<p>
|
||||
VniDrop is currently maintained as an open-source project and does not yet publish a
|
||||
dedicated privacy email or postal address. For a privacy question or request, open a
|
||||
request in the project issue tracker. Do not put an invitation, file content,
|
||||
credentials, or other sensitive information in a public issue.
|
||||
</p>
|
||||
<a
|
||||
className="button button-primary"
|
||||
href="https://github.com/vnidrop/vnidrop/issues/new"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Contact the maintainers
|
||||
<Icon name="arrow" />
|
||||
</a>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
660
docs/app/privacy/privacy-document.css
Normal file
660
docs/app/privacy/privacy-document.css
Normal file
@@ -0,0 +1,660 @@
|
||||
.privacy-page {
|
||||
background: #fcfbfd;
|
||||
}
|
||||
|
||||
.privacy-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 165px 0 105px;
|
||||
background:
|
||||
radial-gradient(circle at 80% 20%, rgba(192, 132, 252, 0.2), transparent 30%),
|
||||
linear-gradient(180deg, #fdfcfe, #f7f3f9);
|
||||
}
|
||||
|
||||
.privacy-hero-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(114, 84, 128, 0.055) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(114, 84, 128, 0.055) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
mask-image: linear-gradient(to bottom, black, transparent 90%);
|
||||
}
|
||||
|
||||
.privacy-hero-layout {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.92fr) minmax(430px, 0.72fr);
|
||||
align-items: center;
|
||||
gap: 95px;
|
||||
}
|
||||
|
||||
.privacy-back {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 42px;
|
||||
color: var(--ink-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.privacy-hero-copy > .kicker {
|
||||
display: block;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.privacy-back svg {
|
||||
width: 16px;
|
||||
transform: rotate(180deg);
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
|
||||
.privacy-back:hover {
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.privacy-back:hover svg {
|
||||
transform: rotate(180deg) translateX(4px);
|
||||
}
|
||||
|
||||
.privacy-hero-copy h1 {
|
||||
margin: 0 0 25px;
|
||||
font-size: clamp(3.7rem, 6.2vw, 6.5rem);
|
||||
font-weight: 760;
|
||||
letter-spacing: -0.075em;
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.privacy-hero-copy > p {
|
||||
max-width: 680px;
|
||||
margin-bottom: 28px;
|
||||
color: var(--ink-soft);
|
||||
font-size: 18px;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.privacy-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: var(--ink-muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.privacy-meta i {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
background: var(--brand-500);
|
||||
}
|
||||
|
||||
.privacy-hero-art {
|
||||
position: relative;
|
||||
min-height: 435px;
|
||||
}
|
||||
|
||||
.privacy-art-orbit {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border: 1px solid rgba(168, 85, 247, 0.18);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.privacy-art-orbit::before,
|
||||
.privacy-art-orbit::after {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: var(--brand-400);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.privacy-art-orbit-one {
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
animation: privacy-orbit 28s linear infinite;
|
||||
}
|
||||
|
||||
.privacy-art-orbit-one::before {
|
||||
top: 11%;
|
||||
left: 16%;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
box-shadow: 0 0 0 7px rgba(168, 85, 247, 0.09);
|
||||
}
|
||||
|
||||
.privacy-art-orbit-one::after {
|
||||
right: 8%;
|
||||
bottom: 25%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.privacy-art-orbit-two {
|
||||
width: 295px;
|
||||
height: 295px;
|
||||
border-style: dashed;
|
||||
animation: privacy-orbit 21s linear infinite reverse;
|
||||
}
|
||||
|
||||
.privacy-art-orbit-two::before {
|
||||
top: 48%;
|
||||
left: -4px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.privacy-art-orbit-two::after {
|
||||
top: 4%;
|
||||
right: 22%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.privacy-mark-card {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: grid;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
place-items: center;
|
||||
border: 1px solid #dfd2e6;
|
||||
border-radius: 45px;
|
||||
background: rgba(255, 255, 255, 0.91);
|
||||
box-shadow: 0 35px 90px rgba(65, 30, 80, 0.17);
|
||||
transform: translate(-50%, -50%) rotate(-3deg);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.privacy-mark-card > svg {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
.privacy-mark-glow {
|
||||
position: absolute;
|
||||
inset: -35px;
|
||||
border-radius: 50%;
|
||||
background: rgba(168, 85, 247, 0.2);
|
||||
filter: blur(42px);
|
||||
animation: privacy-glow 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.privacy-mark-lock {
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
bottom: -10px;
|
||||
display: grid;
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
place-items: center;
|
||||
border: 4px solid #f8f4fa;
|
||||
border-radius: 15px;
|
||||
background: var(--ink);
|
||||
box-shadow: 0 12px 30px rgba(42, 25, 50, 0.2);
|
||||
color: white;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.privacy-mark-lock svg {
|
||||
width: 21px;
|
||||
}
|
||||
|
||||
.privacy-data-pill {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 8px 11px;
|
||||
border: 1px solid #dfd3e4;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 12px 35px rgba(58, 33, 69, 0.11);
|
||||
color: var(--brand-600);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 8px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.07em;
|
||||
backdrop-filter: blur(10px);
|
||||
animation: privacy-pill 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.privacy-data-pill svg {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.privacy-data-pill-one {
|
||||
top: 11%;
|
||||
left: 4%;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
.privacy-data-pill-two {
|
||||
top: 29%;
|
||||
right: -2%;
|
||||
transform: rotate(4deg);
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
.privacy-data-pill-three {
|
||||
bottom: 6%;
|
||||
left: 7%;
|
||||
transform: rotate(3deg);
|
||||
animation-delay: -3.5s;
|
||||
}
|
||||
|
||||
.privacy-summary {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
margin-top: -37px;
|
||||
}
|
||||
|
||||
.privacy-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: var(--shadow-lg);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.privacy-summary-card {
|
||||
display: grid;
|
||||
min-height: 151px;
|
||||
align-content: center;
|
||||
padding: 25px 27px;
|
||||
}
|
||||
|
||||
.privacy-summary-card + .privacy-summary-card {
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.privacy-summary-card > span {
|
||||
display: grid;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
margin-bottom: 17px;
|
||||
place-items: center;
|
||||
border-radius: 10px;
|
||||
background: var(--brand-100);
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.privacy-summary-card svg {
|
||||
width: 19px;
|
||||
}
|
||||
|
||||
.privacy-summary-card small {
|
||||
margin-bottom: 1px;
|
||||
color: var(--ink-muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.privacy-summary-card strong {
|
||||
font-family: var(--font-display);
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.privacy-document-section {
|
||||
padding: 135px 0 155px;
|
||||
}
|
||||
|
||||
.privacy-document-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 210px minmax(0, 780px);
|
||||
justify-content: center;
|
||||
gap: 105px;
|
||||
}
|
||||
|
||||
.privacy-toc {
|
||||
position: sticky;
|
||||
top: 112px;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.privacy-toc > p {
|
||||
margin-bottom: 17px;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.privacy-toc nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.privacy-toc a {
|
||||
display: grid;
|
||||
grid-template-columns: 26px 1fr;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 0;
|
||||
color: #79707e;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
transition: color 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
.privacy-toc a:hover {
|
||||
color: var(--brand-600);
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.privacy-toc a span {
|
||||
color: #b5aabb;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.privacy-document {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.privacy-callout {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 17px;
|
||||
margin-bottom: 75px;
|
||||
padding: 25px;
|
||||
border: 1px solid #dfd0e7;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(145deg, #fbf6ff, #f7f1fa);
|
||||
}
|
||||
|
||||
.privacy-callout > svg {
|
||||
width: 24px;
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.privacy-callout strong {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.privacy-callout p {
|
||||
margin: 0;
|
||||
color: var(--ink-soft);
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.policy-section {
|
||||
position: relative;
|
||||
scroll-margin-top: 110px;
|
||||
padding: 0 0 72px;
|
||||
}
|
||||
|
||||
.policy-section + .policy-section {
|
||||
padding-top: 3px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.policy-number {
|
||||
display: inline-flex;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: var(--brand-600);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.policy-section + .policy-section .policy-number {
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
.policy-section h2 {
|
||||
margin-bottom: 27px;
|
||||
font-size: clamp(2rem, 3.3vw, 3.15rem);
|
||||
font-weight: 720;
|
||||
letter-spacing: -0.052em;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.policy-section h3 {
|
||||
margin: 34px 0 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 720;
|
||||
letter-spacing: -0.018em;
|
||||
}
|
||||
|
||||
.policy-section p,
|
||||
.policy-section li {
|
||||
color: #514956;
|
||||
font-size: 14px;
|
||||
line-height: 1.82;
|
||||
}
|
||||
|
||||
.policy-section p {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
|
||||
.policy-section ul {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin: 17px 0 22px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.policy-section li::marker {
|
||||
color: var(--brand-500);
|
||||
}
|
||||
|
||||
.policy-section code {
|
||||
padding: 2px 6px;
|
||||
border: 1px solid #e7dceb;
|
||||
border-radius: 5px;
|
||||
background: #f8f3fa;
|
||||
color: var(--brand-700);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.86em;
|
||||
}
|
||||
|
||||
.policy-section a:not(.button) {
|
||||
color: var(--brand-700);
|
||||
font-weight: 650;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(132, 47, 238, 0.28);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.policy-note {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 13px;
|
||||
margin-top: 28px;
|
||||
padding: 18px;
|
||||
border: 1px solid #e2d6e8;
|
||||
border-radius: 13px;
|
||||
background: #faf7fb;
|
||||
}
|
||||
|
||||
.policy-note svg {
|
||||
width: 21px;
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.policy-note p {
|
||||
margin: 0;
|
||||
color: #5e5264;
|
||||
font-size: 12px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.permission-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.permission-grid > div {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
gap: 5px 12px;
|
||||
padding: 17px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 13px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.permission-grid svg {
|
||||
width: 21px;
|
||||
grid-row: 1 / 3;
|
||||
color: var(--brand-600);
|
||||
}
|
||||
|
||||
.permission-grid strong {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.permission-grid p {
|
||||
margin: 0;
|
||||
color: var(--ink-muted);
|
||||
font-size: 9px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.provider-list {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
margin: 28px 0;
|
||||
}
|
||||
|
||||
.provider-list > div {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 15px;
|
||||
padding: 17px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 13px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.provider-list > div > span {
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
place-items: center;
|
||||
border-radius: 10px;
|
||||
background: var(--brand-100);
|
||||
color: var(--brand-700);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.provider-list strong {
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.provider-list p {
|
||||
margin: 0;
|
||||
color: var(--ink-muted);
|
||||
font-size: 10px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.provider-links {
|
||||
font-size: 11px !important;
|
||||
}
|
||||
|
||||
.retention-table {
|
||||
overflow: hidden;
|
||||
margin: 28px 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.retention-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(190px, 0.72fr) 1.28fr;
|
||||
}
|
||||
|
||||
.retention-row + .retention-row {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.retention-row span {
|
||||
padding: 14px 16px;
|
||||
color: var(--ink-soft);
|
||||
font-size: 10px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.retention-row span + span {
|
||||
border-left: 1px solid var(--line);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.retention-head {
|
||||
background: #f4eff6;
|
||||
}
|
||||
|
||||
.retention-head span {
|
||||
color: var(--ink) !important;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 8px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.policy-contact {
|
||||
overflow: hidden;
|
||||
padding: 54px !important;
|
||||
border: 1px solid #dfd0e7 !important;
|
||||
border-radius: 21px;
|
||||
background:
|
||||
radial-gradient(circle at 100% 0%, rgba(168, 85, 247, 0.14), transparent 35%),
|
||||
linear-gradient(145deg, #fbf7fe, #f6f0f9);
|
||||
}
|
||||
|
||||
.policy-contact .policy-number {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.policy-contact h2 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.policy-contact p {
|
||||
max-width: 620px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.policy-contact .button {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
156
docs/app/privacy/privacy-responsive.css
Normal file
156
docs/app/privacy/privacy-responsive.css
Normal file
@@ -0,0 +1,156 @@
|
||||
@keyframes privacy-orbit {
|
||||
from { transform: translate(-50%, -50%) rotate(0); }
|
||||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes privacy-glow {
|
||||
0%, 100% { opacity: 0.5; transform: scale(0.84); }
|
||||
50% { opacity: 1; transform: scale(1.14); }
|
||||
}
|
||||
|
||||
@keyframes privacy-pill {
|
||||
0%, 100% { margin-top: 0; }
|
||||
50% { margin-top: -8px; }
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
.privacy-hero-layout {
|
||||
grid-template-columns: minmax(0, 1fr) 390px;
|
||||
gap: 45px;
|
||||
}
|
||||
|
||||
.privacy-hero-copy h1 {
|
||||
font-size: clamp(3.6rem, 6.8vw, 5.5rem);
|
||||
}
|
||||
|
||||
.privacy-document-layout {
|
||||
grid-template-columns: 180px minmax(0, 720px);
|
||||
gap: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.privacy-hero {
|
||||
padding-top: 135px;
|
||||
}
|
||||
|
||||
.privacy-hero-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.privacy-hero-copy {
|
||||
max-width: 690px;
|
||||
}
|
||||
|
||||
.privacy-hero-art {
|
||||
width: min(100%, 520px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.privacy-summary-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.privacy-summary-card:nth-child(3) {
|
||||
border-top: 1px solid var(--line);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.privacy-summary-card:nth-child(4) {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.privacy-document-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.privacy-toc {
|
||||
position: relative;
|
||||
top: auto;
|
||||
padding-bottom: 25px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.privacy-toc nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.privacy-hero {
|
||||
padding: 120px 0 90px;
|
||||
}
|
||||
|
||||
.privacy-back {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.privacy-hero-copy h1 {
|
||||
font-size: clamp(3rem, 15vw, 4.5rem);
|
||||
}
|
||||
|
||||
.privacy-hero-copy > p {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.privacy-hero-art {
|
||||
min-height: 360px;
|
||||
transform: scale(0.86);
|
||||
}
|
||||
|
||||
.privacy-summary-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.privacy-summary-card {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.privacy-summary-card + .privacy-summary-card {
|
||||
border-top: 1px solid var(--line);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.privacy-document-section {
|
||||
padding: 95px 0 105px;
|
||||
}
|
||||
|
||||
.privacy-toc nav {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.privacy-callout {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.policy-section h2 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.policy-section p,
|
||||
.policy-section li {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.permission-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.retention-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.retention-row span + span {
|
||||
padding-top: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.retention-head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.policy-contact {
|
||||
padding: 35px 24px !important;
|
||||
}
|
||||
}
|
||||
322
docs/app/responsive.css
Normal file
322
docs/app/responsive.css
Normal file
@@ -0,0 +1,322 @@
|
||||
@keyframes ambient-drift {
|
||||
from { transform: translate3d(-10px, -8px, 0) rotate(0deg); }
|
||||
to { transform: translate3d(24px, 18px, 0) rotate(8deg); }
|
||||
}
|
||||
|
||||
@keyframes word-stream {
|
||||
to { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
@keyframes cta-orb {
|
||||
from { transform: translate3d(-20px, -10px, 0) scale(0.9); }
|
||||
to { transform: translate3d(40px, 25px, 0) scale(1.12); }
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.hero-layout {
|
||||
grid-template-columns: minmax(0, 0.88fr) minmax(470px, 1.12fr);
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
font-size: clamp(3.2rem, 5.4vw, 4.5rem);
|
||||
}
|
||||
|
||||
.approval-layout,
|
||||
.network-layout,
|
||||
.platforms-layout {
|
||||
gap: 55px;
|
||||
}
|
||||
|
||||
.privacy-point-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.privacy-point {
|
||||
min-height: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.desktop-nav,
|
||||
.header-github {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: grid;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 12px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: max-height 250ms ease, padding 250ms ease, opacity 180ms ease, visibility 250ms;
|
||||
}
|
||||
|
||||
.mobile-nav.is-open {
|
||||
max-height: 280px;
|
||||
padding: 4px 12px 12px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mobile-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 10px;
|
||||
border-top: 1px solid var(--line);
|
||||
color: var(--ink-soft);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.mobile-nav svg {
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
padding-top: 128px;
|
||||
}
|
||||
|
||||
.hero-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.hero-actions,
|
||||
.hero-platforms {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.trust-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.trust-item {
|
||||
min-height: 102px;
|
||||
}
|
||||
|
||||
.trust-item + .trust-item {
|
||||
border-top: 1px solid var(--line);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.section-heading-split {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.section-heading-split p {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.approval-layout,
|
||||
.network-layout,
|
||||
.platforms-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.approval-copy,
|
||||
.network-copy,
|
||||
.platforms-copy {
|
||||
max-width: 690px;
|
||||
}
|
||||
|
||||
.network-layout {
|
||||
gap: 75px;
|
||||
}
|
||||
|
||||
.platforms-layout {
|
||||
gap: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.page-shell {
|
||||
width: min(calc(100% - 32px), var(--shell));
|
||||
}
|
||||
|
||||
.site-header {
|
||||
top: 10px;
|
||||
width: calc(100% - 20px);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
height: 58px;
|
||||
padding-left: 11px;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.brand-mark-shell {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
min-height: auto;
|
||||
padding: 115px 0 72px;
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
font-size: clamp(2.75rem, 14vw, 4.25rem);
|
||||
letter-spacing: -0.065em;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hero-actions .button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-platforms {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.hero-platforms ul {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.trust-section {
|
||||
margin-top: -18px;
|
||||
}
|
||||
|
||||
.trust-grid {
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.trust-item {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.word-stream {
|
||||
padding-top: 70px;
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 95px 0;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.privacy-intro h2,
|
||||
.network-copy h2,
|
||||
.platforms-copy h2,
|
||||
.final-cta h2,
|
||||
.approval-copy h2 {
|
||||
font-size: clamp(2.35rem, 12vw, 3.5rem);
|
||||
}
|
||||
|
||||
.section-heading p,
|
||||
.section-lead {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.approval-section,
|
||||
.platforms-section,
|
||||
.network-section,
|
||||
.privacy-principles-section {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.approval-layout {
|
||||
gap: 55px;
|
||||
}
|
||||
|
||||
.privacy-point-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.privacy-point {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.privacy-point-top {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.privacy-policy-link {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.final-cta-section {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.final-cta {
|
||||
padding: 76px 22px;
|
||||
border-radius: 23px;
|
||||
}
|
||||
|
||||
.final-cta-actions {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
gap: 35px;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.motion-ready .reveal {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user