.lg-outer{text-align: left;}.lg-sub-html,.lg-toolbar{background-color:rgba(0,0,0,.45)}#lg-counter,.lg-outer .lg-video-cont{vertical-align:middle;display:inline-block}@font-face{font-family:lg;src:url(assets/fonts/lg.eot?n1z373);src:url(assets/fonts/lg.eot?#iefixn1z373) format("embedded-opentype"),url(assets/fonts/lg.woff?n1z373) format("woff"),url(assets/fonts/lg.ttf?n1z373) format("truetype"),url(assets/fonts/lg.svg?n1z373#lg) format("svg");font-weight:400;font-style:normal}.lg-icon{font-family:lg;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.lg-actions .lg-next,.lg-actions .lg-prev{background-color:rgba(0,0,0,.45);border-radius:2px;color:#999;cursor:pointer;display:block;font-size:22px;margin-top:-10px;padding:8px 10px 9px;position:absolute;top:50%;z-index:1080}.lg-actions .lg-next.disabled,.lg-actions .lg-prev.disabled{pointer-events:none;opacity:.5}.lg-actions .lg-next:hover,.lg-actions .lg-prev:hover{color:#FFF}.lg-actions .lg-next{right:20px}.lg-actions .lg-next:before{content:"\e095"}.lg-actions .lg-prev{left:20px}.lg-actions .lg-prev:after{content:"\e094"}@-webkit-keyframes lg-right-end{0%,100%{left:0}50%{left:-30px}}@-moz-keyframes lg-right-end{0%,100%{left:0}50%{left:-30px}}@-ms-keyframes lg-right-end{0%,100%{left:0}50%{left:-30px}}@keyframes lg-right-end{0%,100%{left:0}50%{left:-30px}}@-webkit-keyframes lg-left-end{0%,100%{left:0}50%{left:30px}}@-moz-keyframes lg-left-end{0%,100%{left:0}50%{left:30px}}@-ms-keyframes lg-left-end{0%,100%{left:0}50%{left:30px}}@keyframes lg-left-end{0%,100%{left:0}50%{left:30px}}.lg-outer.lg-right-end .lg-object{-webkit-animation:lg-right-end .3s;-o-animation:lg-right-end .3s;animation:lg-right-end .3s;position:relative}.lg-outer.lg-left-end .lg-object{-webkit-animation:lg-left-end .3s;-o-animation:lg-left-end .3s;animation:lg-left-end .3s;position:relative}.lg-toolbar{z-index:1082;left:0;position:absolute;top:0;width:100%}.lg-toolbar .lg-icon{color:#999;cursor:pointer;float:right;font-size:24px;height:47px;line-height:27px;padding:10px 0;text-align:center;width:50px;text-decoration:none!important;outline:0;-webkit-transition:color .2s linear;-o-transition:color .2s linear;transition:color .2s linear}.lg-toolbar .lg-icon:hover{color:#FFF}.lg-toolbar .lg-close:after{content:"\e070"}.lg-toolbar .lg-download:after{content:"\e0f2"}.lg-sub-html{bottom:0;color:#EEE;font-size:16px;left:0;padding:10px 40px;position:fixed;right:0;text-align:center;z-index:1080}.lg-sub-html h4{margin:0;font-size:13px;font-weight:700}.lg-sub-html p{font-size:12px;margin:5px 0 0}#lg-counter{color:#999;font-size:16px;padding-left:20px;padding-top:12px}.lg-next,.lg-prev,.lg-toolbar{opacity:1;-webkit-transition:-webkit-transform .35s cubic-bezier(0,0,.25,1) 0s,opacity .35s cubic-bezier(0,0,.25,1) 0s,color .2s linear;-moz-transition:-moz-transform .35s cubic-bezier(0,0,.25,1) 0s,opacity .35s cubic-bezier(0,0,.25,1) 0s,color .2s linear;-o-transition:-o-transform .35s cubic-bezier(0,0,.25,1) 0s,opacity .35s cubic-bezier(0,0,.25,1) 0s,color .2s linear;transition:transform .35s cubic-bezier(0,0,.25,1) 0s,opacity .35s cubic-bezier(0,0,.25,1) 0s,color .2s linear}.lg-hide-items .lg-prev{opacity:0;-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}.lg-hide-items .lg-next{opacity:0;-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}.lg-hide-items .lg-toolbar{opacity:0;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object{-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5);opacity:0;-webkit-transition:-webkit-transform 250ms cubic-bezier(0,0,.25,1) 0s,opacity 250ms cubic-bezier(0,0,.25,1)!important;-moz-transition:-moz-transform 250ms cubic-bezier(0,0,.25,1) 0s,opacity 250ms cubic-bezier(0,0,.25,1)!important;-o-transition:-o-transform 250ms cubic-bezier(0,0,.25,1) 0s,opacity 250ms cubic-bezier(0,0,.25,1)!important;transition:transform 250ms cubic-bezier(0,0,.25,1) 0s,opacity 250ms cubic-bezier(0,0,.25,1)!important;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);opacity:1}.lg-outer .lg-thumb-outer{background-color:#0D0A0A;bottom:0;position:absolute;width:100%;z-index:1080;max-height:350px;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1) 0s;-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1) 0s;-o-transition:-o-transform .25s cubic-bezier(0,0,.25,1) 0s;transition:transform .25s cubic-bezier(0,0,.25,1) 0s}.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item{cursor:-webkit-grab;cursor:-moz-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing}.lg-outer .lg-thumb-outer.lg-dragging .lg-thumb{-webkit-transition-duration:0s!important;transition-duration:0s!important}.lg-outer.lg-thumb-open .lg-thumb-outer{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.lg-outer .lg-thumb{padding:10px 0;height:100%;margin-bottom:-5px}.lg-outer .lg-thumb-item{cursor:pointer;float:left;overflow:hidden;height:100%;border:2px solid #FFF;border-radius:4px;margin-bottom:5px}@media (min-width:1025px){.lg-outer .lg-thumb-item{-webkit-transition:border-color .25s ease;-o-transition:border-color .25s ease;transition:border-color .25s ease}}.lg-outer .lg-thumb-item.active,.lg-outer .lg-thumb-item:hover{border-color:#a90707}.lg-outer .lg-thumb-item img{width:100%;height:100%;object-fit:cover}.lg-outer.lg-has-thumb .lg-item{padding-bottom:120px}.lg-outer.lg-can-toggle .lg-item{padding-bottom:0}.lg-outer.lg-pull-caption-up .lg-sub-html{-webkit-transition:bottom .25s ease;-o-transition:bottom .25s ease;transition:bottom .25s ease}.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html{bottom:100px}.lg-outer .lg-toogle-thumb{background-color:#0D0A0A;border-radius:2px 2px 0 0;color:#999;cursor:pointer;font-size:24px;height:39px;line-height:27px;padding:5px 0;position:absolute;right:20px;text-align:center;top:-39px;width:50px}.lg-outer .lg-toogle-thumb:after{content:"\e1ff"}.lg-outer .lg-toogle-thumb:hover{color:#FFF}.lg-outer .lg-video-cont{max-width:1140px;max-height:100%;width:100%;padding:0 5px}.lg-outer .lg-video{width:100%;height:0;padding-bottom:56.25%;overflow:hidden;position:relative}.lg-outer .lg-video .lg-object{display:inline-block;position:absolute;top:0;left:0;width:100%!important;height:100%!important}.lg-outer .lg-video .lg-video-play{width:84px;height:59px;position:absolute;left:50%;top:50%;margin-left:-42px;margin-top:-30px;z-index:1080;cursor:pointer}.lg-outer .lg-has-vimeo .lg-video-play{background:url(assets/img/vimeo-play.png) no-repeat}.lg-outer .lg-has-vimeo:hover .lg-video-play{background:url(assets/img/vimeo-play.png) 0 -58px no-repeat}.lg-outer .lg-has-html5 .lg-video-play{background:url(assets/img/video-play.png) no-repeat;height:64px;margin-left:-32px;margin-top:-32px;width:64px;opacity:.8}.lg-outer .lg-has-html5:hover .lg-video-play{opacity:1}.lg-outer .lg-has-youtube .lg-video-play{background:url(assets/img/youtube-play.png) no-repeat}.lg-outer .lg-has-youtube:hover .lg-video-play{background:url(assets/img/youtube-play.png) 0 -60px no-repeat}.lg-outer .lg-video-object{width:100%!important;height:100%!important;position:absolute;top:0;left:0}.lg-outer .lg-has-video .lg-video-object{visibility:hidden}.lg-outer .lg-has-video.lg-video-playing .lg-object,.lg-outer .lg-has-video.lg-video-playing .lg-video-play{display:none}.lg-outer .lg-has-video.lg-video-playing .lg-video-object{visibility:visible}.lg-progress-bar{background-color:#333;height:5px;left:0;position:absolute;top:0;width:100%;z-index:1083;opacity:0;-webkit-transition:opacity 80ms ease 0s;-moz-transition:opacity 80ms ease 0s;-o-transition:opacity 80ms ease 0s;transition:opacity 80ms ease 0s}.lg-progress-bar .lg-progress{background-color:#a90707;height:5px;width:0}.lg-progress-bar.lg-start .lg-progress{width:100%}.lg-show-autoplay .lg-progress-bar{opacity:1}.lg-autoplay-button:after{content:"\e01d"}.lg-show-autoplay .lg-autoplay-button:after{content:"\e01a"}.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image,.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap{-webkit-transition-duration:0s;transition-duration:0s}.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap{-webkit-transition:left .3s cubic-bezier(0,0,.25,1) 0s,top .3s cubic-bezier(0,0,.25,1) 0s;-moz-transition:left .3s cubic-bezier(0,0,.25,1) 0s,top .3s cubic-bezier(0,0,.25,1) 0s;-o-transition:left .3s cubic-bezier(0,0,.25,1) 0s,top .3s cubic-bezier(0,0,.25,1) 0s;transition:left .3s cubic-bezier(0,0,.25,1) 0s,top .3s cubic-bezier(0,0,.25,1) 0s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);-webkit-transition:-webkit-transform .3s cubic-bezier(0,0,.25,1) 0s,opacity .15s!important;-moz-transition:-moz-transform .3s cubic-bezier(0,0,.25,1) 0s,opacity .15s!important;-o-transition:-o-transform .3s cubic-bezier(0,0,.25,1) 0s,opacity .15s!important;transition:transform .3s cubic-bezier(0,0,.25,1) 0s,opacity .15s!important;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}#lg-zoom-in:after{content:"\e311"}#lg-actual-size{font-size:20px}#lg-actual-size:after{content:"\e033"}#lg-zoom-out{opacity:.5;pointer-events:none}#lg-zoom-out:after{content:"\e312"}.lg-zoomed #lg-zoom-out{opacity:1;pointer-events:auto}.lg-outer .lg-pager-outer{bottom:60px;left:0;position:absolute;right:0;text-align:center;z-index:1080;height:10px}.lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont{overflow:visible}.lg-outer .lg-pager-cont{cursor:pointer;display:inline-block;overflow:hidden;position:relative;vertical-align:top;margin:0 5px}.lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.lg-outer .lg-pager-cont.lg-pager-active .lg-pager{box-shadow:0 0 0 2px #fff inset}.lg-outer .lg-pager-thumb-cont{background-color:#fff;color:#FFF;bottom:100%;height:83px;left:0;margin-bottom:20px;margin-left:-60px;opacity:0;padding:5px;position:absolute;width:120px;border-radius:3px;-webkit-transition:opacity .15s ease 0s,-webkit-transform .15s ease 0s;-moz-transition:opacity .15s ease 0s,-moz-transform .15s ease 0s;-o-transition:opacity .15s ease 0s,-o-transform .15s ease 0s;transition:opacity .15s ease 0s,transform .15s ease 0s;-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}.lg-outer .lg-pager-thumb-cont img{width:100%;height:100%}.lg-outer .lg-pager{background-color:rgba(255,255,255,.5);border-radius:50%;box-shadow:0 0 0 8px rgba(255,255,255,.7) inset;display:block;height:12px;-webkit-transition:box-shadow .3s ease 0s;-o-transition:box-shadow .3s ease 0s;transition:box-shadow .3s ease 0s;width:12px}.lg-outer .lg-pager:focus,.lg-outer .lg-pager:hover{box-shadow:0 0 0 8px #fff inset}.lg-outer .lg-caret{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px dashed;bottom:-10px;display:inline-block;height:0;left:50%;margin-left:-5px;position:absolute;vertical-align:middle;width:0}.lg-outer,.lg-outer .lg,.lg-outer .lg-inner{width:100%;height:100%}.lg-fullscreen:after{content:"\e20c"}.lg-fullscreen-on .lg-fullscreen:after{content:"\e20d"}.group:after,.group:before{display:table;content:"";line-height:0}.group:after{clear:both}.lg-outer{position:fixed;top:0;left:0;z-index:1050;opacity:0;-webkit-transition:opacity .15s ease 0s;-o-transition:opacity .15s ease 0s;transition:opacity .15s ease 0s}.lg-outer *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.lg-outer.lg-visible{opacity:1}.lg-outer.lg-css3 .lg-item.lg-current,.lg-outer.lg-css3 .lg-item.lg-next-slide,.lg-outer.lg-css3 .lg-item.lg-prev-slide{-webkit-transition-duration:inherit!important;transition-duration:inherit!important;-webkit-transition-timing-function:inherit!important;transition-timing-function:inherit!important}.lg-outer.lg-css3.lg-dragging .lg-item.lg-current,.lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide,.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide{-webkit-transition-duration:0s!important;transition-duration:0s!important;opacity:1}.lg-outer.lg-grab img.lg-object{cursor:-webkit-grab;cursor:-moz-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.lg-outer.lg-grabbing img.lg-object{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing}.lg-outer .lg{position:relative;overflow:hidden;margin-left:auto;margin-right:auto;max-width:100%;max-height:100%}.lg-outer .lg-inner{position:absolute;left:0;top:0;white-space:nowrap}.lg-outer .lg-item{background:url(assets/img/loading.gif) center center no-repeat;display:none!important}.lg-outer.lg-css .lg-current,.lg-outer.lg-css3 .lg-current,.lg-outer.lg-css3 .lg-next-slide,.lg-outer.lg-css3 .lg-prev-slide{display:inline-block!important}.lg-outer .lg-img-wrap,.lg-outer .lg-item{display:inline-block;text-align:center;position:absolute;width:100%;height:100%}.lg-outer .lg-img-wrap:before,.lg-outer .lg-item:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}.lg-outer .lg-img-wrap{position:absolute;padding:0 5px;left:0;right:0;top:0;bottom:0}.lg-outer .lg-item.lg-complete{background-image:none}.lg-outer .lg-item.lg-current{z-index:1060}.lg-outer .lg-image{display:inline-block;vertical-align:middle;max-width:100%;max-height:100%;width:auto!important;height:auto!important}.lg-outer.lg-show-after-load .lg-item .lg-object,.lg-outer.lg-show-after-load .lg-item .lg-video-play{opacity:0;-webkit-transition:opacity .15s ease 0s;-o-transition:opacity .15s ease 0s;transition:opacity .15s ease 0s}.lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object,.lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play{opacity:1}.lg-outer .lg-empty-html,.lg-outer.lg-hide-download #lg-download{display:none}.lg-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1040;background-color:#000;opacity:0;-webkit-transition:opacity .15s ease 0s;-o-transition:opacity .15s ease 0s;transition:opacity .15s ease 0s}.lg-backdrop.in{opacity:1}.lg-css3.lg-no-trans .lg-current,.lg-css3.lg-no-trans .lg-next-slide,.lg-css3.lg-no-trans .lg-prev-slide{-webkit-transition:none 0s ease 0s!important;-moz-transition:none 0s ease 0s!important;-o-transition:none 0s ease 0s!important;transition:none 0s ease 0s!important}.lg-css3.lg-use-css3 .lg-item,.lg-css3.lg-use-left .lg-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.lg-css3.lg-fade .lg-item{opacity:0}.lg-css3.lg-fade .lg-item.lg-current{opacity:1}.lg-css3.lg-fade .lg-item.lg-current,.lg-css3.lg-fade .lg-item.lg-next-slide,.lg-css3.lg-fade .lg-item.lg-prev-slide{-webkit-transition:opacity .1s ease 0s;-moz-transition:opacity .1s ease 0s;-o-transition:opacity .1s ease 0s;transition:opacity .1s ease 0s}.lg-css3.lg-slide.lg-use-css3 .lg-item{opacity:0}.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current,.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide,.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide{-webkit-transition:-webkit-transform 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;-moz-transition:-moz-transform 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;-o-transition:-o-transform 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;transition:transform 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s}.lg-css3.lg-slide.lg-use-left .lg-item{opacity:0;position:absolute;left:0}.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide{left:-100%}.lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide{left:100%}.lg-css3.lg-slide.lg-use-left .lg-item.lg-current{left:0;opacity:1}.lg-css3.lg-slide.lg-use-left .lg-item.lg-current,.lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide,.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide{-webkit-transition:left 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;-moz-transition:left 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;-o-transition:left 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;transition:left 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s}/* CSS Variables */
:root {
/* Colors */
--color-dark: #000;
--color-primary: #579EFF;
--color-primary-dark: #4e8ee5;
--color-text: #222222;
--color-text-light: #666666;
--color-text-light-2: #7B8395;
--color-text-lighter: #999999;
--color-border: #e0e0e0;
--color-bg: #ffffff;
--color-bg-light: #f5f7f9;
--color-placeholder: #cccccc;
--color-shadow: rgba(0, 0, 0, 0.08);
--color-bg-light-2: rgba(38, 55, 105, 0.06);
/* Typography - Desktop */
--font-family: "Onest", sans-serif;
--font-size-base: 16px;
--font-size-sm: 14px;
--font-size-lg: 20px;
--font-size-xl: 28px;
--font-size-xxl: 72px;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--letter-space-base: 0.29px;
/* Layout - Desktop */
--container-max-width: 1920px;
--container-padding-sm: 20px;
--container-padding: 40px;
--container-padding-lg: 80px;
--grid-gap: 30px;
--border-radius-absolutly: 50%;
--border-radius: 8px;
--border-radius-lg: 12px;
/* Spacing - Desktop */
--spacing-xs: 8px;
--spacing-sm: 16px;
--spacing-md: 24px;
--spacing-lg: 32px;
--spacing-xl: 40px;
--spacing-xxl: 64px;
/* Mobile Variables */
--mobile-font-size-base: 14px;
--mobile-font-size-sm: 12px;
--mobile-font-size-lg: 16px;
--mobile-font-size-xl: 20px;
--mobile-font-size-xxl: 24px;
--mobile-container-padding: 16px;
--mobile-grid-gap: 16px;
--mobile-spacing-xs: 6px;
--mobile-spacing-sm: 12px;
--mobile-spacing-md: 16px;
--mobile-spacing-lg: 24px;
--mobile-spacing-xl: 32px;
--mobile-spacing-xxl: 40px;
}
/* Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-family);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-bg-light);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: var(--letter-space-base);
}
a {
color: var(--color-primary);
text-decoration: none;
display: inline-block;
border-bottom: 1px solid;
line-height: calc(var(--font-size-lg) + 1px);
}
a:hover {
color: var(--color-primary-dark);
}
/* Container */
.container {
width: 100%;
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--container-padding-lg);
/*background: var(--color-bg);*/
}
/*.main > .container {
background: var(--color-bg-light);;
}*/
/* Header */
.header {
background-color: var(--color-bg);
position: sticky;
top: 0;
z-index: 100;
background: var(--color-bg);
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
header.header > .container {
padding: 0 var(--container-padding-sm);;
}
.header__content {
display: flex;
align-items: center;
justify-content: space-between;
height: 84px;
gap: var(--spacing-md);
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
padding: var(--spacing-xs);
color: var(--color-text);
transition: color 0.2s ease;
}
.mobile-menu-toggle:hover {
color: var(--color-primary);
}
.desktop-menu-icon,
.mobile-menu-icon {
display: block;
width: 24px;
height: 24px;
position: relative;
}
.desktop-menu-icon > span,
.mobile-menu-icon > span {
display: block;
position: absolute;
left: 0;
right: calc(50% - 1px);
top: 6px;
bottom: 6px;
margin: auto;
height: 2px;
background: var(--color-dark);
border-radius: 5px;
}
.desktop-menu-icon > span:first-child,
.mobile-menu-icon > span:first-child {
bottom: auto;
right: 4px;
}
.desktop-menu-icon > span:last-child,
.mobile-menu-icon > span:last-child {
top: auto;
right: 4px;
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: var(--spacing-md);
text-decoration: none;
color: var(--color-dark);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-xl);
letter-spacing: var(--letter-space-base);
border: none;
}
.logo__icon {
font-size: 24px;
}
/*.logo__text {
font-weight: var(--font-weight-bold);
}*/
/* Navigation */
.header__nav {
flex: 1;
display: flex;
justify-content: center;
}
.nav {
display: flex;
list-style: none;
gap: var(--spacing-md);
}
.nav__link {
text-decoration: none;
color: var(--color-text);
font-weight: var(--font-weight-medium);
transition: color 0.2s ease;
white-space: nowrap;
font-size: var(--font-size-sm);
color: var(--color-text-light);
border: none;
}
.nav__link--active {
border-bottom: 1px solid;
}
.nav__link:hover {
color: var(--color-primary);
}
/* Header Contacts */
.header__contacts {
display: flex;
align-items: center;
gap: var(--spacing-md);
border: none;
}
.phone {
text-decoration: none;
color: var(--color-dark);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-lg);
white-space: nowrap;
border: none;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 15px 10px;
border: none;
border-radius: var(--border-radius-lg);
font-family: inherit;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn--primary {
background-color: var(--color-primary);
color: white;
}
.btn--primary:hover {
background-color: var(--color-primary-dark);
}
.btn--outline {
background-color: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.btn--outline:hover {
background-color: var(--color-bg-light);
}
/* Desktop Menu Toggle Button */
.desktop-menu-toggle {
display: block;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
/*padding: var(--spacing-xs);*/
color: var(--color-text);
transition: color 0.2s ease;
margin-right: var(--spacing-sm);
}
.desktop-menu-toggle:hover {
color: var(--color-primary);
}
/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
padding: var(--spacing-xs);
color: var(--color-text);
transition: color 0.2s ease;
}
.mobile-menu-toggle:hover {
color: var(--color-primary);
}
/* Main Content */
.main {
flex: 1;
padding: var(--spacing-lg) 0;
background: var(--color-bg-light);
}
/* Breadcrumbs */
.breadcrumbs {
display: flex;
align-items: center;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-lg);
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
.breadcrumbs__item {
color: var(--color-text-light);
text-decoration: none;
}
.breadcrumbs__separator {
color: var(--color-text-lighter);
}
/* Content Header */
.content__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-xl);
gap: var(--spacing-sm);
}
.page-title {
font-size: var(--font-size-xxl);
line-height: 80px;
font-weight: var(--font-weight-bold);
color: var(--color-text);
letter-spacing: 0.29px;
}
/* Filters */
.filters {
display: flex;
gap: var(--spacing-sm);
margin-left: auto;
}
.filters .filter:last-child .filter__dropdown {
left: auto;
right: 0;
}
.filter__btn {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: 8px 16px;
background-color: transparent;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
font-family: inherit;
font-size: var(--font-size-sm);
color: var(--color-text);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.filter__btn:hover {
background-color: var(--color-bg-light);
border-color: var(--color-primary);
}
.filter__arrow {
font-size: 12px;
transform: rotate(0deg);
transition: transform 0.2s ease;
}
/*.filter__btn:hover .filter__arrow {
transform: rotate(180deg);
}*/
/* Blog Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--grid-gap);
margin-bottom: var(--spacing-xl);
}
/* Blog Card */
.blog-card {
/*background-color: var(--color-bg);*/
/*border-radius: var(--border-radius-lg);*/
overflow: hidden;
/*box-shadow: 0 4px 12px var(--color-shadow);*/
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
transform: translateY(-4px);
/*box-shadow: 0 8px 24px var(--color-shadow);*/
}
.blog-card__link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
.blog-card__image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
border-radius: var(--border-radius-lg);
}
.blog-card__image-share {
position: absolute;
right: 28px;
bottom: 26px;
display: block;
width: 24px;
height: 24px;
border: none;
}
.blog-card__placeholder {
width: 100%;
height: 100%;
background-color: var(--color-placeholder);
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: var(--font-size-sm);
}
.blog-card__content {
padding: var(--spacing-md);
display: flex;
}
.blog-card__content-left {
flex: 0 0 80%;
}
.blog-card__content-right {
flex: 0 0 20%;
text-align: right;
}
.blog-card__date {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-light);
margin-bottom: var(--spacing-sm);
}
.blog-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
line-height: 1.4;
margin-bottom: var(--spacing-sm);
}
.blog-card__excerpt {
font-size: var(--font-size-base);
color: var(--color-text);
line-height: 1.5;
}
/* Load More */
.load-more {
display: flex;
justify-content: left;
margin-top: var(--spacing-xl);
}
/* Footer */
.footer {
background-color: var(--color-bg);
padding: var(--spacing-lg) 0;
}
.footer__content {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-md);
gap: var(--spacing-lg);
}
.footer__links {
display: flex;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
.footer__link--active {
border-bottom: 1px;
}
.footer__link {
color: var(--color-text-light);
text-decoration: none;
font-size: var(--font-size-sm);
transition: color 0.2s ease;
border: none;
}
.footer__link:hover {
color: var(--color-primary);
}
.footer__social {
display: flex;
gap: var(--spacing-sm);
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--color-text-light);
color: white;
text-decoration: none;
border-radius: var(--border-radius);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: background-color 0.2s ease;
}
.social-link:hover {
background-color: var(--color-primary);
}
.footer__copyright {
/*text-align: center;*/
font-size: var(--font-size-sm);
color: var(--color-text-lighter);
/*border-top: 1px solid var(--color-border);*/
padding-top: var(--spacing-md);
display: flex;
}
.footer__copyright-left {
display: flex;
flex: 0 0 70%;
gap: 0 8px;
}
.footer__copyright-right {
flex: 0 0 30%;
text-align: right;
}
.footer__copyright-left a {
text-decoration: none;
border: none;
display: block;
}
/* Responsive Design for 1440-1920px */
@media (max-width: 1600px) {
:root {
--container-padding: 32px;
--grid-gap: 24px;
}
.header__content {
height: 72px;
}
.nav {
gap: var(--spacing-md);
}
.blog-card__image {
height: 180px;
}
}
@media (max-width: 1440px) {
:root {
--container-padding: 24px;
--grid-gap: 20px;
--font-size-xxl: 28px;
}
.header__content {
height: 64px;
gap: var(--spacing-md);
}
.nav {
gap: var(--spacing-sm);
}
.nav__link {
font-size: var(--font-size-sm);
}
.content__header {
margin-bottom: var(--spacing-lg);
}
.blog-card__image {
height: 440px;
}
.blog-card__content {
padding: var(--spacing-sm);
}
.footer__content {
flex-direction: column;
gap: var(--spacing-md);
text-align: center;
}
.footer__links {
justify-content: center;
gap: var(--spacing-md);
}
.header__controls, .logo__text {
display: none ! important;
}
}
/* Ensure full width usage */
@media (min-width: 1921px) {
.container {
max-width: var(--container-max-width);
padding: 0 var(--container-padding-lg);
}
}
/* ========== ARTICLE PAGE STYLES ========== */
/* Article Layout */
.article-layout {
display: grid;
grid-template-columns: calc(100% - 320px) 320px;
gap: var(--spacing-xxl);
align-items: start;
}
/* Breadcrumbs Links */
.breadcrumbs__item {
color: var(--color-text-light);
text-decoration: none;
transition: color 0.2s ease;
border: none;
}
.breadcrumbs__item:last-child {
color: var(--color-text);
}
.breadcrumbs__item:hover {
color: var(--color-primary);
}
.breadcrumbs__item:last-child:hover {
color: var(--color-text);
}
/* Мобильные стили */
@media (max-width: 768px) {
.breadcrumbs {
margin-bottom: var(--spacing-md, 1rem);
font-size: var(--font-size-xs, 0.75rem);
gap: var(--spacing-xxs, 0.25rem);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
padding-bottom: 0.25rem;
position: relative;
}
.breadcrumbs::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
/* Градиент справа для индикации скролла */
/*.breadcrumbs::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0.25rem;
width: 2rem;
background: linear-gradient(
to right,
transparent 0%,
var(--color-bg, #ffffff) 100%
);
pointer-events: none;
z-index: 1;
}*/
.breadcrumbs__item {
white-space: nowrap;
flex-shrink: 0;
padding: 0.25rem 0;
min-height: 44px; /* Touch-friendly размер */
display: inline-flex;
align-items: center;
}
.breadcrumbs__item {
padding: 0.25rem 0.5rem;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.breadcrumbs__item:active {
background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.05));
}
.breadcrumbs__separator {
flex-shrink: 0;
margin: 0 0.125rem;
font-size: 0.625rem;
}
/* Скрытие промежуточных элементов для очень маленьких экранов */
@media (max-width: 480px) {
/*.breadcrumbs__item:not(:first-child):not(:last-child) {
display: none;
}
.breadcrumbs__item:not(:first-child):not(:last-child) + .breadcrumbs__separator {
display: none;
}*/
/* Показываем многоточие вместо скрытых элементов */
.breadcrumbs__item:nth-child(2)::before {
content: '...';
margin-right: 0.25rem;
color: var(--color-text-lighter);
}
/* Альтернативный вариант - показать только последние 2 элемента */
/* .breadcrumbs__item:first-child,
.breadcrumbs__item:first-child + .breadcrumbs__separator {
display: none;
} */
}
}
/* Очень маленькие экраны - компактный вариант */
@media (max-width: 360px) {
.breadcrumbs {
font-size: 0.7rem;
gap: 0.125rem;
}
.breadcrumbs__item {
min-height: 40px;
}
.breadcrumbs__link {
padding: 0.25rem 0.375rem;
}
}
/* Article */
.article {
/*background-color: var(--color-bg);*/
}
.article__header {
margin-bottom: var(--spacing-sm);
}
.article__title {
font-size: calc(var(--font-size-xxl) - 30px);
line-height: 1.3;
font-weight: var(--font-weight-medium);
color: var(--color-text);
margin-bottom: var(--spacing-sm);
}
.article__meta {
display: flex;
align-items: flex-start;
gap: 0 var(--spacing-sm);
flex-wrap: wrap;
}
.article__date {
color: var(--color-text-light);
font-size: var(--font-size-sm);
}
.article__tags {
display: flex;
gap: var(--spacing-xs);
flex-wrap: wrap;
}
.article__tag {
background-color: var(--color-bg-light);
color: var(--color-text);
padding: 4px 12px;
border-radius: var(--border-radius);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
/* Article Image */
.article__image {
/*text-align: left;*/
}
.article__image img {
margin-bottom: var(--spacing-sm);
border-radius: var(--border-radius-lg);
overflow: hidden;
display: inline-block;
font-size: 0;
max-height: 450px;
max-width: 100%;
width: auto;
height: auto;
}
.article__image-placeholder {
width: 100%;
height: 400px;
background-color: var(--color-placeholder);
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: var(--font-size-lg);
}
/* Article Content */
.article__content {
line-height: 1.7;
}
.article__intro {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
color: var(--color-text);
margin-bottom: var(--spacing-xl);
padding: var(--spacing-md);
background-color: var(--color-bg-light);
border-radius: var(--border-radius);
border-left: 4px solid var(--color-primary);
}
.article__section,
.article__content {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-lg);
}
.article__section h2,
.article__content h2 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-normal);
color: var(--color-text);
margin-bottom: var(--spacing-md);
}
.article__section h3,
.article__content h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: var(--spacing-sm);
}
.article__section p,
.article__content p {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-md);
color: var(--color-text);
}
.article__section ul,
.article__content ul {
font-size: var(--font-size-lg);
padding-left: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.article__section li,
.article__content li {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-xs);
color: var(--color-text);
}
/* Table Styles */
.article__table-section {
margin: var(--spacing-xl) 0;
}
.table-wrapper {
overflow-x: auto;
border-radius: var(--border-radius);
box-shadow: 0 2px 8px var(--color-shadow);
}
.article__table {
width: 100%;
border-collapse: collapse;
background-color: var(--color-bg);
font-size: var(--font-size-sm);
}
.article__table th,
.article__table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.article__table th {
background-color: var(--color-bg-light);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
.article__table td {
color: var(--color-text);
}
.table-row--highlight {
background-color: #f0f9ff;
}
.table-row--highlight td {
font-weight: var(--font-weight-medium);
}
/* Chart Styles */
.article__chart-section {
margin: var(--spacing-xl) 0;
}
.chart-placeholder {
background-color: var(--color-bg);
border-radius: var(--border-radius);
padding: var(--spacing-lg);
box-shadow: 0 2px 8px var(--color-shadow);
}
.chart-bars {
display: flex;
align-items: end;
gap: 16px;
height: 200px;
margin-bottom: var(--spacing-md);
}
.chart-bar {
flex: 1;
background: linear-gradient(180deg, var(--color-primary) 0%, #3366cc 100%);
border-radius: 4px 4px 0 0;
min-height: 20px;
}
.chart-labels {
display: flex;
gap: 16px;
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
.chart-labels span {
flex: 1;
text-align: center;
}
/* Offer Cards */
.article__offers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-md);
margin: var(--spacing-lg) 0;
}
.offer-card {
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: var(--spacing-md);
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.offer-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--color-shadow);
}
.offer-card__icon {
font-size: 32px;
margin-bottom: var(--spacing-sm);
}
.offer-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: var(--spacing-xs);
}
.offer-card__text {
color: var(--color-text-light);
font-size: var(--font-size-sm);
line-height: 1.5;
}
/* Article Footer */
.article__footer {
position: relative;
margin-top: var(--spacing-xxl);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-border);
display: flex;
gap: 0 24px;
}
.article__share {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.article__footer .share-content {
left: -66px;
right: 0;
bottom: 0;
margin-top: 0;
width: 225px;
}
.share-text {
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
.share-buttons {
display: flex;
gap: var(--spacing-xs);
}
.share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--color-text-light);
color: white;
text-decoration: none;
border-radius: var(--border-radius);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: background-color 0.2s ease;
}
.article-layout {
width: 100%;
}
.article {
display: block;
max-width: calc(100% - 425px);
}
.share-btn:hover {
background-color: var(--color-primary);
}
.slick-slider-container {
max-width: 100% ! important;
width: 100% ! important;
overflow: hidden;
}
.slick-slider {
/*overflow: hidden;
max-width: 100% ! important;*/
display: block;
overflow: hidden;
}
.slick-slider .slick-arrow {
display: block;
width: 21px;
height: 41px;
background: transparent url(assetsblog/_v2/img/cases-slider-arrows.png) no-repeat top left;
position: absolute;
top: 29%;
margin-top: -20px;
border: none;
z-index: 88;
text-indent: -9999px;
}
.slick-slider .slick-arrow {
top: 45%;
}
.slick-slider .slick-arrow.slick-prev {
left: -73px;
}
.slick-slider .slick-arrow.slick-next {
right: -73px;
background-position: top right;
}
.slick-slider .slick-arrow.slick-prev {
left: 20px;
}
.slick-slider .slick-arrow.slick-next {
right: 20px;
}
.slick-slider .slick-d {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
top: 400px;
left: 68px;
}
.slick-slider .slick-dots {
top: auto;
bottom: 163px;
left: calc(-50% + 71px);
}
.slick-slider .slick-dots li {
display: inline-block;
}
.slick-slider .slick-dots li button {
border: none;
background: #ddd;
width: 10px;
height: 10px;
border-radius: 50%;
text-indent: -9999px;
margin: 0 4px;
padding: 0;
}
.slick-slider .slick-dots li.slick-active button, .slick-slider .slick-dots li button:hover {
background: #008aff;
}
.active .slick-slider {
display: block;
}
.slick-slider .slick-dots {
margin-top:10px;
}
.slick-slider .slick-arrow.slick-prev {
background: transparent url(assetsblog/_v2/images/right-arrow-svgrepo-com.svg) no-repeat top;
transform: rotateZ(180deg);
height: 45px;
width: 45px;
background-color: white;
border-radius: 50%;
}
.slick-slider .slick-arrow.slick-next {
background: transparent url(assetsblog/_v2/images/right-arrow-svgrepo-com.svg) no-repeat top;
transform: rotateZ(0);
height: 45px;
width: 45px;
background-color: white;
border-radius: 50%;
}
.slick-slide img {
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-slider .slick-arrow.slick-next {
}
/* ========== SIDEBAR STYLES ========== */
.sidebar {
position: sticky;
top: 100px;
}
.sidebar__widget {
background-color: var(--color-bg);
border-radius: var(--border-radius-lg);
padding: var(--spacing-md);
margin-bottom: var(--spacing-sm);
box-shadow: 0 2px 8px var(--color-shadow);
}
.widget-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: var(--spacing-md);
}
/* Subscription Form */
.subscription-form__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: var(--spacing-sm);
}
.subscription-form__text {
color: var(--color-text-light);
font-size: var(--font-size-sm);
line-height: 1.5;
margin-bottom: var(--spacing-md);
}
.subscription-form__form {
margin-bottom: var(--spacing-md);
}
.form-group {
/*margin-bottom: var(--spacing-sm);*/
}
.form-input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
font-family: inherit;
font-size: var(--font-size-base);
color: var(--color-text);
background-color: var(--color-bg);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(71, 133, 255, 0.1);
}
.form-input::placeholder {
color: var(--color-text-lighter);
}
.btn--full {
width: 100%;
justify-content: center;
}
.subscription-form__privacy {
margin-top: var(--spacing-sm);
}
.checkbox {
display: flex;
align-items: flex-start;
gap: var(--spacing-xs);
cursor: pointer;
font-size: var(--font-size-sm);
line-height: 1.4;
}
.checkbox input {
display: none;
}
.checkbox__mark {
width: 16px;
height: 16px;
border: 1px solid var(--color-border);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg);
transition: all 0.2s ease;
flex-shrink: 0;
margin-top: 2px;
}
.checkbox input:checked + .checkbox__mark {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.checkbox input:checked + .checkbox__mark::after {
content: '✓';
color: white;
font-size: 12px;
font-weight: bold;
}
.checkbox__text {
color: var(--color-text-light);
}
/* Popular Posts */
.popular-posts {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.popular-post {
display: flex;
gap: var(--spacing-sm);
text-decoration: none;
color: inherit;
transition: transform 0.2s ease;
}
.popular-post:hover {
transform: translateX(4px);
}
.popular-post__image {
width: 60px;
height: 60px;
border-radius: var(--border-radius);
overflow: hidden;
flex-shrink: 0;
}
.popular-post__placeholder {
width: 100%;
height: 100%;
background-color: var(--color-placeholder);
}
.popular-post__content {
flex: 1;
min-width: 0;
}
.popular-post__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
line-height: 1.4;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.popular-post__date {
font-size: 12px;
color: var(--color-text-lighter);
}
/* ========== RESPONSIVE ARTICLE STYLES ========== */
@media (max-width: 1600px) {
.article-layout {
gap: var(--spacing-xl);
}
.sidebar {
width: 300px;
}
}
@media (max-width: 1440px) {
.blog-grid {
gap: 28px;
grid-template-columns: repeat(2, 1fr);
}
.article-layout {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.sidebar {
position: static;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.article__title {
font-size: 28px;
}
.article__image-placeholder {
height: 440px;
}
.article__offers {
grid-template-columns: 1fr;
}
.offer-card {
padding: var(--spacing-sm);
}
.chart-bars {
height: 150px;
}
.article__share {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
}
.footer__copyright {
display: block;
}
.footer__copyright-right {
margin-top: 15px;
text-align: left;
}
}
/* Fine-tuning for intermediate sizes */
@media (min-width: 1441px) and (max-width: 1600px) {
.blog-grid {
gap: 28px;
grid-template-columns: repeat(3, 1fr);
}
.blog-card__image {
height: 440px;
}
.article-layout {
grid-template-columns: calc(100% - 300px) 300px;
}
}
@media (min-width: 1601px) and (max-width: 1920px) {
.blog-grid {
gap: var(--grid-gap);
}
.blog-card__image {
height: 391px;
}
.article-layout {
grid-template-columns: calc(100% - 425px) 425px;
}
}
/* ========== MOBILE STYLES ========== */
/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
:root {
--container-padding: 24px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-xxl: 40px;
}
.header__content {
gap: var(--spacing-sm);
}
.nav {
gap: var(--spacing-sm);
}
.nav__link {
font-size: 12px;
}
.blog-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--mobile-grid-gap);
}
.page-title {
font-size: 28px;
}
.filters {
gap: var(--spacing-xs);
}
.filter__btn {
padding: 6px 12px;
font-size: 12px;
}
.header__phone, .header__controls, .logo__text {
display: none ! important;
}
.btn {
font-size: 13px;
}
}
.desctop-callme {
}
.mobi-callme {
display: none;
}
/* Mobile (320px - 767px) */
@media (max-width: 767px) {
:root {
--font-size-base: var(--mobile-font-size-base);
--font-size-sm: var(--mobile-font-size-sm);
--font-size-lg: var(--mobile-font-size-lg);
--font-size-xl: var(--mobile-font-size-xl);
--font-size-xxl: var(--mobile-font-size-xxl);
--container-padding: var(--mobile-container-padding);
--grid-gap: var(--mobile-grid-gap);
--spacing-xs: var(--mobile-spacing-xs);
--spacing-sm: var(--mobile-spacing-sm);
--spacing-md: var(--mobile-spacing-md);
--spacing-lg: var(--mobile-spacing-lg);
--spacing-xl: var(--mobile-spacing-xl);
--spacing-xxl: var(--mobile-spacing-xxl);
}
.desctop-callme {
display: none;
}
.mobi-callme {
display: block;
width: 40px;
height: 40px;
background: rgba(38, 55, 105, 0.06);
border-radius: 12px;
border: none;
padding-top: 3px;
}
/* Mobile Header */
.header__content {
gap: var(--mobile-spacing-sm);
padding: var(--mobile-spacing-sm) 0;
}
.header__logo {
order: 3;
margin-right: auto;
margin-left: auto;
}
.header__contacts {
order: 4;
}
.logo__text {
display: block ! important;
}
.header__nav {
display: none;
}
/* Hide Desktop Menu Toggle on Mobile */
.desktop-menu-toggle {
display: none !important;
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: block !important;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
padding: var(--mobile-spacing-xs);
color: var(--color-text);
order: 2;
margin-right: 0;
margin-left: 0;
padding-left: 0;
}
.blog-card__content {
flex-direction: column;
}
.blog-card__content-right {
order: 1;
flex: 0 0 100%;
text-align: left;
}
.blog-card__content-left {
order: 2;
flex: 0 0 100%;
}
.container {
padding: 0 var(--container-padding-sm);
}
.mobile-menu-toggle:hover {
color: var(--color-primary);
}
/* Mobile Header Contacts */
.header__phone {
display: none;
}
.btn {
padding: 8px 16px;
font-size: var(--mobile-font-size-sm);
}
/* Mobile Main Content */
.main {
padding: var(--mobile-spacing-lg) 0;
}
.breadcrumbs {
margin-bottom: var(--mobile-spacing-md);
font-size: var(--mobile-font-size-sm);
}
.content__header {
flex-direction: column;
align-items: flex-start;
gap: var(--mobile-spacing-md);
margin-bottom: var(--mobile-spacing-lg);
padding-right: 110px;
position: relative;
}
.mobile-filters-btn {
position: absolute ! important;
right: 0;
top: 5px;
}
.page-title {
font-size: var(--mobile-font-size-xxl);
line-height: 1.2;
}
.filters {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
gap: var(--mobile-spacing-xs);
}
.filter__btn {
padding: 6px 12px;
font-size: var(--mobile-font-size-sm);
white-space: nowrap;
}
/* Mobile Blog Grid */
.blog-grid {
grid-template-columns: 1fr;
gap: var(--mobile-spacing-xxl);
margin-bottom: var(--mobile-spacing-xl);
}
.blog-card {
margin: 0 auto;
max-width: 100%;
}
.blog-card__image {
height: 200px;
}
.blog-card__content {
padding: var(--mobile-spacing-md);
}
.blog-card__title {
font-size: var(--mobile-font-size-xl);
line-height: 1.3;
margin-bottom: var(--mobile-spacing-sm);
font-weight: 400;
}
.blog-card__excerpt {
font-size: var(--mobile-font-size-base);
line-height: 1.4;
}
.blog-card__date {
font-size: var(--mobile-font-size-sm);
}
/* Mobile Load More */
.load-more {
margin-top: var(--mobile-spacing-xl);
}
/* Mobile Footer */
.footer {
padding: var(--mobile-spacing-lg) 0;
}
.footer__content {
flex-direction: column;
gap: var(--mobile-spacing-lg);
text-align: center;
}
.footer__links {
flex-direction: column;
gap: var(--mobile-spacing-sm);
align-items: center;
}
.footer__link {
font-size: var(--mobile-font-size-sm);
}
.footer__social {
justify-content: center;
gap: var(--mobile-spacing-sm);
}
.social-link {
width: 32px;
height: 32px;
font-size: var(--mobile-font-size-sm);
}
.footer__copyright {
font-size: var(--mobile-font-size-sm);
padding-top: var(--mobile-spacing-md);
flex-direction: column;
align-items: center;
text-align: center;
}
.footer__copyright-left {
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 16px;
}
.footer__copyright-right {
text-align: center;
}
.load-more .btn {
width: 100%;
height: 45px;
}
}
/* Mobile Article Styles */
@media (max-width: 767px) {
/* Article Layout */
.article-layout {
grid-template-columns: 1fr;
gap: var(--mobile-spacing-lg);
}
.sidebar {
position: static;
width: 100%;
max-width: none;
margin: 0;
}
/* Article Header */
.article__title {
font-size: var(--mobile-font-size-xl);
line-height: 1.2;
margin-bottom: var(--mobile-spacing-md);
}
.article__meta {
flex-direction: column;
align-items: flex-start;
gap: var(--mobile-spacing-sm);
}
.article__date {
font-size: var(--mobile-font-size-sm);
}
.article__tags {
gap: var(--mobile-spacing-xs);
}
.article__tag {
padding: 3px 8px;
font-size: var(--mobile-font-size-sm);
}
/* Article Image */
.article__image {
margin-bottom: var(--mobile-spacing-lg);
}
.article__image-placeholder {
height: 200px;
font-size: var(--mobile-font-size-base);
}
/* Article Content */
.article__intro {
font-size: var(--mobile-font-size-base);
padding: var(--mobile-spacing-md);
margin-bottom: var(--mobile-spacing-lg);
}
.article__section {
margin-bottom: var(--mobile-spacing-lg);
}
.article__section h2 {
font-size: var(--mobile-font-size-xl);
margin-bottom: var(--mobile-spacing-md);
}
.article__section h3 {
font-size: var(--mobile-font-size-lg);
margin-bottom: var(--mobile-spacing-sm);
}
.article__section p {
font-size: var(--mobile-font-size-base);
margin-bottom: var(--mobile-spacing-md);
line-height: 1.5;
}
.article__section ul {
padding-left: var(--mobile-spacing-md);
margin-bottom: var(--mobile-spacing-md);
}
.article__section li {
font-size: var(--mobile-font-size-base);
margin-bottom: var(--mobile-spacing-xs);
line-height: 1.4;
}
/* Mobile Table */
.article__table-section {
margin: var(--mobile-spacing-lg) 0;
}
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.article__table {
min-width: 600px;
font-size: var(--mobile-font-size-sm);
}
.article__table th,
.article__table td {
padding: 8px 12px;
white-space: nowrap;
}
/* Mobile Chart */
.article__chart-section {
margin: var(--mobile-spacing-lg) 0;
}
.chart-placeholder {
padding: var(--mobile-spacing-md);
}
.chart-bars {
height: 120px;
gap: 8px;
margin-bottom: var(--mobile-spacing-sm);
}
.chart-labels {
gap: 8px;
font-size: var(--mobile-font-size-sm);
}
/* Mobile Offer Cards */
.article__offers {
grid-template-columns: 1fr;
gap: var(--mobile-spacing-md);
margin: var(--mobile-spacing-lg) 0;
}
.offer-card {
padding: var(--mobile-spacing-md);
text-align: left;
}
.offer-card__icon {
font-size: 24px;
margin-bottom: var(--mobile-spacing-sm);
}
.offer-card__title {
font-size: var(--mobile-font-size-lg);
margin-bottom: var(--mobile-spacing-xs);
}
.offer-card__text {
font-size: var(--mobile-font-size-sm);
line-height: 1.4;
}
/* Mobile Article Footer */
.article__footer {
margin-top: var(--mobile-spacing-xl);
padding-top: var(--mobile-spacing-lg);
}
.article__share {
flex-direction: column;
align-items: flex-start;
gap: var(--mobile-spacing-md);
}
.share-text {
font-size: var(--mobile-font-size-base);
}
.share-buttons {
gap: var(--mobile-spacing-sm);
}
.share-btn {
width: 32px;
height: 32px;
font-size: var(--mobile-font-size-sm);
}
}
/* Mobile Sidebar Styles */
@media (max-width: 767px) {
.sidebar__widget {
padding: var(--mobile-spacing-md);
margin-bottom: var(--mobile-spacing-md);
}
.widget-title {
font-size: var(--mobile-font-size-lg);
margin-bottom: var(--mobile-spacing-md);
}
/* Mobile Subscription Form */
.subscription-form__title {
font-size: var(--mobile-font-size-lg);
margin-bottom: var(--mobile-spacing-sm);
}
.subscription-form__text {
font-size: var(--mobile-font-size-sm);
line-height: 1.4;
margin-bottom: var(--mobile-spacing-md);
}
.form-group {
margin-bottom: var(--mobile-spacing-sm);
}
.form-input {
padding: 10px 12px;
font-size: var(--mobile-font-size-base);
}
.checkbox {
font-size: var(--mobile-font-size-sm);
gap: var(--mobile-spacing-xs);
}
.checkbox__mark {
width: 14px;
height: 14px;
}
.subscription-form__privacy {
margin-top: var(--mobile-spacing-sm);
}
/* Mobile Popular Posts */
.popular-posts {
gap: var(--mobile-spacing-md);
}
.popular-post {
gap: var(--mobile-spacing-sm);
}
.popular-post__image {
width: 50px;
height: 50px;
}
.popular-post__title {
font-size: var(--mobile-font-size-sm);
line-height: 1.3;
margin-bottom: 2px;
}
.popular-post__date {
font-size: 11px;
}
}
/* Very Small Mobile (320px - 480px) */
@media (max-width: 480px) {
:root {
--mobile-container-padding: 12px;
--mobile-spacing-md: 12px;
--mobile-spacing-lg: 20px;
--mobile-spacing-xl: 28px;
--mobile-spacing-xxl: 40px;
}
.header__content {
padding: var(--mobile-spacing-sm) 0;
}
.logo__text {
font-size: var(--mobile-font-size-lg);
}
.btn {
padding: 6px 12px;
font-size: var(--mobile-font-size-sm);
}
.page-title {
font-size: 40px;
}
.article__title {
font-size: var(--mobile-font-size-xl);
}
.blog-card__image {
height: 223px;
}
.article__image-placeholder {
height: 223px;
}
.chart-bars {
height: 100px;
}
.article__table th,
.article__table td {
padding: 6px 8px;
font-size: 11px;
}
}
/* ========== MODAL STYLES ========== */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
}
.modal.modal--open {
display: flex;
align-items: center;
justify-content: center;
animation: modalFadeIn 0.3s ease;
}
.modal__backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
}
.modal__content {
position: relative;
background-color: var(--color-bg);
border-radius: var(--border-radius-lg);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
animation: modalSlideIn 0.3s ease;
}
.modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md) 16px;
border-bottom: 1px solid var(--color-border);
color: var(--color-bg);
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
margin-bottom: 8px;
/*background: #fff;*/
}
.modal__title {
font-size: var(--font-size-lg);
font-weight: 500;
color: var(--color-text);
margin: 0;
line-height: 39px;
}
.modal__close {
border: none;
font-size: 24px;
color: var(--color-text-light);
cursor: pointer;
padding: 4px;
border-radius: var(--border-radius);
transition: background-color 0.2s ease, color 0.2s ease;
width: 24px;
height: 24px;
background: #F2F3F6;
border-radius: 50%;
text-align: center;
line-height: 10px;
}
.modal__close:hover {
background-color: var(--color-bg-light);
color: var(--color-text);
}
.modal__body {
padding: var(--spacing-lg);
}
.modal__footer {
display: flex;
gap: var(--spacing-sm);
padding: var(--spacing-lg);
border-top: 1px solid var(--color-border);
justify-content: flex-end;
}
.modal__description {
color: var(--color-text-light);
margin-bottom: var(--spacing-lg);
line-height: 1.5;
}
/* Form Textarea */
.form-textarea {
resize: vertical;
min-height: 80px;
}
/* Modal Animations */
@keyframes modalFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ========== FILTERS STYLES ========== */
/* Mobile Filters Button */
.mobile-filters-btn {
display: none;
align-items: center;
gap: var(--spacing-xs);
padding: 9px 15px;
background: rgba(38, 55, 105, 0.06);
color: #000;
border: none;
border-radius: var(--border-radius);
font-family: inherit;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: background-color 0.2s ease;
}
.mobile-filters-btn:hover {
background-color: var(--color-primary-dark);
}
.mobile-filters-icon {
font-size: 16px;
}
/* Desktop Filters */
.desktop-filters {
display: flex;
}
.filter {
position: relative;
}
.filter__btn {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: 8px 16px;
background-color: transparent;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
font-family: inherit;
font-size: var(--font-size-sm);
color: var(--color-text);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.filter__btn:hover,
.filter__btn.filter__btn--active {
background-color: var(--color-bg);
border-color: var(--color-primary);
}
.filter__arrow {
font-size: 12px;
transition: transform 0.2s ease;
}
.filter__btn.filter__btn--active .filter__arrow {
transform: rotate(180deg);
}
.filter__dropdown {
position: absolute;
top: calc(100% + 5px);
left: 0;
min-width: 250px;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
box-shadow: 0 4px 12px var(--color-shadow);
z-index: 100;
display: none;
animation: dropdownSlideIn 0.2s ease;
}
.filter__dropdown.filter__dropdown--open {
display: block;
}
.filter__options {
padding: 0 var(--spacing-sm);
}
.filter__option {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs);
cursor: pointer;
border-radius: var(--border-radius);
transition: background-color 0.2s ease;
}
/*.filter__option:hover {
background-color: var(--color-bg-light);
}*/
.filter__option input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--color-primary);
}
.filter__option-text {
font-size: var(--font-size-sm);
color: var(--color-text);
}
.filter__options .custom-checkbox.filter__option {
position: relative;
border-bottom: 0.5px solid rgba(10, 28, 73, 0.08);
padding: 13px 0 11px;
border-radius: 0;
}
.filter__options .custom-checkbox.filter__option .custom-checkbox__mark {
position: absolute;
top: 7px;
right: 0;
border: none;
width: 24px;
height: 24px;
background: rgba(38, 55, 105, 0.06);
border-radius: 8px;
}
.filter__options .custom-checkbox.filter__option .custom-checkbox__input:checked + .custom-checkbox__mark {
background: var(--color-primary);
}
.filter__options .custom-checkbox.filter__option .custom-checkbox__mark:after {
display: none ! important;
}
.filter__options .custom-checkbox.filter__option .custom-checkbox__mark .custom-checkbox__mark--noactive,
.filter__options .custom-checkbox.filter__option .custom-checkbox__mark .custom-checkbox__mark--active {
width: 16px;
height: 16px;
}
.filter__options .custom-checkbox.filter__option .custom-checkbox__mark .custom-checkbox__mark--noactive {
display: block;
}
.filter__options .custom-checkbox.filter__option .custom-checkbox__mark .custom-checkbox__mark--active {
display: none;
}
.filter__options .custom-checkbox.filter__option .custom-checkbox__input:checked + .custom-checkbox__mark .custom-checkbox__mark--noactive {
display: none;
}
.filter__options .custom-checkbox.filter__option .custom-checkbox__input:checked + .custom-checkbox__mark .custom-checkbox__mark--active {
display: block;
}
.filter__options .custom-checkbox .custom-checkbox__text {
color: var(--color-text-light-2);
}
/* Active Filters */
.active-filters {
margin-bottom: var(--spacing-md);
padding: var(--spacing-sm);
background-color: var(--color-bg-light);
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
}
.active-filters__list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
margin-bottom: 10px;
}
.active-filter-tag {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: 2px 10px;
background-color: var(--color-primary);
color: white;
border-radius: 20px;
font-size: 11px;
font-weight: 400;
line-height: 11px;
}
.active-filter-remove {
background: none;
border: none;
color: white;
cursor: pointer;
font-size: 14px;
padding: 0;
margin-left: 4px;
opacity: 0.8;
transition: opacity 0.2s ease;
}
.active-filter-remove:hover {
opacity: 1;
}
.active-filters__clear {
background: none;
border: none;
color: var(--color-text-light);
font-size: 11px;
cursor: pointer;
text-decoration: none;
transition: color 0.2s ease;
display: inline-block;
border-bottom: 1px dashed;
}
.active-filters__clear:hover {
color: var(--color-primary);
}
/* Mobile Filters Modal */
.mobile-filters-modal .modal__content {
max-width: 100%;
width: 100%;
height: 100%;
max-height: 100vh;
border-radius: 0;
animation: modalSlideUp 0.3s ease;
background-color: var(--color-bg-light);
}
.mobile-filters-content {
display: flex;
flex-direction: column;
height: 100%;
}
.mobile-filters-modal .modal__body {
flex: 1;
overflow-y: auto;
padding: 0;
background: var(--color-bg);
border-radius: var(--border-radius);
margin-bottom: 8px;
padding: 24px 16px;
}
.mobile-filters-modal .modal__footer {
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
background: var(--color-bg);
}
.mobile-filter-section {
margin-bottom: 8px;
}
.mobile-filter-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md);
font-family: inherit;
font-size: var(--font-size-base);
font-weight: 400;
color: var(--color-text);
cursor: pointer;
transition: background-color 0.2s ease;
background: var(--color-bg-light-2);
border-radius: var(--border-radius-lg);
border: none;
}
/*.mobile-filter-toggle:hover {
background-color: var(--color-bg-light);
}*/
.mobile-filter-count {
background-color: var(--color-primary);
color: white;
border-radius: 12px;
padding: 2px 8px;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
min-width: 20px;
text-align: center;
margin-right: auto;
margin-left: 10px;
}
.mobile-filter-arrow {
font-size: 16px;
transition: transform 0.2s ease;
margin-right: 5px;
}
.mobile-filter-toggle.mobile-filter-toggle--active .mobile-filter-arrow {
transform: rotate(180deg);
}
.mobile-filter-options {
display: none;
/*background-color: var(--color-bg-light);*/
}
.mobile-filter-options.mobile-filter-options--open {
display: block;
}
.mobile-filter-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md);
cursor: pointer;
border-bottom: .5px solid #E4E6EB;
transition: background-color 0.2s ease;
color: var(--color-text);
}
.mobile-filter-option:hover {
background-color: var(--color-bg);
}
.mobile-filter-option:last-child {
border-bottom: none;
}
.mobile-filter-option .filter__option-text {
color: var(--color-text-light-2);
font-size: var(--font-size-base);
}
.custom-checkbox.filter__option.mobile-filter-option {
position: relative;
}
.custom-checkbox.filter__option.mobile-filter-option .custom-checkbox__mark {
position: absolute;
top: 13px;
right: 0;
border: none;
width: 24px;
height: 24px;
background: rgba(38, 55, 105, 0.06);
border-radius: 8px;
}
.custom-checkbox.filter__option.mobile-filter-option .custom-checkbox__input:checked + .custom-checkbox__mark {
background: var(--color-primary);
}
.custom-checkbox.filter__option.mobile-filter-option .custom-checkbox__mark:after {
display: none ! important;
}
.custom-checkbox.filter__option.mobile-filter-option .custom-checkbox__mark .custom-checkbox__mark--noactive,
.custom-checkbox.filter__option.mobile-filter-option .custom-checkbox__mark .custom-checkbox__mark--active {
width: 16px;
height: 16px;
}
.custom-checkbox.filter__option.mobile-filter-option .custom-checkbox__mark .custom-checkbox__mark--noactive {
display: block;
}
.custom-checkbox.filter__option.mobile-filter-option .custom-checkbox__mark .custom-checkbox__mark--active {
display: none;
}
.custom-checkbox.filter__option.mobile-filter-option .custom-checkbox__input:checked + .custom-checkbox__mark .custom-checkbox__mark--noactive {
display: none;
}
.custom-checkbox.filter__option.mobile-filter-option .custom-checkbox__input:checked + .custom-checkbox__mark .custom-checkbox__mark--active {
display: block;
}
.mobile-filter-toggle--active {
background-color: var(--color-bg);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid #E4E6EB;
border-bottom: none;
}
.mobile-filter-toggle--active + .mobile-filter-options--open {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
border: 1px solid #E4E6EB;
border-top: none;
}
.mobile-filter-option input[type="checkbox"] {
display: none;
}
.mobile-filter-text {
font-size: var(--font-size-base);
color: var(--color-text);
}
.mobile-filter-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--color-text-light);
transition: all 0.2s ease;
}
.mobile-filter-option input[type="checkbox"]:checked + .mobile-filter-text + .mobile-filter-icon {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: white;
}
.mobile-filter-option input[type="checkbox"]:checked + .mobile-filter-text + .mobile-filter-icon::before {
content: '−';
}
.modal__footer-buttons {
display: flex;
flex: 0 0 100%;
}
.modal__footer-buttons .modal__footer-buttons__left,
.modal__footer-buttons .modal__footer-buttons__right {
flex: 0 0 50%;
}
.modal__footer-buttons .modal__footer-buttons__left .btn,
.modal__footer-buttons .modal__footer-buttons__right .btn {
width: 100%;
height: 40px;
font-weight: 450;
font-size: 14px;
line-height: 20px;
text-align: center;
}
.modal__footer-buttons .modal__footer-buttons__left {
padding-right: 4px;
}
.modal__footer-buttons .modal__footer-buttons__right {
padding-left: 4px;
}
/* Dropdown Animation */
@keyframes dropdownSlideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes modalSlideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* ========== RESPONSIVE FILTERS ========== */
@media (max-width: 767px) {
.mobile-filters-btn {
display: flex;
}
.desktop-filters {
display: none;
}
.content__header {
position: relative;
}
.mobile-filters-modal .modal__content {
animation: modalSlideUp 0.3s ease;
}
.mobile-filter-toggle {
padding: 16.5px 16px;
font-size: var(--mobile-font-size-base);
}
.mobile-filter-option {
padding: 16px 0;
border-radius: 0;
margin: 0 16px;
}
.mobile-filter-text {
font-size: var(--mobile-font-size-base);
}
.active-filters {
margin-bottom: var(--mobile-spacing-lg);
padding: var(--mobile-spacing-md);
}
.active-filter-tag {
font-size: var(--mobile-font-size-sm);
padding: 3px 10px;
}
}
/* ========== ADDITIONAL ANIMATIONS ========== */
/* Fade-in animation for blog cards */
.blog-card {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
transform: translateY(20px);
}
.blog-card:nth-child(1) { animation-delay: 0.1s; }
.blog-card:nth-child(2) { animation-delay: 0.2s; }
.blog-card:nth-child(3) { animation-delay: 0.3s; }
.blog-card:nth-child(4) { animation-delay: 0.4s; }
.blog-card:nth-child(5) { animation-delay: 0.5s; }
.blog-card:nth-child(6) { animation-delay: 0.6s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Pulse animation for mobile filters button */
.mobile-filters-btn {
position: relative;
overflow: hidden;
}
.mobile-filters-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease;
}
.mobile-filters-btn:active::before {
width: 200px;
height: 200px;
}
/* Smooth scrolling for entire page */
html {
scroll-behavior: smooth;
}
/* Loading state for buttons */
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Hover effects for interactive elements */
.filter__dropdown {
transform: translateY(-5px);
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.filter__dropdown.filter__dropdown--open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
/* Active filter tags animation */
.active-filter-tag {
animation: slideInFromRight 0.3s ease forwards;
transform: translateX(20px);
opacity: 0;
}
@keyframes slideInFromRight {
to {
transform: translateX(0);
opacity: 1;
}
}
/* Mobile filter options slide animation */
.mobile-filter-options {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.mobile-filter-options.mobile-filter-options--open {
max-height: 1000px;
}
/* Subtle bounce animation for checkboxes */
.filter__option input[type="checkbox"]:checked {
animation: checkboxBounce 0.3s ease;
}
@keyframes checkboxBounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-3px);
}
60% {
transform: translateY(-1px);
}
}
/* Improved modal backdrop */
.modal__backdrop {
animation: backdropFadeIn 0.3s ease;
}
@keyframes backdropFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Focus states for accessibility */
.btn:focus,
.filter__btn:focus,
.mobile-filters-btn:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.form-input:focus {
box-shadow: 0 0 0 3px rgba(71, 133, 255, 0.1);
}
/* Smooth state transitions */
* {
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* Disable transitions during resize to prevent layout jumps */
.no-transition * {
transition: none !important;
}
/* Skeleton loading animation for placeholders */
.blog-card__placeholder {
background: linear-gradient(90deg, var(--color-placeholder) 25%, #e0e0e0 50%, var(--color-placeholder) 75%);
background-size: 200% 100%;
animation: skeleton 1.5s infinite;
}
@keyframes skeleton {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Enhanced hover effects */
.blog-card {
transform-origin: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
transform: translateY(-8px) scale(1.02);
}
.filter__option:hover {
/*transform: translateX(4px);*/
}
.mobile-filter-option:hover {
background-color: var(--color-bg);
/*transform: translateX(4px);*/
}
/* Improved loading states */
.btn.loading {
position: relative;
color: transparent;
}
.btn.loading::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* ========== MOBILE MENU MODAL (SIMPLE) ========== */
.mobile-menu-modal .modal__content {
max-width: 100%;
width: 100%;
height: 100%;
max-height: 100vh;
border-radius: 0;
background-color: var(--color-bg);
animation: modalSlideUp 0.3s ease;
}
.mobile-menu-content {
display: flex;
flex-direction: column;
height: 100%;
}
.mobile-menu-modal .modal__header {
padding: var(--spacing-md);
border-bottom: 1px solid var(--color-border);
}
.mobile-nav-logo {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-text);
}
.mobile-menu-modal .modal__body {
flex: 1;
overflow-y: auto;
padding: 0;
}
.mobile-menu-nav {
width: 100%;
}
.mobile-menu-list {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-menu-item {
border-bottom: 1px solid var(--color-border);
}
.mobile-menu-link {
display: block;
padding: var(--spacing-md);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text);
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
border: none;
}
.mobile-menu-link:hover {
background-color: var(--color-bg-light);
color: var(--color-primary);
}
.mobile-menu-modal .modal__footer {
padding: var(--spacing-md);
border-top: 1px solid var(--color-border);
background-color: var(--color-bg-light);
}
.mobile-menu-contact {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
align-items: center;
}
.mobile-menu-phone {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
text-decoration: none;
}
/* ========== DESKTOP MEGA MENU ========== */
.desktop-navigation-modal .modal__content {
max-width: 100%;
width: 100%;
height: 100%;
max-height: 100vh;
border-radius: 0;
background-color: var(--color-bg);
animation: modalSlideUp 0.3s ease;
}
.desktop-navigation-content {
display: flex;
flex-direction: column;
height: 100%;
}
.desktop-navigation-modal .modal__header {
padding: var(--spacing-md);
border-bottom: 1px solid var(--color-border);
}
.desktop-nav-logo {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-text);
}
.desktop-navigation-modal .modal__body {
flex: 1;
overflow-y: auto;
padding: var(--spacing-xl);
}
.desktop-mega-menu {
width: 100%;
}
.mega-menu-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-xl);
max-width: 100%;
margin: 0 auto;
}
.mega-menu-column {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.mega-menu-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-text);
margin: 0 0 var(--spacing-md) 0;
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--color-primary);
}
.mega-menu-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.mega-menu-item {
/* No specific styles needed */
}
.mega-menu-link {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
padding: var(--spacing-lg) var(--spacing-sm);
text-decoration: none;
border-radius: var(--border-radius);
transition: all 0.2s ease;
background-color: transparent;
border: none;
}
.mega-menu-link:hover {
background-color: var(--color-bg-light);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mega-menu-icon {
font-size: 24px;
flex-shrink: 0;
margin-top: 2px;
}
.mega-menu-link-title {
display: block;
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: 2px;
}
.mega-menu-link-desc {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-light);
line-height: 1.4;
}
/* Contact Column Styles */
.mega-menu-column--contact {
background-color: var(--color-bg-light);
padding: var(--spacing-lg);
border-radius: var(--border-radius-lg);
border: 1px solid var(--color-border);
}
.mega-menu-contact {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.contact-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
padding: var(--spacing-lg) var(--spacing-sm);
}
.contact-icon {
font-size: 20px;
margin-top: 2px;
flex-shrink: 0;
}
.contact-label {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-light);
font-weight: var(--font-weight-medium);
margin-bottom: 2px;
}
.contact-value {
display: block;
font-size: var(--font-size-base);
color: var(--color-text);
font-weight: var(--font-weight-semibold);
text-decoration: none;
transition: color 0.2s ease;
}
.contact-value:hover {
color: var(--color-primary);
}
/* Responsive Mega Menu */
@media (max-width: 1024px) {
.mega-menu-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
}
@media (max-width: 767px) {
.desktop-navigation-modal .modal__body {
padding: var(--mobile-spacing-lg);
}
.mega-menu-grid {
grid-template-columns: 1fr;
gap: var(--mobile-spacing-lg);
}
.mega-menu-title {
font-size: var(--mobile-font-size-lg);
}
.mega-menu-link-title {
font-size: var(--mobile-font-size-base);
}
.mega-menu-link-desc {
font-size: var(--mobile-font-size-sm);
}
.mega-menu-column--contact {
padding: var(--mobile-spacing-lg);
}
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
}
to {
opacity: 1;
max-height: 200px;
}
}
/* Mobile Menu Responsive */
@media (max-width: 767px) {
.mobile-menu-modal .modal__header {
padding: var(--mobile-spacing-md);
}
.mobile-menu-link {
padding: var(--mobile-spacing-md);
font-size: var(--mobile-font-size-base);
}
.mobile-menu-modal .modal__footer {
padding: var(--mobile-spacing-md);
}
.mobile-menu-contact {
gap: var(--mobile-spacing-md);
}
.mobile-menu-phone {
font-size: var(--mobile-font-size-lg);
}
}
/* ========== SIDEBAR WIDGETS ========== */
/* Tags Cloud */
.tags-cloud {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
}
.tag {
display: block;
padding: 14px 12px;
background-color: rgba(38, 55, 105, 0.06);
color: var(--color-text);
text-decoration: none;
border-radius: 12px;
font-size: 16px;
line-height: 16px;
border: 1px solid transparent;
transition: all 0.2s ease;
font-weight: 400;
}
.tag:hover {
background-color: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
/* Similar Articles */
.similar-articles {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.similar-article {
/*padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-border);*/
}
.similar-article:last-child {
border-bottom: none;
padding-bottom: 0;
}
.similar-article__title {
margin: 0;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: 1.4;
}
.similar-article__link {
color: var(--color-text);
text-decoration: none;
transition: color 0.2s ease;
border: none;
font-size: 16px;
line-height: 20px;
color: var(--color-primary);
}
.similar-article__link:hover {
color: var(--color-primary);
}
.article__footer .blog-card__image-share {
position: relative;
right: auto;
bottom: auto;
border: none;
display: inline-block;
text-align: center;
padding: 10px 12px;
width: 48px;
height: 44px;
background: rgba(38, 55, 105, 0.16);
border-radius: 12px;
}
.article__footer .blog-card__image-share svg,
.article__footer .blog-card__image-share svg path {
stroke: #fff ! important;
}
.widget__title {
font-weight: 400;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.29px;
margin-bottom: var(--spacing-md);
}
/* Consultation Widget */
.consultation-widget {
background: var(--color-primary);
border-radius: var(--border-radius-lg);
border: none !important;
position: relative;
overflow: hidden;
}
.consultation-widget:after {
content: ' ';
display: block;
width: 139.81px;
height: 135.1px;
position: absolute;
right: 20.19px;
bottom: -27.2px;
background: url(assetsblog/_v2/images/project-form.png);
}
.consultation-widget .widget__title {
display: none;
}
.consultation-content {
/*padding: var(--spacing-lg);*/
text-align: left;
color: white;
max-width: 255px;
}
.consultation-icon {
display: flex;
justify-content: center;
margin-bottom: var(--spacing-md);
}
.consultation-title {
font-size: var(--font-size-lg);
font-weight: 400;
color: white;
margin: 0 0 var(--spacing-sm) 0;
}
.consultation-text {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.9);
margin: 0 0 var(--spacing-lg) 0;
line-height: 1.5;
}
.consultation-widget .btn {
background-color: white;
color: var(--color-primary);
border: none;
/*font-weight: var(--font-weight-semibold);*/
}
.consultation-widget .btn:hover {
background-color: rgba(255, 255, 255, 0.9);
/*transform: translateY(-2px);*/
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile Responsive Sidebar */
@media (max-width: 767px) {
.tags-cloud {
gap: var(--mobile-spacing-xs);
}
.tag {
padding: 4px 10px;
font-size: var(--mobile-font-size-sm);
}
.similar-articles {
gap: var(--mobile-spacing-md);
}
.similar-article {
padding-bottom: var(--mobile-spacing-md);
}
.similar-article__title {
font-size: var(--mobile-font-size-base);
}
.consultation-content {
padding: var(--mobile-spacing-lg);
}
.consultation-title {
font-size: var(--mobile-font-size-lg);
}
.consultation-text {
font-size: var(--mobile-font-size-sm);
}
}
/* ========== CALLBACK MODAL REDESIGN ========== */
/* Callback Modal Styles */
.callback-modal .modal__content {
background: var(--color-primary);
color: white;
border: none;
border-radius: var(--border-radius-lg);
max-width: 480px;
width: 90%;
}
.callback-modal__header {
padding: var(--spacing-lg) var(--spacing-lg) 0;
border: none;
position: relative;
}
.callback-modal__title {
color: white;
font-size: var(--font-size-lg);
line-height: 24px;
font-weight: 400;
margin: 0;
text-align: center;
line-height: 1.3;
}
.callback-modal__close {
border: none;
font-size: 24px;
color: var(--color-text-light);
cursor: pointer;
padding: 6px 4px 4px;
border-radius: var(--border-radius);
transition: background-color 0.2s ease, color 0.2s ease;
width: 24px;
height: 24px;
background: #F2F3F6;
border-radius: 50%;
text-align: center;
line-height: 10px;
}
.callback-modal__close:hover {
background: rgba(255, 255, 255, 0.3);
}
.callback-modal__body {
padding: 0 var(--spacing-lg) var(--spacing-lg);
}
.callback-modal__subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-base);
/*text-align: center;*/
margin: 0 0 var(--spacing-lg) 0;
line-height: 1.5;
max-width:270px;
}
/* Form Styles */
.callback-form {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.callback-form__input,
.callback-form__textarea {
background: white;
border: none;
border-radius: var(--border-radius);
padding: var(--spacing-sm);
font-size: var(--font-size-base);
color: var(--color-text);
width: 100%;
box-sizing: border-box;
transition: box-shadow 0.2s ease;
}
.callback-form__input:focus,
.callback-form__textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.callback-form__textarea {
resize: vertical;
min-height: 80px;
font-family: inherit;
}
.callback-form__input::placeholder,
.callback-form__textarea::placeholder {
color: var(--color-text-light);
}
/* Custom Checkbox */
.checkbox-group {
/*margin: var(--spacing-sm) 0;*/
}
.custom-checkbox {
display: flex;
align-items: center;
gap: var(--spacing-sm);
cursor: pointer;
line-height: 1.4;
}
.custom-checkbox__input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.custom-checkbox__mark {
width: 20px;
height: 20px;
background: white;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
margin-top: 2px;
}
.custom-checkbox__input:checked + .custom-checkbox__mark {
background: rgba(255, 255, 255, 0.2);
border-color: white;
}
.custom-checkbox__input:checked + .custom-checkbox__mark::after {
content: '✓';
color: white;
font-size: 14px;
font-weight: bold;
}
.custom-checkbox__text {
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-sm);
line-height: 1.4;
}
.callback-form__btn {
background: white;
color: var(--color-primary);
border: none;
border-radius: var(--border-radius);
padding: var(--spacing-sm) var(--spacing-lg);
font-size: var(--font-size-base);
font-weight: 400;
cursor: pointer;
transition: all 0.2s ease;
/* margin-top: var(--spacing-sm); */
}
.callback-form__btn:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Floating labels */
.form-group.floating {
position: relative;
}
/* Базовое положение метки (по центру для input) */
.floating .floating-label {
position: absolute;
top: 50%;
left: var(--spacing-sm);
transform: translateY(-50%);
color: var(--color-text-light);
pointer-events: none;
transition: transform 0.18s ease, color 0.18s ease, font-size 0.18s ease, top 0.18s ease, opacity 0.18s ease;
opacity: 0.9;
}
/* Для textarea метка изначально сверху */
.floating .callback-form__textarea + .floating-label {
top: 16px;
transform: none;
}
/* Прячем placeholder, чтобы не дублировался с меткой */
.floating .callback-form__input::placeholder,
.floating .callback-form__textarea::placeholder {
color: transparent;
}
/* Фокус/есть значение — поднимаем/уменьшаем метку (без смены цвета) */
.floating .callback-form__input:focus + .floating-label,
.floating .callback-form__textarea:focus + .floating-label,
.floating .callback-form__input:not(:placeholder-shown) + .floating-label,
.floating .callback-form__textarea:not(:placeholder-shown) + .floating-label {
top: 6px;
transform: none;
font-size: 12px;
opacity: 0.95;
}
/* Запас сверху под метку */
.floating .callback-form__input,
.floating .callback-form__textarea {
padding-top: calc(var(--spacing-sm) + 8px);
}
/* Ваш эффект фокуса сохраняем */
.callback-form__input:focus,
.callback-form__textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
/* ========== SUCCESS MODAL ========== */
.success-modal .modal__content {
background: linear-gradient(135deg, #4F7CFF 0%, #7C3AED 100%);
color: white;
border: none;
border-radius: var(--border-radius-lg);
max-width: 400px;
width: 90%;
}
.success-modal__body {
padding: var(--spacing-xl);
text-align: center;
}
.success-modal__icon {
display: flex;
justify-content: center;
margin-bottom: var(--spacing-lg);
}
.success-modal__title {
color: white;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--spacing-md) 0;
line-height: 1.3;
}
.success-modal__text {
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-base);
margin: 0 0 var(--spacing-xl) 0;
line-height: 1.5;
}
.success-modal__btn {
background: white;
color: var(--color-primary);
border: none;
border-radius: var(--border-radius);
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: all 0.2s ease;
min-width: 120px;
}
.success-modal__btn:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile Responsive */
@media (max-width: 767px) {
.callback-modal__title {
font-size: var(--mobile-font-size-lg);
}
.callback-modal__subtitle {
font-size: var(--mobile-font-size-base);
}
.callback-form__input,
.callback-form__textarea {
padding: var(--mobile-spacing-md);
font-size: var(--mobile-font-size-base);
}
.custom-checkbox__text {
font-size: var(--mobile-font-size-sm);
}
.callback-form__btn {
padding: var(--mobile-spacing-md) var(--mobile-spacing-lg);
font-size: var(--mobile-font-size-base);
}
.success-modal__body {
padding: var(--mobile-spacing-xl);
}
.success-modal__title {
font-size: var(--mobile-font-size-lg);
}
.success-modal__text {
font-size: var(--mobile-font-size-base);
}
.success-modal__btn {
padding: var(--mobile-spacing-md) var(--mobile-spacing-xl);
font-size: var(--mobile-font-size-base);
}
}
/* ========== HEADER CONTROLS ========== */
.header__controls {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-left: var(--spacing-md);
}
.header__search {
/*position: relative;*/
}
.search-toggle {
background: none;
border: none;
color: var(--color-text);
cursor: pointer;
padding: var(--spacing-xs);
border-radius: var(--border-radius);
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.search-toggle:hover {
background-color: var(--color-bg-light);
color: var(--color-primary);
}
.search-dropdown {
position: absolute;
top: calc(100% + var(--spacing-xs));
left: 15px;
right: 15px;
background: white;
border-radius: var(--border-radius-lg);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid var(--color-border);
min-width: 320px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.search-dropdown.search-dropdown--open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.search-form {
display: flex;
align-items: center;
padding: var(--spacing-sm);
border-bottom: 1px solid var(--color-border);
}
.search-input {
flex: 1;
border: none;
padding: var(--spacing-sm);
font-size: var(--font-size-base);
background: transparent;
}
.search-input:focus {
outline: none;
}
.search-submit {
background: none;
border: none;
color: var(--color-text-light);
cursor: pointer;
padding: var(--spacing-sm);
border-radius: var(--border-radius);
transition: color 0.2s ease;
}
.search-submit:hover {
color: var(--color-primary);
}
.search-suggestions {
padding: var(--spacing-sm) 0;
}
.search-suggestion-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
cursor: pointer;
transition: background-color 0.2s ease;
}
.search-suggestion-item:hover {
background-color: var(--color-bg-light);
}
.search-suggestion-icon {
font-size: 14px;
opacity: 0.6;
}
/* ========== THEME TOGGLE ========== */
.theme-toggle {
background: none;
border: none;
color: var(--color-text);
cursor: pointer;
padding: var(--spacing-xs);
border-radius: var(--border-radius);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.theme-toggle:hover {
background-color: var(--color-bg-light);
color: var(--color-primary);
}
.theme-toggle__icon {
position: relative;
width: 20px;
height: 20px;
}
.theme-icon {
position: absolute;
top: 0;
left: 0;
transition: all 0.4s ease;
transform-origin: center;
}
.theme-icon--light {
opacity: 1;
transform: rotate(0deg) scale(1);
}
.theme-icon--dark {
opacity: 0;
transform: rotate(180deg) scale(0.8);
}
/* Темная тема активна */
[data-theme="dark"] .theme-icon--light {
opacity: 0;
transform: rotate(-180deg) scale(0.8);
}
[data-theme="dark"] .theme-icon--dark {
opacity: 1;
transform: rotate(0deg) scale(1);
}
/* ========== DARK THEME VARIABLES ========== */
[data-theme="dark"] {
/* Основные цвета */
--color-bg: #0f172a;
--color-bg-light: #1e293b;
--color-bg-lighter: #334155;
--color-text: #f1f5f9;
--color-text-light: #94a3b8;
--color-border: #334155;
--color-border-light: #475569;
--color-dark: #fff;
/* Специальные цвета остаются */
--color-primary: #4F7CFF;
--color-primary-dark: #ffffff;
--color-success: #10b981;
--color-error: #ef4444;
--color-warning: #f59e0b;
/* Тени для темной темы */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .is-white-logo-in-dark-theme {
fill: #fff;
}
/* Плавный переход темы - только для основных элементов */
body,
.header,
.main,
.footer,
.blog-card,
.article,
.sidebar,
.modal__content,
.search-dropdown,
.filter__dropdown,
.breadcrumbs,
.btn,
.form-input,
.nav__link,
.footer__link,
.calendar__month,
.year-btn,
.archive__stats,
.error-page,
.sidebar__widget,
.tags-cloud,
.tag,
.similar-articles,
.sorting__select,
.calendar__articles-count,
.stat,
.calendar__article,
.calendar__view-all {
transition:
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease !important;
}
/* Переопределяем конфликтующие transitions */
.calendar__month {
transition:
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.2s ease !important;
}
.year-btn {
transition:
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease !important;
}
/* Специальные переопределения для темной темы */
[data-theme="dark"] .blog-card__placeholder,
[data-theme="dark"] .article__image-placeholder {
background: linear-gradient(135deg, #334155 0%, #475569 100%);
}
[data-theme="dark"] .skeleton {
background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
background-size: 200% 100%;
}
[data-theme="dark"] .search-dropdown,
[data-theme="dark"] .filter__dropdown,
[data-theme="dark"] .mobile-filters-modal .modal__content {
background: var(--color-bg-light);
border-color: var(--color-border);
}
[data-theme="dark"] .modal__content {
background: var(--color-bg-light);
border-color: var(--color-border);
}
[data-theme="dark"] .callback-modal .modal__content,
[data-theme="dark"] .success-modal .modal__content {
/* Модальные окна с градиентом остаются без изменений */
}
[data-theme="dark"] .consultation-widget {
/* Виджет консультации с градиентом остается без изменений */
}
[data-theme="dark"] .reading-progress {
background-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .custom-checkbox__mark {
background: var(--color-bg-lighter);
border-color: var(--color-border);
}
[data-theme="dark"] .custom-checkbox__input:checked + .custom-checkbox__mark {
background: rgba(255, 255, 255, 0.2);
border-color: white;
}
/* Темная тема для архивной страницы */
[data-theme="dark"] .calendar__month {
background: var(--color-bg-light);
border-color: var(--color-border);
}
[data-theme="dark"] .year-btn {
background: var(--color-bg-light);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .year-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
[data-theme="dark"] .year-btn--active {
background: var(--color-primary);
border-color: var(--color-primary);
color: white;
}
[data-theme="dark"] .calendar__articles-count {
background: var(--color-bg-lighter);
color: var(--color-text-light);
}
[data-theme="dark"] .archive__stats {
background: var(--color-bg-light);
}
[data-theme="dark"] .calendar__article:hover {
color: var(--color-primary);
}
[data-theme="dark"] .calendar__view-all:hover {
color: var(--color-primary);
}
/* Темная тема для 404 страницы */
[data-theme="dark"] .error-page__content {
color: var(--color-text);
}
[data-theme="dark"] .error-page__title {
color: var(--color-text);
}
[data-theme="dark"] .error-page__description {
color: var(--color-text-light);
}
[data-theme="dark"] .suggestions__title {
color: var(--color-text);
}
[data-theme="dark"] .suggestions__link:hover {
color: var(--color-primary);
}
[data-theme="dark"] .error-page__suggestions {
border-color: var(--color-border);
}
/* ========== READING PROGRESS BAR ========== */
.reading-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: rgba(0, 0, 0, 0.1);
z-index: 999;
}
.reading-progress__bar {
height: 100%;
background: linear-gradient(90deg, #4F7CFF 0%, #7C3AED 100%);
width: 0%;
transition: width 0.1s ease;
}
/* ========== SCROLL TO TOP BUTTON ========== */
.scroll-to-top {
position: fixed;
bottom: 100px;
right: var(--spacing-lg);
width: 56px;
height: 56px;
background: var(--color-primary);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(79, 124, 255, 0.3);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
z-index: 1000;
}
.scroll-to-top.scroll-to-top--visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-to-top:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(79, 124, 255, 0.4);
}
/* ========== ARTICLE META IMPROVEMENTS ========== */
.article__meta-row {
display: flex;
align-items: center;
gap: var(--spacing-md);
flex-wrap: wrap;
margin-bottom: var(--spacing-sm);
}
.article__reading-time {
display: flex;
align-items: center;
gap: var(--spacing-xs);
color: var(--color-text-light);
font-size: var(--font-size-sm);
}
.article__updated {
color: var(--color-text-light);
font-size: var(--font-size-sm);
}
.article__print {
background: none;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: var(--spacing-xs);
color: var(--color-text-light);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.article__print:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background-color: rgba(79, 124, 255, 0.05);
}
/* ========== SORTING ========== */
.sorting {
display: flex;
align-items: center;
gap: var(--spacing-sm);
/*margin-left: auto;*/
}
.sorting__label {
font-size: var(--font-size-sm);
color: var(--color-text-light);
font-weight: var(--font-weight-medium);
}
.sorting__select {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-sm);
background: white;
cursor: pointer;
transition: border-color 0.2s ease;
}
.sorting__select:focus {
outline: none;
border-color: var(--color-primary);
}
/* ========== 404 ERROR PAGE ========== */
.error-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
}
.error-page__content {
max-width: 600px;
padding: var(--spacing-xl);
}
.error-page__illustration {
margin-bottom: var(--spacing-xl);
}
.error-page__title {
font-size: var(--font-size-xxl);
font-weight: var(--font-weight-bold);
color: var(--color-text);
margin: 0 0 var(--spacing-md) 0;
}
.error-page__description {
font-size: var(--font-size-lg);
color: var(--color-text-light);
line-height: 1.6;
margin: 0 0 var(--spacing-xl) 0;
}
.error-page__actions {
display: flex;
gap: var(--spacing-md);
justify-content: center;
margin-bottom: var(--spacing-xl);
}
.error-page__suggestions {
border-top: 1px solid var(--color-border);
padding-top: var(--spacing-lg);
}
.suggestions__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin: 0 0 var(--spacing-md) 0;
}
.suggestions__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-md);
}
.suggestions__link {
color: var(--color-primary);
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: color 0.2s ease;
}
.suggestions__link:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
/* ========== ARCHIVE PAGE ========== */
.archive__header {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.archive__title {
font-size: var(--font-size-xxl);
font-weight: var(--font-weight-bold);
color: var(--color-text);
margin: 0 0 var(--spacing-md) 0;
}
.archive__description {
font-size: var(--font-size-lg);
color: var(--color-text-light);
margin: 0;
}
.year-selector {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xl);
}
.year-btn {
background: white;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: var(--spacing-sm) var(--spacing-lg);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
cursor: pointer;
}
.year-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.year-btn--active {
background: var(--color-primary);
border-color: var(--color-primary);
color: white;
}
.calendar__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.calendar__month {
background: white;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
}
.calendar__month:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.calendar__month-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-sm);
border-bottom: 1px solid var(--color-border);
}
.calendar__month-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin: 0;
}
.calendar__articles-count {
font-size: var(--font-size-sm);
color: var(--color-text-light);
background: var(--color-bg-light);
padding: 4px 8px;
border-radius: var(--border-radius);
}
.calendar__preview {
margin-bottom: var(--spacing-md);
}
.calendar__article {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
text-decoration: none;
padding: var(--spacing-sm) 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.calendar__article:last-child {
border-bottom: none;
}
.calendar__article:hover {
color: var(--color-primary);
}
.calendar__article-date {
background: var(--color-primary);
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
flex-shrink: 0;
}
.calendar__article-title {
font-size: var(--font-size-sm);
color: var(--color-text);
line-height: 1.4;
}
.calendar__view-all {
background: none;
border: none;
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
padding: 0;
}
.calendar__view-all:hover {
color: var(--color-primary-dark);
}
.archive__stats {
display: flex;
justify-content: center;
gap: var(--spacing-xl);
padding: var(--spacing-xl);
background: var(--color-bg-light);
border-radius: var(--border-radius-lg);
}
.stat {
text-align: center;
}
.stat__number {
display: block;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin-bottom: var(--spacing-xs);
}
.stat__label {
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
/* ========== LOADING SKELETONS ========== */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.skeleton-card {
background: white;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.skeleton-card__image {
width: 100%;
height: 200px;
border-radius: var(--border-radius);
margin-bottom: var(--spacing-md);
}
.skeleton-card__title {
height: 24px;
border-radius: 4px;
margin-bottom: var(--spacing-sm);
}
.skeleton-card__text {
height: 16px;
border-radius: 4px;
margin-bottom: var(--spacing-xs);
}
.skeleton-card__text:last-child {
width: 60%;
}
/* Mobile Responsive */
@media (max-width: 767px) {
.header__controls {
margin-left: var(--mobile-spacing-sm);
gap: var(--mobile-spacing-xs);
}
.search-dropdown {
min-width: 280px;
right: -20px;
}
.scroll-to-top {
bottom: var(--mobile-spacing-md);
right: var(--mobile-spacing-md);
width: 48px;
height: 48px;
}
.article__meta-row {
gap: var(--mobile-spacing-sm);
}
.sorting {
flex-direction: column;
align-items: flex-start;
gap: var(--mobile-spacing-xs);
margin-left: 0;
margin-top: var(--mobile-spacing-md);
}
.error-page__actions {
flex-direction: column;
align-items: center;
}
.suggestions__list {
flex-direction: column;
gap: var(--mobile-spacing-sm);
}
.year-selector {
flex-wrap: wrap;
}
.calendar__grid {
grid-template-columns: 1fr;
gap: var(--mobile-spacing-md);
}
.archive__stats {
flex-direction: column;
gap: var(--mobile-spacing-md);
}
}
/* ===============================================
Loading States & Animations
=============================================== */
/* Лоадер для blog-grid */
.blog-grid--loading {
position: relative;
min-height: 400px;
pointer-events: none;
opacity: 0.5;
transition: opacity 0.3s ease;
}
.blog-grid--loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border: 4px solid var(--color-border);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 10;
}
/* Анимация вращения */
@keyframes spin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* Анимации для уведомлений */
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOutRight {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
/* Стили для уведомлений */
.notification {
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.2s ease;
}
.notification:hover {
transform: translateX(-5px);
}
/* Пустое состояние */
.blog-grid--empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
padding: var(--spacing-xxl) var(--spacing-md);
text-align: center;
}
.blog-grid--empty::before {
content: '🔍';
font-size: 64px;
margin-bottom: var(--spacing-md);
opacity: 0.5;
}
.blog-grid--empty::after {
content: 'Статьи не найдены';
font-size: var(--font-size-lg);
color: var(--color-text-light);
font-weight: var(--font-weight-medium);
}
/* Плавное появление карточек при загрузке */
.blog-card {
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Задержка анимации для карточек */
.blog-card:nth-child(1) { animation-delay: 0.1s; }
.blog-card:nth-child(2) { animation-delay: 0.2s; }
.blog-card:nth-child(3) { animation-delay: 0.3s; }
.blog-card:nth-child(4) { animation-delay: 0.4s; }
.blog-card:nth-child(5) { animation-delay: 0.5s; }
.blog-card:nth-child(6) { animation-delay: 0.6s; }
/* Мобильная версия лоадера */
@media (max-width: 767px) {
.blog-grid--loading {
min-height: 300px;
}
.blog-grid--loading::before {
width: 40px;
height: 40px;
border-width: 3px;
}
#notificationContainer {
top: 10px !important;
right: 10px !important;
left: 10px !important;
max-width: none !important;
}
}
/* Контейнер с социальными сетями */
.share-content {
display: none;
position: absolute;
bottom: 19px;
right: 67px;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 15px;
margin-top: 10px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1000;
min-width: 200px;
}
/* Список социальных сетей */
.share-content ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.share-content li {
margin: 0;
}
/* Ссылки социальных сетей */
.share-content a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
/* Эффект наведения для ссылок */
.share-content a::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.share-content a:hover::before {
transform: translateX(100%);
}
/* Стили для конкретных социальных сетей */
.share-content .vk a {
background: linear-gradient(135deg, #4C75A3, #5B7FA8);
}
.share-content .ok a {
background: linear-gradient(135deg, #EE8208, #F4A261);
}
.share-content .mail a {
background: linear-gradient(135deg, #005FF9, #1E88E5);
}
.share-content .fb a {
background: linear-gradient(135deg, #1877F2, #42A5F5);
}
.share-content .tw a {
background: linear-gradient(135deg, #1DA1F2, #42A5F5);
}
.share-content .gp a {
background: linear-gradient(135deg, #DB4437, #F44336);
}
.share-content .tumbl a {
background: linear-gradient(135deg, #001935, #2C3E50);
}
.share-content .pin a {
background: linear-gradient(135deg, #E60023, #F44336);
}
/* Эффекты наведения */
.share-content a:hover {
transform: translateY(-2px) scale(1.1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.share-content .vk a:hover {
background: linear-gradient(135deg, #5B7FA8, #6B8FB8);
}
.share-content .ok a:hover {
background: linear-gradient(135deg, #F4A261, #F6B85A);
}
.share-content .mail a:hover {
background: linear-gradient(135deg, #1E88E5, #42A5F5);
}
.share-content .fb a:hover {
background: linear-gradient(135deg, #42A5F5, #64B5F6);
}
.share-content .tw a:hover {
background: linear-gradient(135deg, #42A5F5, #64B5F6);
}
.share-content .gp a:hover {
background: linear-gradient(135deg, #F44336, #E57373);
}
.share-content .tumbl a:hover {
background: linear-gradient(135deg, #2C3E50, #34495E);
}
.share-content .pin a:hover {
background: linear-gradient(135deg, #F44336, #E57373);
}
/* Иконки социальных сетей */
.share-content .socicon {
font-size: 18px;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
padding-top:4px;
}
.share-content a:hover .socicon {
transform: scale(1.2);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/* Стрелка указывающая на кнопку */
.share-content::before {
content: '';
position: absolute;
bottom: 3px;
right: -9px;
transform: translateY(-50%); /* Центрируем по вертикали */
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid rgba(255, 255, 255, .7); /* Белая стрелка, направленная вправо */
}
/* Адаптивность */
@media (max-width: 480px) {
.share-content {
min-width: 160px;
padding: 12px;
}
.share-content ul {
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.share-content a {
width: 35px;
height: 35px;
}
.share-content .socicon {
font-size: 16px;
}
}
/* Анимация появления */
@keyframes shareSlideIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(-10px) scale(0.9);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
}
.share-content.show {
animation: shareSlideIn 0.3s ease-out;
}
/* Дополнительные эффекты для лучшего UX */
.share-content {
will-change: transform, opacity;
}
.share-content a {
will-change: transform;
border: none;
}
/* Скрытие при печати */
@media print {
.share-content {
display: none !important;
}
}
.blog-card__content-left {
display: block;
text-decoration: none;
border: none;
}
.mega-menu-icon,
.contact-icon {
display: inline-flex;
width: 35px;
height: 35px;
margin-right: 12px;
color: #1f2937;
flex: 0 0 auto;
}
.mega-menu-icon > svg,
.contact-icon > svg {
width: 100%;
height: 100%;
display: block;
fill: none; /* контурные плоские */
stroke: currentColor; /* наследует цвет текста */
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* пример наведения */
.mega-menu-link:hover .mega-menu-icon { color: #0ea5e9; }
/* Стили для состояния загрузки формы */
.form--loading {
opacity: 0.7;
pointer-events: none;
}
.btn--loading {
position: relative;
color: transparent !important;
}
.btn--loading::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid #ffffff;
border-radius: 50%;
border-top-color: transparent;
animation: spinner 0.6s linear infinite;
}
@keyframes spinner {
to { transform: rotate(360deg); }
}
/* Стили для ошибок полей */
.form-group {
position: relative;
}
.field--error {
border-color: #dc3545 !important;
}
.field-error {
color: #dc3545;
font-size: 12px;
margin-top: 4px;
line-height: 1.4;
position: absolute;
}
.checkbox-group .field-error {
top: 21px;
}
.field-error a {
display: inline-block;
color: #dc3545;
line-height: 14px;
}
/* Стили для общей ошибки формы */
.form-error {
background-color: #f8d7da;
color: #721c24;
padding: 12px 16px;
border-radius: 4px;
font-size: 14px;
line-height: 1.4;
border: 1px solid #f5c6cb;
}
/* Анимация для успешного уведомления */
.notification--success {
background: #28a745 !important;
}
.field-error__icon,
.form-error__icon {
display: inline-block;
margin-right: 3px;
}
.article__content img {
max-width: 100%;
height: auto ! important;
}
.blog-card__placeholder a {
border: none;
}
.blog-card__placeholder img {
max-width: 100%;
height: auto;
}