Skip to content

Commit 7a96f30

Browse files
michal92299michal92299
authored
Create styles.css
1 parent 84556f9 commit 7a96f30

1 file changed

Lines changed: 395 additions & 0 deletions

File tree

‎tools-docs/styles.css‎

Lines changed: 395 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,395 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #0c0f14;
9+
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Roboto', sans-serif;
10+
line-height: 1.55;
11+
min-height: 100vh;
12+
display: flex;
13+
flex-direction: column;
14+
color: #eef2f8;
15+
}
16+
17+
/* ---------- GÓRNY PASEK ---------- */
18+
.top-bar {
19+
background-color: #05070a;
20+
width: 100%;
21+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
22+
position: relative;
23+
z-index: 100;
24+
border-bottom: 1px solid #20262e;
25+
}
26+
27+
.navbar-container {
28+
display: flex;
29+
align-items: center;
30+
justify-content: flex-start;
31+
max-width: 1600px;
32+
margin: 0 auto;
33+
padding: 0 28px;
34+
min-height: 74px;
35+
gap: 2rem;
36+
}
37+
38+
.logo-area {
39+
flex-shrink: 0;
40+
line-height: 0;
41+
transition: filter 0.2s;
42+
}
43+
.logo-area:hover {
44+
filter: brightness(0.92);
45+
}
46+
.logo-area a {
47+
display: inline-block;
48+
text-decoration: none;
49+
}
50+
.logo-area img {
51+
display: block;
52+
max-height: 54px;
53+
width: auto;
54+
height: auto;
55+
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
56+
border-radius: 8px;
57+
background: transparent;
58+
cursor: pointer;
59+
}
60+
61+
.nav-menu {
62+
flex: 1;
63+
display: flex;
64+
justify-content: center;
65+
}
66+
.nav-list {
67+
display: flex;
68+
flex-wrap: wrap;
69+
justify-content: center;
70+
gap: 0.3rem;
71+
list-style: none;
72+
align-items: center;
73+
}
74+
.nav-list li {
75+
margin: 0;
76+
position: relative;
77+
}
78+
.nav-list a {
79+
display: inline-block;
80+
padding: 8px 18px;
81+
font-weight: 550;
82+
font-size: 0.95rem;
83+
letter-spacing: 0.2px;
84+
text-decoration: none;
85+
color: #e3e9f2;
86+
background-color: transparent;
87+
border-radius: 60px;
88+
transition: all 0.22s ease;
89+
font-family: inherit;
90+
white-space: nowrap;
91+
}
92+
.nav-list a:hover {
93+
background-color: #2a313c;
94+
color: white;
95+
transform: translateY(-1px);
96+
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
97+
}
98+
99+
/* DROPDOWN dla języków programowania */
100+
.dropdown {
101+
position: relative;
102+
}
103+
.dropdown-btn {
104+
background: transparent;
105+
border: none;
106+
font-family: inherit;
107+
font-weight: 550;
108+
font-size: 0.95rem;
109+
letter-spacing: 0.2px;
110+
color: #e3e9f2;
111+
padding: 8px 18px;
112+
border-radius: 60px;
113+
cursor: pointer;
114+
transition: all 0.22s ease;
115+
display: inline-flex;
116+
align-items: center;
117+
gap: 6px;
118+
white-space: nowrap;
119+
}
120+
.dropdown-btn i {
121+
font-size: 0.75rem;
122+
transition: transform 0.2s;
123+
}
124+
.dropdown-btn:hover {
125+
background-color: #2a313c;
126+
color: white;
127+
transform: translateY(-1px);
128+
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
129+
}
130+
.dropdown-content {
131+
position: absolute;
132+
top: calc(100% + 6px);
133+
left: 0;
134+
background-color: #0f151e;
135+
backdrop-filter: blur(12px);
136+
border-radius: 20px;
137+
min-width: 210px;
138+
padding: 0.5rem 0;
139+
box-shadow: 0 20px 30px -12px rgba(0,0,0,0.6);
140+
border: 1px solid #2c3540;
141+
opacity: 0;
142+
visibility: hidden;
143+
transform: translateY(-8px);
144+
transition: all 0.2s ease;
145+
z-index: 200;
146+
}
147+
.dropdown.open .dropdown-content {
148+
opacity: 1;
149+
visibility: visible;
150+
transform: translateY(0);
151+
}
152+
.dropdown-content a {
153+
display: block;
154+
padding: 10px 20px;
155+
color: #e0e8f2;
156+
text-decoration: none;
157+
font-size: 0.85rem;
158+
font-weight: 500;
159+
transition: background 0.15s;
160+
white-space: nowrap;
161+
background: transparent;
162+
border-radius: 0;
163+
}
164+
.dropdown-content a:hover {
165+
background-color: #1f2a36;
166+
color: white;
167+
transform: none;
168+
box-shadow: none;
169+
}
170+
171+
/* GŁÓWNY BLOK */
172+
.main-content {
173+
flex: 1;
174+
max-width: 1300px;
175+
margin: 2rem auto;
176+
padding: 2rem 2rem 2.5rem;
177+
background-color: #13181f;
178+
border-radius: 44px;
179+
box-shadow: 0 25px 40px -12px rgba(0, 0, 0, 0.5);
180+
border: 1px solid #242c34;
181+
}
182+
183+
.section-header {
184+
text-align: center;
185+
margin-bottom: 2rem;
186+
}
187+
.section-header h2 {
188+
font-size: 2.3rem;
189+
font-weight: 650;
190+
background: linear-gradient(125deg, #eef2fc, #b9c4d1);
191+
background-clip: text;
192+
-webkit-background-clip: text;
193+
color: transparent;
194+
letter-spacing: -0.4px;
195+
}
196+
197+
/* SLIDER / KARUZELA */
198+
.slider-shell {
199+
position: relative;
200+
margin: 1rem 0 0.8rem;
201+
border-radius: 2rem;
202+
}
203+
.slider-container {
204+
position: relative;
205+
overflow: hidden;
206+
border-radius: 2rem;
207+
background: #0e131a;
208+
box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.5);
209+
border: 1px solid #2c3540;
210+
margin: 0 4px;
211+
}
212+
.slides-wrapper {
213+
overflow: hidden;
214+
width: 100%;
215+
}
216+
.slides-track {
217+
display: flex;
218+
transition: transform 0.4s cubic-bezier(0.2, 0.85, 0.4, 1);
219+
will-change: transform;
220+
}
221+
.slide {
222+
flex: 0 0 100%;
223+
padding: 2.2rem 3rem;
224+
background: #10161e;
225+
min-height: 280px;
226+
display: flex;
227+
flex-direction: column;
228+
justify-content: center;
229+
border-radius: 1.5rem;
230+
}
231+
.slide h3 {
232+
font-size: 2rem;
233+
font-weight: 700;
234+
letter-spacing: -0.3px;
235+
background: linear-gradient(130deg, #ffffff, #cbdae6);
236+
background-clip: text;
237+
-webkit-background-clip: text;
238+
color: transparent;
239+
margin-bottom: 1rem;
240+
border-left: 4px solid #5f7f9e;
241+
padding-left: 1.2rem;
242+
}
243+
.slide p {
244+
font-size: 1.05rem;
245+
line-height: 1.55;
246+
color: #cfdeed;
247+
max-width: 92%;
248+
margin-bottom: 0.2rem;
249+
}
250+
251+
/* przyciski slidera */
252+
.slider-btn {
253+
position: absolute;
254+
top: 50%;
255+
transform: translateY(-50%);
256+
background: #1f2a33dd;
257+
backdrop-filter: blur(8px);
258+
border: 1px solid #3a4451;
259+
width: 44px;
260+
height: 44px;
261+
border-radius: 60px;
262+
display: flex;
263+
align-items: center;
264+
justify-content: center;
265+
cursor: pointer;
266+
transition: all 0.2s;
267+
z-index: 12;
268+
color: #f0f4fa;
269+
font-size: 2rem;
270+
font-weight: 400;
271+
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
272+
left: 12px;
273+
right: auto;
274+
}
275+
.slider-btn.btn-next {
276+
left: auto;
277+
right: 12px;
278+
}
279+
.slider-btn:hover {
280+
background: #2c3846;
281+
transform: translateY(-50%) scale(1.02);
282+
border-color: #6f8aac;
283+
}
284+
@media (max-width: 700px) {
285+
.slider-btn { width: 38px; height: 38px; font-size: 1.7rem; left: 6px; }
286+
.slider-btn.btn-next { right: 6px; }
287+
.slide { padding: 1.5rem 2rem; }
288+
.slide h3 { font-size: 1.6rem; }
289+
}
290+
@media (max-width: 550px) {
291+
.slide { padding: 1.2rem 1.5rem; }
292+
.slider-btn { width: 34px; height: 34px; font-size: 1.5rem; }
293+
}
294+
295+
.dots-container {
296+
display: flex;
297+
justify-content: center;
298+
gap: 12px;
299+
margin-top: 1.6rem;
300+
flex-wrap: wrap;
301+
}
302+
.dot {
303+
width: 10px;
304+
height: 10px;
305+
background-color: #3f4a57;
306+
border-radius: 50%;
307+
cursor: pointer;
308+
transition: all 0.2s ease;
309+
}
310+
.dot.active {
311+
background-color: #cbdae9;
312+
width: 28px;
313+
border-radius: 20px;
314+
}
315+
.dot:hover {
316+
background-color: #8fa0b5;
317+
}
318+
319+
/* STOPKA */
320+
footer {
321+
background: transparent;
322+
border-top: 1px solid #20262e;
323+
margin-top: 0.5rem;
324+
padding: 1.2rem 2rem 1.8rem;
325+
}
326+
.footer-copyright {
327+
text-align: center;
328+
font-size: 0.75rem;
329+
color: #8c9aaa;
330+
margin-bottom: 1.2rem;
331+
}
332+
.footer-social-row {
333+
display: flex;
334+
flex-wrap: wrap;
335+
justify-content: space-between;
336+
align-items: center;
337+
gap: 1.5rem;
338+
max-width: 1300px;
339+
margin: 0 auto;
340+
}
341+
.footer-left, .footer-right {
342+
display: flex;
343+
flex-wrap: wrap;
344+
gap: 1.8rem;
345+
align-items: center;
346+
}
347+
.social-link {
348+
display: inline-flex;
349+
align-items: center;
350+
gap: 8px;
351+
color: #b4c4da;
352+
text-decoration: none;
353+
font-size: 0.85rem;
354+
font-weight: 500;
355+
transition: 0.2s;
356+
background: #0f141c60;
357+
padding: 5px 12px;
358+
border-radius: 40px;
359+
backdrop-filter: blur(2px);
360+
}
361+
.social-link i {
362+
font-size: 1.2rem;
363+
width: 1.3rem;
364+
text-align: center;
365+
}
366+
.social-link:hover {
367+
color: white;
368+
background: #1f2a36;
369+
transform: translateY(-1px);
370+
}
371+
@media (max-width: 800px) {
372+
.footer-social-row {
373+
flex-direction: column;
374+
align-items: center;
375+
gap: 1rem;
376+
}
377+
.footer-left, .footer-right {
378+
justify-content: center;
379+
gap: 1rem;
380+
}
381+
}
382+
383+
@media (max-width: 880px) {
384+
.navbar-container {
385+
flex-wrap: wrap;
386+
padding: 10px 20px;
387+
gap: 0.8rem;
388+
}
389+
.logo-area { margin-right: auto; }
390+
.nav-menu { flex: 1 1 100%; justify-content: center; }
391+
.nav-list a, .dropdown-btn { padding: 6px 13px; font-size: 0.85rem; }
392+
.dropdown-content { left: 0; right: auto; min-width: 180px; }
393+
.main-content { margin: 1rem; padding: 1.5rem; }
394+
.section-header h2 { font-size: 1.9rem; }
395+
}

0 commit comments

Comments
 (0)