| .banner-section { |
| // height: calc(100vh - var(--global-header-height) - 10rem); |
| |
| .banner-container { |
| height: 100%; |
| width: 100%; |
| |
| .banner-info { |
| margin-top: var(--ifm-navbar-height); |
| } |
| |
| .banner-title-wrap { |
| } |
| |
| .banner-sub-title { |
| text-align: center; |
| font-size: 1.25rem; |
| line-height: 1.5; |
| color: var(--global-colors-text); |
| margin-top: 2rem; |
| font-weight: normal; |
| } |
| |
| .banner-title { |
| font-size: var(--global-font-size-bigger); |
| font-weight: 500; |
| line-height: 4rem; |
| text-align: center; |
| color: var(--global-colors-text-black); |
| .highlight { |
| color: var(--ifm-color-primary); |
| } |
| } |
| |
| .banner-buttons { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| margin-top: 4rem; |
| |
| .button { |
| display: flex; |
| gap: 0.25rem; |
| align-items: center; |
| padding: 0.75rem 2.4rem; |
| font-size: var(--global-font-size-default); |
| border: none; |
| transition: all 0.3s; |
| font-weight: 500; |
| border: 1px solid transparent; |
| |
| &:hover { |
| // box-shadow: 10px 16px 18px rgba(195, 203, 235, 0.2); |
| } |
| |
| & + .button { |
| margin-left: 2rem; |
| } |
| |
| &.primary { |
| background-color: var(--ifm-color-primary); |
| color: var(--global-colors-white); |
| |
| &:hover { |
| box-shadow: 0px 6px 12px rgba(161, 167, 210, 0.45); |
| } |
| } |
| |
| &.default { |
| background-color: #f0f1fc; |
| color: var(--ifm-color-primary); |
| |
| &:hover { |
| box-shadow: 0px 6px 12px rgba(161, 167, 210, 0.3); |
| } |
| } |
| |
| &.ghost { |
| border: 1px solid var(--ifm-color-primary); |
| color: var(--ifm-color-primary); |
| background-color: #ffffff; |
| |
| &:hover { |
| box-shadow: 0px 6px 12px rgba(161, 167, 210, 0.3); |
| } |
| } |
| } |
| } |
| |
| .banner-img-wrap { |
| max-width: 45rem; |
| // margin-left: 3rem; |
| margin-top: 1rem; |
| } |
| } |
| } |
| |
| @media screen and (min-width: 1300px) and (max-width: 1600px) { |
| .banner-section { |
| // height: calc(100vh - var(--global-header-height) - 10rem); |
| } |
| } |
| |
| @media (max-width: 1299px) { |
| .banner-section { |
| height: auto; |
| } |
| } |
| |
| @media (max-width: 996px) { |
| .banner-section { |
| height: auto; |
| padding: 0; |
| |
| .banner-container { |
| flex-direction: column-reverse; |
| justify-content: space-around; |
| |
| .banner-img-wrap { |
| margin-top: 3rem; |
| max-width: 90%; |
| margin-left: 0; |
| } |
| |
| .banner-info { |
| margin-top: 3rem; |
| .banner-title { |
| font-size: 2.25rem; |
| line-height: 1.5; |
| font-weight: 500; |
| } |
| .banner-sub-title { |
| font-size: 1rem; |
| margin-top: 1.2rem; |
| font-weight: 400; |
| } |
| } |
| .banner-buttons { |
| .button { |
| padding: 0.45rem 1.2rem; |
| font-size: 1rem; |
| font-weight: normal; |
| } |
| } |
| } |
| } |
| } |
