PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 2.4.0
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v2.4.0
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
post-carousel / admin / assets / css / premium-page.css

premium-page.css in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 2.4.0, at admin/assets/css/premium-page.css

611 lines 13.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1
2 /* Premium page */
3 .sp_post_carousel_page_pcp_premium #wpbody-content {
4 padding-bottom: 0;
5 background-color: #fff;
6 }
7 .sp_post_carousel_page_pcp_premium #wpcontent {
8 padding-left: 0;
9 }
10
11 /*----------------------------------------*/
12 /* Grid Layout
13 /*----------------------------------------*/
14 .sp-smart-post-premium-page .sp-sps__container {
15 width: 90%;
16 padding-right: 15px;
17 padding-left: 15px;
18 margin-right: auto;
19 margin-left: auto;
20 }
21 @media (min-width: 576px) {
22 .sp-smart-post-premium-page .sp-sps__container {
23 max-width: 540px;
24 }
25 }
26 @media (min-width: 768px) {
27 .sp-smart-post-premium-page .sp-sps__container {
28 max-width: 720px;
29 }
30 }
31 @media (min-width: 991px) {
32 .sp-smart-post-premium-page .sp-sps__container {
33 max-width: 960px;
34 }
35 }
36 @media (min-width: 1200px) {
37 .sp-smart-post-premium-page .sp-sps__container {
38 max-width: 1170px;
39 }
40 }
41
42 .sp-smart-post-premium-page .row {
43 display: block;
44 flex-wrap: wrap;
45 margin-right: -15px;
46 margin-left: -15px;
47 justify-content: center;
48 }
49 @media (min-width: 1200px) {
50 .sp-smart-post-premium-page .row {
51 display: flex;
52 }
53 }
54
55 @media (min-width: 768px) {
56 .sp-smart-post-premium-page .sp-sps__col-md-12 {
57 flex: 0 0 100%;
58 max-width: 100%;
59 }
60 }
61
62 @media (min-width: 1200px) {
63 .sp-smart-post-premium-page .sp-sps__col-xl-6 {
64 flex: 0 0 50%;
65 max-width: 50%;
66 }
67 }
68
69 /* font family */
70 /* base */
71 h2,
72 h3 {
73 margin: inherit;
74 line-height: initial;
75 }
76
77 /* utility css */
78 /* margin top css */
79 .sp-smart-post-premium-page .sp-sps__mt-10 {
80 margin-top: 10px;
81 }
82
83 .sp-smart-post-premium-page .sp-sps__mt-15 {
84 margin-top: 15px;
85 }
86
87 .sp-smart-post-premium-page .sp-sps__mt-20 {
88 margin-top: 20px;
89 }
90
91 .sp-smart-post-premium-page .sp-sps__mt-25 {
92 margin-top: 20px;
93 }
94
95 .sp-smart-post-premium-page .sp-sps__mt-40 {
96 margin-top: 15px;
97 }
98 .sp-smart-post-premium-page .sp-sps__buy .sp-sps__mt-40 {
99 margin-top: 20px;
100 }
101
102 /* margin left css */
103 .sp-smart-post-premium-page .ml-16 {
104 margin-left: 16px;
105 }
106
107 .sp-smart-post-premium-page .ml-30 {
108 margin-left: 0px;
109 }
110 @media screen and (min-width: 768px) {
111 .sp-smart-post-premium-page .ml-30 {
112 margin-left: 30px;
113 }
114 }
115
116 .sp-smart-post-premium-page .mr-30 {
117 margin-right: 0px;
118 }
119 @media screen and (min-width: 768px) {
120 .sp-smart-post-premium-page .mr-30 {
121 margin-right: 30px;
122 }
123 }
124
125 /* font size */
126 .sp-smart-post-premium-page .sp-sps__font-12 {
127 font-size: 12px;
128 }
129
130 .sp-smart-post-premium-page .sp-sps__font-14 {
131 font-size: 14px;
132 }
133
134 .sp-smart-post-premium-page .sp-sps__font-15 {
135 font-size: 15px;
136 }
137
138 .sp-smart-post-premium-page .sp-sps__font-16 {
139 font-size: 16px;
140 }
141
142 .sp-smart-post-premium-page .sp-sps__font-18 {
143 font-size: 18px;
144 }
145
146 .sp-smart-post-premium-page .sp-sps__font-24 {
147 font-size: 24px;
148 }
149
150 .sp-smart-post-premium-page .sp-sps__font-28 {
151 font-size: 28px;
152 }
153
154 .sp-smart-post-premium-page .sp-sps__font-30 {
155 font-size: 30px;
156 }
157
158 /* line-height */
159 .sp-smart-post-premium-page .sp-sps__font-weight-400 {
160 font-weight: 400;
161 }
162
163 .sp-smart-post-premium-page .sp-sps__font-weight-500 {
164 color: #352926;
165 font-weight: 600;
166 }
167
168 .sp-smart-post-premium-page .sp-sps__font-weight-700 {
169 font-weight: 700;
170 }
171
172 /* text-align */
173 .sp-smart-post-premium-page .text-center {
174 text-align: center;
175 }
176
177 /* color */
178 .sp-smart-post-premium-page .text-color {
179 color: #444444;
180 }
181
182 .sp-smart-post-premium-page .text-color-2 {
183 color: #352926;
184 }
185
186 /* line-height */
187 .sp-smart-post-premium-page .sp-sps__line-height-20 {
188 line-height: 20px;
189 }
190
191 .sp-smart-post-premium-page .sp-sps__line-height-22 {
192 line-height: 22px;
193 color: #352926;
194 }
195
196 .sp-smart-post-premium-page .sp-sps__line-height-24 {
197 line-height: 24px;
198 }
199
200 /* css blog component */
201 .sp-smart-post-premium-page .sp-sps__btn {
202 text-decoration: none;
203 font-size: 14px;
204 display: inline-block;
205 padding: 15px 20px;
206 border-radius: 3px;
207 text-transform: uppercase;
208 }
209
210 .sp-smart-post-premium-page .sp-sps__btn-sky {
211 background: #f05d31;
212 color: #fff;
213 font-weight: 500;
214 text-transform: uppercase;
215 padding: 15px 20px;
216 }
217 .sp-smart-post-premium-page .sp-sps__btn-sky:hover {
218 background-color: #E2572C;
219 }
220 .sp-smart-post-premium-page .sp-sps__btn-border {
221 color: #352926;
222 background-color: #ffc0a9;
223 font-weight: 500;
224 }
225 .sp-smart-post-premium-page .sp-sps__btn-border:hover {
226 background-color: #f05d31;
227 color: #fff;
228 }
229 .sp-smart-post-premium-page .sp-sps__btn-border::after {
230 content: "\f105 ";
231 font-family: FontAwesome;
232 margin-left: 5px;
233 font-size: 16px;
234 }
235 .sp-smart-post-premium-page .sp-sps__btn-buy {
236 font-size: 16px;
237 background-color:#f05d31;
238 color: #fff;
239 font-weight: 600;
240 padding: 18px 35px;
241 text-transform: inherit;
242 }
243 .sp-smart-post-premium-page .sp-sps__btn-buy:hover {
244 background-color: #E2572C;
245 color: #fff;
246 }
247
248 /* sp-sps__banner Section css */
249 .sp-smart-post-premium-page .sp-sps__banner {
250 background-color: #FFE9E3;
251 overflow: hidden;
252 padding-bottom: 150px;
253 }
254 @media screen and (min-width: 1200px) {
255 .sp-smart-post-premium-page .sp-sps__banner {
256 height: 630px;
257 padding-bottom: 0;
258 }
259 }
260
261 .sp-smart-post-premium-page .sp-sps__banner .sp-sps__banner-content p{
262 font-size: 15px;
263 }
264 .sp-smart-post-premium-page .sp-sps__banner .sp-sps__banner-content {
265 padding-top: 120px;
266 padding-right: 15px;
267 padding-left: 15px;
268 }
269 @media screen and (min-width: 576px) {
270 .sp-smart-post-premium-page .sp-sps__banner .sp-sps__banner-content {
271 padding-right: 0px;
272 padding-left: 0px;
273 }
274 }
275
276 .sp-smart-post-premium-page .sp-sps__banner-button {
277 display: flex;
278 flex-direction: column;
279 align-items: center;
280 }
281 @media screen and (min-width: 576px) {
282 .sp-smart-post-premium-page .sp-sps__banner-button {
283 display: inline-block;
284 }
285 }
286
287 .sp-smart-post-premium-page .sp-sps__banner .sp-sps__banner-img {
288 padding-top: 50px;
289 width: 80%;
290 margin: 0 auto;
291 position: relative;
292 }
293 @media screen and (min-width: 992px) {
294 .sp-smart-post-premium-page .sp-sps__banner .sp-sps__banner-img {
295 padding-top: 100px;
296 }
297 }
298
299 .sp-smart-post-premium-page
300 .sp-smart-post-premium-page
301 .sp-sps__banner
302 .sp-sps__banner-content
303 p {
304 font-family: "Roboto", sans-serif;
305 }
306
307 .sp-smart-post-premium-page .sp-sps__banner .sp-sps__banner-content h4 strong {
308 font-style: italic;
309 }
310
311 /* count section css */
312 .sp-smart-post-premium-page .sp-sps__count-area {
313 width: 100%;
314 margin: 0 auto;
315 background-color: #fff;
316 padding: 40px 80px;
317 margin-top: -50px;
318 border-radius: 5px;
319 display: flex;
320 box-sizing: border-box;
321 justify-content: space-between;
322 box-shadow: 0 1px 10px 0 #eaeaea;
323 }
324 @media screen and (max-width: 576px) {
325 .sp-smart-post-premium-page .sp-sps__count-area {
326 display: block;
327 }
328 .sp-smart-post-premium-page .sp-sps__count-area .count-item {
329 padding-bottom: 30px;
330 }
331 }
332 @media screen and (min-width: 576px) {
333 .sp-smart-post-premium-page .sp-sps__count-area {
334 width: 70%;
335 }
336 }
337
338 /* .sp-smart-post-premium-page .sp-sps__count-area .count-item {
339 text-align: center;
340 } */
341
342 .sp-smart-post-premium-page .sp-sps__count-area .count-item span {
343 color: #67757a;
344 margin-top: 10px;
345 display: inline-block;
346 text-transform: uppercase;
347 font-size: 12px;
348 }
349
350 /* Video Section CSS */
351 .sp-smart-post-premium-page .sp-sps__video {
352 margin-top: 94px;
353 }
354
355 .sp-smart-post-premium-page .sp-sps__video .video-area {
356 position: relative;
357 width: 100%;
358 margin: 0 auto;
359 margin-top: 60px;
360 }
361 @media screen and (min-width: 576px) {
362 .sp-smart-post-premium-page .sp-sps__video .video-area {
363 width: 80%;
364 }
365 }
366
367 .sp-smart-post-premium-page .sp-sps__video .video-area::after {
368 position: absolute;
369 content: "";
370 width: 100%;
371 background-color: #ffbda4;
372 top: 0;
373 left: 0;
374 bottom: 5px;
375 opacity: 63%;
376 border-radius: 10px;
377 z-index: 1;
378 }
379 .sp-smart-post-premium-page .sp-sps__video .video-area img{
380 border-radius: 10px;
381 }
382 .sp-smart-post-premium-page .sp-sps__video .video-area .video-button {
383 position: absolute;
384 z-index: 2;
385 top: 50%;
386 left: 50%;
387 transform: translate(-50%, -50%);
388 }
389
390 .sp-smart-post-premium-page .sp-sps__video .video-area .video-button a {
391 width: 100px;
392 height: 100px;
393 font-size: 34px;
394 background-color: #fff;
395 border-radius: 50%;
396 display: flex;
397 justify-content: center;
398 align-items: center;
399 color: #39505b;
400 transition: 0.3s;
401 text-decoration: none;
402 }
403
404 .sp-smart-post-premium-page .sp-sps__video .video-area .video-button a span {
405 transform: translateX(4px);
406 }
407
408 .sp-smart-post-premium-page .sp-sps__video .video-area .video-button a:focus {
409 box-shadow: none;
410 border: none;
411 }
412
413 .sp-smart-post-premium-page .sp-sps__video .video-area .video-button a:hover {
414 background-color: #f05d31;
415 color: #fff;
416 }
417
418 /* Feature Section css */
419 .sp-smart-post-premium-page .sp-sps__feature {
420 background-color: #f1f5f9;
421 padding-top: 174px;
422 margin-top: -80px;
423 padding-bottom: 100px;
424 }
425
426 .sp-smart-post-premium-page .sp-sps__feature .feature-area {
427 display: flex;
428 flex-wrap: wrap;
429 }
430 @media screen and (min-width: 768px) {
431 .sp-smart-post-premium-page .sp-sps__feature .feature-area {
432 flex-wrap: nowrap;
433 }
434 }
435
436 .sp-smart-post-premium-page .sp-sps__feature .feature-area .feature-item p {
437 margin-bottom: 0;
438 }
439 .sp-smart-post-premium-page .sp-sps__feature .feature-area .feature-item {
440 width: 100%;
441 padding: 35px 35px 35px 35px;
442 background-color: #fff;
443 margin-top: 50px;
444 border-radius: 5px;
445 box-shadow: 0 2px 10px 0 rgb(0 0 0 / 6%);
446 display: flex;
447 margin-right: 25px;
448 }
449 @media screen and (min-width: 768px) {
450 .sp-smart-post-premium-page .sp-sps__feature .feature-area .feature-item {
451 width: 50%;
452 }
453 }
454
455 .sp-smart-post-premium-page .sp-sps__feature .feature-area .feature-item .feature-icon img {
456 border: none;
457 max-width: 100%;
458 padding: 15px;
459 display: block;
460 box-sizing: border-box;
461 }
462 .sp-smart-post-premium-page .sp-sps__feature .feature-area .feature-item .feature-icon {
463 width: 50px;
464 height: 50px;
465 border-radius: 50%;
466 background-color: #ffe6de;
467 display: flex;
468 justify-content: center;
469 align-items: center;
470 flex: none;
471 margin-right: 20px;
472
473 }
474 .sp_post_carousel_page_pcp_premium #wpfooter{
475 display: none;
476
477 }
478 /* buy section css */
479 .sp-smart-post-premium-page .sp-sps__buy {
480 padding-top: 100px;
481 padding-bottom: 100px;
482 background-image: -webkit-linear-gradient(90deg,#ffe1d7 0,#fff 100%);
483 }
484
485 .sp-smart-post-premium-page .sp-sps__banner .sp-sps__banner-img::before,
486 .sp-smart-post-premium-page .sp-sps__buy .buy-img::before {
487 position: absolute;
488 left: 0;
489 top: 0;
490 right: 0;
491 bottom: 0;
492 width: 100%;
493 height: 100%;
494 content: '';
495 z-index: 99;
496 }
497 .sp-smart-post-premium-page .sp-sps__buy .buy-img {
498 width: 80%;
499 position: relative;
500 margin: 0 auto;
501 }
502
503 .sp-smart-post-premium-page .sp-sps__buy .buy-content h2 {
504 color: #352926;
505 }
506
507 .sp-smart-post-premium-page .sp-sps__buy .buy-content span {
508 display: block;
509 font-size: 11px;
510 margin-top: 12px;
511 color: #352926;
512 }
513
514 /*----------------------------------------*/
515 /* testimonial section css
516 /*----------------------------------------*/
517 .sp-smart-post-premium-page .testimonial-wrapper{
518 background-color: #f1f5f9;
519 padding-bottom: 50px ;
520 padding-top: 10px;
521 }
522 .sp-smart-post-premium-page .sp-sps__premium.testimonial .row {
523 flex-wrap: nowrap;
524 }
525 .sp-smart-post-premium-page .sp-sps__premium.testimonial {
526 width: 90%;
527 margin: 0 auto;
528 }
529
530 @media screen and (min-width: 992px) {
531 .sp-smart-post-premium-page .sp-sps__premium.testimonial {
532 width: 80%;
533 }
534 }
535 @media screen and (min-width: 1200px) {
536 .sp-smart-post-premium-page .sp-sps__premium.testimonial {
537 width: 960px;
538 }
539 }
540 .sp-smart-post-premium-page .sp-sps__premium.testimonial .col,
541 .sp-smart-post-premium-page .col-lg-6 {
542 padding-right: 20px;
543 padding-left: 20px;
544 }
545 .sp-smart-post-premium-page .sp-sps__premium.testimonial .testimonial-area {
546 margin-top: 30px;
547 }
548 .sp-smart-post-premium-page .sp-sps__premium.testimonial .testimonial-area .testimonial-content {
549 background-color: #fff;
550 border-radius: 5px;
551 position: relative;
552 box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
553 }
554 .sp-smart-post-premium-page .sp-sps__premium.testimonial .testimonial-area .testimonial-content::after {
555 position: absolute;
556 content: "";
557 border-style: solid;
558 border-color: transparent;
559 border-width: 18px 18px 0;
560 border-top-color: #ffff;
561 bottom: -16px;
562 left: 45px;
563 }
564 .sp-smart-post-premium-page .sp-sps__premium.testimonial .testimonial-area .testimonial-content p {
565 padding: 25px 40px;
566 font-size: 14px;
567 font-weight: 400;
568 line-height: 24px;
569 font-style: italic;
570 }
571 .sp-smart-post-premium-page .sp-sps__premium.testimonial .testimonial-area .testimonial-info {
572 display: flex;
573 margin-top: 25px;
574 margin-left: 30px;
575 }
576 .sp-smart-post-premium-page .sp-sps__premium.testimonial .testimonial-area .testimonial-info .img img{
577 border-radius: 50%;
578 height: 60px;
579 }
580 .sp-smart-post-premium-page .sp-sps__premium.testimonial .testimonial-area .testimonial-info .info {
581 margin-left: 15px;
582 align-self: center;
583 }
584 .sp-smart-post-premium-page .sp-sps__premium.testimonial .testimonial-area .testimonial-info .info h3 {
585 font-size: 15px;
586 margin-top: 0;
587 margin-bottom: 0;
588 font-weight: 500;
589 margin-left: 0;
590 }
591 .sp-smart-post-premium-page .sp-sps__premium.testimonial .testimonial-area .testimonial-info .info .star {
592 display: flex;
593 margin-top: 5px;
594 }
595 .sp-smart-post-premium-page .sp-sps__premium.testimonial .testimonial-area .testimonial-info .info .star .fa{
596 font-size: 15px;
597 margin-right: 1px;
598 color: #ffb900;
599
600 }
601 .sp-smart-post-premium-page .sp-sps__premium.testimonial .testimonial-area .testimonial-info .info p {
602 font-size: 12px;
603 color: #808080;
604 margin-top: 5px;
605 margin-bottom: 0;
606 }
607 .sp-smart-post-premium-page *:focus{
608 box-shadow: none;
609 outline: none;
610 }
611