Андрей Ларионов / rekamore.su

Blame view

public/scss/blocks/_thing.scss 3.97 KB
edit raw normal view history
bdd23ce34   Андрей Ларионов   На сервер. Правки 
1
2
3
 
  .thing {
  	padding-top: 15px;
  	padding-bottom: 30px;
1c6078a15   Андрей Ларионов   Обновление от вос... 
4
5
 
  	background: $gradient;
  	color: $black;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
6
7
8
9
10
11
12
13
14
 
  	overflow: hidden;
  	position: relative;
  	@media (min-width: $laptop) {
  		padding-top: 20px;
  		padding-bottom: 60px;
  	}
  	@media (min-width: $desktop) {
  		padding-bottom: 90px;
  	}
34d973f0f   Андрей Ларионов   Коммит обновление... 
15
16
17
18
19
20
21
22
23
 
  	&_pdf {
  		padding: 30px 0;
  		@media (min-width: $laptop) {
  			padding: 60px 0;
  		}
  		@media (min-width: $desktop) {
  			padding: 90px 0;
  		}
  	}
bdd23ce34   Андрей Ларионов   На сервер. Правки 
24
25
26
27
 
  	&__body {
  		display: flex;
  		flex-direction: column;
  		align-items: flex-start;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
28
29
30
31
32
33
34
 
  	}
  	&__breadcrumbs {
  		width: 100%;
  		margin-bottom: 40px;
  		position: relative;
  		z-index: 2;
  		@media (min-width: $tablet) {
1c6078a15   Андрей Ларионов   Обновление от вос... 
35
 
  			margin-bottom: 60px;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
36
37
 
  		}
  	}
34d973f0f   Андрей Ларионов   Коммит обновление... 
38
39
40
41
42
43
44
45
46
47
48
 
  	&__date {
  		color: $black;
  		font-size: 14px;
  		font-weight: 700;
  		line-height: 21px;
  		margin-bottom: 10px;
  		@media (min-width: $tablet) {
  			font-size: 18px;
  			line-height: 27px;
  		}
  	}
bdd23ce34   Андрей Ларионов   На сервер. Правки 
49
50
 
  	&__title {
  		width: 100%;
1c6078a15   Андрей Ларионов   Обновление от вос... 
51
 
  		font-size: 32px;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
52
53
 
  		font-weight: 700;
  		margin: 0;
1c6078a15   Андрей Ларионов   Обновление от вос... 
54
 
  		max-width: 780px;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
55
56
 
  		position: relative;
  		z-index: 2;
1c6078a15   Андрей Ларионов   Обновление от вос... 
57
58
59
60
 
  		line-height: 1.1;
  		@media (min-width: $tablet) {
  			font-size: 40px;
  		}
bdd23ce34   Андрей Ларионов   На сервер. Правки 
61
62
63
64
65
66
67
68
 
  		@media (min-width: $desktop) {
  			font-size: 64px;
  		}
  	}
  	&__text {
  		width: 100%;
  		font-weight: 700;
  		font-size: 14px;
1c6078a15   Андрей Ларионов   Обновление от вос... 
69
 
  		line-height: 1.4;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
70
 
  		margin: 15px 0 0 0;
1c6078a15   Андрей Ларионов   Обновление от вос... 
71
 
  		max-width: 780px;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
72
73
74
 
  		position: relative;
  		z-index: 2;
  		@media (min-width: $tablet) {
1c6078a15   Андрей Ларионов   Обновление от вос... 
75
 
  			margin-top: 15px;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
  		}
  		@media (min-width: $laptop) {
  			font-weight: 400;
  			font-size: 18px;
  		}
  	}
  	&__search {
  		width: 100%;
  		max-width: 640px;
  		margin-top: 20px;
  		position: relative;
  		z-index: 2;
  		@media (min-width: $tablet) {
  			margin-top: 30px;
  		}
  	}
  	&__badge {
  		position: relative;
  		z-index: 2;
  		display: flex;
  		align-items: center;
  		gap: 5px;
  		padding: 0 12px;
  		background: $blue;
  		color: $white;
  		font-size: 12px;
  		line-height: 1;
  		height: 26px;
  		border-radius: 999px;
  		margin-bottom: 20px;
  		@media (min-width: $laptop) {
  			font-size: 16px;
  			gap: 10px;
  			padding: 0 24px;
  			height: 42px;
  			margin-bottom: 30px;
  		}
  		svg {
  			width: 12px;
  			height: 12px;
  			@media (min-width: $laptop) {
  				width: 20px;
  				height: 20px;
  			}
  		}
  	}
  	&__pic {
  		width: 60px;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
124
125
126
127
 
  		aspect-ratio: 1/1;
  		object-fit: contain;
  		position: relative;
  		z-index: 1;
1c6078a15   Андрей Ларионов   Обновление от вос... 
128
 
  		margin-bottom: 15px;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
 
  		@media (min-width: $tablet) {
  			width: 160px;
  			position: absolute;
  			top: 15px;
  			right: 20px;
  		}
  		@media (min-width: $laptop) {
  			width: 330px;
  			top: 50%;
  			transform: translate(0, -50%);
  		}
  		@media (min-width: $desktop) {
  			right: auto;
  			left: 50%;
  			margin-left: 200px;
  		}
1c6078a15   Андрей Ларионов   Обновление от вос... 
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
  		&_two {
  			object-fit: cover;
  			border-radius: 30px;
  			aspect-ratio: 44/37;
  			width: 100%;
  			max-width: 440px;
  			@media (min-width: $tablet) {
  				position: static;
  				transform: translate(0, 0);
  			}
  			@media (min-width: $desktop) {
  				position: absolute;
  				transform: translate(0, -50%);
  			}
  		}
bdd23ce34   Андрей Ларионов   На сервер. Правки 
160
161
162
163
164
165
166
167
168
169
170
171
172
 
  	}
  	&__buttons {
  		width: 100%;
  		position: relative;
  		z-index: 2;
  		display: flex;
  		align-items: center;
  		gap: 20px;
  		margin-top: 15px;
  		@media (min-width: $laptop) {
  			margin-top: 30px;
  			gap: 30px;
  		}
1c6078a15   Андрей Ларионов   Обновление от вос... 
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
 
  		.button {
  			@media (min-width: $laptop) {
  				padding: 0 22px;
  			}
  		}
  	}
  	&__checkbox {
  		margin-top: 20px;
  		.checkbox__icon {
  			border-color: $green;
  		}
  		.checkbox__text {
  			color: $green;
  		}
  	}
  	&__profile {
  		display: flex;
  		flex-direction: column;
  		@media (min-width: $tablet) {
  			flex-direction: row;
  			align-items: flex-start;
  		}
  		&-photo {
  			width: 210px;
  			border-radius: 8px;
  			aspect-ratio: 1/1;
  		}
  		&-body {
  			display: flex;
  			flex-direction: column;
  			margin-top: 15px;
  			@media (min-width: $tablet) {
  				width: calc(100% - 210px);
  				padding-left: 35px;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
207
208
209
 
  			}
  		}
  	}
1c6078a15   Андрей Ларионов   Обновление от вос... 
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
 
  	&__profile &__title {
  		max-width: none;
  		@media (min-width: $tablet) {
  			margin-top: -20px;
  		}
  	}
  	&__profile &__text {
  		max-width: none;
  	}
  	&__bottom {
  		display: flex;
  		align-items: center;
  		gap: 15px;
  		margin-top: 15px;
  		@media (min-width: $tablet) {
  			margin-top: 30px;
  		}
  	}
  	&__select {
  		width: 100%;
  		max-width: 640px;
  		margin-top: 20px;
  		@media (min-width: $tablet) {
  			margin-top: 30px;
  		}
  	}
bdd23ce34   Андрей Ларионов   На сервер. Правки 
236
 
  }