my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

#1	@font-face {
#2	font-family: 'Geist';
#3	src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
#4	font-weight: 400; font-style: normal; font-display: swap;
#5	}
#6	@font-face {
#7	font-family: 'Geist';
#8	src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
#9	font-weight: 500; font-style: normal; font-display: swap;
#10	}
#11	@font-face {
#12	font-family: 'Geist';
#13	src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
#14	font-weight: 600; font-style: normal; font-display: swap;
#15	}
#16	@font-face {
#17	font-family: 'Geist';
#18	src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
#19	font-weight: 700; font-style: normal; font-display: swap;
#20	}
#21	@font-face {
#22	font-family: 'Geist';
#23	src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-ExtraBold.woff2') format('woff2');
#24	font-weight: 800; font-style: normal; font-display: swap;
#25	}
#26	@font-face {
#27	font-family: 'Geist Mono';
#28	src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');
#29	font-weight: 400; font-style: normal; font-display: swap;
#30	}
#31	@font-face {
#32	font-family: 'Geist Mono';
#33	src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2');
#34	font-weight: 500; font-style: normal; font-display: swap;
#35	}
#36
#37	:root {
#38	--bg: #09090b;
#39	--bg-card: #18181b;
#40	--bg-code: #111113;
#41	--text: #fafafa;
#42	--text-muted: #71717a;
#43	--accent: #38bdf8;
#44	--accent-dim: rgba(56,189,248,0.12);
#45	--border: #27272a;
#46	--max-w: 1100px;
#47	--mono: "Geist Mono", "SF Mono", "Fira Code", Consolas, monospace;
#48	--sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
#49	}
#50
#51	, ::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
#52
#53	body {
#54	font-family: var(--sans);
#55	background: var(--bg);
#56	color: var(--text);
#57	line-height: 1.6;
#58	-webkit-font-smoothing: antialiased;
#59	overflow-x: hidden;
#60	display: flex;
#61	flex-direction: column;
#62	min-height: 100vh;
#63	}
#64
#65	a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
#66	a:hover { color: var(--text); }
#67
#68	.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
#69
#70	.accent-text { color: var(--accent); }
#71
#72	code { font-family: var(--mono); }
#73
#74	p code {
#75	background: var(--bg-card);
#76	border: 1px solid var(--border);
#77	padding: 0.15rem 0.4rem;
#78	border-radius: 4px;
#79	font-size: 0.85em;
#80	}
#81
#82	/* ── Nav ── */
#83	nav {
#84	position: fixed;
#85	top: 0; left: 0; right: 0;
#86	background: rgba(9,9,11,0.85);
#87	backdrop-filter: blur(12px);
#88	border-bottom: 1px solid var(--border);
#89	z-index: 100;
#90	}
#91
#92	nav .container {
#93	display: flex;
#94	align-items: center;
#95	justify-content: space-between;
#96	height: 56px;
#97	}
#98
#99	.logo-mark {
#100	display: flex;
#101	align-items: center;
#102	gap: 0.6rem;
#103	}
#104
#105	.logo-svg {
#106	transition: transform 0.4s ease;
#107	}
#108
#109	.logo-mark:hover .logo-svg {
#110	transform: rotate(90deg);
#111	}
#112
#113	.logo-text {
#114	font-size: 1.1rem;
#115	font-weight: 700;
#116	color: var(--text);
#117	letter-spacing: -0.03em;
#118	}
#119
#120	nav .links { display: flex; gap: 1.5rem; align-items: center; }
#121
#122	nav .links a {
#123	color: var(--text-muted);
#124	font-size: 0.85rem;
#125	font-weight: 500;
#126	}
#127
#128	nav .links a:hover { color: var(--text); }
#129
#130	/* ── Hero ── */
#131	.hero {
#132	position: relative;
#133	padding: 56px 0 0;
#134	flex: 1;
#135	display: flex;
#136	align-items: center;
#137	}
#138
#139	.hero-glow {
#140	position: absolute;
#141	top: -10%;
#142	left: 30%;
#143	transform: translateX(-50%);
#144	width: 70vw;
#145	height: 60vh;
#146	background: radial-gradient(ellipse at center, rgba(56,189,248,0.06) 0%, transparent 70%);
#147	pointer-events: none;
#148	z-index: 0;
#149	}
#150
#151	.hero-grid {
#152	position: relative;
#153	z-index: 1;
#154	display: grid;
#155	grid-template-columns: 1fr 340px;
#156	gap: 3rem;
#157	align-items: center;
#158	}
#159
#160	.hero-copy {
#161	text-align: left;
#162	}
#163
#164	.hero .badge {
#165	display: inline-flex;
#166	align-items: center;
#167	gap: 0.5rem;
#168	padding: 0.3rem 0.75rem;
#169	border-radius: 100px;
#170	background: var(--bg-card);
#171	border: 1px solid var(--border);
#172	font-size: 0.75rem;
#173	font-weight: 500;
#174	color: var(--accent);
#175	margin-bottom: 1.25rem;
#176	font-family: var(--mono);
#177	}
#178
#179	.badge-dot {
#180	width: 6px; height: 6px;
#181	border-radius: 50%;
#182	background: var(--accent);
#183	}
#184
#185	.hero h1 {
#186	font-size: 3.2rem;
#187	font-weight: 800;
#188	line-height: 1.08;
#189	margin-bottom: 1rem;
#190	letter-spacing: -0.04em;
#191	}
#192
#193	.hero .subtitle {
#194	font-size: 0.95rem;
#195	color: var(--text-muted);
#196	max-width: 520px;
#197	margin-bottom: 1.75rem;
#198	line-height: 1.7;
#199	}
#200
#201	.hero .subtitle a {
#202	color: var(--text);
#203	text-decoration: underline;
#204	text-underline-offset: 3px;
#205	text-decoration-color: var(--text-muted);
#206	}
#207
#208	.hero .install-cmd {
#209	max-width: 400px;
#210	text-align: left;
#211	border: 1px solid var(--border);
#212	background: var(--bg-card);
#213	border-radius: 10px;
#214	padding: 0.7rem 1.25rem;
#215	margin-bottom: 0.5rem;
#216	}
#217
#218	.hero .install-cmd code {
#219	font-size: 0.9rem;
#220	color: var(--text);
#221	}
#222
#223	.hero .install-cmd code::before {
#224	content: "$ ";
#225	color: var(--text-muted);
#226	}
#227
#228	.hero .compat {
#229	font-size: 0.78rem;
#230	color: var(--text-muted);
#231	margin-bottom: 1.5rem;
#232	}
#233
#234	.hero .compat a {
#235	text-decoration: underline;
#236	text-underline-offset: 2px;
#237	text-decoration-color: var(--text-muted);
#238	}
#239
#240	.hero .cta {
#241	display: flex;
#242	gap: 0.75rem;
#243	flex-wrap: wrap;
#244	}
#245
#246	/* ── Diagram ── */
#247	.hero-diagram {
#248	background: var(--bg-card);
#249	border: 1px solid var(--border);
#250	border-radius: 12px;
#251	padding: 1.5rem 1rem;
#252	display: flex;
#253	align-items: center;
#254	justify-content: center;
#255	}
#256
#257	.hero-diagram svg {
#258	width: 100%;
#259	height: auto;
#260	max-height: 420px;
#261	}
#262
#263	/* ── Buttons ── */
#264	.btn {
#265	display: inline-flex;
#266	align-items: center;
#267	gap: 0.5rem;
#268	padding: 0.6rem 1.4rem;
#269	border-radius: 8px;
#270	font-size: 0.88rem;
#271	font-weight: 600;
#272	transition: all 0.2s;
#273	}
#274
#275	.btn-primary {
#276	background: var(--text);
#277	color: var(--bg);
#278	}
#279
#280	.btn-primary:hover {
#281	background: #d4d4d8;
#282	color: var(--bg);
#283	}
#284
#285	.btn-secondary {
#286	border: 1px solid var(--border);
#287	color: var(--text-muted);
#288	}
#289
#290	.btn-secondary:hover {
#291	border-color: #3f3f46;
#292	color: var(--text);
#293	}
#294
#295	/* ── Footer ── */
#296	footer {
#297	border-top: 1px solid var(--border);
#298	padding: 1.5rem 0;
#299	position: relative;
#300	overflow: hidden;
#301	}
#302
#303	footer .container {
#304	display: flex;
#305	align-items: center;
#306	justify-content: space-between;
#307	position: relative;
#308	}
#309
#310	footer .watermark {
#311	position: absolute;
#312	bottom: -30px;
#313	right: -10px;
#314	font-size: 10rem;
#315	font-weight: 800;
#316	color: rgba(255,255,255,0.02);
#317	pointer-events: none;
#318	user-select: none;
#319	font-style: italic;
#320	line-height: 1;
#321	}
#322
#323	footer .footer-left {
#324	display: flex;
#325	align-items: center;
#326	gap: 0.6rem;
#327	}
#328
#329	footer .footer-left svg {
#330	flex-shrink: 0;
#331	}
#332
#333	footer .footer-name {
#334	font-weight: 600;
#335	font-size: 0.85rem;
#336	}
#337
#338	footer .footer-copy {
#339	color: var(--text-muted);
#340	font-size: 0.8rem;
#341	margin-left: 0.75rem;
#342	}
#343
#344	footer .footer-links {
#345	display: flex;
#346	gap: 1.5rem;
#347	}
#348
#349	footer .footer-links a {
#350	font-size: 0.8rem;
#351	color: var(--text-muted);
#352	}
#353
#354	footer .footer-links a:hover { color: var(--text); }
#355
#356	/* ── Responsive ── */
#357	@media (max-width: 868px) {
#358	.hero-grid {
#359	grid-template-columns: 1fr;
#360	text-align: center;
#361	}
#362	.hero-copy { text-align: center; }
#363	.hero h1 { font-size: 2.4rem; }
#364	.hero .subtitle { margin-left: auto; margin-right: auto; }
#365	.hero .install-cmd {
#366	margin-left: auto;
#367	margin-right: auto;
#368	text-align: center;
#369	}
#370	.hero .compat { text-align: center; }
#371	.hero .cta { justify-content: center; }
#372	.hero-diagram {
#373	max-width: 320px;
#374	margin: 0 auto;
#375	}
#376	footer .container { flex-direction: column; gap: 1rem; text-align: center; }
#377	nav .links { gap: 1rem; }
#378	}
#379

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public