Skip to content

Commit 6cd4c3f

Browse files
michal92299michal92299
authored
Create styles.css
1 parent db69efe commit 6cd4c3f

File tree

1 file changed

+231
-0
lines changed

1 file changed

+231
-0
lines changed

‎styles.css‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Arial', sans-serif;
6+
}
7+
8+
body {
9+
background: linear-gradient(135deg, #1C2526 0%, #2F3A44 100%);
10+
color: #FFFFFF;
11+
line-height: 1.6;
12+
min-height: 100vh;
13+
display: flex;
14+
flex-direction: column;
15+
overflow-x: hidden;
16+
}
17+
18+
canvas#particles {
19+
position: fixed;
20+
top: 0;
21+
left: 0;
22+
width: 100%;
23+
height: 100%;
24+
z-index: -10;
25+
pointer-events: none;
26+
}
27+
28+
.logo-container {
29+
position: fixed;
30+
top: 1rem;
31+
left: 1rem;
32+
z-index: 1000;
33+
}
34+
35+
.logo-container a {
36+
display: block;
37+
transition: transform 0.3s ease;
38+
}
39+
40+
.logo-container a:hover {
41+
transform: scale(1.1);
42+
}
43+
44+
.logo-container img {
45+
height: 3rem;
46+
width: auto;
47+
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
48+
transition: filter 0.3s ease;
49+
}
50+
51+
.logo-container a:hover img {
52+
filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.3));
53+
}
54+
55+
.main-container {
56+
min-height: 100vh;
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
60+
text-align: center;
61+
background: linear-gradient(135deg, transparent, rgba(0, 0, 0, 0.7));
62+
position: relative;
63+
overflow: hidden;
64+
z-index: 1;
65+
}
66+
67+
.search-container {
68+
position: relative;
69+
width: 100%;
70+
max-width: 48rem;
71+
background: linear-gradient(145deg, #2a2a2a, #363636);
72+
border-radius: 3.75rem;
73+
padding: 0.75rem;
74+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 2px 8px rgba(255, 255, 255, 0.1);
75+
transition: box-shadow 0.3s ease, transform 0.3s ease;
76+
z-index: 10;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
backdrop-filter: blur(6px);
81+
}
82+
83+
.search-container:hover,
84+
.search-container:focus-within {
85+
box-shadow: 0 12px 40px rgba(255, 255, 255, 0.25), inset 0 2px 8px rgba(255, 255, 255, 0.15);
86+
transform: translateY(-5px);
87+
}
88+
89+
.search-form {
90+
display: flex;
91+
align-items: center;
92+
width: 100%;
93+
position: relative;
94+
}
95+
96+
.search-input {
97+
width: 100%;
98+
padding: 1.25rem 4.375rem 1.25rem 2rem;
99+
background: transparent;
100+
border: 2px solid #d0d0d0;
101+
border-radius: 3.75rem;
102+
color: #ffffff;
103+
font-size: 1.25rem;
104+
outline: none;
105+
transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
106+
}
107+
108+
.search-input:focus {
109+
border-color: #B0B0B0;
110+
box-shadow: 0 0 20px rgba(176, 176, 176, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.2);
111+
background: rgba(255, 255, 255, 0.08);
112+
}
113+
114+
.search-input::placeholder {
115+
color: #a0a0a0;
116+
font-style: italic;
117+
transition: opacity 0.3s ease;
118+
}
119+
120+
.search-input:focus::placeholder {
121+
opacity: 0.7;
122+
}
123+
124+
.search-button {
125+
position: absolute;
126+
right: 0.625rem;
127+
background: linear-gradient(145deg, #B0B0B0, #D0D0D0);
128+
border: none;
129+
border-radius: 50%;
130+
cursor: pointer;
131+
padding: 0.875rem;
132+
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
133+
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
134+
}
135+
136+
.search-button:hover,
137+
.search-button:focus {
138+
background: linear-gradient(145deg, #D0D0D0, #FFFFFF);
139+
transform: scale(1.15) rotate(5deg);
140+
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.3);
141+
}
142+
143+
.search-button img {
144+
width: 1.875rem;
145+
height: 1.875rem;
146+
filter: invert(0.2);
147+
transition: filter 0.3s ease, transform 0.3s ease;
148+
}
149+
150+
.search-button:hover img,
151+
.search-button:focus img {
152+
filter: invert(0);
153+
transform: rotate(-5deg);
154+
}
155+
156+
footer {
157+
background-color: #121212;
158+
padding: 1.25rem;
159+
text-align: center;
160+
color: #B0B0B0;
161+
position: fixed;
162+
bottom: 0;
163+
width: 100%;
164+
box-shadow: 0 -2px 6px rgba(0,0,0,0.6);
165+
display: flex;
166+
justify-content: center;
167+
align-items: center;
168+
gap: 0.5rem;
169+
font-size: 1rem;
170+
transition: background-color 0.3s ease;
171+
}
172+
173+
footer:hover {
174+
background-color: #1A1A1A;
175+
}
176+
177+
footer a {
178+
color: #B0B0B0;
179+
text-decoration: none;
180+
transition: color 0.3s ease, transform 0.3s ease;
181+
}
182+
183+
footer a:hover {
184+
color: #FFFFFF;
185+
transform: translateY(-2px);
186+
}
187+
188+
footer img {
189+
width: 1rem;
190+
height: 1rem;
191+
filter: invert(0.8);
192+
transition: filter 0.3s ease;
193+
}
194+
195+
@media (max-width: 600px) {
196+
.search-container {
197+
max-width: 90%;
198+
padding: 0.5rem;
199+
}
200+
.search-input {
201+
font-size: 1.125rem;
202+
padding: 1rem 3.75rem 1rem 1.25rem;
203+
}
204+
.search-button {
205+
padding: 0.75rem;
206+
}
207+
.search-button img {
208+
width: 1.625rem;
209+
height: 1.625rem;
210+
}
211+
footer {
212+
font-size: 0.875rem;
213+
}
214+
footer img {
215+
width: 0.875rem;
216+
height: 0.875rem;
217+
}
218+
.logo-container img {
219+
height: 2.5rem;
220+
}
221+
.logo-container {
222+
top: 0.9375rem;
223+
left: 0.9375rem;
224+
}
225+
}
226+
227+
@media (min-width: 1200px) {
228+
.search-container {
229+
max-width: 62.5rem;
230+
}
231+
}

0 commit comments

Comments
 (0)