-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.8d4ede96.css.map
1 lines (1 loc) · 23.6 KB
/
index.8d4ede96.css.map
1
{"mappings":"A,sFGAA,0CAGI,iDAMJ,6CAMA,yIAWA,uBAIA,mBAIA,2IEjCI,yBFiCJ,uBAcI,6BGhDJ,wGDCI,yBCDJ,qEAWQ,uCAKJ,uBAIA,6BAKJ,uEDxBI,yBC+BJ,gDAMA,4FAKI,yCD1CA,yBCqCJ,0LAoBQ,+FAOA,qCAIA,6EAQA,iDAMR,8BAIA,gDAUA,kCDhGI,yBCgGJ,8EAaQ,kDDvGJ,yBC6GQ,mIAKA,kIDxHR,yBCgIQ,kDAMA,oDAMR,sLAQA,uIAKA,wGAGA,2GAKJ,2KD3JI,yBC2JJ,yGAiBI,uFDlLA,yBCkLA,2DAYJ,2DAKI,yIAOI,qDD1MJ,yBCmMA,sCDnMA,yBC8LJ,+EC/LA,iDFCI,yBEDJ,gFAMQ,iCAGA,kCFFJ,yBEPJ,uEA2BA,mGF1BI,yBE0BJ,8DAaA,iKASI,sDFhDA,yBEgDA,sCASA,4EFzDA,yBEyDA,gCFzDA,yBEuCJ,yEAoCA,oEF3EI,yBE2EJ,eAQQ,sBAMR,8GAQA,oLFjGI,yBEiGJ,wIAcA","sources":["index.8d4ede96.css","style.css","sass/abstracts/_typography.scss","sass/_reset.scss","sass/abstracts/_colors.scss","sass/abstracts/_mixins.scss","sass/components/_header.scss","sass/components/_content.scss","sass/abstracts/_variables.scss"],"sourcesContent":["@import \"https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&display=swap\";\n* {\n margin: 0;\n padding: 0;\n font-family: Epilogue;\n}\n\n*, :before, :after {\n box-sizing: border-box !important;\n}\n\nhtml {\n width: 100%;\n height: 100vh;\n overflow: hidden;\n}\n\nbody {\n width: 100%;\n height: 100vh;\n background-color: #fafafa;\n flex-direction: column;\n padding: .1rem;\n display: flex;\n position: relative;\n overflow: hidden;\n}\n\na {\n text-decoration: none;\n}\n\nul {\n list-style: none;\n}\n\n.attribution {\n width: fit-content;\n text-align: center;\n z-index: 9;\n font-size: 11px;\n position: absolute;\n bottom: 1rem;\n left: 50%;\n transform: translateX(-50%);\n}\n\n@media (max-width: 700px) {\n .attribution {\n bottom: 0;\n }\n}\n\n.attribution a {\n color: #3e52a3;\n}\n\nheader {\n flex: 0 auto;\n grid-template-columns: max-content 1fr;\n align-items: center;\n padding: .75rem;\n display: grid;\n}\n\n@media (max-width: 700px) {\n header {\n justify-content: space-between;\n align-items: center;\n display: flex;\n }\n\n header .sidebar-toggler {\n display: block;\n }\n}\n\nheader a {\n color: #696969;\n}\n\nheader a:hover {\n color: #141414;\n}\n\n.overlay {\n background-color: #0003;\n display: none;\n position: absolute;\n inset: 0;\n}\n\n@media (max-width: 700px) {\n .links-container.opened ~ .overlay {\n display: block;\n }\n}\n\n.links-container {\n justify-content: space-between;\n align-items: center;\n padding: 0 5%;\n display: flex;\n}\n\n.links-container .close-btn {\n display: none;\n}\n\n@media (max-width: 700px) {\n .links-container {\n min-width: 50%;\n z-index: 9999999;\n width: 70%;\n background-color: #fff;\n transition: transform .5s;\n display: inline-block;\n position: absolute;\n inset: 0 0 0 auto;\n transform: translateX(100%);\n }\n\n .links-container .close-btn {\n width: 100%;\n text-align: right;\n padding-top: .5rem;\n display: inline-block;\n }\n\n .links-container.closed {\n display: none;\n }\n\n .links-container.openinig, .links-container.closing {\n transform: translateX(100%);\n }\n\n .links-container.opened {\n transform: translateX(0%);\n }\n}\n\n.sidebar-toggler {\n display: none;\n}\n\n@keyframes slide-in {\n to {\n transform: translateX(0%);\n }\n}\n\n.nav-links {\n gap: .8rem;\n display: flex;\n}\n\n@media (max-width: 700px) {\n .nav-links {\n flex-direction: column;\n gap: 2rem;\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n}\n\n.nav-link.collapse .dropdown-content {\n display: none;\n}\n\n@media (min-width: 700px) {\n .nav-link.collapse:nth-of-type(1) .dropdown-content, .nav-link.collapsed:nth-of-type(1) .dropdown-content {\n transform: translateX(-40%);\n }\n\n .nav-link.collapse:nth-of-type(2) .dropdown-content, .nav-link.collapsed:nth-of-type(2) .dropdown-content {\n transform: translateX(0%);\n }\n}\n\n@media (max-width: 700px) {\n .nav-link.collapse .dropdown-content {\n display: none;\n }\n\n .nav-link.collapsed .dropdown-content {\n display: flex;\n }\n}\n\n.nav-link.collapsed > a:after, .nav-link.collapse > a:after {\n content: \"\";\n filter: hue-rotate() saturate(0%) brightness(41%);\n background-position: center;\n background-repeat: no-repeat;\n padding: 0 .75rem;\n}\n\n.nav-link.collapsed:hover a:after, .nav-link.collapse:hover a:after {\n filter: hue-rotate() saturate(0%) brightness(8%);\n mix-blend-mode: darken;\n}\n\n.nav-link[aria-expanded=\"true\"] > a:after {\n background-image: url(\"icon-arrow-up.6a7e667c.svg\");\n}\n\n.nav-link[aria-expanded=\"false\"] > a:after {\n background-image: url(\"icon-arrow-down.bdcd1654.svg\");\n}\n\n.nav-link .dropdown-content {\n background-color: #fff;\n border: none;\n flex-direction: column;\n gap: 1.5rem;\n margin-top: 1rem;\n padding: 1.25rem .25rem;\n display: flex;\n transform: translateX(0%);\n}\n\n@media (min-width: 700px) {\n .nav-link .dropdown-content {\n border-radius: 1rem;\n gap: 1rem;\n position: absolute;\n box-shadow: 0 0 1.5rem #c2c7d6;\n }\n}\n\n.nav-link .dropdown-content li {\n align-items: center;\n gap: 1rem;\n padding: 0 1rem;\n display: flex;\n}\n\n@media (max-width: 700px) {\n .nav-link .dropdown-content li {\n justify-content: flex-start;\n }\n}\n\n.header-right {\n align-items: baseline;\n gap: 1.5rem;\n display: flex;\n}\n\n.header-right .signup-btn {\n text-align: center;\n border: 2px solid #696969;\n border-radius: .5rem;\n padding: .75rem 1rem;\n transition: border-color .3s;\n}\n\n.header-right .signup-btn:hover {\n border-color: #141414;\n}\n\n@media (max-width: 700px) {\n .header-right .signup-btn {\n width: 100%;\n }\n}\n\n@media (max-width: 700px) {\n .header-right {\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n}\n\n.main-content {\n height: 100%;\n flex: auto;\n display: grid;\n}\n\n@media (max-width: 700px) {\n .main-content {\n grid-template-rows: max-content 1fr;\n grid-template-areas: \"two\"\n \"one\";\n }\n\n .main-content .one {\n grid-area: one;\n }\n\n .main-content .two {\n grid-area: two;\n }\n}\n\n@media (min-width: 700px) {\n .main-content {\n grid-template-columns: repeat(2, 1fr);\n padding: 3% 10vw 10%;\n }\n}\n\n.content {\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 4rem;\n display: flex;\n}\n\n@media (max-width: 700px) {\n .content {\n text-align: center;\n align-items: center;\n font-size: 12px;\n }\n}\n\n.site-description {\n font-size: inherit;\n max-width: 450px;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 2.5em;\n padding-top: .5rem;\n display: flex;\n}\n\n.site-description h2 {\n font-size: 4.25em;\n font-weight: 700;\n}\n\n@media (max-width: 700px) {\n .site-description h2 {\n font-size: 3.5em;\n }\n}\n\n.site-description p {\n color: #696969;\n width: 45ch;\n font-size: 18px;\n line-height: 1.5;\n}\n\n@media (max-width: 700px) {\n .site-description p {\n width: 90vw;\n }\n}\n\n@media (max-width: 700px) {\n .site-description {\n justify-content: flex-start;\n align-items: center;\n gap: 2em;\n }\n}\n\n.icons {\n font-size: inherit;\n align-items: center;\n gap: 1.75em;\n display: flex;\n}\n\n@media (max-width: 700px) {\n .icons {\n gap: 1em;\n }\n\n .icons img {\n width: 4em;\n }\n}\n\n.learn-more-btn {\n color: #fafafa;\n background-color: #141414;\n border-radius: .5rem;\n padding: .8rem 1.6rem;\n display: block;\n}\n\n.bg-img {\n min-width: 36vw;\n background-image: url(\"image-hero-desktop.c1bb6ff0.png\");\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain !important;\n}\n\n@media (max-width: 700px) {\n .bg-img {\n height: calc(28vh + 20vw);\n background-image: url(\"image-hero-mobile.5c6e0988.png\");\n background-size: cover !important;\n }\n}\n\n.row-span-2 {\n grid-template-rows: span 2;\n}\n\n/*# sourceMappingURL=index.8d4ede96.css.map */\n","@import url(\"https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&display=swap\");\n* {\n padding: 0;\n margin: 0;\n font-family: \"Epilogue\";\n}\n*, *::before, *::after {\n box-sizing: border-box !important;\n}\n\nhtml {\n width: 100%;\n height: 100vh;\n overflow: hidden;\n}\n\nbody {\n width: 100%;\n position: relative;\n height: 100vh;\n display: flex;\n padding: 0.1rem;\n flex-direction: column;\n background-color: hsl(0deg, 0%, 98%);\n overflow: hidden;\n}\n\na {\n text-decoration: none;\n}\n\nul {\n list-style: none;\n}\n\n.attribution {\n width: fit-content;\n font-size: 11px;\n text-align: center;\n position: absolute;\n left: 50%;\n bottom: 1rem;\n transform: translateX(-50%);\n z-index: 9;\n}\n@media (max-width: 700px) {\n .attribution {\n bottom: 0;\n }\n}\n.attribution a {\n color: hsl(228deg, 45%, 44%);\n}\n\nheader {\n display: grid;\n grid-template-columns: max-content 1fr;\n padding: 0.75rem 0.75rem;\n align-items: center;\n flex: auto 0;\n}\n@media (max-width: 700px) {\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n header .sidebar-toggler {\n display: block;\n }\n}\nheader a {\n color: hsl(0deg, 0%, 41%);\n}\nheader a:hover {\n color: hsl(0deg, 0%, 8%);\n}\n\n.overlay {\n position: absolute;\n inset: 0;\n display: none;\n background-color: rgba(0, 0, 0, 0.2);\n}\n\n@media (max-width: 700px) {\n .links-container.opened ~ .overlay {\n display: block;\n }\n}\n\n.links-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 5%;\n}\n.links-container .close-btn {\n display: none;\n}\n@media (max-width: 700px) {\n .links-container {\n background-color: white;\n display: inline-block;\n position: absolute;\n inset: 0 0 0 auto;\n transition: transform 0.5s ease;\n transform: translateX(100%);\n min-width: 50%;\n z-index: 9999999;\n width: 70%;\n }\n .links-container .close-btn {\n display: inline-block;\n width: 100%;\n text-align: right;\n padding-top: 0.5rem;\n }\n .links-container.closed {\n display: none;\n }\n .links-container.openinig {\n transform: translateX(100%);\n }\n .links-container.closing {\n transform: translateX(100%);\n }\n .links-container.opened {\n transform: translateX(0%);\n }\n}\n\n.sidebar-toggler {\n display: none;\n}\n\n@keyframes slide-in {\n to {\n transform: translateX(0%);\n }\n}\n.nav-links {\n display: flex;\n gap: 0.8rem;\n}\n@media (max-width: 700px) {\n .nav-links {\n flex-direction: column;\n margin-top: 1rem;\n margin-bottom: 1rem;\n gap: 2rem;\n }\n}\n\n.nav-link.collapse .dropdown-content {\n display: none;\n}\n@media (min-width: 700px) {\n .nav-link.collapse:nth-of-type(1) .dropdown-content, .nav-link.collapsed:nth-of-type(1) .dropdown-content {\n transform: translateX(-40%);\n }\n .nav-link.collapse:nth-of-type(2) .dropdown-content, .nav-link.collapsed:nth-of-type(2) .dropdown-content {\n transform: translateX(0%);\n }\n}\n@media (max-width: 700px) {\n .nav-link.collapse .dropdown-content {\n display: none;\n }\n .nav-link.collapsed .dropdown-content {\n display: flex;\n }\n}\n.nav-link.collapsed > a::after, .nav-link.collapse > a::after {\n content: \"\";\n padding: 0px 0.75rem;\n background-position: center;\n background-repeat: no-repeat;\n filter: hue-rotate(0deg) saturate(0%) brightness(41%);\n}\n.nav-link.collapsed:hover a::after, .nav-link.collapse:hover a::after {\n filter: hue-rotate(0deg) saturate(0%) brightness(8%);\n mix-blend-mode: darken;\n}\n.nav-link[aria-expanded=true] > a::after {\n background-image: url(./images/icon-arrow-up.svg);\n}\n.nav-link[aria-expanded=false] > a::after {\n background-image: url(./images/icon-arrow-down.svg);\n}\n\n.nav-link .dropdown-content {\n background-color: white;\n margin-top: 1rem;\n padding: 1.25rem 0.25rem;\n border: none;\n display: flex;\n flex-direction: column;\n transform: translateX(0%);\n gap: 1.5rem;\n}\n@media (min-width: 700px) {\n .nav-link .dropdown-content {\n position: absolute;\n border-radius: 1rem;\n gap: 1rem;\n box-shadow: 0px 0px 1.5rem hsl(225deg, 20%, 80%);\n }\n}\n.nav-link .dropdown-content li {\n display: flex;\n align-items: center;\n padding: 0 1rem;\n gap: 1rem;\n}\n@media (max-width: 700px) {\n .nav-link .dropdown-content li {\n justify-content: flex-start;\n }\n}\n\n.header-right {\n display: flex;\n gap: 1.5rem;\n align-items: baseline;\n}\n.header-right .signup-btn {\n border: 2px solid hsl(0deg, 0%, 41%);\n padding: 0.75rem 1rem;\n border-radius: 0.5rem;\n transition: border-color 0.3s ease;\n text-align: center;\n}\n.header-right .signup-btn:hover {\n border-color: hsl(0deg, 0%, 8%);\n}\n@media (max-width: 700px) {\n .header-right .signup-btn {\n width: 100%;\n }\n}\n@media (max-width: 700px) {\n .header-right {\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n}\n\n.main-content {\n flex: auto 1;\n display: grid;\n height: 100%;\n}\n@media (max-width: 700px) {\n .main-content {\n grid-template-rows: max-content 1fr;\n grid-template-areas: \"two\" \"one\";\n }\n .main-content .one {\n grid-area: one;\n }\n .main-content .two {\n grid-area: two;\n }\n}\n@media (min-width: 700px) {\n .main-content {\n padding: 3% 10vw 10% 10vw;\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n.content {\n display: flex;\n justify-content: center;\n align-items: center;\n align-items: flex-start;\n flex-direction: column;\n gap: 4rem;\n}\n@media (max-width: 700px) {\n .content {\n font-size: 12px;\n align-items: center;\n text-align: center;\n }\n}\n\n.site-description {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: inherit;\n align-items: flex-start;\n flex-direction: column;\n gap: 2.5em;\n padding-top: 0.5rem;\n max-width: 450px;\n}\n.site-description h2 {\n font-size: 4.25em;\n font-weight: 700;\n}\n@media (max-width: 700px) {\n .site-description h2 {\n font-size: 3.5em;\n }\n}\n.site-description p {\n font-size: 18px;\n line-height: 1.5;\n color: hsl(0deg, 0%, 41%);\n width: 45ch;\n}\n@media (max-width: 700px) {\n .site-description p {\n width: 90vw;\n }\n}\n@media (max-width: 700px) {\n .site-description {\n justify-content: flex-start;\n align-items: center;\n gap: 2em;\n }\n}\n\n.icons {\n font-size: inherit;\n display: flex;\n gap: 1.75em;\n align-items: center;\n}\n@media (max-width: 700px) {\n .icons {\n gap: 1em;\n }\n .icons img {\n width: 4em;\n }\n}\n\n.learn-more-btn {\n display: block;\n background-color: hsl(0deg, 0%, 8%);\n color: hsl(0deg, 0%, 98%);\n padding: 0.8rem 1.6rem;\n border-radius: 0.5rem/0.5rem;\n}\n\n.bg-img {\n background-image: url(./images/image-hero-desktop.png);\n background-repeat: no-repeat;\n background-size: contain !important;\n background-position: center;\n min-width: 36vw;\n}\n@media (max-width: 700px) {\n .bg-img {\n background-size: cover !important;\n height: calc(28vh + 20vw);\n background-image: url(./images/image-hero-mobile.png);\n }\n}\n\n.row-span-2 {\n grid-template-rows: span 2;\n}\n\n","@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&display=swap');\r\n\r\n$font: 'Epilogue'; ","*{\r\n padding: 0;\r\n margin: 0;\r\n &, &::before, &::after{\r\n box-sizing: border-box !important;\r\n }\r\n font-family: $font;\r\n}\r\n\r\nhtml{\r\n width: 100%;\r\n height: 100vh;\r\n overflow: hidden;\r\n}\r\n\r\nbody{\r\n width: 100%;\r\n position: relative;\r\n height: 100vh;\r\n display: flex;\r\n padding: 0.1rem;\r\n flex-direction: column;\r\n background-color: $almost-white;\r\n overflow: hidden;\r\n}\r\n\r\na{\r\n text-decoration: none;\r\n}\r\n\r\nul{\r\n list-style: none;\r\n}\r\n\r\n.attribution{\r\n width: fit-content;\r\n font-size: 11px; \r\n text-align: center;\r\n position: absolute; \r\n left: 50%;\r\n bottom: 1rem;\r\n transform: translateX(-50%);\r\n z-index: 9;\r\n\r\n @include mobile{\r\n bottom: 0;\r\n }\r\n\r\n a{\r\n color: hsl(228, 45%, 44%);\r\n }\r\n}\r\n\r\n","$almost-white: hsl(0, 0%, 98%);\r\n$medium-gray: hsl(0, 0%, 41%);\r\n$almost-black: hsl(0, 0%, 8%);","@mixin mobile {\r\n @media (max-width: 700px){\r\n @content;\r\n }\r\n}\r\n\r\n@mixin big {\r\n @media (min-width: 700px){\r\n @content;\r\n }\r\n}\r\n\r\n@mixin content-between {\r\n display: flex;\r\n justify-content: space-between;\r\n}\r\n\r\n@mixin content-center {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}","header{\r\n display: grid;\r\n grid-template-columns: max-content 1fr;\r\n padding: 0.75rem 0.75rem;\r\n align-items: center;\r\n flex: auto 0;\r\n\r\n @include mobile{\r\n @include content-between;\r\n align-items: center;\r\n \r\n .sidebar-toggler{\r\n display: block;\r\n }\r\n }\r\n\r\n a{\r\n color: $medium-gray;\r\n }\r\n \r\n a:hover{\r\n color: $almost-black;\r\n }\r\n}\r\n\r\n.overlay{\r\n position: absolute;\r\n inset: 0;\r\n display: none;\r\n background-color: rgb(0 0 0 / 0.2); \r\n}\r\n\r\n.links-container.opened ~ .overlay{\r\n @include mobile{\r\n display: block;\r\n }\r\n}\r\n\r\n.links-container{\r\n @include content-between;\r\n align-items: center;\r\n padding: 0 5%;\r\n\r\n .close-btn{\r\n display: none;\r\n }\r\n\r\n @include mobile{\r\n background-color: white;\r\n display: inline-block;\r\n position: absolute;\r\n inset: 0 0 0 auto;\r\n transition: transform .5s ease;\r\n transform: translateX(100%);\r\n min-width: 50%;\r\n z-index: 9999999;\r\n width: 70%;\r\n\r\n .close-btn{\r\n display: inline-block;\r\n width: 100%;\r\n text-align: right;\r\n padding-top: 0.5rem;\r\n }\r\n\r\n &.closed{\r\n display: none;\r\n }\r\n\r\n &.openinig{\r\n transform: translateX(100%);\r\n }\r\n\r\n &.closing{\r\n transform: translateX(100%);\r\n }\r\n\r\n &.opened{\r\n transform: translateX(0%);\r\n }\r\n }\r\n}\r\n\r\n.sidebar-toggler{\r\n display: none;\r\n}\r\n\r\n@keyframes slide-in {\r\n to{\r\n transform: translateX(0%);\r\n }\r\n}\r\n\r\n.navbar{\r\n \r\n}\r\n\r\n.nav-links{\r\n display: flex;\r\n gap: 0.8rem;\r\n @include mobile{\r\n flex-direction: column;\r\n margin-top: 1rem;\r\n margin-bottom: 1rem;\r\n gap: 2rem;\r\n }\r\n}\r\n\r\n.nav-link{\r\n &.collapse{\r\n .dropdown-content{\r\n display: none;\r\n }\r\n }\r\n @include big{\r\n &.collapse:nth-of-type(1), &.collapsed:nth-of-type(1){\r\n .dropdown-content{\r\n transform: translateX(-40%);\r\n }\r\n }\r\n &.collapse:nth-of-type(2), &.collapsed:nth-of-type(2){\r\n .dropdown-content{\r\n transform: translateX(0%);\r\n }\r\n }\r\n }\r\n\r\n @include mobile{\r\n &.collapse{\r\n .dropdown-content{\r\n display: none;\r\n }\r\n }\r\n\r\n &.collapsed{\r\n .dropdown-content{\r\n display: flex;\r\n }\r\n }\r\n }\r\n\r\n &.collapsed > a::after, &.collapse > a::after{\r\n content: '';\r\n padding: 0px 0.75rem;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n filter: hue-rotate(0deg) saturate(0%) brightness(41%);\r\n }\r\n\r\n &.collapsed:hover a::after, &.collapse:hover a::after{\r\n filter: hue-rotate(0deg) saturate(0%) brightness(8%);\r\n mix-blend-mode: darken;\r\n }\r\n\r\n &[aria-expanded=true] > a::after{\r\n background-image: url(./images/icon-arrow-up.svg);\r\n }\r\n &[aria-expanded=false] > a::after{\r\n background-image: url(./images/icon-arrow-down.svg);\r\n }\r\n}\r\n\r\n.nav-link .dropdown-content{ \r\n background-color: white;\r\n margin-top: 1rem;\r\n padding: 1.25rem 0.25rem;\r\n border: none;\r\n display: flex;\r\n flex-direction: column;\r\n transform: translateX(0%);\r\n gap: 1.5rem;\r\n\r\n @include big{\r\n position: absolute;\r\n border-radius: 1rem;\r\n gap: 1rem;\r\n box-shadow: 0px 0px 1.5rem hsl(225, 20%, 80%);\r\n }\r\n\r\n li{\r\n display: flex;\r\n align-items: center;\r\n padding: 0 1rem;\r\n gap: 1rem;\r\n\r\n @include mobile{\r\n justify-content: flex-start;\r\n }\r\n }\r\n}\r\n\r\n.header-right{\r\n display: flex;\r\n gap: 1.5rem;\r\n align-items: baseline;\r\n\r\n .signup-btn{\r\n border: 2px solid $medium-gray;\r\n padding: 0.75rem 1rem;\r\n border-radius: .5rem;\r\n transition: border-color .3s ease;\r\n text-align: center;\r\n\r\n &:hover{\r\n border-color: $almost-black;\r\n }\r\n\r\n @include mobile{\r\n width: 100%;\r\n }\r\n }\r\n\r\n @include mobile{\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n}",".main-content{\r\n flex: auto 1;\r\n display: grid;\r\n height: 100%;\r\n\r\n @include mobile{\r\n .one{\r\n grid-area: one;\r\n }\r\n .two{\r\n grid-area: two;\r\n }\r\n\r\n grid-template-rows: max-content 1fr;\r\n\r\n grid-template-areas: \r\n 'two'\r\n 'one'\r\n ;\r\n }\r\n\r\n @include big{\r\n padding: 3% 10vw 10% 10vw;\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n}\r\n\r\n.content{\r\n @include content-center;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n gap: 4rem;\r\n\r\n @include mobile{\r\n font-size: 12px;\r\n align-items: center;\r\n text-align: center\r\n }\r\n}\r\n\r\n.site-description{\r\n @include content-center;\r\n font-size: inherit;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n gap: 2.5em;\r\n padding-top: 0.5rem;\r\n max-width: 450px;\r\n\r\n h2{\r\n font-size: 4.25em;\r\n font-weight: 700;\r\n\r\n @include mobile{\r\n font-size: 3.5em;\r\n }\r\n }\r\n\r\n p{\r\n font-size: $p-font-size;\r\n line-height: 1.5;\r\n color: $medium-gray;\r\n width: 45ch;\r\n\r\n @include mobile{\r\n width: 90vw;\r\n }\r\n }\r\n\r\n @include mobile{\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 2em;\r\n }\r\n}\r\n\r\n.icons{\r\n font-size: inherit;\r\n display: flex;\r\n gap: 1.75em;\r\n align-items: center;\r\n\r\n @include mobile{\r\n gap: 1em;\r\n img{\r\n width: 4em;\r\n }\r\n }\r\n}\r\n\r\n.learn-more-btn{\r\n display: block;\r\n background-color: $almost-black;\r\n color: $almost-white;\r\n padding: 0.8rem 1.6rem;\r\n border-radius: .5rem / .5rem;\r\n}\r\n\r\n.bg-img{\r\n background-image: url(./images/image-hero-desktop.png);\r\n background-repeat: no-repeat;\r\n background-size: contain !important;\r\n background-position: center;\r\n min-width: 36vw;\r\n\r\n @include mobile{\r\n background-size: cover !important;\r\n height: calc(((70/100) * 40vh) + ((50/100) * 40vw));\r\n background-image: url(./images/image-hero-mobile.png);\r\n }\r\n}\r\n\r\n.row-span-2{\r\n grid-template-rows: span 2;\r\n}","$p-font-size: 18px;"],"names":[],"version":3,"file":"index.8d4ede96.css.map"}