Skip to content

Commit 3577b6c

Browse files
CrokilyCrokily
committed
feat: add FloatWindow component to the main page
1 parent 017d00e commit 3577b6c

4 files changed

Lines changed: 553 additions & 1 deletion

File tree

‎app/components/FloatWindow.module.css‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
/* Crumpled/Aged Paper Base Texture - Light Mode */
2+
.paperAged {
3+
background-color: #f5f0e6;
4+
background-image:
5+
/* Coffee stain effect */
6+
radial-gradient(
7+
ellipse at 85% 15%,
8+
rgba(139, 90, 43, 0.08) 0%,
9+
transparent 50%
10+
),
11+
radial-gradient(
12+
ellipse at 10% 80%,
13+
rgba(139, 90, 43, 0.05) 0%,
14+
transparent 40%
15+
),
16+
/* Yellowed edges */
17+
radial-gradient(
18+
ellipse at 0% 0%,
19+
rgba(180, 140, 80, 0.15) 0%,
20+
transparent 50%
21+
),
22+
radial-gradient(
23+
ellipse at 100% 100%,
24+
rgba(180, 140, 80, 0.12) 0%,
25+
transparent 50%
26+
),
27+
/* Paper fiber texture */
28+
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E");
29+
}
30+
31+
/* Dark Mode - Deep charcoal with subtle warm undertones */
32+
:global(.dark) .paperAged {
33+
background-color: #0d0c0a;
34+
background-image:
35+
/* Subtle warm glow in corners */
36+
radial-gradient(
37+
ellipse at 85% 15%,
38+
rgba(80, 60, 40, 0.15) 0%,
39+
transparent 50%
40+
),
41+
radial-gradient(
42+
ellipse at 10% 80%,
43+
rgba(80, 60, 40, 0.1) 0%,
44+
transparent 40%
45+
),
46+
/* Edge darkening */
47+
radial-gradient(ellipse at 0% 0%, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
48+
radial-gradient(
49+
ellipse at 100% 100%,
50+
rgba(0, 0, 0, 0.25) 0%,
51+
transparent 50%
52+
),
53+
/* Subtle noise texture */
54+
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E");
55+
}
56+
57+
/* Crumple overlay with wrinkles - Light Mode */
58+
.paperCrumpleOverlay {
59+
background-image:
60+
/* Diagonal crease lines */
61+
linear-gradient(
62+
47deg,
63+
transparent 30%,
64+
rgba(0, 0, 0, 0.03) 30.5%,
65+
rgba(0, 0, 0, 0.03) 31%,
66+
transparent 31.5%
67+
),
68+
linear-gradient(
69+
137deg,
70+
transparent 45%,
71+
rgba(0, 0, 0, 0.025) 45.5%,
72+
rgba(0, 0, 0, 0.025) 46%,
73+
transparent 46.5%
74+
),
75+
linear-gradient(
76+
-43deg,
77+
transparent 60%,
78+
rgba(0, 0, 0, 0.02) 60.5%,
79+
rgba(0, 0, 0, 0.02) 61%,
80+
transparent 61.5%
81+
),
82+
/* Noise grain */
83+
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
84+
background-size:
85+
100% 100%,
86+
100% 100%,
87+
100% 100%,
88+
100px 100px;
89+
mix-blend-mode: multiply;
90+
opacity: 0.4;
91+
}
92+
93+
/* Dark Mode - Very subtle overlay */
94+
:global(.dark) .paperCrumpleOverlay {
95+
background-image:
96+
linear-gradient(
97+
47deg,
98+
transparent 30%,
99+
rgba(255, 255, 255, 0.008) 30.5%,
100+
rgba(255, 255, 255, 0.008) 31%,
101+
transparent 31.5%
102+
),
103+
linear-gradient(
104+
137deg,
105+
transparent 45%,
106+
rgba(255, 255, 255, 0.006) 45.5%,
107+
rgba(255, 255, 255, 0.006) 46%,
108+
transparent 46.5%
109+
),
110+
linear-gradient(
111+
-43deg,
112+
transparent 60%,
113+
rgba(255, 255, 255, 0.004) 60.5%,
114+
rgba(255, 255, 255, 0.004) 61%,
115+
transparent 61.5%
116+
),
117+
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
118+
mix-blend-mode: overlay;
119+
opacity: 0.15;
120+
}
121+
122+
/* Worn edges effect - Light Mode */
123+
.paperWornEdges {
124+
box-shadow:
125+
inset 0 0 30px rgba(139, 90, 43, 0.1),
126+
inset 0 0 60px rgba(139, 90, 43, 0.05),
127+
inset 2px 2px 8px rgba(0, 0, 0, 0.08),
128+
inset -2px -2px 8px rgba(0, 0, 0, 0.05);
129+
}
130+
131+
/* Dark Mode - Edge shadows */
132+
:global(.dark) .paperWornEdges {
133+
box-shadow:
134+
inset 0 0 40px rgba(0, 0, 0, 0.5),
135+
inset 0 0 80px rgba(0, 0, 0, 0.3),
136+
inset 2px 2px 12px rgba(0, 0, 0, 0.4),
137+
inset -2px -2px 12px rgba(0, 0, 0, 0.3);
138+
}
139+
140+
/* Ink bleed effect for text - Light Mode */
141+
.inkBleed {
142+
text-shadow: 0.3px 0.3px 0px rgba(0, 0, 0, 0.1);
143+
}
144+
145+
/* Dark Mode */
146+
:global(.dark) .inkBleed {
147+
text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
148+
}
149+
150+
/* Faded print effect */
151+
.fadedPrint {
152+
opacity: 0.92;
153+
}
154+
155+
:global(.dark) .fadedPrint {
156+
opacity: 0.95;
157+
}
158+
159+
/* Torn corner effect - Light Mode */
160+
.tornCorner {
161+
background: linear-gradient(
162+
135deg,
163+
transparent 60%,
164+
#d5cfc2 60%,
165+
#e5dfd5 100%
166+
);
167+
filter: drop-shadow(-1px 1px 1px rgba(0, 0, 0, 0.1));
168+
}
169+
170+
/* Dark Mode */
171+
:global(.dark) .tornCorner {
172+
background: linear-gradient(
173+
135deg,
174+
transparent 60%,
175+
#1a1816 60%,
176+
#0d0c0a 100%
177+
);
178+
filter: drop-shadow(-1px 1px 1px rgba(0, 0, 0, 0.3));
179+
}
180+
181+
/* Stacked paper layers - Light Mode */
182+
.stackedPaper1 {
183+
background-color: #e8e2d5;
184+
border-color: rgba(139, 115, 85, 0.3);
185+
}
186+
187+
:global(.dark) .stackedPaper1 {
188+
background-color: #0a0908;
189+
border-color: rgba(60, 50, 40, 0.4);
190+
}
191+
192+
.stackedPaper2 {
193+
background-color: #ddd7ca;
194+
border-color: rgba(139, 115, 85, 0.2);
195+
}
196+
197+
:global(.dark) .stackedPaper2 {
198+
background-color: #080706;
199+
border-color: rgba(60, 50, 40, 0.3);
200+
}

0 commit comments

Comments
 (0)