summaryrefslogtreecommitdiff
path: root/sass
diff options
context:
space:
mode:
Diffstat (limited to 'sass')
-rw-r--r--sass/containerCustom.sass23
-rw-r--r--sass/content-div.sass129
-rw-r--r--sass/contribute-page/banner.sass82
-rw-r--r--sass/contribute-page/main.sass7
-rw-r--r--sass/contributor-subs-page/banner.sass82
-rw-r--r--sass/contributor-subs-page/main.sass12
-rw-r--r--sass/fonts.sass61
-rw-r--r--sass/footer.sass369
-rw-r--r--sass/footnotes.sass10
-rw-r--r--sass/forms.sass327
-rw-r--r--sass/front-page/banner.sass132
-rw-r--r--sass/front-page/bottom-text.sass61
-rw-r--r--sass/front-page/canvas.sass21
-rw-r--r--sass/front-page/inform-columns.sass224
-rw-r--r--sass/front-page/main-text.sass51
-rw-r--r--sass/front-page/navigation.sass16
-rw-r--r--sass/get-page/banner.sass82
-rw-r--r--sass/get-page/main.sass7
-rw-r--r--sass/google-analytics-message.sass189
-rw-r--r--sass/header.sass223
-rw-r--r--sass/lists.sass71
-rw-r--r--sass/main.sass196
-rw-r--r--sass/nightly-builds-page/banner.sass94
-rw-r--r--sass/nightly-builds-page/main.sass7
-rw-r--r--sass/settings.sass82
25 files changed, 1825 insertions, 733 deletions
diff --git a/sass/containerCustom.sass b/sass/containerCustom.sass
new file mode 100644
index 0000000..cc08ebe
--- /dev/null
+++ b/sass/containerCustom.sass
@@ -0,0 +1,23 @@
+@import settings
+
+.containerCustom
+ display: flex
+ width: 100%
+ +resolution(0, 575)
+ padding: 0 20px
+ +resolution(576)
+ padding: 0 30px
+ +resolution(0, 991)
+ max-width: 738px
+ +resolution(992, 1200)
+ max-width: calc(100% - 100px)
+ +resolution(1200, 1499)
+ max-width: 1170px
+ +resolution(1500)
+ max-width: 1370px
+
+ a
+ color: $primary
+ &.footnote
+ margin: 0 2px 0 0
+ text-decoration: none
diff --git a/sass/content-div.sass b/sass/content-div.sass
new file mode 100644
index 0000000..72a5bf1
--- /dev/null
+++ b/sass/content-div.sass
@@ -0,0 +1,129 @@
+@import settings
+
+.get-page
+
+ .content-section
+ +resolution(992)
+ padding-top: 40px
+ +resolution(576, 991)
+ padding-top: 54px
+ +resolution(0, 575)
+ padding-top: 32px
+
+.contribute-page
+
+ .content-section
+ +resolution(992)
+ padding: 40px 0 144px
+ +resolution(576, 991)
+ padding: 54px 0 64px
+ +resolution(0, 575)
+ padding: 32px 0 64px
+
+.nightly-builds-page
+ .content-section
+ padding-top: 0
+ +resolution(992)
+ padding-bottom: 144px
+ +resolution(576, 991)
+ padding-bottom: 64px
+ +resolution(0, 575)
+ padding-bottom: 64px
+
+.contributor-subs-page
+
+ .content-section
+ +resolution(576)
+ padding-top: 20px
+ +resolution(0, 575)
+ padding-top: 32px
+
+.get-page,
+.contribute-page,
+.nightly-builds-page,
+.contributor-subs-page
+
+ .content-section
+ display: flex
+ align-items: center
+ flex-direction: column
+
+ .content-div
+ display: flex
+ flex-direction: column
+ width: 100%
+ box-sizing: border-box
+ +resolution(0, 575)
+ padding: 0 20px
+ +resolution(576, 991)
+ padding: 0 15px
+ +resolution(576, 991)
+ max-width: 738px
+ +resolution(992)
+ max-width: 810px
+
+ > div:first-of-type
+
+ h2
+ margin-top: 0
+
+ h2
+ font-size: 22px
+ letter-spacing: $em
+ +resolution(576)
+ margin-top: 40px
+ +resolution(0, 575)
+ margin-top: 32px
+
+ h3
+ letter-spacing: $px
+ color: $grey-dark
+ line-height: 1.6
+ font-family: $r
+ margin-top: 16px
+ +resolution(576)
+ font-size: 18px
+ +resolution(0, 575)
+ font-size: 16px
+
+ .nightly-builds,
+ .lts,
+ .legacy-lts,
+ .why-contribute,
+ .start,
+ .image-signatures,
+ .guidelines
+
+ p
+ line-height: 1.6
+ letter-spacing: $px
+ color: $grey-dark
+ &:nth-child(1n+2)
+ margin-top: 15px
+ &:nth-of-type(1)
+ margin-top: 10px
+
+ +resolution(0, 575)
+ font-size: 16px
+ +resolution(576)
+ font-size: 18px
+
+ a
+ color: $primary
+ +resolution(0, 575)
+ text-decoration: none
+
+ &:hover
+ text-decoration: none
+
+ &.footnote
+ margin: 0 0 0 2px
+ text-decoration: none
+
+.image-signatures
+
+ h2
+ +resolution(576)
+ margin-top: 40px !important
+ +resolution(0, 575)
+ margin-top: 32px !important
diff --git a/sass/contribute-page/banner.sass b/sass/contribute-page/banner.sass
new file mode 100644
index 0000000..9ca73fc
--- /dev/null
+++ b/sass/contribute-page/banner.sass
@@ -0,0 +1,82 @@
+@import ../settings
+
+.contribute-page
+
+ .banner
+ background-color: $white
+ display: flex
+ justify-content: center
+ position: relative
+ overflow: hidden
+ +resolution(0, 575)
+ height: 232px
+ padding-top: 106px
+ +resolution(576, 991)
+ height: 248px
+ padding-top: 128px
+ +resolution(992)
+ height: 275px
+ padding-top: 128px
+ align-items: center
+
+ h1
+ letter-spacing: $em
+ +resolution(992)
+ font-size: 48px
+ +resolution(0, 991)
+ font-size: 28px
+
+ p
+ letter-spacing: $px
+ font-weight: 600
+ color: $grey-dark
+ margin-top: 16px
+ +resolution(992)
+ font-size: 18px
+ +resolution(0, 991)
+ font-size: 16px
+
+ .containerCustom
+ position: unset
+
+ .banner-div
+ width: 100%
+ border-bottom: 1px solid $grey-light3
+ text-align: center
+ +resolution(0, 575)
+ padding-bottom: 32px
+ +resolution(576, 991)
+ padding-bottom: 54px
+ +resolution(992)
+ padding-bottom: 74px
+
+ .left-shape
+ position: absolute
+ +resolution(992)
+ top: 0
+ left: 0
+ +resolution(576, 991)
+ top: -100px
+ left: -40px
+ +resolution(0, 575)
+ display: none
+
+ img
+ width: 280px
+ height: 280px
+
+ .right-shape
+ position: absolute
+ +resolution(992)
+ top: 0
+ right: 0
+ +resolution(576, 991)
+ top: -100px
+ right: -60px
+ +resolution(0, 575)
+ top: -100px
+ right: -60px
+
+ img
+ width: 385px
+ height: 400px
diff --git a/sass/contribute-page/main.sass b/sass/contribute-page/main.sass
new file mode 100644
index 0000000..e467136
--- /dev/null
+++ b/sass/contribute-page/main.sass
@@ -0,0 +1,7 @@
+@import ../settings
+@import banner
+
+.contribute-page
+
+ .containerCustom
+ flex-direction: column \ No newline at end of file
diff --git a/sass/contributor-subs-page/banner.sass b/sass/contributor-subs-page/banner.sass
new file mode 100644
index 0000000..cbafddd
--- /dev/null
+++ b/sass/contributor-subs-page/banner.sass
@@ -0,0 +1,82 @@
+@import ../settings
+
+.contributor-subs-page
+
+ .banner
+ background-color: $white
+ display: flex
+ justify-content: center
+ position: relative
+ overflow: hidden
+ +resolution(0, 575)
+ height: 232px
+ padding-top: 120px
+ +resolution(576, 991)
+ height: 248px
+ padding-top: 128px
+ +resolution(992)
+ height: 275px
+ padding-top: 128px
+ align-items: center
+
+ h1
+ letter-spacing: $em
+ +resolution(992)
+ font-size: 48px
+ +resolution(0, 991)
+ font-size: 28px
+
+ p
+ letter-spacing: $px
+ font-weight: 600
+ color: $grey-dark
+ margin-top: 16px
+ +resolution(992)
+ font-size: 18px
+ +resolution(0, 991)
+ font-size: 16px
+
+ .containerCustom
+ position: unset
+
+ .banner-div
+ width: 100%
+ border-bottom: 1px solid $grey-light3
+ text-align: center
+ +resolution(0, 575)
+ padding-bottom: 32px
+ +resolution(576, 991)
+ padding-bottom: 54px
+ +resolution(992)
+ padding-bottom: 74px
+
+ .left-shape
+ position: absolute
+ +resolution(992)
+ top: 0
+ left: 0
+ +resolution(576, 991)
+ top: -100px
+ left: -40px
+ +resolution(0, 575)
+ display: none
+
+ img
+ width: 280px
+ height: 280px
+
+ .right-shape
+ position: absolute
+ +resolution(992)
+ top: 0
+ right: 0
+ +resolution(576, 991)
+ top: -100px
+ right: -60px
+ +resolution(0, 575)
+ top: -100px
+ right: -60px
+
+ img
+ width: 385px
+ height: 400px
diff --git a/sass/contributor-subs-page/main.sass b/sass/contributor-subs-page/main.sass
new file mode 100644
index 0000000..2fd7b32
--- /dev/null
+++ b/sass/contributor-subs-page/main.sass
@@ -0,0 +1,12 @@
+@import ../settings
+@import banner
+
+.contributor-subs-page
+
+ .containerCustom
+ flex-direction: column
+
+ .form
+ width: 100%
+ display: flex
+ justify-content: center
diff --git a/sass/fonts.sass b/sass/fonts.sass
index a22bc92..71ee7c3 100644
--- a/sass/fonts.sass
+++ b/sass/fonts.sass
@@ -1,23 +1,38 @@
-@font-face
- font-family: 'Lato'
- font-style: normal
- font-weight: 400
- font-display: swap
- src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/lato-regular.woff2') format('woff2')
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
-
-@font-face
- font-family: 'Lato'
- font-style: normal
- font-weight: 700
- font-display: swap
- src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/lato-bold.woff2') format('woff2')
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
-
-@font-face
- font-family: 'Lato'
- font-style: normal
- font-weight: 900
- font-display: swap
- src: local('Lato Black'), local('Lato-Black'), url('../fonts/lato-black.woff2') format('woff2')
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD \ No newline at end of file
+@font-face {
+ font-display: swap
+ font-family: 'Archivo'
+ font-style: normal
+ font-weight: 400
+ src: url('../fonts/archivo-v19-latin-regular.woff2') format('woff2')
+}
+@font-face {
+ font-display: swap
+ font-family: 'Archivo'
+ font-style: normal
+ font-weight: 600
+ src: url('../fonts/archivo-v19-latin-600.woff2') format('woff2')
+}
+
+@font-face {
+ font-display: swap
+ font-family: 'Archivo'
+ font-style: normal
+ font-weight: 700
+ src: url('../fonts/archivo-v19-latin-700.woff2') format('woff2')
+}
+
+@font-face {
+ font-display: swap
+ font-family: 'Roboto'
+ font-style: normal
+ font-weight: 400
+ src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2')
+}
+
+@font-face {
+ font-display: swap
+ font-family: 'Roboto'
+ font-style: normal
+ font-weight: 700
+ src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2')
+} \ No newline at end of file
diff --git a/sass/footer.sass b/sass/footer.sass
index 0c9faf1..aae1e7f 100644
--- a/sass/footer.sass
+++ b/sass/footer.sass
@@ -1,176 +1,193 @@
-@import settings.sass
-
-footer
- div.footer__inner
-
- div.footer__logo-society
- display: grid
- grid-template-columns: 60px 1fr 191px
- grid-gap: 25px
- align-items: center
- +resp(sm)
- display: none
- div.footer__hr
- align-self: center
- img
- margin-bottom: 10px
- width: 100%
- +resp(md)
- border-bottom: 1px solid #E0DFDF
- div.footer__socials
- display: flex
- justify-content: space-between
- align-items: center
- padding-left: 6px
-
- div.footer__links-trustpilot
- display: flex
- justify-content: space-between
- margin-top: 36px
- +resp(sm)
- display: none
-
- div.footer__links
- display: flex
- +resp(md)
- flex-wrap: wrap
-
- div.footer__column
- display: grid
- grid-template-rows: auto 1fr
- margin-right: 48px
- +resp(lg)
- margin-right: 28px
- +resp(md)
- margin: 0 0 30px
- grid-template-rows: 34px 1fr
- &:nth-child(1)
- +resp(lg)
- width: 16%
- +resp(md)
- width: 40%
- &:nth-child(2)
- +resp(lg)
- width: 18%
- +resp(md)
- width: 60%
- &:nth-child(3)
- +resp(lg)
- width: 20%
- +resp(md)
- width: 40%
- &:nth-child(4)
- margin-right: 0
- +resp(lg)
- width: 32%
- +resp(md)
- width: 60%
-
- h3
- font-weight: 600
- font-size: 18px
- padding: 0 0 17px 0
- color: $black
-
- ul
- padding-left: 0
- list-style: none
- li
- padding: 5px 0
- a
- list-style: none
- font-weight: normal
- font-size: 16px
- line-height: 1.7
- color: #747577
- text-decoration: none
- +resp(md)
- font-size: 14px
- &:hover
- color: $orange
- text-decoration: underline
-
- div.footer__trustpilot
- justify-self: end
- border-left: 1px solid #E0DFDF
- padding-left: 33px
- +resp(lg)
- padding-left: 10px
- div#tp-widget-wrapper
- margin: 0
-
- div.footer__developer
- border-top: 1px solid #E0DFDF
- display: flex
- justify-content: space-between
- align-items: center
- padding: 40px 0
- margin-top: 37px
- +resp(sm)
- display: none
- div.footer__hosted
- display: flex
- align-items: center
- p
- font-weight: normal
- font-size: 13px
- line-height: 16px
- color: #ACACAD
- padding-right: 16px
- +resp(md)
- padding-right: 8px
- display: none
-
- div.footer__rights
- display: flex
- p, a
- font-weight: normal
- font-size: 15px
- line-height: 150%
- text-decoration: none
- color: #ACACAD
- padding-right: 30px
- +resp(md)
- font-size: 14px
- padding-right: 22px
- a:hover
- text-decoration: underline
- color: $orange
-
- div.footer__sm
- display: none
- +resp(sm)
- display: block
-
- div.footer__sm__contant
- border-top: 1px solid #ACACAD
- padding: 32px 0 23px
- div.footer__sm__logos
- display: flex
- justify-content: space-between
- align-items: center
- div.footer__sm__society
- max-width: 200px
- margin: 24px auto 17px
- display: flex
- justify-content: space-between
- div.footer__sm__developer
- p, a
- font-weight: normal
- font-size: 13px
- line-height: 16px
- color: #747577
- opacity: 0.5
- div.footer__sm__privacy-policy
- display: flex
- justify-content: center
- margin-bottom: 19px
- a
- text-decoration: none
- transition: 0.3s
- &:hover
- text-decoration: underline
- &:first-child
- margin-right: 20px
- div.footer__sm__rights
- text-align: center \ No newline at end of file
+@import settings
+
+footer
+ display: flex
+ justify-content: center
+ background-color: $grey-light2
+ +resolution(992)
+ padding-top: 60px
+ padding-bottom: 30px
+ +resolution(576, 991)
+ padding-top: 40px
+ padding-bottom: 30px
+ +resolution(0, 575)
+ padding-top: 30px
+ padding-bottom: 24px
+
+ .inner
+ width: 100%
+
+ .top
+ +resolution(992)
+ display: grid
+ grid-template-columns: auto 1fr
+
+ .sentrium-column
+ display: flex
+ +resolution(0, 575)
+ flex-direction: column
+ align-items: center
+ +resolution(0, 991)
+ width: 100%
+ justify-content: space-between
+ align-items: center
+ +resolution(992)
+ max-width: 227px
+ margin-right: 70px
+ flex-direction: column
+
+ div
+ display: flex
+ +resolution(0, 575)
+ flex-direction: column
+ +resolution(0, 991)
+ align-items: center
+ +resolution(992)
+ flex-direction: column
+
+ img
+ width: 66px
+ height: 46px
+
+ p
+ font-family: $a
+ color: $grey-dark
+ font-weight: 600
+ letter-spacing: $px
+ line-height: 1.4
+ +resolution(992)
+ margin-top: 24px
+ +resolution(576)
+ font-size: 18px
+ +resolution(576, 991)
+ width: 100%
+ max-width: 258px
+ +resolution(0, 991)
+ margin-left: 20px
+ +resolution(0, 575)
+ font-size: 16px
+ margin-top: 14px
+
+ a
+ background-color: $black
+ color: $white
+ font-family: $a
+ letter-spacing: $em
+ font-weight: 700
+ font-size: 14px
+ width: 140px
+ display: flex
+ justify-content: center
+ align-items: center
+ text-decoration: none
+ border-radius: 4px
+ height: 40px
+ +resolution(992)
+ margin-top: 40px
+ +resolution(0, 575)
+ margin-top: 16px
+
+ &:hover
+ background-color: $grey-dark
+
+ &:active
+ background-color: $white
+
+ .links-columns
+ +resolution(0, 991)
+ display: none
+ +resolution(992)
+ display: grid
+ grid-template-columns: 1fr 1fr 1fr 1fr
+
+ .links-column
+
+ h3
+ font-size: 16px
+ color: $black
+ letter-spacing: $em
+
+ ul
+ padding-left: 0
+ margin-top: 24px
+ list-style: none
+
+ li
+ margin-bottom: 12px
+
+ &:nth-last-child(1)
+ margin-bottom: 0
+
+ a
+ font-weight: normal
+ font-size: 16px
+ color: $grey-dark
+ text-decoration: none
+ font-family: $a
+ letter-spacing: $em
+
+ &:hover
+ color: $orange
+ text-decoration: underline
+
+ .bottom
+ display: flex
+ +resolution(992)
+ justify-content: space-between
+ align-items: center
+ margin-top: 43px
+ +resolution(576, 991)
+ margin-top: 30px
+ justify-content: space-between
+ align-items: center
+ +resolution(0, 576)
+ margin-top: 40px
+ justify-content: space-between
+ align-items: center
+ flex-direction: column-reverse
+
+ p
+ font-family: $a
+ font-weight: 400
+ letter-spacing: $em
+ color: $grey-dark2
+ +resolution(992)
+ font-size: 14px
+ +resolution(576, 991)
+ font-size: 16px
+ +resolution(0, 575)
+ font-size: 14px
+ margin-top: 24px
+
+ .social-logos
+ display: grid
+ grid-template-columns: 1fr 1fr 1fr 1fr
+ column-gap: 12px
+
+ a
+ text-decoration: none
+ width: 46px
+ height: 46px
+ display: flex
+ justify-content: center
+ align-items: center
+ background-color: $white
+ transition: outline 250ms linear
+ outline: none
+ border-radius: 2px
+ outline: none
+
+ svg
+ path
+ transition: fill 250ms linear
+
+ &:hover
+ svg
+ path
+ fill: $primary
+ &:active
+ outline: 1px solid $primary
+
+ svg
+ path
+ fill: $secondary
diff --git a/sass/footnotes.sass b/sass/footnotes.sass
new file mode 100644
index 0000000..db633a4
--- /dev/null
+++ b/sass/footnotes.sass
@@ -0,0 +1,10 @@
+@import settings.sass
+
+#footnotes
+ p
+ letter-spacing: $px
+ color: $grey-dark
+ +resolution(576)
+ font-size: 14px
+ +resolution(0, 575)
+ font-size: 13px
diff --git a/sass/forms.sass b/sass/forms.sass
index 505bae5..1f97534 100644
--- a/sass/forms.sass
+++ b/sass/forms.sass
@@ -1,77 +1,124 @@
-@import settings.sass
+@import settings
+
+.form,
+.application-form
+ display: flex
+ justify-content: center
+
+.form
+ +resolution(992)
+ padding: 40px 0 144px
+ +resolution(0, 991)
+ padding: 32px 0 64px
+
+input
+
+ &.error
+ outline: 1px solid $red !important
+ border: none !important
div.hbspt-form
- background-image: url(../img/forms/bg.svg)
- padding-top: 25px
- padding-bottom: 70px
- margin-top: 50px
- margin-bottom: 70px
- +resp(sm)
- padding-bottom: 50px
- padding-top: 15px
- +resp(esm)
- margin-top: 30px
- margin-bottom: 50px
-
- h1, h2, h3, h4, h5, h6
- color: $white
- text-align: center
-
- h2
- +resp(sm)
+ -webkit-box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.12)
+ -moz-box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.12)
+ box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.12)
+ border-radius: 8px
+ width: 100%
+ +resolution(576)
+ padding: 40px 65px
+ max-width: 945px
+ +resolution(0, 575)
+ padding: 32px 20px
+
+ h2,
+ h3
+ letter-spacing: $em
+ color: $black !important
+ +resolution(576)
+ font-size: 24px
margin-bottom: 12px !important
+ +resolution(0, 575)
+ font-size: 22px
+
+ span
+ color: $black !important
form
- max-width: 800px
- margin-left: auto
- margin-right: auto
- +resp(md)
+ max-width: 945px
+ +resolution(576, 991)
max-width: 100%
- padding-left: 50px
- padding-right: 50px
- +resp(esm)
- padding-left: 30px
- padding-right: 30px
> fieldset
max-width: 100%
margin-bottom: 20px
- +resp(sm)
+ +resolution(576, 991)
margin-bottom: 15px
+ &:nth-child(1):has(h3)
+ margin-bottom: 10px
+
+ &.form-columns-1
+
+ > div.hs-message
+
+ label
+ margin-bottom: 15px
+
+ &.form-columns-0
+
+ p
+ color: $grey-normal
+ letter-spacing: $px
+ font-weight: 600
+ +resolution(576)
+ font-size: 18px
+ +resolution(0, 575)
+ font-size: 14px
+
> div
> label
color: $white
display: block
font-size: 16px
+ margin-bottom: 4px
> span
- display: inline-block
margin-bottom: 10px
+ color: $grey-dark
+ letter-spacing: $em
+ line-height: 1.2
+ font-weight: 600
+ font-family: $a
+ +resolution(0, 575)
+ font-size: 14px
+ +resolution(576)
+ font-size: 16px
&:empty
display: none
+ &.hs-form-required
+ color: $red
+
> div.input
margin-right: 0 !important
display: flex
- textarea, input
+ textarea,
+ input
width: 100% !important
- color: $form-fields
+ color: $grey-normal
font-size: 16px
- font-family: sans-serif
- +resp(sm)
+ border: 1px solid $grey-light4
+ +resolution(576, 991)
font-size: 14px
- &.invalid
- border: 2px solid red
-
input
height: 46px
padding: 0 15px
- +resp(sm)
+ border-radius: 4px
+ border: 1px solid $grey-light4
+ +resolution(576, 991)
height: 41px
textarea
@@ -79,7 +126,7 @@ div.hbspt-form
padding: 12px 15px
resize: none
line-height: 140%
- +resp(sm)
+ +resolution(576, 991)
height: 53px
> ul.hs-error-msgs
@@ -91,7 +138,7 @@ div.hbspt-form
padding: 0 !important
margin: 7px 0 0 !important
font-size: 14px
- +resp(sm)
+ +resolution(576, 991)
margin-top: 5px !important
&:before
@@ -100,34 +147,34 @@ div.hbspt-form
&.form-columns-2
display: flex
justify-content: space-between
- +resp(sm)
+ +resolution(0, 760)
flex-direction: column
> div
float: none !important
width: calc(50% - 10px) !important
- +resp(sm)
+ +resolution(0, 760)
width: 100% !important
&:first-child
- +resp(sm)
+ +resolution(0, 760)
margin-bottom: 15px
&.form-columns-3
display: flex
justify-content: space-between
- +resp(sm)
+ +resolution(576, 991)
flex-direction: column
> div
float: none !important
width: calc(33.33% - 13px) !important
- +resp(sm)
+ +resolution(576, 991)
width: 100% !important
margin-bottom: 15px
&:last-child
- +resp(sm)
+ +resolution(576, 991)
margin-bottom: 0
> div.hs_recaptcha
@@ -137,24 +184,184 @@ div.hbspt-form
display: none
> div.hs-submit
-
+
> div.actions
- text-align: center
input[type=submit]
- background-color: $orange
- color: $black
+ border-radius: 4px
+ display: flex
+ justify-content: center
+ align-items: center
+ color: $white
+ font-family: $a
font-weight: 700
- font-size: 16px
- width: 245px
- height: 60px
- cursor: pointer
- border: 1px solid $orange
- transition: 0.3s
- +resp(sm)
- height: 50px
- +resp(esm)
+ letter-spacing: $em
+ border: none
+ transition: outline 250ms linear, background-color 250ms linear
+ z-index: 2
+ background-color: $secondary
+ padding: 12px 18px
+ +resolution(576)
+ font-size: 16px
+ height: 46px
+ +resolution(0, 375)
width: 100%
+ +resolution(0, 575)
+ height: 40px
+ font-size: 14px
&:hover
- background-color: $white \ No newline at end of file
+ background-color: $tretiary
+
+ &:active
+ background-color: $secondary
+ outline: 3px solid rgba(255, 144, 0, 0.25)
+
+.hs-error-msgs
+ display: none !important
+
+.input
+ input.error
+ border-width: 1px !important
+
+ textarea
+ font-family: $r
+ letter-spacing: $px
+ color: $grey-dark
+ +resolution(0, 575)
+ font-size: 14px
+ +resolution(576)
+ font-size: 16px
+
+.form-footer
+ border-radius: 8px
+ background-color: $grey-dark
+ +resolution(992)
+ padding: 34px 48px
+ margin-top: 80px
+ display: grid
+ grid-template-columns: 1fr 1fr
+ column-gap: 30px
+ +resolution(576, 991)
+ margin-top: 38px
+ padding: 26px 32px
+ +resolution(0, 575)
+ padding: 18px 24px 24px
+ margin-top: 48px
+ flex-direction: column
+ +resolution(0, 991)
+ display: flex
+
+ .inner
+ +resolution(576, 991)
+ max-width: 210px
+
+ h3
+ letter-spacing: $em
+ color: $white
+ +resolution(992)
+ font-size: 24px
+ +resolution(0, 991)
+ dont-size: 20px
+
+ p
+ font-size: 14px
+ font-family: $a
+ font-weight: 600
+ letter-spacing: $em
+ line-height: 1.2
+ color: $grey-light3
+ +resolution(0, 991)
+ margin-top: 4px
+
+ .form-div
+ +resolution(576, 991)
+ width: 100%
+ +resolution(0, 575)
+ margin-top: 16px
+
+ .hs_error_rollup
+ display: none
+
+ form
+ display: grid
+ +resolution(992)
+ grid-template-columns: 4fr 1fr
+ grid-column-gap: 30px
+ +resolution(576, 991)
+ grid-template-columns: 3fr 1fr
+ grid-column-gap: 10px
+
+ .hs_email
+ +resolution(992)
+ width: 95%
+ +resolution(576, 991)
+ width: 100%
+ height: 100%
+
+ .input
+ +resolution(992)
+ margin-right: 8px
+ width: 100%
+ +resolution(576, 991)
+ height: 100%
+ width: 95%
+ +resolution(0, 575)
+ width: 100%
+
+ input
+ font-family: $r
+ font-weight: 500
+ font-size: 16px
+ letter-spacing: $em
+ color: $grey-normal
+ width: inherit
+ border-radius: 4px
+ border: none
+ padding-block: 0
+ padding-inline: 0
+ +resolution(992)
+ padding: 14px 18px
+ +resolution(576, 991)
+ padding: 14px 18px
+ +resolution(0, 575)
+ padding: 10px 14px
+ box-sizing: border-box
+
+ .hs-submit
+ +resolution(0, 575)
+ margin-top: 12px
+
+ .actions
+ width: unset
+
+ input
+ height: 46px
+ background-color: $secondary
+ border-radius: 4px
+ display: flex
+ justify-content: center
+ align-items: center
+ color: $white
+ font-family: $a
+ font-weight: 700
+ letter-spacing: $em
+ border: none
+ transition: background-color 250ms linear
+ +resolution(576)
+ font-size: 16px
+ +resolution(992)
+ width: 120px
+ +resolution(576, 991)
+ width: 100px
+ +resolution(0, 575)
+ width: 100%
+ height: 40px
+ font-size: 14px
+
+ &:hover
+ background-color: $tretiary
+
+ &:active
+ background-color: $secondary
+ outline: 3px solid rgba(255, 144, 0, 0.25)
diff --git a/sass/front-page/banner.sass b/sass/front-page/banner.sass
index 51b6bcf..fd504a6 100644
--- a/sass/front-page/banner.sass
+++ b/sass/front-page/banner.sass
@@ -1,57 +1,75 @@
-@import ../settings.sass
-
-section.banner
- background-image: url("/img/front-page/banner/banner-bg.svg")
- background-position: bottom
- background-repeat: no-repeat
- background-size: cover
- padding: 77px 0 87px
- +resp(sm)
- background-image: url("/img/front-page/banner/banner-bg-sm.svg")
- padding: 45px 0 0
- div.sm-none
- +resp(sm)
- padding: 0
- div.banner__text-button
- max-width: 50%
- +resp(md)
- max-width: 60%
- +resp(sm)
- margin-bottom: 23px
- max-width: 100%
- h1
- padding-bottom: 57px
- +resp(sm)
- text-align: center
- padding-bottom: 51%
- padding-left: 20px
- padding-right: 20px
- div.banner__btn_container
- +resp(sm)
- background-color: $white
- display: flex
- justify-content: center
- padding-left: 20px
- padding-right: 20px
- a
- max-width: 311px
- width: 100%
- height: 58px
- background: $black
- border: 1px solid $black
- display: inline-flex
- margin-top: 23px
- align-items: center
- justify-content: center
- font-weight: 700
- font-size: 16px
- line-height: 15px
- color: $white
- text-decoration: none
- transition: 0.3s
- +resp(sm)
- height: 38px
- font-size: 14px
- &:hover
- background: $white
- color: $black \ No newline at end of file
+@import ../settings
+
+section.banner
+ background-color: $grey-light2
+ display: flex
+ justify-content: center
+ position: relative
+ overflow: hidden
+ +resolution(0, 575)
+ height: 386px
+ padding-top: 100px
+ +resolution(576, 991)
+ height: 433px
+ padding-top: 110px
+ +resolution(992)
+ height: 459px
+ padding-top: 74px
+ align-items: center
+
+ .containerCustom
+ position: relative
+ +resolution(0, 991)
+ justify-content: center
+
+ .image
+ position: absolute
+ z-index: 1
+ +resolution(0, 575)
+ bottom: 0
+ left: 50%
+ transform: translateX(-50%)
+ width: 373px
+ height: 225px
+ +resolution(576, 991)
+ bottom: 0
+ left: 50%
+ transform: translateX(-50%)
+ width: 550px
+ height: 300px
+ +resolution(992, 1100)
+ bottom: -220px
+ right: -20px
+ width: 528px
+ height: 320px
+ +resolution(1100, 1300)
+ bottom: -220px
+ right: -20px
+ width: 648px
+ height: 390px
+ +resolution(1300)
+ bottom: -220px
+ right: -150px
+ width: 758px
+ height: 457px
+
+ img
+ width: 100%
+ height: 100%
+
+ .innerDiv
+ +resolution(0, 991)
+ text-align: center
+
+ h1
+ +resolution(992)
+ max-width: 680px
+ +resolution(575, 991)
+ max-width: 709px
+
+ p
+ font-family: $a
+ font-weight: 600
+ letter-spacing: $px
+ color: $grey-normal
+ margin-top: 16px
diff --git a/sass/front-page/bottom-text.sass b/sass/front-page/bottom-text.sass
index 943c4b6..fce2d46 100644
--- a/sass/front-page/bottom-text.sass
+++ b/sass/front-page/bottom-text.sass
@@ -1,27 +1,34 @@
-@import ../settings.sass
-
-.bottom-text
- &__inner
- padding: 138px 0 182px
- max-width: 657px
- margin-left: auto
- text-align: center
- margin-right: auto
- +resp(lg)
- padding: 138px 250px 182px
- +resp(md)
- padding: 90px 50px 126px
- +resp(sm)
- padding: 56px 50px 64px
- +resp(esm)
- padding: 56px 20px 64px
- h2
- padding-bottom: 25px
- +resp(sm)
- padding-bottom: 0
- p
- font-size: 18px
- +resp(sm)
- font-size: 16px
- +resp(esm)
- font-size: 14px \ No newline at end of file
+@import ../settings
+
+.bottom-text
+ text-align: center
+ display: flex
+ justify-content: center
+ +resolution(992)
+ padding: 144px 0
+ +resolution(576, 991)
+ padding: 96px 0
+ +resolution(0, 575)
+ padding: 64px 0
+
+ div
+ display: flex
+ flex-direction: column
+
+ h2
+ letter-spacing: $em
+ color: $black
+ +resolution(576)
+ font-size: 34px
+ +resolution(0, 575)
+ font-size: 22px
+ p
+ letter-spacing: $px
+ font-weight: 500
+ color: $black2
+ +resolution(576)
+ font-size: 18px
+ margin-top: 24px
+ +resolution(0, 575)
+ font-size: 16px
+ margin-top: 16px
diff --git a/sass/front-page/canvas.sass b/sass/front-page/canvas.sass
new file mode 100644
index 0000000..e69cd00
--- /dev/null
+++ b/sass/front-page/canvas.sass
@@ -0,0 +1,21 @@
+.background
+ position: absolute
+ z-index: 0
+ +resolution(0, 575)
+ display: none
+ +resolution(576, 991)
+ top: -516px
+ right: -280px
+ +resolution(992)
+ top: -600px
+ +resolution(992, 1199)
+ right: -250px
+ +resolution(1200, 1300)
+ right: -220px
+ +resolution(1300)
+ right: -150px
+
+ canvas
+ +resolution(576)
+ width: 1024px !important
+ height: 840px !important
diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass
index 250982f..04ae9b6 100644
--- a/sass/front-page/inform-columns.sass
+++ b/sass/front-page/inform-columns.sass
@@ -1,83 +1,141 @@
-@import ../settings.sass
-
-section.inform-columns
-
- div.inform-column__inner
- display: grid
- grid-template-columns: 1fr 1fr
- grid-gap: 23px 30px
- +resp(lg)
- grid-gap: 20px
- +resp(sm)
- grid-template-columns: 1fr
-
- div.inform-column__item
- background: #F3F4F4
- display: grid
- grid-template-rows: auto 1fr auto
- grid-gap: 40px
- padding: 48px 54px 59px
- +resp(md)
- grid-gap: 25px
- padding: 30px 25px
- +resp(sm)
- padding: 30px 24px 40px
- grid-gap: 15px
- grid-template-rows: auto 1fr 65px
-
- div.inform-column__header
- display: flex
- align-items: center
- div.inform-column__icon
- padding-right: 19px
- div.inform-column__title
- h3
- font-weight: bold
- font-size: 28px
- line-height: 150%
- letter-spacing: 0.02em
- color: #000000
- +resp(sm)
- font-size: 21px
-
- div.inform-column__data
- p
- text-align: left
- margin-bottom: 29px
- font-size: 16px
- +resp(md)
- margin-bottom: 20px
- &:last-child
- margin-bottom: 10px
- +resp(sm)
- margin-bottom: 0
- +resp(sm)
- line-height: 180%
- font-size: 14px
- margin-bottom: 25px
-
- div.inform-column__button
- +resp(sm)
- align-self: end
- a.inform-column__btn
- max-width: 291px
- padding: 10px
- min-height: 38px
- color: #18191C !important
- display: flex
- align-items: center
- justify-content: center
- text-align: center
- background: $orange
- border: 1px solid $orange
- font-weight: 700
- font-size: 16px
- color: $black
- text-decoration: none
- transition: 0.3s
- line-height: 1.5
- +resp(sm)
- min-height: 28px
- font-size: 14px
- &:hover
- background: $white \ No newline at end of file
+@import ../settings
+
+section.inform-columns
+ display: flex
+ justify-content: center
+
+ .inner-div
+ display: grid
+ grid-template-columns: 1fr 1fr
+ grid-gap: 30px
+ +resolution(0, 991)
+ grid-template-columns: 1fr
+
+ .item
+ background: $light
+ position: relative
+ display: grid
+ grid-template-rows: auto 1fr auto
+ +resolution(576)
+ padding: 40px
+ +resolution(0, 575)
+ padding: 30px 20px
+
+ &:nth-child(odd)
+ &::before
+ content: ""
+ position: absolute
+ top: 0
+ left: 0
+ background-color: $white
+ clip-path: polygon(0 0, 0 100%, 100% 0)
+ +resolution(576)
+ width: 40px
+ height: 40px
+ +resolution(0, 575)
+ width: 20px
+ height: 20px
+
+ &::after
+ content: ""
+ position: absolute
+ bottom: 0
+ right: 0
+ background-color: $white
+ clip-path: polygon(100% 100%, 0 100%, 100% 0)
+ +resolution(576, 992)
+ width: 40px
+ height: 40px
+ +resolution(0, 575)
+ width: 20px
+ height: 20px
+
+ &:nth-child(2n)
+ &::before
+ content: ""
+ position: absolute
+ top: 0
+ left: 0
+ background-color: $white
+ clip-path: polygon(0 0, 0 100%, 100% 0)
+ +resolution(576)
+ width: 40px
+ height: 40px
+ +resolution(0, 575)
+ width: 20px
+ height: 20px
+
+ &::after
+ content: ""
+ position: absolute
+ bottom: 0
+ right: 0
+ background-color: $white
+ clip-path: polygon(100% 100%, 0 100%, 100% 0)
+ +resolution(576)
+ width: 40px
+ height: 40px
+ +resolution(0, 575)
+ width: 20px
+ height: 20px
+
+ .header
+ display: flex
+ flex-direction: column
+
+ img
+ width: 54px
+ height: 54px
+
+ div
+
+ h3
+ font-weight: bold
+ letter-spacing: $em
+ color: $black
+ margin-top: 16px
+ +resolution(992)
+ font-size: 24px
+ +resolution(0, 991)
+ font-size: 20px
+
+ .content
+ +resolution(992)
+ margin: 24px 0
+ +resolution(0, 991)
+ margin: 16px 0
+
+ p
+ text-align: left
+ font-size: 16px
+ +resolution(992)
+ margin-bottom: 20px
+ +resolution(0, 991)
+ margin-bottom: 15px
+ &:last-child
+ margin-bottom: 0
+
+ a
+ max-width: 291px
+ min-height: 58px
+ color: $black !important
+ display: flex
+ align-items: center
+ font-weight: 700
+ font-size: 16px
+ text-decoration: none
+ transition: 0.3s
+ letter-spacing: $em
+
+ &::after
+ content: url('/img/global/link-arrow.svg')
+ display: flex
+ margin-left: 15px
+ align-items: center
+ padding-top: 5px
+
+ &:hover
+ color: $secondary !important
+
+ &:active
+ color: $primary !important
diff --git a/sass/front-page/main-text.sass b/sass/front-page/main-text.sass
index c3b4fdd..3ed9773 100644
--- a/sass/front-page/main-text.sass
+++ b/sass/front-page/main-text.sass
@@ -1,20 +1,31 @@
-@import ../settings.sass
-
-section.main-text
- max-width: 884px
- margin-left: auto
- margin-right: auto
- padding: 143px 0
- text-align: center
- +resp(lg)
- padding: 143px 0
- +resp(md)
- padding: 90px 0
- +resp(sm)
- padding: 0 0 55px
- p
- font-size: 18px
- +resp(sm)
- font-size: 16px
- +resp(esm)
- font-size: 14px \ No newline at end of file
+@import ../settings
+
+section.main-text
+ display: flex
+ +resolution(0, 575)
+ padding: 64px 0
+ +resolution(576)
+ justify-content: center
+ +resolution(576, 991)
+ padding: 96px 0
+ +resolution(992)
+ padding: 144px 0
+
+ .containerCustom
+ +resolution(0, 575)
+ flex-direction: column
+
+ img
+ width: 72px
+ height: 72px
+
+ p
+ font-size: 18px
+ letter-spacing: $px
+ color: $grey-dark
+ +resolution(576)
+ font-size: 18px
+ margin-left: 30px
+ +resolution(0, 575)
+ font-size: 16px
+ margin-top: 16px
diff --git a/sass/front-page/navigation.sass b/sass/front-page/navigation.sass
new file mode 100644
index 0000000..5c0c545
--- /dev/null
+++ b/sass/front-page/navigation.sass
@@ -0,0 +1,16 @@
+.navigation
+ background: transparent
+ position: fixed
+ top: 0
+ right: 0
+ left: 0
+ z-index: 2
+ display: flex
+ justify-content: center
+ transition: background-color 250ms linear, box-shadow 250ms linear
+
+ &.background__white
+ background-color: $white
+
+ &.bottom-shadow
+ box-shadow: 0 4px 16px rgba(0, 0, 0, .12) \ No newline at end of file
diff --git a/sass/get-page/banner.sass b/sass/get-page/banner.sass
new file mode 100644
index 0000000..ac6eb52
--- /dev/null
+++ b/sass/get-page/banner.sass
@@ -0,0 +1,82 @@
+@import ../settings
+
+.get-page
+
+ .banner
+ background-color: $white
+ display: flex
+ justify-content: center
+ position: relative
+ overflow: hidden
+ +resolution(0, 575)
+ height: 232px
+ padding-top: 106px
+ +resolution(576, 991)
+ height: 248px
+ padding-top: 128px
+ +resolution(992)
+ height: 275px
+ padding-top: 128px
+ align-items: center
+
+ h1
+ letter-spacing: $em
+ +resolution(992)
+ font-size: 48px
+ +resolution(0, 991)
+ font-size: 28px
+
+ p
+ letter-spacing: $px
+ font-weight: 600
+ color: $grey-dark
+ margin-top: 16px
+ +resolution(992)
+ font-size: 18px
+ +resolution(0, 991)
+ font-size: 16px
+
+ .containerCustom
+ position: unset
+
+ .banner-div
+ width: 100%
+ border-bottom: 1px solid $grey-light3
+ text-align: center
+ +resolution(0, 575)
+ padding-bottom: 32px
+ +resolution(576, 991)
+ padding-bottom: 54px
+ +resolution(992)
+ padding-bottom: 74px
+
+ .left-shape
+ position: absolute
+ +resolution(992)
+ top: 0
+ left: 0
+ +resolution(576, 991)
+ top: -100px
+ left: -40px
+ +resolution(0, 575)
+ display: none
+
+ img
+ width: 280px
+ height: 280px
+
+ .right-shape
+ position: absolute
+ +resolution(992)
+ top: 0
+ right: 0
+ +resolution(576, 991)
+ top: -100px
+ right: -60px
+ +resolution(0, 575)
+ top: -100px
+ right: -60px
+
+ img
+ width: 385px
+ height: 400px
diff --git a/sass/get-page/main.sass b/sass/get-page/main.sass
new file mode 100644
index 0000000..48f043a
--- /dev/null
+++ b/sass/get-page/main.sass
@@ -0,0 +1,7 @@
+@import ../settings
+@import banner
+
+.get-page
+
+ .containerCustom
+ flex-direction: column \ No newline at end of file
diff --git a/sass/google-analytics-message.sass b/sass/google-analytics-message.sass
index 3789f86..91a1ea9 100644
--- a/sass/google-analytics-message.sass
+++ b/sass/google-analytics-message.sass
@@ -1,70 +1,141 @@
-@import settings.sass
+@import settings
.google-analytics-message
position: fixed
left: 0
- right: 0
bottom: 0
- height: auto
+ z-index: 2
display: none
- align-items: center
+ width: 100%
background-color: $white
- box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08)
- padding: 44px 0
- +resp(lg)
- padding: 28px 0
- +resp(sm)
- padding: 20px 0
- +resp(esm)
- padding: 13px 0
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12)
+ +resolution(0, 991)
+ padding: 32px
+ +resolution(992, 1200)
+ padding: 32px 50px
+ +resolution(1201)
+ padding: 32px
+
&.open
display: flex
- &__content
+ justify-content: center
+ box-sizing: border-box
+
+ .containerCustom
display: flex
- align-items: center
- &__img
- border-right: 1px solid #E0DFDF
- padding-right: 21px
- &__text
- p
- padding-left: 20px
- line-height: 160%
- font-size: 15px
- hyphens: inherit
- +resp(md)
- font-size: 14px
- p:first-child
- margin-bottom: 16px
- &__buttons
- text-align: right
- margin-top: 20px
- +resp(esm)
- text-align: inherit
- display: flex
- &__accept, &__decline
- height: 40px
- width: 151px
- font-weight: 700
- cursor: pointer
- outline: none
- transition: 0.3s
- +resp(esm)
- width: 50%
- &__accept
- background-color: $orange
- border: 1px solid $orange
- color: $black
- margin-right: 6px
- +resp(esm)
- margin-right: 5px
- &:hover
- background-color: $white
- &__decline
- background-color: $black
- border: 1px solid $black
- color: $white
- +resp(esm)
- margin-left: 5px
+ flex-direction: column
+ position: relative
+ box-sizing: border-box
+ +resolution(0, 575)
+ padding: 0
+ +resolution(576)
+ padding: 0
+ +resolution(992, 1200)
+ max-width: unset
+
+ svg
+ position: absolute
+ z-index: 3
+ right: 0
+ width: 18px
+ height: 18px
+ top: 0
+ stroke: $grey-dark
+ transition: stroke 250ms linear
+
&:hover
- background-color: $white
- color: $black \ No newline at end of file
+ stroke: $primary
+ &:active
+ stroke: $secondary
+
+ h5
+ font-weight: 600
+ letter-spacing: -0.04em
+ +resolution(0, 575)
+ font-size: 16px
+ +resolution(576)
+ font-size: 20px
+
+ p
+ font-family: $r
+ letter-spacing: $em
+ color: $grey-dark
+ font-weight: 400
+ margin-top: 16px
+ +resolution(0, 575)
+ font-size: 14px
+ +resolution(576)
+ font-size: 16px
+ +resolution(992)
+ max-width: 95%
+
+ .buttons
+ display: grid
+ margin-top: 24px
+ +resolution(576)
+ grid-template-columns: auto auto 1fr
+ grid-column-gap: 20px
+ +resolution(0, 575)
+ grid-column-gap: 10px
+ grid-template-columns: 1fr 1fr
+
+ .accept,
+ .decline
+ height: 40px
+ border-radius: 4px
+ display: flex
+ justify-content: center
+ align-items: center
+ font-family: $a
+ font-weight: 700
+ letter-spacing: $em
+ font-size: 16px
+ +resolution(576)
+ width: 120px
+ +resolution(0, 575)
+ width: 100%
+
+ .accept
+ color: $white
+ border: none
+ transition: outline 250ms linear
+ position: relative
+ z-index: 2
+ background-color: #FFBF12
+
+ &::before
+ content: ''
+ position: absolute
+ top: 0
+ left: 0
+ background: linear-gradient(135deg, #FF9000 0%, #FFBF12 100%)
+ width: 100%
+ height: 100%
+ transition: opacity 0.250s linear
+ z-index: -1
+ border-radius: 4px
+
+ &:hover
+ &::before
+ opacity: 0.2
+
+ &:active
+ outline: 3px solid rgba(255, 144, 0, 0.25)
+
+ &::before
+ opacity: 0.80
+
+ .decline
+ color: $black
+ border: 2px solid $primary
+ background-color: transparent
+ transition: color 250ms linear, outline 250ms linear, border-color 250ms linear
+
+ &:hover
+ color: $primary
+ border-color: $secondary
+
+ &:active
+ color: $black
+ border-coolor: $primary
+ outline: 3px solid rgba(255, 144, 0, 0.25)
diff --git a/sass/header.sass b/sass/header.sass
index 27c5efa..b21c375 100644
--- a/sass/header.sass
+++ b/sass/header.sass
@@ -1,82 +1,141 @@
-@import settings.sass
-
-header
- background: $white
- box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07)
- padding: 20px 0
- position: relative
- +resp(md)
- padding: 15px 0
- position: sticky
- top: 0
- z-index: 2
- +resp(esm)
- padding: 10px 0
- +resp(xsm)
- padding: 5px 0
-
- div.header__inner
- display: flex
- justify-content: space-between
- +resp(sm)
- align-items: center
-
- div.header__logo-side
- display: flex
- align-items: center
- a.header__logo
- display: inherit
- margin-right: 30px
- +resp(lg)
- margin-right: 16px
- +resp(md)
- margin-right: 10px
- div.header__text
- font-weight: 500
- line-height: 25px
- +resp(sm)
- display: none
- p
- font-size: 16px
- color: #ACACAD
- +resp(md)
- font-size: 15px
- +resp(sm)
- display: none
-
- div.header__links-side
- display: flex
- align-items: center
- +resp(xsm)
- flex-wrap: wrap
- justify-content: flex-end
- a
- font-weight: 600
- font-size: 15px
- line-height: 140%
- text-transform: uppercase
- text-decoration: none
- color: $black
- transition: 0.3s
- margin-left: 31px
- text-align: center
- +resp(lg)
- font-size: 14px
- margin-left: 20px
- +resp(esm)
- margin-left: 14px
- +resp(usm)
- font-size: 13px
- +resp(xsm)
- line-height: 180%
- font-size: 14px
- margin-left: 24px
- &:nth-child(1)
- margin-left: 0
- &:nth-child(3)
- +resp(usm)
- max-width: 100px
- +resp(xsm)
- max-width: 100%
- &:hover
- color: $orange \ No newline at end of file
+@import settings
+
+header
+ position: fixed
+ top: 0
+ left: 0
+ z-index: 11
+
+ .logo
+ display: flex
+ align-items: center
+
+ p
+ +resolution(992)
+ font-size: 16px
+ font-weight: 600
+ letter-spacing: $em
+ color: $grey-normal
+ +resolution(0, 991)
+ display: none
+
+ a
+ +resolution(992)
+ margin-right: 20px
+
+ .header
+ display: flex
+ justify-content: space-between
+ align-items: center
+ height: 74px
+ width: 100%
+ +resolution(0, 575)
+ border-bottom: 1px solid $grey-light
+
+ .links
+ display: flex
+ align-items: center
+ +resolution(0, 575)
+ display: none
+
+ a
+ font-weight: 700
+ font-family: $a
+ color: $black
+ letter-spacing: $em
+ text-decoration: none
+ display: flex
+ align-items: center
+ height: 24px
+ transition: color 250ms linear
+ +resolution(576, 991)
+ font-size: 13px
+ margin-right: 10px
+ +resolution(992)
+ font-size: 14px
+ margin-right: 20px
+ +resolution(0, 575)
+ font-size: 18px
+
+ &:hover
+ color: $primary
+
+ &:last-child
+ &:hover
+ span
+ color: $primary
+
+ img
+ +resolution(576)
+ margin-right: 5px
+
+ span
+ color: $grey-dark
+ font-size: 14px
+ font-family: $a
+ font-weight: 700
+ letter-spacing: $em
+ transition: color 250ms linear
+
+ &::before
+ content: ''
+ display: block
+ width: 1px
+ height: 100%
+ background-color: $grey-light3
+ +resolution(576)
+ margin-right: 20px
+
+.mobile-menu
+ +resolution(576)
+ display: none
+
+ .upper-part
+ width: 100%
+ height: 74px
+ display: flex
+ align-items: center
+
+ img
+ width: 32px
+ height: 32px
+
+ > img
+ margin-left: 20px
+
+ .bottom-part
+ width: 100%
+ position: absolute
+ top: 100%
+ left: 0
+ z-index: 11
+ display: flex
+ flex-direction: column
+ justify-content: center
+ background: rgb(24 25 28 / 40%)
+ height: 100vh
+ justify-content: flex-start
+
+ .bottom-menu
+ width: 100%
+ padding: 0 15px 32px
+ background: $white
+
+ a
+ padding: 24px 0
+ max-height: 64px
+ display: flex
+ align-items: center
+ font-weight: 700
+ font-family: $a
+ color: $black
+ letter-spacing: $em
+ text-decoration: none
+ font-size: 18px
+ border-bottom: 1px solid $grey-light
+
+ .not__visible
+ display: none
+
+ .visible
+ display: flex
diff --git a/sass/lists.sass b/sass/lists.sass
new file mode 100644
index 0000000..64e9d81
--- /dev/null
+++ b/sass/lists.sass
@@ -0,0 +1,71 @@
+@import settings
+
+ul
+ list-style: none
+ padding-left: 0
+ margin-top: 16px !important
+
+ li
+ position: relative
+ padding-left: 25px
+ font-weight: 500
+ color: $grey-dark
+ letter-spacing: $px
+ +resolution(0, 575)
+ font-size: 16px
+ +resolution(576)
+ font-size: 18px
+
+ &:not(&:last-child)
+ margin-bottom: 12px
+
+ &:before
+ position: absolute
+ left: 10px
+ content: ''
+ display: flex
+ justify-content: center
+ align-items: center
+ border-radius: 50%
+ width: 5px
+ height: 5px
+ background-color: $grey-dark
+
+.legacy-lts,
+.why-contribute,
+.image-signatures,
+div#rolling-current
+ ul
+ li
+ &:before
+ top: 50%
+ transform: translate(-50%, -50%)
+
+.nightly-builds,
+.start,
+.lts
+ ul
+ li
+ &:before
+ transform: translate(-50%, -50%)
+ +resolution(992)
+ top: 50%
+ +resolution(576, 991)
+ top: 10px
+ +resolution(0, 575)
+ top: 8px
+
+.guidelines
+ ul
+ li
+ &:before
+ top: 10px
+ transform: translateX(-50%)
+
+.links-columns
+ ul
+ li
+ padding-left: 0
+
+ &:before
+ content: none
diff --git a/sass/main.sass b/sass/main.sass
index 4b513cd..5767658 100644
--- a/sass/main.sass
+++ b/sass/main.sass
@@ -1,104 +1,92 @@
-@import settings.sass
-
-body
- font-family: sans-serif
- margin: 0
- color: $black
-
-h1, h2, h3, h4, h5, p, ul, li
- margin: 0
-
-h1
- font-weight: 800
- font-size: 45px
- line-height: 120%
- letter-spacing: 0.02em
- color: $black
- +resp(sm)
- font-size: 32px
- +resp(esm)
- font-size: 28px
-h2
- font-weight: 800
- font-size: 32px
- line-height: 140%
- +resp(sm)
- font-size: 21px
-p
- font-weight: normal
- line-height: 180%
- font-size: 16px
- color: $black
- +resp(esm)
- font-size: 14px
- @supports (hyphens: auto)
- text-align: justify
- hyphens: auto
-
-pre, code, sample
- white-space: pre-wrap
- hyphens: none
-
-div.container
- max-width: 1340px
- margin: 0 auto
- padding-left: 15px
- padding-right: 15px
- &.small
- max-width: 1000px
-
-#content
- padding-top: 60px
- padding-bottom: 50px
- +resp(sm)
- padding-top: 40px
- padding-bottom: 20px
- +resp(esm)
- padding-top: 30px
- h1
- margin-bottom: 25px
- +resp(esm)
- margin-bottom: 15px
- h2
- margin-top: 25px
- margin-bottom: 20px
- +resp(esm)
- margin-top: 20px
- margin-bottom: 15px
- p
- margin: 15px 0
- +resp(esm)
- margin: 9px 0
- ul
- list-style: none
- +resp(sm)
- padding-left: 25px
- +resp(esm)
- padding-left: 15px
- li
- padding-left: 25px
- margin: 16px 0
- line-height: 150%
- +resp(esm)
- font-size: 14px
- margin: 13px 0
- &:before
- position: absolute
- margin-top: 1px
- margin-left: -25px
- content: url('../img/global/list-element.svg')
- +resp(esm)
- margin-top: 2px
- a
- color: $dark-orange
- &:hover
- text-decoration: none
-
-@import header.sass
-@import front-page/banner.sass
-@import front-page/main-text.sass
-@import front-page/inform-columns.sass
-@import front-page/bottom-text.sass
-@import forms.sass
-@import footer.sass
-@import google-analytics-message.sass \ No newline at end of file
+@import settings.sass
+@import header
+@import ./front-page/banner
+@import front-page/main-text
+@import front-page/inform-columns
+@import front-page/bottom-text
+@import forms
+@import footer
+@import google-analytics-message
+@import front-page/navigation
+@import containerCustom
+@import front-page/canvas
+@import ./get-page/main
+@import content-div
+@import ./contribute-page/main
+@import ./nightly-builds-page/main
+@import ./contributor-subs-page/main
+@import lists
+@import footnotes
+
+body
+ font-family: $r
+ margin: 0
+ color: $black
+
+h1, h1,h3, h4, h5, h6
+ font-family: $a
+
+h1, h2, h3, h4, h5, p, ul, li
+ margin: 0
+
+h1
+ line-height: 120%
+ letter-spacing: $em
+ color: $black
+ +resolution(992)
+ font-size: 48px
+ +resolution(575, 991)
+ font-size: 36px
+ +resolution(0, 575)
+ font-size: 28px
+
+h2
+ font-weight: 800
+ font-size: 32px
+ line-height: 140%
+ +resolution(0, 991)
+ font-size: 21px
+
+p
+ font-weight: normal
+ line-height: 180%
+ font-size: 16px
+ color: $black
+ +resolution(576)
+ font-size: 18px
+ +resolution(0, 575)
+ font-size: 16px
+ @supports (hyphens: auto)
+ hyphens: auto
+
+pre
+ white-space: pre-wrap
+
+ code,
+ sample
+ hyphens: none
+ line-height: 1.7
+ word-wrap: break-word
+ padding: 4px 6px
+ background-color: $grey-light2
+ border-radius: 4px
+ border: 1px solid $grey-light
+ +resolution(576)
+ font-size: 16px
+ +resolution(0, 575)
+ font-size: 14px
+
+p
+ code,
+ sample
+ hyphens: none
+ line-height: 1.7
+ word-wrap: break-word
+ padding: 4px 6px
+ background-color: $grey-light2
+ border-radius: 4px
+ border: 1px solid $grey-light
+ +resolution(576)
+ font-size: 14px
+ +resolution(0, 575)
+ font-size: 13px
diff --git a/sass/nightly-builds-page/banner.sass b/sass/nightly-builds-page/banner.sass
new file mode 100644
index 0000000..36c2f7a
--- /dev/null
+++ b/sass/nightly-builds-page/banner.sass
@@ -0,0 +1,94 @@
+@import ../settings
+
+.nightly-builds-page
+
+ .banner
+ background-color: $white
+ display: flex
+ justify-content: center
+ position: relative
+ overflow: hidden
+ +resolution(0, 575)
+ height: 175px
+ padding-top: 50px
+ +resolution(576, 991)
+ height: 248px
+ padding-top: 128px
+ +resolution(992)
+ height: 275px
+ padding-top: 128px
+ align-items: center
+
+ h1
+ letter-spacing: $em
+ +resolution(992)
+ font-size: 48px
+ +resolution(0, 991)
+ font-size: 28px
+
+ p
+ letter-spacing: $px
+ font-weight: 600
+ color: $grey-dark
+ margin-top: 16px
+ max-width: 945px
+ +resolution(992)
+ font-size: 18px
+ +resolution(0, 991)
+ font-size: 16px
+
+ a
+ color: $primary
+ +resolution(0, 575)
+ text-decoration: none
+
+ &:hover
+ text-decoration: none
+
+ .containerCustom
+ position: unset
+
+ .banner-div
+ width: 100%
+ border-bottom: 1px solid $grey-light3
+ text-align: center
+ display: flex
+ flex-direction: column
+ align-items: center
+ +resolution(0, 575)
+ padding-bottom: 32px
+ +resolution(576, 991)
+ padding-bottom: 54px
+ +resolution(992)
+ padding-bottom: 74px
+
+ .left-shape
+ position: absolute
+ +resolution(992)
+ top: 0
+ left: 0
+ +resolution(576, 991)
+ top: -100px
+ left: -40px
+ +resolution(0, 575)
+ display: none
+
+ img
+ width: 280px
+ height: 280px
+
+ .right-shape
+ position: absolute
+ +resolution(992)
+ top: 0
+ right: 0
+ +resolution(576, 991)
+ top: -100px
+ right: -60px
+ +resolution(0, 575)
+ top: -100px
+ right: -60px
+
+ img
+ width: 385px
+ height: 400px
diff --git a/sass/nightly-builds-page/main.sass b/sass/nightly-builds-page/main.sass
new file mode 100644
index 0000000..a0a9599
--- /dev/null
+++ b/sass/nightly-builds-page/main.sass
@@ -0,0 +1,7 @@
+@import ../settings
+@import banner
+
+.nightly-builds-page
+
+ .containerCustom
+ flex-direction: column \ No newline at end of file
diff --git a/sass/settings.sass b/sass/settings.sass
index 7628830..bd4a698 100644
--- a/sass/settings.sass
+++ b/sass/settings.sass
@@ -1,42 +1,40 @@
-// colors
-$white : #ffffff
-$orange : #FFBE12
-$black : #18191C
-$grey : #747577
-$dark-orange: #FD8F01
-$form-fields: #666666
-
-// mixins
-@mixin resp($media)
- // 1200px and up
- @if $media == xlg
- @media only screen and (min-width: 1200px)
- @content
- // 1400px and down
- @if $media == elg
- @media only screen and (max-width: 1400px)
- @content
- // 1199px and down
- @if $media == lg
- @media only screen and (max-width: 1199px)
- @content
- // 991px and down
- @if $media == md
- @media only screen and (max-width: 991px)
- @content
- // 767px and down
- @if $media == sm
- @media only screen and (max-width: 767px)
- @content
- // 575px and down
- @if $media == esm
- @media only screen and (max-width: 575px)
- @content
- // 450px and down
- @if $media == usm
- @media only screen and (max-width: 450px)
- @content
- // 375px and down
- @if $media == xsm
- @media only screen and (max-width: 375px)
- @content \ No newline at end of file
+// colors
+$white: #FFFFFF
+$orange: #FFBE12
+$black: #121010
+$grey: #747577
+$primary: #FD8F01
+$secondary: #FFAE12
+$tretiary: #FFBF12
+$grey-light: #E1E4E5
+$grey-normal: #8D9499
+$grey-light2: #FAFAFA
+$grey-dark: #525659
+$grey-light3: #C4C9CC
+$grey-light4: #C6C9CC
+$grey-dark2: #636A6D
+$black2: #18191C
+$light: #F6F7F7
+$red: #FF4057
+
+// gradients
+$lg1: linear-gradient(135deg, #FF9000 0%, #FFBF12 100%)
+
+//fonts
+$a: 'Archivo', sans-serif
+$r: 'Roboto', sans-serif
+
+//letter-spacings
+$em: -0.02em
+$px: -0.5px
+
+// mixins
+@mixin resolution($minSize, $maxSize: false)
+
+ @if $minSize and $maxSize
+ @media only screen and (min-width: $minSize + 'px') and (max-width: $maxSize + 'px')
+ @content
+
+ @else
+ @media only screen and (min-width: $minSize + 'px')
+ @content
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-04 02:31:54 +0000