Files
TaborgMain/public/assets/css/demo/start-hub-x.css
T
2024-09-06 13:32:15 -04:00

510 lines
8.6 KiB
CSS

/* ***** Global ***** */
:root {
--lqd-color-primary: #8777E0;
--lqd-color-secondary: #60A3E6;
--lqd-body-text-color: #454545;
--lqd-color-purple-100: #E8E4FB;
--lqd-color-purple-500: #895ED0;
--lqd-color-green-500: #0AC994;
--lqd-color-slate-100: #F3F7FF;
--lqd-color-slate-500: #6e7f99;
--lqd-color-slate-600: #5D6371;
--lqd-color-slate-700: #2F313B;
--lqd-color-gray-100: #FAF7F7;
--lqd-color-gray-200: #F2F3F4;
--lqd-color-gray-300: #bbb;
--lqd-color-gray-700: #454545;
--lqd-color-gray-900: #222222;
--lqd-color-blue-500: #006BFF;
--lqd-color-blue-900: #28263C;
--lqd-color-dark: #262626;
--lqd-color-gradient-start: var(--lqd-color-primary);
--lqd-color-gradient-stop: var(--lqd-color-secondary);
--lqd-badge-color: var(--lqd-color-primary);
--lqd-body-font-family: "Golos Text", Sans-serif;
--lqd-heading-color: #181b31;
--lqd-heading-font-family: var(--lqd-body-font-family);
--lqd-heading-font-weight: 600;
--lqd-heading-line-height: 1.2em;
--lqd-h1-font-size: 62px;
--lqd-h2-font-size: 56px;
--lqd-h2-line-height: 1em;
--lqd-h2-letter-spacing: -1.4px;
--lqd-h3-font-size: 32px;
--lqd-h3-font-size: 25px;
--lqd-h5-font-size: 21px;
--lqd-h6-color: #254043;
--lqd-h6-font-size: 10px;
--lqd-h6-font-weight: 500;
--lqd-cc-bc: var(--lqd-color-primary);
--lqd-cc-bg: var(--lqd-color-primary);
--lqd-cc-size-outer: 35px;
--lqd-cc-size-inner: 7px;
--lqd-cc-bw: 1px;
--lqd-cc-br: calc(var(--lqd-cc-size-outer) / 2);
--lqd-cc-active-bc: var(--lqd-color-primary);
--lqd-cc-active-bg: var(--lqd-color-primary);
--lqd-cc-active-bw: 1px;
--lqd-cc-active-circle-color: #fff;
--lqd-cc-active-circle-txt: #000;
--lqd-cc-active-arrow-color: #fff;
}
.module-sections>section,
.main-footer>section {
width: 960px;
}
@media (max-width: 1199px) {
.module-sections>section {
width: 100%;
}
}
@media (max-width: 767px) {
h2,
.h2 {
font-size: 12vw;
}
}
/* ***** Button ***** */
.module-btn-md {
--btn-pt: 12px;
--btn-pe: 24px;
--btn-pb: 12px;
--btn-ps: 24px;
}
.module-btn-sm {
--btn-pt: 8px;
--btn-pe: 22px;
--btn-pb: 8px;
--btn-ps: 22px;
}
.module-btn-xs {
--btn-pt: 2px;
--btn-pe: 6px;
--btn-pb: 2px;
--btn-ps: 6px;
}
/* ***** Main Header ***** */
.main-header .module-header-top {
min-height: 46px;
}
.main-header .module-header-middle .social-icon:hover svg,
.main-header .module-header-middle .social-icon:hover path {
fill: #0E1758BD;
}
.main-header .module-header-middle {
min-height: 36px;
}
.main-header .module-header-middle .social-icons-wrapper {
--grid-template-columns: repeat(0, auto);
--icon-size: 20px;
--grid-column-gap: 15px;
--grid-row-gap: 0;
}
.main-header .module-header-bottom {
min-height: 55px;
}
.is-stuck .module-header-bottom {
margin-top: 30px;
}
.main-header .lqd-stickybar-wrap .btn-solid:hover {
transform: translate3d(0, 0, 0);
}
.main-header .lqd-stickybar-right .btn-solid:hover {
box-shadow: 0 0 0 2px #000000;
}
.main-header .lqd-stickybar-left .btn-solid:hover {
box-shadow: 0 0 0 5px var(--lqd-color-green-500);
}
/* ***** Lity Modal Mini ***** */
.lity-modal-mini .lqd-contact-form {
--inputs-margin: 0;
--input-margin-bottom: 0;
}
.main-header .lity-modal-mini .lqd-contact-form select:focus,
.main-header .lity-modal-mini .lqd-contact-form input:focus,
.main-header .lity-modal-mini .lqd-contact-form textarea:focus {
color: #000000;
}
@media (max-width: 1199px) {
.lity-modal .module-content {
padding: 10px;
}
.lity-modal .ld-fancy-heading h2 {
font-size: 48px;
line-height: 1em;
}
}
@media (max-width: 767px) {
.lity-modal .ld-fancy-heading h2 {
font-size: 34px;
}
}
/* ***** Banner ***** */
@media (max-width: 767px) {
.banner {
padding-top: 70px;
}
.banner .ld-fancy-heading h2 {
font-size: 14vw;
letter-spacing: -1px;
}
}
/* ***** Features ***** */
.features .lqd-imggrp-single[data-float] {
--float-animate-to: 12%;
}
.features .iconbox-heading-arrow-onhover:hover h3 svg {
opacity: 1;
transform: translateX(0.5em);
}
.features .module-arrow {
right: 205px;
}
.features .module-btn {
right: 50px;
}
/* ***** Commit ***** */
@media (max-width: 1199px) {
.commit {
gap: 60px;
}
}
/* ***** Manage Data ***** */
.manage-data .module-video {
width: 430px;
min-height: 370px;
}
.manage-data .module-emoji {
right: 125px;
}
@media (max-width: 1199px) {
.manage-data {
gap: 60px;
}
.manage-data .module-emoji {
right: 280px;
}
}
@media (max-width: 767px) {
.manage-data {
padding: 60px 10px;
}
}
/* ***** Throwable ***** */
.throwable .btn:hover,
.throwable .btn:focus {
border-style: solid;
border-color: #7C849A;
}
.throwable .lqd-imggrp-single[data-float] {
--float-animate-to: 10%;
}
.throwable .module-text-1 {
background-color: #E2EEE1;
}
.throwable .module-text-2 {
background-color: #ffe3d3;
}
.throwable .module-text-3 {
background-color: #dbefe8;
}
.throwable .module-text-4 {
background-color: #d8c0ff;
}
.throwable .module-text-5 {
background-color: #AB6BDD;
}
.throwable .module-text-6 {
background-color: #eaeaea;
}
.throwable .module-shape {
right: -100px;
}
.throwable .module-emoji {
right: 80px;
}
/* ***** Process ***** */
.process .iconbox:hover .iconbox-icon-container {
color: #FFFFFF;
background-color: var(--lqd-color-primary);
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
}
.process .module-icon-box:before {
height: 0;
}
.process .module-arrow {
right: 270px;
}
@media (max-width: 767px) {
.process .module-arrow {
top: 150px;
}
.process .module-col {
margin-top: 30px;
padding-right: 10px;
padding-left: 10px;
}
.process .module-arrow {
right: 67%;
}
}
/* ***** Compare ***** */
.compare {
background-size: 70% auto;
}
@media (max-width: 767px) {
.compare {
padding-right: 10px;
padding-left: 10px;
}
}
/* ***** Clients ***** */
.clients .module-bg {
background-size: 70% auto;
filter: brightness(100%) contrast(100%) saturate(0%) blur(0px) hue-rotate(0deg);
}
/* ***** Testimonial ***** */
.testimonial {
background-position: 50% 30%;
background-size: 80% auto;
}
.testimonial .lqd-imggrp-single[data-float] {
--float-animate-to: 10%;
}
.testimonial .carousel-nav {
top: 30%;
}
.testimonial .carousel-nav.carousel-nav-left.carousel-nav-floated {
right: 0;
}
.testimonial .carousel-nav .flickity-button {
width: 10px;
background-color: transparent;
color: #000000;
padding: 0;
border-radius: 0;
}
.testimonial .carousel-nav .flickity-button.previous {
left: -70px;
}
.testimonial .carousel-nav .flickity-button.next {
right: -70px;
}
.testimonial .carousel-dots {
top: auto;
right: auto;
bottom: -25px;
left: auto;
}
.testimonial .carousel-dots:not(.carousel-dots-inside) {
position: relative;
}
.testimonial .module-avatar {
left: 180px;
}
@media (max-width: 1199px) {
.testimonial {
background-position: 0 0;
}
.testimonial .module-avatar {
left: 80px;
}
}
@media (max-width: 767px) {
.testimonial .module-avatar {
left: 20px;
}
.testimonial .module-avatar {
top: 10px;
}
}
/* ***** Faq ***** */
.faq .lqd-imggrp-single[data-float] {
--float-animate-to: 10%;
}
.faq .module-avatar {
right: 200px;
}
@media (max-width: 1199px) {
.faq {
padding: 50px;
}
.faq .module-avatar {
right: 100px;
}
}
@media (max-width: 767px) {
.faq {
padding: 50px 20px;
}
.faq .module-avatar {
top: 10px;
}
.faq .module-avatar {
right: 10px;
}
}
/* ***** CTA ***** */
.cta {
background-image: url("../../images/demo/start-hub-x/bg/cta-bg.svg");
min-height: 408px;
}
.cta .txt-rotate-keywords {
--visible-words: 7;
}
.cta .txt-rotator-list.text-rotator-activated .txt-rotate-keywords-inner {
--lqd-color-start: #361B5C;
--lqd-color-stop: #6693A7;
}
.cta .btn:hover,
.cta .btn:focus {
color: #211F36;
}
@media (max-width: 1199px) {
.cta {
padding: 0 50px 0 20px;
}
}
@media (max-width: 767px) {
.cta {
background-image: url("../../images/demo/start-hub-x/bg/cta-bg-m.svg");
background-size: cover;
flex-grow: 0;
align-self: initial;
padding: 10px;
}
.cta .module-btn {
margin-top: 20px;
margin-bottom: 10px;
}
.cta .ld-fancy-heading .txt-rotator-list {
font-size: 9vw;
}
}
/* ***** Footer ***** */
.main-footer .social-icons-wrapper {
--grid-template-columns: repeat(0, auto);
--icon-size: 30px;
--grid-column-gap: 25px;
--grid-row-gap: 0;
}
@media (max-width: 1199px) {
.main-footer {
padding: 0 20px;
}
.main-footer>section {
width: 960px;
padding-top: 100px;
}
}
@media (max-width: 991px) {
.main-footer>section {
width: 100%;
}
}
@media (max-width: 767px) {
.manage-data .module-video {
width: 100%;
}
.main-footer>section {
padding-top: 70px;
}
.main-footer .lqd-fancy-menu li {
margin-right: 20px;
}
.main-footer .module-text {
padding-bottom: 20px;
}
}