Gagan7900
514 lines
12 KiB
SCSS
514 lines
12 KiB
SCSS
/* Start Landing Styles */
|
|
.landing-body .landing-main-image img {
|
|
@apply z-[11] relative w-[26.063rem] h-[26.063rem] bg-black/[0.05] rounded-full before:absolute before:w-[24.5rem] before:h-[24.5rem] before:bg-black/10 before:opacity-[0.3] before:start-[5rem] before:top-[0rem] before:rounded-full
|
|
after:absolute after:w-[12.5rem] after:h-[12.5rem] after:bg-transparent after:border-primary/50 after:opacity-[0.3] after:start-[5.1rem] after:bottom-[4.4rem];
|
|
}
|
|
|
|
[data-nav-layout="horizontal"] {
|
|
@media (min-width: 992px) {
|
|
&[class="dark"] {
|
|
.landing-body {
|
|
.app-sidebar .slide.has-sub.open .slide-menu.child1::before {
|
|
@apply bg-bodybg!;
|
|
}
|
|
.app-sidebar.sticky.sticky-pin {
|
|
.landing-logo-container {
|
|
.responsive-logo-dark img {
|
|
@apply block;
|
|
}
|
|
.responsive-logo-light img {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.landing-body {
|
|
.app-sidebar.sticky {
|
|
@apply bg-primary/10!;
|
|
}
|
|
.app-sidebar.sticky.sticky-pin {
|
|
@apply bg-bodybg! shadow-[0_0.25rem_1rem_rgba(255,255,255,0.1)]!;
|
|
}
|
|
}
|
|
}
|
|
&[class="light"] {
|
|
.landing-body {
|
|
.app-sidebar.sticky.sticky-pin {
|
|
@apply shadow-[0_0.25rem_1rem_rgba(0,0,0,0.1)]!;
|
|
}
|
|
.app-sidebar.sticky.sticky-pin {
|
|
.responsive-logo-dark img {
|
|
@apply hidden!;
|
|
}
|
|
.responsive-logo-light img {
|
|
@apply block!;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.landing-body {
|
|
.app-sidebar {
|
|
@apply bg-primary/10 dark:bg-primary/10 py-4;
|
|
.side-menu__item .side-menu__angle {
|
|
@apply text-white! dark:!text-defaulttextcolor/10;
|
|
}
|
|
.slide.has-sub.open {
|
|
.slide-menu {
|
|
&.child1,
|
|
&.child2,
|
|
&.child3 {
|
|
@apply bg-white dark:bg-bodybg;
|
|
.slide .side-menu__item {
|
|
.side-menu__angle {
|
|
@apply text-[#536485]! dark:!text-defaulttextcolor/10;
|
|
}
|
|
&:hover,
|
|
&.active {
|
|
@apply text-primary!;
|
|
.side-menu__angle {
|
|
@apply text-primary!;
|
|
}
|
|
&::before {
|
|
@apply border-primary!;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.side-menu__item {
|
|
@apply rounded-sm p-[0.3rem];
|
|
}
|
|
|
|
.slide-menu.child1 {
|
|
@apply rounded-sm py-[0.55rem] px-[0.3rem];
|
|
.side-menu__item {
|
|
@apply px-[1.6rem]! py-2!;
|
|
}
|
|
}
|
|
|
|
.slide.has-sub.open .slide-menu.child1 {
|
|
@apply overflow-visible! text-defaulttextcolor! dark:!text-defaulttextcolor/70 start-auto! hover:!text-primary active:!text-primary before:!absolute before:!-top-[7px] before:!start-[10%] before:!w-[13px] before:!h-[13px] before:!z-[99999] before:!border
|
|
before:!border-solid before:!border-transparent before:!rotate-45 before:!bg-white;
|
|
}
|
|
.slide.has-sub .slide-menu {
|
|
@apply start-auto!;
|
|
}
|
|
.side-menu__item {
|
|
@apply pe-[1.3rem] ps-[1.3rem] text-[#536485];
|
|
}
|
|
|
|
.side-menu__item.active,
|
|
.side-menu__item:hover {
|
|
@apply bg-transparent! text-primary!;
|
|
.side-menu__label,
|
|
.side-menu__angle {
|
|
@apply text-white! opacity-100!;
|
|
}
|
|
}
|
|
|
|
.slide-menu.child1 .slide .side-menu__item:before {
|
|
@apply top-[1.2rem]! start-[0.65rem]!;
|
|
}
|
|
|
|
.landing-logo-container {
|
|
.responsive-logo-dark img {
|
|
@apply block;
|
|
}
|
|
.responsive-logo-light img {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
.app-sidebar.sticky.sticky-pin {
|
|
.side-menu__label {
|
|
@apply text-defaulttextcolor! dark:!text-white;
|
|
}
|
|
.side-menu__angle {
|
|
@apply text-defaulttextcolor! dark:!text-white;
|
|
}
|
|
.side-menu__item {
|
|
&.active,
|
|
&:hover {
|
|
@apply text-primary!;
|
|
|
|
.side-menu__label,
|
|
.side-menu__angle {
|
|
@apply text-primary!;
|
|
}
|
|
}
|
|
}
|
|
.landing-logo-container {
|
|
.responsive-logo-dark img {
|
|
@apply hidden;
|
|
}
|
|
.responsive-logo-light img {
|
|
@apply block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.landing-body .app-sidebar .sticky {
|
|
@apply top-0! px-0! h-auto! bg-primary/10! dark:!bg-primary/10 shadow-none! border-e-0!;
|
|
}
|
|
.landing-body .app-sidebar .main-sidebar {
|
|
@apply h-auto!;
|
|
}
|
|
.landing-body .app-sidebar.sticky.sticky-pin {
|
|
@apply bg-white dark:bg-bodybg;
|
|
}
|
|
}
|
|
|
|
.landing-body {
|
|
.app-sidebar {
|
|
.slide .side-menu__item {
|
|
@apply py-[0.8rem]! px-4!;
|
|
|
|
&.active,
|
|
&:hover {
|
|
@apply text-white dark:text-defaulttextcolor/10;
|
|
}
|
|
}
|
|
}
|
|
.app-sidebar .sticky.sticky-pin .side-menu__item.active {
|
|
@apply font-normal;
|
|
|
|
.side-menu__label {
|
|
@apply text-defaulttextcolor!;
|
|
}
|
|
}
|
|
.accordion.accordion-primary .accordion-button.collapsed:after {
|
|
@apply bg-white! dark:!bg-bodybg text-primary! ;
|
|
}
|
|
.landing-banner {
|
|
@apply relative w-full h-[37rem] top-0 bg-[url('../images/media/landing/banner.jpg')] bg-cover bg-center bg-no-repeat
|
|
before:absolute before:w-full before:h-full before:bg-primary before:opacity-70;
|
|
|
|
.main-banner-container {
|
|
@apply py-[4rem] px-[3rem];
|
|
}
|
|
|
|
.landing-banner-heading {
|
|
@apply leading-[1.25] text-[3rem] font-[600] text-white dark:text-defaulttextcolor/10;
|
|
}
|
|
}
|
|
.main-menu-container .main-menu {
|
|
@apply ps-0;
|
|
}
|
|
.content {
|
|
@apply mt-[4rem];
|
|
}
|
|
.section {
|
|
@apply py-[3.375rem] px-0 bg-cover relative;
|
|
}
|
|
.featur-icon {
|
|
@apply w-[75px] h-[75px] p-[14px] rounded-full bg-white/[0.05] my-0 mx-auto;
|
|
}
|
|
|
|
.feature-logos {
|
|
@apply flex justify-center;
|
|
}
|
|
|
|
.landing-Features {
|
|
@apply relative w-full h-full top-0 bg-[url('../images/media/landing/2.jpg')] bg-cover bg-center bg-no-repeat z-[9]
|
|
before:absolute before:w-full before:h-full before:top-0 before:-z-[1] before:bg-primary/95;
|
|
}
|
|
.landing-testimonials .swiper-pagination-bullet {
|
|
@apply bg-primary!;
|
|
|
|
&:active {
|
|
@apply bg-primary!;
|
|
}
|
|
}
|
|
.landing-section-heading {
|
|
@apply relative text-[0.813rem] font-[600] before:absolute before:w-[60%] before:h-[0.25rem] before:bg-gradient-to-r before:from-success before:to-success/10 before:opacity-[0.5] before:-top-[0.625rem] before:rounded-[3.125rem] before:end-0;
|
|
}
|
|
.customize-image img {
|
|
@apply w-[30.5rem] h-[20rem] mt-[20px] p-[15px] relative;
|
|
}
|
|
h3 {
|
|
@apply text-[1.75rem];
|
|
}
|
|
.team-card .team-avatar {
|
|
@apply shadow-[0_0_0_0.5rem_rgba(0,0,0,0.05)]! ;
|
|
}
|
|
.landing-footer {
|
|
@apply bg-black! border-b! border-solid! border-white/10! ;
|
|
}
|
|
.landing-main-footer {
|
|
@apply bg-black;
|
|
}
|
|
.landing-footer-list li {
|
|
@apply mb-2;
|
|
}
|
|
.brand-img-white {
|
|
@apply block;
|
|
}
|
|
.swiper-pagination-bullet {
|
|
@apply w-[1.25rem]! h-[0.25rem]! rounded-md! bg-white! dark:!bg-bodybg;
|
|
}
|
|
|
|
.brand-img-light {
|
|
@apply block;
|
|
}
|
|
@media (min-width: 992px) {
|
|
.app-sidebar {
|
|
@apply top-0! px-0! h-auto! shadow-none! border-0!;
|
|
.side-menu__label {
|
|
@apply text-white dark:text-defaulttextcolor/10 opacity-[0.8];
|
|
}
|
|
|
|
.main-sidebar {
|
|
@apply h-auto!;
|
|
}
|
|
|
|
.side-menu__item {
|
|
.side-menu__angle {
|
|
@apply text-[#536485];
|
|
}
|
|
&:hover {
|
|
.side-menu__angle {
|
|
@apply text-white dark:text-defaulttextcolor/10;
|
|
}
|
|
}
|
|
}
|
|
&.app-sidebar .side-menu__label {
|
|
@apply text-white dark:text-defaulttextcolor/10;
|
|
}
|
|
|
|
.landing-logo-container .horizontal-logo {
|
|
.desktop-white {
|
|
@apply hidden;
|
|
}
|
|
|
|
.desktop-logo {
|
|
@apply block;
|
|
}
|
|
}
|
|
&.app-sidebar .side-menu__item:hover {
|
|
.side-menu__label {
|
|
@apply text-white dark:text-defaulttextcolor/10;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-header {
|
|
@apply hidden;
|
|
}
|
|
|
|
.main-sidebar-header {
|
|
@apply block!;
|
|
}
|
|
|
|
.main-menu-container {
|
|
@apply flex items-center justify-between;
|
|
|
|
.slide-left,
|
|
.slide-right {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
|
|
.main-content {
|
|
@apply p-0;
|
|
}
|
|
|
|
.landing-logo-container {
|
|
.horizontal-logo .header-logo {
|
|
.desktop-logo {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
iframe {
|
|
@apply w-full;
|
|
}
|
|
@media (max-width: 991.98px) {
|
|
.app-sidebar .side-menu__item.active,
|
|
.app-sidebar .side-menu__item:hover {
|
|
@apply bg-transparent;
|
|
}
|
|
.main-menu-container .main-menu {
|
|
@apply ps-[20px]!;
|
|
}
|
|
|
|
.app-sidebar {
|
|
.slide {
|
|
@apply p-0;
|
|
}
|
|
}
|
|
|
|
.landing-logo-container {
|
|
.horizontal-logo .header-logo {
|
|
.desktop-logo {
|
|
@apply hidden!;
|
|
}
|
|
|
|
.desktop-white {
|
|
@apply hidden!;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 1115.98px) {
|
|
.landing-body .landing-main-image img {
|
|
@apply bg-transparent! before:!hidden after:!hidden;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.landing-banner {
|
|
@apply h-[34rem];
|
|
|
|
.main-banner-container {
|
|
@apply p-4;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.landing-body .landing-banner {
|
|
@apply h-[45rem];
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.landing-banner {
|
|
.section {
|
|
@apply py-[4.375rem] px-0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
.landing-body .landing-banner {
|
|
@apply h-[37.5rem];
|
|
|
|
.main-banner-container {
|
|
@apply p-4;
|
|
}
|
|
|
|
.landing-banner-heading {
|
|
@apply text-[2rem];
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 992px) {
|
|
.landing-body {
|
|
.app-sidebar .side-menu__item {
|
|
@apply py-[0.8rem] pr-[5rem] ps-4;
|
|
}
|
|
.app-sidebar .slide-menu.child1 li,
|
|
.app-sidebar .slide-menu.child2 li,
|
|
.app-sidebar .slide-menu.child3 li {
|
|
@apply p-0 ps-0 relative;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.dark {
|
|
@media (min-width: 992px) {
|
|
.landing-body {
|
|
.main-menu-container {
|
|
.landing-logo-container {
|
|
.horizontal-logo .header-logo {
|
|
.desktop-logo {
|
|
@apply hidden!;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.app-sidebar .side-menu__item {
|
|
@apply text-defaulttextcolor/70;
|
|
}
|
|
}
|
|
}
|
|
.landing-body {
|
|
@media (max-width: 991.98px) {
|
|
.app-header {
|
|
.main-header-container {
|
|
.horizontal-logo .header-logo {
|
|
.toggle-logo {
|
|
@apply hidden;
|
|
}
|
|
|
|
.toggle-dark {
|
|
@apply block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.landing-trusted-companies {
|
|
img {
|
|
@apply invert-[1];
|
|
}
|
|
}
|
|
.app-sidebar.sticky-pin {
|
|
.landing-logo-container .horizontal-logo {
|
|
.desktop-white {
|
|
@apply block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.brand-img-light {
|
|
@apply block;
|
|
}
|
|
|
|
.brand-img-white {
|
|
@apply hidden;
|
|
}
|
|
|
|
.section-bg {
|
|
@apply bg-black/10;
|
|
}
|
|
}
|
|
.landing-body {
|
|
@media (min-width: 992px) {
|
|
.app-sidebar {
|
|
.main-menu {
|
|
@apply pe-6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.landing-body {
|
|
.main-content {
|
|
@apply pt-[3.75rem]!;
|
|
}
|
|
}
|
|
.landing-main-image {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
.landing-body {
|
|
.pickr-container-primary :last-child button {
|
|
@apply block;
|
|
}
|
|
.pickr-container-background :last-child button {
|
|
@apply block;
|
|
}
|
|
}
|
|
@media (max-width: 991.98px) {
|
|
.landing-body {
|
|
.app-sidebar .slide-menu {
|
|
@apply ps-4;
|
|
}
|
|
.app-sidebar .slide-menu.child1 .side-menu__item,
|
|
.app-sidebar .slide-menu.child2 .side-menu__item {
|
|
@apply py-[0.45rem] px-[1.6rem]!;
|
|
}
|
|
}
|
|
}
|
|
/* End Landing Styles */
|