| 1 |
- {"version":3,"sources":["base/_reset.scss","styles.css","base/_fonts.scss","base/_variables.scss","base/_mixins.scss","base/_typography.scss","layout/_header.scss","layout/_container.scss","components/_buttons.scss","styles.scss"],"names":[],"mappings":"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","file":"styles.css","sourcesContent":["// CSS Reset\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n","* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n@font-face {\n font-family: \"Montserrat\";\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url(\"../fonts/Montserrat-Regular.woff2\") format(\"woff2\");\n}\n@font-face {\n font-family: \"Montserrat\";\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n src: url(\"../fonts/Montserrat-SemiBold.woff2\") format(\"woff2\");\n}\n@font-face {\n font-family: \"Montserrat\";\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url(\"../fonts/Montserrat-Bold.woff2\") format(\"woff2\");\n}\n:root {\n --container-width: 1400px;\n --transition: 0.3s ease;\n --default-font-family: 'Montserrat';\n --heading-font-family: 'Montserrat';\n --scrollbar-color:#F0F3F6;\n --text-color: rgba(2, 0, 5, 0.80);\n --fz-default: 16px;\n --lh-default: 24px;\n --h1: 44px;\n --h2: 24px;\n --h3: 20px;\n --h4: 18px;\n --l: 20px;\n --m: 16px;\n --s: 14px;\n}\n@media (max-width: 1199px) {\n :root {\n --container-width: 1199px;\n --fz-default: 16px;\n --lh-default: 26px;\n --h1: 28px;\n --h2: 20px;\n --h3: 18px;\n --h4: 16px;\n --l: 20px;\n --m: 16px;\n --s: 14px;\n --sp: 32px 0;\n }\n}\n@media (max-width: 768px) {\n :root {\n --container-width: 768px;\n --fz-default: 16px;\n --lh-default: 26px;\n --h1: 28px;\n --h2: 20px;\n --h3: 18px;\n --h4: 16px;\n --l: 20px;\n --m: 16px;\n --s: 14px;\n --sp: 32px 0;\n }\n}\n@media (max-width: 575px) {\n :root {\n --container-width: 575px;\n --fz-default: 16px;\n --lh-default: 26px;\n --h1: 24px;\n --h2: 18px;\n --h3: 16px;\n --h4: 14px;\n --l: 20px;\n --m: 16px;\n --s: 14px;\n }\n}\n\nbody {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n font-family: var(--default-font-family), Helvetica, Arial, sans-serif;\n font-weight: 400;\n font-size: var(--fz-default);\n font-style: normal;\n font-weight: 400;\n line-height: var(--lh-default);\n min-width: 360px;\n color: var(--text-color);\n position: relative;\n background-color: #FFF;\n scroll-behavior: smooth;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\nh1 {\n font-family: var(--heading-font-family);\n font-weight: 600;\n font-size: var(--h1);\n line-height: 106%;\n}\n\nh2 {\n font-family: var(--heading-font-family);\n font-weight: 600;\n font-size: var(--h2);\n line-height: 125%;\n}\n\nh3 {\n font-family: var(--heading-font-family);\n font-weight: 600;\n font-size: var(--h3);\n line-height: 130%;\n}\n\nh4 {\n font-family: var(--heading-font-family);\n font-weight: 600;\n font-size: var(--h4);\n line-height: 133%;\n}\n\nh5 {\n font-family: var(--heading-font-family);\n font-weight: 600;\n font-size: var(--m);\n line-height: 135%;\n}\n\nh6 {\n font-family: var(--heading-font-family);\n font-weight: 900;\n font-size: var(--m);\n line-height: 140%;\n}\n\nh1, h2, h3, h4, h5, h6 {\n margin: 32px 0 20px 0;\n}\n@media (max-width: 768px) {\n h1, h2, h3, h4, h5, h6 {\n margin: 24px 0 12px 0;\n }\n}\n\n.text > h1:first-child, .text > h2:first-child, .text > h3:first-child, .text > h4:first-child, .text > h5:first-child, .text > h6:first-child {\n margin-top: 0;\n}\n.text p {\n margin-bottom: 24px;\n}\n@media (max-width: 768px) {\n .text p {\n margin-bottom: 16px;\n }\n}\n.text p:last-child {\n margin-bottom: 0;\n}\n.text a {\n color: var(--color-link-text);\n text-decoration: underline;\n text-underline-offset: 3px;\n text-decoration-thickness: 1px;\n}\n.text a:hover {\n text-decoration: none;\n color: var(--color-theme-red);\n}\n.text ol, .text ul {\n margin: 24px 0;\n list-style-position: inside;\n}\n@media (max-width: 768px) {\n .text ol, .text ul {\n margin: 12px 0;\n padding-left: 8px;\n }\n}\n.text ol li, .text ul li {\n margin: 12px 0;\n margin-left: 32px;\n}\n@media (max-width: 768px) {\n .text ol li, .text ul li {\n margin-left: 16px;\n }\n}\n.text ul {\n list-style: disc;\n}\n.text ol {\n list-style: decimal;\n}\n\n.header {\n position: fixed;\n width: 100%;\n top: 0;\n left: 0;\n height: 70px;\n z-index: 1000;\n}\n.header .container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n gap: 20px;\n}\n.header__logo {\n width: 190px;\n height: 44px;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1001;\n}\n.header__logo-link {\n display: inline-block;\n line-height: 0;\n}\n.header__logo img {\n width: 190px;\n height: 44px;\n display: block;\n cursor: pointer;\n object-fit: contain;\n transition: opacity 0.3s ease;\n}\n.header__nav {\n flex: 1;\n display: flex;\n justify-content: center;\n}\n.header__menu {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n gap: 40px;\n}\n.header__menu-link {\n text-decoration: none;\n font-size: 16px;\n font-weight: 500;\n transition: opacity 0.3s ease;\n color: #fff;\n white-space: nowrap;\n opacity: 0.9;\n}\n.header__menu-link:hover {\n opacity: 1;\n color: #fff;\n}\n.header__actions {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n.header__btn {\n border-radius: 6px;\n border: 1px solid #FFF;\n display: flex;\n height: 42px;\n padding: 8px 32px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n color: #FFF;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n text-transform: uppercase;\n background: none;\n cursor: pointer;\n}\n.header__btn--primary:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n.header__btn--secondary:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n.header__burger {\n display: none;\n flex-direction: column;\n justify-content: space-between;\n width: 30px;\n height: 24px;\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n z-index: 1001;\n transition: transform 0.3s ease;\n}\n.header__burger:hover {\n transform: scale(1.1);\n}\n.header__burger-line {\n width: 100%;\n height: 3px;\n border-radius: 2px;\n transition: all 0.3s ease;\n}\n.header__burger.active .header__burger-line:nth-child(1) {\n transform: translateY(10.5px) rotate(45deg);\n}\n.header__burger.active .header__burger-line:nth-child(2) {\n opacity: 0;\n}\n.header__burger.active .header__burger-line:nth-child(3) {\n transform: translateY(-10.5px) rotate(-45deg);\n}\n@media (max-width: 1199px) {\n .header__menu {\n gap: 24px;\n }\n .header__btn {\n padding: 8px 16px;\n font-size: 13px;\n }\n}\n@media (max-width: 768px) {\n .header {\n height: 60px;\n }\n .header__logo {\n width: 150px;\n height: 35px;\n }\n .header__logo img {\n width: 150px;\n height: 35px;\n }\n .header__burger {\n display: flex;\n }\n .header__nav {\n position: fixed;\n top: 60px;\n left: 0;\n width: 100%;\n height: calc(100vh - 60px);\n transform: translateX(-100%);\n transition: transform 0.3s ease;\n padding: 40px 20px;\n overflow-y: auto;\n backdrop-filter: blur(10px);\n }\n .header__nav.active {\n transform: translateX(0);\n }\n .header__menu {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n .header__menu-link {\n font-size: 18px;\n }\n .header__actions {\n gap: 8px;\n }\n .header__btn {\n display: none;\n }\n .header__nav.active .header__btn {\n display: block;\n width: calc(100% - 40px);\n margin: 0 20px 16px;\n }\n}\n\n.container {\n max-width: var(--container-width);\n width: 100%;\n height: 100%;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n padding: 0 16px;\n}\n\nbutton.accent-color {\n transition: filter 0.3s ease;\n}\nbutton.accent-color:hover {\n filter: brightness(0.85);\n}\n\n.main__btn {\n position: relative;\n margin: auto;\n}\n.main__btn a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n.bottom-btn {\n margin: auto;\n width: 200px;\n background: #c30054;\n}\n\nbody {\n background: #fff !important;\n padding-top: 70px;\n color: #000;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; /* 150% */\n}\n\n.banner {\n background: #000;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.banner__img-wrp {\n max-width: 1920px;\n margin: 0 auto;\n}\n.banner__img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.section-wrapper {\n padding: 32px 0;\n display: flex;\n flex-direction: column;\n gap: 32px;\n width: 100%;\n}\n@media (max-width: 768px) {\n .section-wrapper {\n gap: 24px;\n }\n}\n\n.section {\n padding: 32px;\n border-radius: 16px;\n border: 1px solid #E4E4E4;\n background: #F6F6F6;\n}","\n@mixin font-face($font-family, $file-path, $weight: normal, $style: normal) {\n @font-face {\n font-family: $font-family;\n font-weight: $weight;\n font-style: $style;\n font-display: swap;\n\n // Порядок: сначала woff2, потом woff, потом ttf\n src: url('#{$file-path}.woff2') format('woff2'),\n //url('#{$file-path}.woff') format('woff'),\n //url('#{$file-path}.ttf') format('truetype');\n }\n}\n\n@include font-face(\"Montserrat\", \"../fonts/Montserrat-Regular\", 400);\n@include font-face(\"Montserrat\", \"../fonts/Montserrat-SemiBold\", 600);\n@include font-face(\"Montserrat\", \"../fonts/Montserrat-Bold\", 700);\n\n","@import 'base/mixins';\n\n:root {\n\t--container-width: 1400px;\n\t--transition: 0.3s ease;\n\t--default-font-family: 'Montserrat';\n\t--heading-font-family: 'Montserrat';\n\n --scrollbar-color:#F0F3F6;\n\n\t--text-color: rgba(2, 0, 5, 0.80); // text color\n\t--fz-default: 16px; // default font size\n\t--lh-default: 24px;// default line-height\n\n\t--h1: 44px; // h1 font size\n\t--h2: 24px; // h2 font size\n\t--h3: 20px; // h3 font size\n\t--h4: 18px; // h3 font size\n\t--l: 20px; // large font size\n\t--m: 16px; // medium font size\n\t--s: 14px; // small font size\n\n\t@include tablet {\n\t\t--container-width: 1199px;\n\t\t--fz-default: 16px; // default font size\n\t\t--lh-default: 26px;// default line-height\n\t\t--h1: 28px; // h1 font size\n\t\t--h2: 20px; // h2 font size\n\t\t--h3: 18px; // h3 font size\n\t\t--h4: 16px; // h3 font size\n\t\t--l: 20px; // large font size\n\t\t--m: 16px; // medium font size\n\t\t--s: 14px; // small font size\n\t\t--sp: 32px 0;\n\t}\n\t@include mobile{\n\t\t--container-width: 768px;\n\t\t--fz-default: 16px; // default font size\n\t\t--lh-default: 26px;// default line-height\n\t\t--h1: 28px; // h1 font size\n\t\t--h2: 20px; // h2 font size\n\t\t--h3: 18px; // h3 font size\n\t\t--h4: 16px; // h3 font size\n\t\t--l: 20px; // large font size\n\t\t--m: 16px; // medium font size\n\t\t--s: 14px; // small font size\n\t\t--sp: 32px 0;\n\t}\n\t@include mobile-sm {\n\t\t--container-width: 575px;\n\t\t--fz-default: 16px; // default font size\n\t\t--lh-default: 26px;// default line-height\n\t\t--h1: 24px; // h1 font size\n\t\t--h2: 18px; // h2 font size\n\t\t--h3: 16px; // h3 font size\n\t\t--h4: 14px; // h3 font size\n\t\t--l: 20px; // large font size\n\t\t--m: 16px; // medium font size\n\t\t--s: 14px; // small font size\n\t}\n}","// MEDIA\n@mixin media-max ($size) {\n @media only screen and (max-width: #{$size}px) {\n @content\n }\n}\n\n@mixin media-min ($size) {\n @media only screen and (min-width: #{$size}px) {\n @content\n }\n}\n\n\n@mixin media-min-h ($size) {\n @media screen and (min-height: #{$size}px) {\n @content\n }\n}\n\n@mixin media-max-h ($size) {\n @media screen and (max-height: #{$size}px) {\n @content\n }\n}\n\n\n@mixin center {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-transform: translate(-50%, -50%);\n}\n\n@mixin flex($justify: null, $align: null, $flow: null, $gap: null) {\n\tdisplay: flex;\n\t@if $justify {\n\t\tjustify-content: $justify;\n\t}\n\t@if $align {\n\t\talign-items: $align;\n\t}\n\t@if $flow {\n\t\tflex-flow: $flow;\n\t}\n\t@if $gap {\n\t\tgap: $gap;\n\t}\n}\n\n@mixin absolute($left: null, $top: null, $right: null, $bottom: null) {\n\tposition: absolute;\n\t@if $left {\n\t\tleft: $left;\n\t}\n\t@if $top {\n\t\ttop: $top;\n\t}\n\t@if $right {\n\t\tright: $right;\n\t}\n\t@if $bottom {\n\t\tbottom: $bottom;\n\t}\n}\n\n@mixin desktop { @media (min-width: 1200px) { @content; } }\n@mixin tablet { @media (max-width: 1199px) { @content; } }\n@mixin mobile{ @media (max-width: 768px) { @content; } }\n@mixin mobile-sm{ @media (max-width: 575px) { @content; } }\n\n@mixin fz($size) {\n\t@if $size == l {\n\t\tfont-size: var(--l);\n\t}\n\t@if $size == m {\n\t\tfont-size: var(--m);\n\t}\n\t@if $size == s {\n\t\tfont-size: var(--s);\n\t}\n}\n\n@mixin ai($width, $height) {\n\t&:after {\n\t\tcontent:'';\n\t\tdisplay: block;\n\t\tpadding-bottom: calc($height/$width*100%);\n\t}\n}\n\n@mixin effectBox{\n\t\tborder-radius: var(--border-radius-main);\n\t\tborder: 1px solid rgba(120, 88, 173, 0.20);\n\t\tbackground: rgba(147, 122, 189, 0.10);\n\t\tbackdrop-filter: blur(32px);\n\t\toverflow:hidden;\n\t\tposition:relative;\n\t\t&:before{\n\t\t\tcontent:'';\n\t\t\twidth: 335px;\n\t\t\theight: 141px;\n\t\t\tposition: absolute;\n\t\t\tright: -25px;\n\t\t\ttop: -146px;\n\t\t\tborder-radius: 335px;\n\t\t\tbackground: radial-gradient(178.52% 78.07% at 41.32% 26.64%, #EBBFFB 0%, #C570E3 85%);\n\t\t\tfilter: blur(60px);\n\t\t\ttransition: 0.3s ease-out;\n\t\t}\n\t\t&:after{\n\t\t\tcontent:'';\n\t\t\twidth: 273px;\n\t\t\theight: 136px;\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: -110px;\n\t\t\tbackground:#937ABD;\n\t\t\tfilter: blur(60px);\n\t\t\tborder-radius: 335px;\n\t\t\tvisibility: hidden;\n\t\t\topacity: 0;\n\t\t\ttransition: 0.6s ease-out;\n\t\t\tbackground: radial-gradient(178.52% 78.07% at 41.32% 26.64%, #EBBFFB 0%, #937ABD 85%);\n\n\t\t}\n\t\t&:hover{\n\t\t\t&:before{\n\t\t\t\topacity:0;\n\t\t\t}\n\t\t\t&:after{\n\t\t\t\tcontent:'';\n\t\t\t\tleft: -69px;\n\t\t\t\ttop: -75px;\n\t\t\t\topacity: 0.8;\n\t\t\t\tvisibility: visible;\n\t\t\t}\n\t\t}\n\n}\n\n@mixin styleScrollH{\n\t&::-webkit-scrollbar {\n\t\theight: 3px;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tbackground:transparent;\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground-color: rgba(177, 163, 199, 0.5);\n\t\tborder-radius:15px;\n\t\tbackground:transparent;\n\t}\n}\n\n@mixin styleScrollV{\n\t&::-webkit-scrollbar {\n\t\twidth: 3px;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tbackground:transparent;\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground-color: rgba(177, 163, 199, 0.5);\n\t\tborder-radius:15px;\n\t}\n}\n","// Typography\nbody {\n\t// для прижатого к низу футера\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 100vh;\n\tmargin:0;\n\tpadding:0;\n\tfont-family: var(--default-font-family), Helvetica, Arial, sans-serif;\n\tfont-weight: 400;\n\tfont-size: var(--fz-default);\n\tfont-style: normal;\n\tfont-weight: 400;\n\tline-height: var(--lh-default);\n\tmin-width: 360px;\n\tcolor: var(--text-color);\n\tposition: relative;\n\t//background-color: var(--bg);\n\tbackground-color:#FFF;\n\tscroll-behavior: smooth; // плавный скролл\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\ttext-rendering: optimizeLegibility; //сглаживание шрифтов\n}\n\n// default typography styles\nh1 {\n\tfont-family: var(--heading-font-family);\n\tfont-weight: 600;\n\tfont-size: var(--h1);\n\tline-height: 106%;\n}\n\nh2 {\n\tfont-family: var(--heading-font-family);\n\tfont-weight: 600;\n\tfont-size: var(--h2);\n\tline-height: 125%;\n}\n\nh3 {\n\tfont-family: var(--heading-font-family);\n\tfont-weight: 600;\n\tfont-size: var(--h3);\n\tline-height: 130%;\n}\n\nh4 {\n\tfont-family: var(--heading-font-family);\n\tfont-weight: 600;\n\tfont-size: var(--h4);\n\tline-height: 133%;\n}\n\nh5 {\n\tfont-family: var(--heading-font-family);\n\tfont-weight: 600;\n\tfont-size: var(--m);\n\tline-height: 135%;\n}\n\nh6 {\n\tfont-family: var(--heading-font-family);\n\tfont-weight: 900;\n\tfont-size: var(--m);\n\tline-height: 140%;\n}\n\nh1, h2, h3, h4, h5, h6{\n\tmargin:32px 0 20px 0;\n\t@include mobile{\n\t\tmargin:24px 0 12px 0;\n\t}\n}\n\n// text style\n.text{\n\t& > h1:first-child,\n\t& > h2:first-child,\n\t& > h3:first-child,\n\t& > h4:first-child,\n\t& > h5:first-child,\n\t& > h6:first-child{\n\t margin-top:0;\n\t}\n p{\n\t margin-bottom:24px;\n\t @include mobile{\n\t\t margin-bottom:16px;\n\t }\n\t &:last-child{\n\t\t margin-bottom:0;\n\t }\n }\n a{\n\t color:var(--color-link-text);\n\t text-decoration:underline;\n\t text-underline-offset: 3px;\n\t text-decoration-thickness: 1px;\n\t &:hover{\n\t\t text-decoration:none;\n\t\t color:var(--color-theme-red);\n\t }\n }\n // list style ol ul\n ol, ul{\n\t margin:24px 0;\n\t list-style-position: inside;\n\t @include mobile{\n\t\t margin:12px 0;\n\t\t padding-left:8px;\n\t }\n\t li{\n\t\t margin:12px 0;\n\t\t margin-left:32px;\n\t\t @include mobile{\n\t\t\t margin-left:16px;\n\t\t }\n\t }\n }\n\n // list style ul\n ul{\n\t list-style:disc;\n }\n\n // list style ol\n ol{\n\t list-style:decimal;\n }\n\n}","// Header\n.header {\n position: fixed;\n width: 100%;\n top: 0;\n left: 0;\n height: 70px;\n z-index: 1000;\n // background will be set dynamically via styles.php\n\n .container {\n @include flex(space-between, center);\n height: 100%;\n gap: 20px;\n }\n\n // Logo\n &__logo {\n width: 190px;\n height: 44px;\n flex-shrink: 0;\n @include flex(center, center);\n z-index: 1001;\n\n &-link {\n display: inline-block;\n line-height: 0;\n }\n\n img {\n width: 190px;\n height: 44px;\n display: block;\n cursor: pointer;\n object-fit: contain;\n transition: opacity 0.3s ease;\n }\n }\n\n // Navigation\n &__nav {\n flex: 1;\n @include flex(center);\n }\n\n &__menu {\n list-style: none;\n margin: 0;\n padding: 0;\n @include flex(null, center, null, 40px);\n\n &-link {\n // color will be set dynamically\n text-decoration: none;\n font-size: 16px;\n font-weight: 500;\n transition: opacity 0.3s ease;\n color:#fff;\n white-space: nowrap;\n opacity: 0.9;\n\n &:hover { \n opacity: 1;\n color:#fff;\n }\n }\n }\n\n // Actions (buttons)\n &__actions {\n @include flex(null, center, null, 12px);\n flex-shrink: 0;\n }\n\n &__btn {\n border-radius: 6px;\n border: 1px solid #FFF;\n display: flex;\n height: 42px;\n padding: 8px 32px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n color: #FFF;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n text-transform: uppercase;\n background:none;\n cursor:pointer;\n\n &--primary {\n // background and color will be set dynamically\n &:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n }\n\n &--secondary {\n // background and color will be set dynamically\n &:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n }\n }\n\n // Burger menu button\n &__burger {\n display: none;\n flex-direction: column;\n justify-content: space-between;\n width: 30px;\n height: 24px;\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n z-index: 1001;\n transition: transform 0.3s ease;\n\n &:hover {\n transform: scale(1.1);\n }\n\n &-line {\n width: 100%;\n height: 3px;\n border-radius: 2px;\n // background will be set dynamically\n transition: all 0.3s ease;\n }\n\n // Active state (menu open)\n &.active {\n .header__burger-line {\n &:nth-child(1) {\n transform: translateY(10.5px) rotate(45deg);\n }\n\n &:nth-child(2) {\n opacity: 0;\n }\n\n &:nth-child(3) {\n transform: translateY(-10.5px) rotate(-45deg);\n }\n }\n }\n }\n\n // Tablet styles\n @include tablet {\n &__menu {\n gap: 24px;\n }\n\n &__btn {\n padding: 8px 16px;\n font-size: 13px;\n }\n }\n\n // Mobile styles\n @include mobile {\n height: 60px;\n\n &__logo {\n width: 150px;\n height: 35px;\n\n img {\n width: 150px;\n height: 35px;\n }\n }\n\n // Show burger menu\n &__burger {\n display: flex;\n }\n\n // Mobile navigation\n &__nav {\n position: fixed;\n top: 60px;\n left: 0;\n width: 100%;\n height: calc(100vh - 60px);\n // background will be set dynamically\n transform: translateX(-100%);\n transition: transform 0.3s ease;\n padding: 40px 20px;\n overflow-y: auto;\n backdrop-filter: blur(10px);\n\n &.active {\n transform: translateX(0);\n }\n }\n\n &__menu {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n\n &-link {\n font-size: 18px;\n }\n }\n\n &__actions {\n gap: 8px;\n }\n\n &__btn {\n display: none;\n }\n\n // Mobile buttons in menu\n &__nav.active {\n .header__btn {\n display: block;\n width: calc(100% - 40px);\n margin: 0 20px 16px;\n }\n }\n }\n}\n","// Container\n.container {\n max-width: var(--container-width);\n width: 100%;\n height: 100%;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: relative;\n padding: 0 16px;\n}\n","// Buttons\nbutton {\n &.accent-color {\n transition: filter 0.3s ease;\n\n &:hover {\n filter: brightness(0.85);\n }\n }\n}\n\n.main__btn {\n position: relative;\n margin: auto;\n\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n // color will be set dynamically\n\n &:hover {\n // color will be set dynamically\n }\n }\n}\n\n.bottom-btn {\n margin: auto;\n width: 200px;\n background: #c30054;\n}\n\n.pulse__btn {\n // Pulse animation will be added if needed\n}\n","// Main SASS file\n// Import all partial files\n\n@import 'base/reset';\n@import 'base/fonts';\n@import 'base/mixins';\n@import 'base/variables';\n@import 'base/typography';\n\n@import 'layout/header';\n@import 'layout/footer';\n@import 'layout/container';\n\n@import 'components/buttons';\n@import 'components/tables';\n\nbody{\n\tbackground:#fff !important; \n\tpadding-top:70px;\n\tcolor:#000;\n\tfont-style: normal;\n\tfont-weight: 400;\n\tline-height: 24px; /* 150% */\n}\n\n//banner\n.banner{\n\tbackground:#000;\n\tdisplay:flex;\n\talign-items: center;\n\tjustify-content: center;\n\t&__img-wrp{\n\t\tmax-width:1920px;\n\t\tmargin:0 auto;\n\t}\n\t&__img{\n\t\tdisplay:block;\n\t\twidth:100%;\n\t\theight:100%;\n\t\tobject-fit: cover;\n\t}\n}\n\n.section-wrapper{\n\tpadding:32px 0;\n\tdisplay:flex;\n\tflex-direction: column;\n\tgap:32px;\n\twidth:100%;\n\t@include mobile{\n\t\tgap:24px;\n\t}\n}\n\n.section{\n\tpadding:32px;\n border-radius: 16px;\n\tborder: 1px solid #E4E4E4;\n\tbackground: #F6F6F6;\n}\n"]}
|
