Skip to content

Commit 48e015c

Browse files
omarakhmedov-webomarakhmedov-web
authored
Update styles.css
1 parent 73ca771 commit 48e015c

1 file changed

Lines changed: 240 additions & 79 deletions

File tree

‎styles.css‎

Lines changed: 240 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,241 @@
1-
:root{
2-
--bg:#0a0a0b;
3-
--bg-elev:#111114;
4-
--text:#e8e8ea;
5-
--muted:#9aa0a6;
6-
--outline:#2a2a31;
7-
--primary:#e3c35b; /* premium gold */
8-
--primary-ink:#0b0b0e;
9-
--accent:#47d1c4; /* turquoise rise */
10-
}
11-
html[data-theme="light"]{
12-
--bg:#f7f7f9;
13-
--bg-elev:#ffffff;
14-
--text:#111215;
15-
--muted:#495057;
16-
--outline:#e5e7eb;
17-
--primary:#b08a1e;
18-
--primary-ink:#ffffff;
19-
--accent:#0ea5a3;
20-
}
21-
*{box-sizing:border-box}
22-
html,body{height:100%}
23-
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
24-
25-
.container{max-width:1100px;margin:0 auto;padding:0 20px}
26-
27-
/* Header */
28-
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in oklab, var(--bg) 90%, transparent);
29-
backdrop-filter:blur(10px);border-bottom:1px solid var(--outline)}
30-
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
31-
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
32-
.brand-logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
33-
background: radial-gradient(120% 120% at 50% 100%, var(--accent) 0%, #0c2a27 40%, #0a0a0b 70%),
34-
linear-gradient(180deg, #0b0b0e 0%, #0a0a0b 100%);
35-
border:1px solid var(--outline);font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05)}
36-
.brand-text{font-weight:700;letter-spacing:.2px}
37-
.nav{display:flex;align-items:center;gap:16px}
38-
.nav a{color:var(--text);text-decoration:none;font-weight:600}
39-
.nav a:hover{opacity:.8}
40-
.btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 14px;border-radius:12px;border:1px solid var(--outline);
41-
background:var(--bg-elev);color:var(--text);font-weight:600}
42-
.btn-ghost{background:transparent}
43-
44-
/* Hero */
45-
.hero{padding:72px 0}
46-
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
47-
.hero-copy h1{margin:0 0 10px;font-size:46px;line-height:1.05}
48-
.lead{color:var(--muted);font-size:18px;margin:0 0 18px}
49-
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 14px}
50-
.btn-primary{background:linear-gradient(180deg, color-mix(in oklab, var(--primary) 92%, #fff) 0%, var(--primary) 100%);color:var(--primary-ink);border-color:color-mix(in oklab, var(--primary) 60%, var(--outline))}
51-
.btn-outline{background:transparent}
52-
.hero-bullets{margin:10px 0 0 0;padding:0;list-style:none;display:grid;gap:6px;color:var(--muted)}
53-
.hero-visual{border:1px solid var(--outline);border-radius:24px;min-height:300px;display:grid;place-items:center;
54-
background: radial-gradient(80% 90% at 50% 100%, color-mix(in oklab, var(--accent) 25%, transparent) 0%, transparent 60%),
55-
linear-gradient(180deg, var(--bg-elev), transparent);
56-
box-shadow:0 30px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03)}
57-
.shield{width:180px;height:220px;border-radius:32px/40px;position:relative;border:1px solid var(--outline);
58-
background: radial-gradient(120% 120% at 50% 90%, var(--accent) 0%, rgba(0,0,0,0) 60%),
59-
linear-gradient(180deg, #0b0b0e 0%, #0a0a0b 100%);
60-
display:grid;place-items:center;box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -30px 50px rgba(0,0,0,.5)}
61-
.shield-m{font-weight:800;font-size:80px;color:var(--primary);text-shadow:0 10px 30px rgba(0,0,0,.5)}
62-
63-
/* Sections */
64-
.section{padding:40px 0}
65-
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
66-
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
67-
.card{background:var(--bg-elev);border:1px solid var(--outline);border-radius:16px;padding:16px}
68-
.section-title{text-align:center;margin:0 0 16px}
69-
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
70-
.plan{background:var(--bg-elev);border:1px solid var(--outline);border-radius:16px;padding:16px;text-align:center}
71-
.plan-pro{box-shadow:0 10px 30px rgba(0,0,0,.25)}
72-
.price{font-size:22px;font-weight:700}
73-
74-
/* Footer */
75-
.site-footer{border-top:1px solid var(--outline);padding:16px 0;color:var(--muted)}
76-
77-
/* Responsive */
78-
@media (max-width: 900px){
79-
.hero-grid{grid-template-columns:1fr}
1+
:root {
2+
--color-bg: #0f0f0f;
3+
--color-text: #ffffff;
4+
--color-accent: #d4af37;
5+
--color-secondary: #c0c0c0;
6+
}
7+
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
background-color: var(--color-bg);
16+
color: var(--color-text);
17+
font-family: 'Montserrat', sans-serif;
18+
line-height: 1.6;
19+
}
20+
21+
a {
22+
color: var(--color-accent);
23+
text-decoration: none;
24+
}
25+
a:hover {
26+
text-decoration: underline;
27+
}
28+
29+
.container {
30+
max-width: 1200px;
31+
margin: 0 auto;
32+
padding: 0 20px;
33+
}
34+
35+
header {
36+
padding: 40px 0;
37+
display: flex;
38+
justify-content: space-between;
39+
align-items: center;
40+
}
41+
header .logo {
42+
font-size: 28px;
43+
font-weight: bold;
44+
letter-spacing: 1px;
45+
}
46+
header nav ul {
47+
list-style: none;
48+
display: flex;
49+
gap: 30px;
50+
}
51+
header nav ul li a {
52+
font-size: 16px;
53+
color: var(--color-accent);
54+
}
55+
56+
.hero {
57+
height: 80vh;
58+
display: flex;
59+
flex-direction: column;
60+
justify-content: center;
61+
align-items: flex-start;
62+
position: relative;
63+
padding-left: 20px;
64+
}
65+
.hero h1 {
66+
font-size: 64px;
67+
font-weight: 700;
68+
max-width: 700px;
69+
line-height: 1.1;
70+
}
71+
.hero p {
72+
font-size: 20px;
73+
margin-top: 20px;
74+
max-width: 500px;
75+
color: var(--color-secondary);
76+
}
77+
78+
section {
79+
padding: 80px 0;
80+
}
81+
82+
.features {
83+
display: grid;
84+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
85+
gap: 40px;
86+
text-align: center;
87+
}
88+
.feature-card {
89+
background-color: #1a1a1a;
90+
padding: 40px 20px;
91+
border-radius: 8px;
92+
transition: transform 0.3s, box-shadow 0.3s;
93+
}
94+
.feature-card:hover {
95+
transform: translateY(-8px);
96+
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
97+
}
98+
.feature-card h3 {
99+
margin-top: 20px;
100+
font-size: 22px;
101+
color: var(--color-text);
102+
}
103+
.feature-card p {
104+
margin-top: 10px;
105+
color: var(--color-secondary);
106+
font-size: 16px;
107+
}
108+
109+
.how-it-works {
110+
display: flex;
111+
flex-direction: column;
112+
gap: 60px;
113+
}
114+
.step {
115+
display: flex;
116+
align-items: center;
117+
gap: 40px;
118+
}
119+
.step:nth-child(even) {
120+
flex-direction: row-reverse;
121+
}
122+
.step .step-icon {
123+
font-size: 48px;
124+
color: var(--color-accent);
125+
}
126+
.step .step-content h4 {
127+
font-size: 24px;
128+
margin-bottom: 10px;
129+
}
130+
.step .step-content p {
131+
color: var(--color-secondary);
132+
font-size: 16px;
133+
max-width: 500px;
134+
}
135+
136+
.pricing-cards {
137+
display: grid;
138+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
139+
gap: 40px;
140+
}
141+
.pricing-card {
142+
background-color: #1a1a1a;
143+
border: 1px solid #333;
144+
padding: 40px;
145+
border-radius: 8px;
146+
text-align: center;
147+
transition: transform 0.3s, box-shadow 0.3s;
148+
}
149+
.pricing-card:hover {
150+
transform: translateY(-8px);
151+
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
152+
}
153+
.pricing-card h3 {
154+
font-size: 24px;
155+
color: var(--color-text);
156+
}
157+
.pricing-card .price {
158+
font-size: 48px;
159+
color: var(--color-accent);
160+
margin: 20px 0;
161+
}
162+
.pricing-card ul {
163+
list-style: none;
164+
text-align: left;
165+
margin: 20px 0;
166+
padding: 0;
167+
color: var(--color-secondary);
168+
}
169+
.pricing-card ul li {
170+
margin-bottom: 10px;
171+
}
172+
.pricing-card .btn {
173+
margin-top: 20px;
174+
padding: 12px 25px;
175+
font-size: 18px;
176+
font-weight: 600;
177+
color: var(--color-bg);
178+
background-color: var(--color-accent);
179+
border: none;
180+
border-radius: 4px;
181+
cursor: pointer;
182+
transition: background-color 0.3s;
183+
}
184+
.pricing-card .btn:hover {
185+
background-color: #b28f2f;
186+
}
187+
188+
footer {
189+
background-color: #0a0a0a;
190+
color: var(--color-secondary);
191+
text-align: center;
192+
padding: 40px 0;
193+
font-size: 14px;
194+
}
195+
196+
@media (max-width: 768px) {
197+
.hero h1 {
198+
font-size: 48px;
199+
}
200+
.hero p {
201+
font-size: 18px;
202+
}
203+
}
204+
205+
/* 🔥 АНИМИРОВАННАЯ VIP-КНОПКА */
206+
.btn-animated {
207+
display: inline-block;
208+
padding: 15px 35px;
209+
font-size: 18px;
210+
font-weight: 600;
211+
color: var(--color-accent);
212+
border: 2px solid var(--color-accent);
213+
border-radius: 50px;
214+
background-color: transparent;
215+
text-decoration: none;
216+
position: relative;
217+
overflow: hidden;
218+
transition: all 0.4s ease-in-out;
219+
z-index: 1;
220+
}
221+
222+
.btn-animated::before {
223+
content: "";
224+
position: absolute;
225+
width: 100%;
226+
height: 100%;
227+
background: linear-gradient(120deg, #d4af37, #ffd700, #d4af37);
228+
top: 0;
229+
left: -100%;
230+
z-index: -1;
231+
transition: all 0.4s ease-in-out;
232+
}
233+
234+
.btn-animated:hover {
235+
color: #0f0f0f;
236+
border-color: #ffd700;
237+
}
238+
239+
.btn-animated:hover::before {
240+
left: 0;
80241
}

0 commit comments

Comments
 (0)