Skip to content

Commit 0f58162

Browse files
0xarchit0xarchit
authored
Merge pull request #54 from 0xarchit/web/init
feat(web): Introduce "Ink & Blush" landing page and automated Pages deployment
2 parents fee058e + 4f40040 commit 0f58162

19 files changed

Lines changed: 2461 additions & 0 deletions

‎website/CNAME‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
pausecat.0xarchit.is-a.dev

‎website/assets/Cat_Cursor.png‎

2.03 KB
Loading

‎website/assets/Cat_Pointer.png‎

2.04 KB
Loading

‎website/assets/favicon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎website/assets/logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎website/css/animations.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@keyframes heroFloat {
2+
from { transform: translateY(0); }
3+
to { transform: translateY(-12px); }
4+
}
5+
6+
@keyframes marquee {
7+
from { transform: translateX(0); }
8+
to { transform: translateX(-33.33%); }
9+
}
10+
11+
@keyframes fadeInUp {
12+
from { opacity: 0; transform: translateY(28px); }
13+
to { opacity: 1; transform: translateY(0); }
14+
}
15+
16+
@keyframes textFloat {
17+
0%,100% { transform: rotateX(20deg) rotateY(-20deg) translateZ(0); }
18+
50% { transform: rotateX(25deg) rotateY(-15deg) translateZ(40px); }
19+
}
20+
21+
@keyframes bubbleFadeIn {
22+
from { opacity: 0; transform: scale(0.9) translateY(16px); }
23+
to { opacity: 1; transform: scale(1) translateY(0); }
24+
}
25+
26+
@keyframes cursorBlink {
27+
0%,100% { opacity: 1; }
28+
50% { opacity: 0; }
29+
}
30+
31+
@keyframes scrollCuePulse {
32+
0%,100% { opacity: 0.4; transform: scaleY(1); }
33+
50% { opacity: 0.8; transform: scaleY(1.15); }
34+
}
35+
36+
/* Scroll reveal classes */
37+
.reveal {
38+
opacity: 0;
39+
transform: translateY(24px);
40+
transition: opacity 0.55s ease, transform 0.55s ease;
41+
}
42+
43+
.reveal.revealed {
44+
opacity: 1;
45+
transform: translateY(0);
46+
}

‎website/css/components.css‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
/* Navigation */
2+
nav {
3+
position: fixed;
4+
top: 0;
5+
width: 100%;
6+
height: 64px;
7+
background: rgba(13, 11, 14, 0.82);
8+
backdrop-filter: blur(20px) saturate(160%);
9+
border-bottom: 1px solid var(--border);
10+
z-index: 100;
11+
transition: border-color 0.3s;
12+
}
13+
14+
nav.scrolled {
15+
border-bottom-color: var(--border-hover);
16+
}
17+
18+
.nav-content {
19+
display: flex;
20+
align-items: center;
21+
justify-content: space-between;
22+
height: 100%;
23+
}
24+
25+
.nav-logo {
26+
display: flex;
27+
align-items: center;
28+
gap: 12px;
29+
text-decoration: none;
30+
color: var(--text-primary);
31+
font-size: 1.25rem;
32+
font-weight: 600;
33+
}
34+
35+
.nav-logo img {
36+
height: 34px;
37+
}
38+
39+
.nav-links {
40+
display: none;
41+
gap: 24px;
42+
}
43+
44+
.nav-links a {
45+
text-decoration: none;
46+
color: var(--text-muted);
47+
font-size: 0.8rem;
48+
transition: color 0.2s;
49+
}
50+
51+
.nav-links a:hover {
52+
color: var(--text-primary);
53+
}
54+
55+
.nav-actions {
56+
display: none;
57+
align-items: center;
58+
gap: 16px;
59+
}
60+
61+
@media (min-width: 768px) {
62+
.nav-links { display: flex; }
63+
.nav-actions { display: flex; }
64+
}
65+
66+
/* Buttons */
67+
.btn-primary {
68+
display: inline-flex;
69+
align-items: center;
70+
justify-content: center;
71+
background: var(--pink);
72+
color: #0D0B0E;
73+
border-radius: var(--radius-pill);
74+
font-family: 'Syne', sans-serif;
75+
font-weight: 700;
76+
font-size: clamp(0.85rem, 2.5vw, 1rem);
77+
padding: clamp(12px, 3vw, 15px) clamp(24px, 5vw, 40px);
78+
text-decoration: none;
79+
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
80+
}
81+
82+
.btn-primary:hover {
83+
background: #f9a8d4;
84+
transform: translateY(-1px);
85+
box-shadow: var(--glow-sm);
86+
}
87+
88+
.btn-primary.small {
89+
font-size: 0.85rem;
90+
padding: 10px 24px;
91+
}
92+
93+
.btn-ghost {
94+
display: inline-flex;
95+
align-items: center;
96+
gap: 8px;
97+
font-family: 'Syne', sans-serif;
98+
font-weight: 600;
99+
font-size: 0.9rem;
100+
color: var(--text-secondary);
101+
text-decoration: none;
102+
transition: color 0.2s;
103+
}
104+
105+
.btn-ghost:hover {
106+
color: var(--text-primary);
107+
}
108+
109+
.btn-ghost .arrow {
110+
transition: transform 0.2s;
111+
}
112+
113+
.btn-ghost:hover .arrow {
114+
transform: translateX(3px);
115+
}
116+
117+
.btn-outline {
118+
display: inline-flex;
119+
align-items: center;
120+
border: 1px solid var(--border);
121+
color: var(--text-secondary);
122+
padding: 8px 16px;
123+
border-radius: var(--radius-sm);
124+
text-decoration: none;
125+
font-size: 0.8rem;
126+
transition: border-color 0.2s, color 0.2s;
127+
}
128+
129+
.btn-outline:hover {
130+
border-color: var(--border-hover);
131+
color: var(--pink);
132+
}
133+
134+
/* Badges & Chips */
135+
.badge-os {
136+
font-size: 0.72rem;
137+
color: var(--text-muted);
138+
border: 1px solid var(--border);
139+
border-radius: var(--radius-sm);
140+
padding: 6px 14px;
141+
display: inline-block;
142+
}
143+
144+
.chip {
145+
background: var(--bg-surface);
146+
border: 1px solid var(--border);
147+
border-radius: var(--radius-sm);
148+
padding: 6px 12px;
149+
font-family: 'Syne', sans-serif;
150+
font-weight: 500;
151+
font-size: 0.8rem;
152+
color: var(--text-secondary);
153+
}
154+
155+
.badge-mode-soft {
156+
background: rgba(244,114,182,0.12);
157+
border: 1px solid var(--border-pink);
158+
color: var(--pink);
159+
padding: 4px 10px;
160+
border-radius: var(--radius-pill);
161+
}
162+
163+
.badge-license {
164+
color: #FCD34D;
165+
border: 1px solid rgba(252,211,77,0.3);
166+
padding: 4px 10px;
167+
border-radius: var(--radius-sm);
168+
}
169+
170+
code {
171+
background: var(--bg-surface);
172+
color: var(--pink);
173+
padding: 2px 8px;
174+
border-radius: var(--radius-sm);
175+
font-size: 0.85em;
176+
}
177+
178+
/* Cards */
179+
.card {
180+
background: var(--bg-surface);
181+
border: 1px solid var(--border);
182+
border-radius: var(--radius-md);
183+
padding: 24px;
184+
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
185+
}
186+
187+
.card:hover {
188+
border-color: var(--border-hover);
189+
box-shadow: var(--glow-xs);
190+
transform: translateY(-3px);
191+
}
192+
193+
.card-raised {
194+
background: var(--bg-raised);
195+
}
196+
197+
/* Stats */
198+
.stats-strip {
199+
display: inline-flex;
200+
align-items: center;
201+
gap: 16px;
202+
opacity: 0;
203+
animation: fadeInUp 0.6s ease forwards 0.6s;
204+
}
205+
206+
.stat {
207+
display: flex;
208+
align-items: center;
209+
gap: 6px;
210+
}
211+
212+
.stat-icon {
213+
font-size: 0.9em;
214+
}
215+
216+
.stat-value {
217+
color: var(--text-secondary);
218+
}
219+
220+
.stat-divider {
221+
color: var(--text-muted);
222+
}

‎website/css/layout.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.container {
2+
width: 100%;
3+
max-width: var(--max-w);
4+
margin: 0 auto;
5+
padding: 0 1.5rem;
6+
}
7+
8+
section {
9+
padding: var(--section-pad);
10+
}
11+
12+
.bg-layer {
13+
background-color: var(--bg-layer);
14+
}
15+
16+
.bg-surface {
17+
background-color: var(--bg-surface);
18+
}
19+
20+
/* Utility layout classes */
21+
.flex { display: flex; }
22+
.flex-col { display: flex; flex-direction: column; }
23+
.items-center { align-items: center; }
24+
.justify-center { justify-content: center; }
25+
.justify-between { justify-content: space-between; }
26+
.gap-2 { gap: 0.5rem; }
27+
.gap-4 { gap: 1rem; }
28+
.gap-6 { gap: 1.5rem; }
29+
.gap-8 { gap: 2rem; }
30+
.gap-12 { gap: 3rem; }
31+
32+
.grid { display: grid; }
33+
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
34+
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
35+
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
36+
37+
.text-center { text-align: center; }
38+
.text-right { text-align: right; }
39+
40+
.mx-auto { margin-left: auto; margin-right: auto; }
41+
.mt-8 { margin-top: 2rem; }
42+
.mt-12 { margin-top: 3rem; }
43+
.mb-8 { margin-bottom: 2rem; }
44+
.mb-12 { margin-bottom: 3rem; }
45+
46+
@media (min-width: 768px) {
47+
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
48+
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
49+
.md\:flex-row { flex-direction: row; }
50+
.md\:text-left { text-align: left; }
51+
}
52+
53+
@media (min-width: 1024px) {
54+
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
55+
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
56+
}

0 commit comments

Comments
 (0)