init

static/Vvvebjs/demo/landing/scss/sections/sections.scss

@@ -0,0 +1,202 @@
+/*
+ * Style common for all sections
+ */ 
+//@use 'bootstrap/scss/bootstrap' as bs;
+//@import "../bootstrap/functions";
+//@import "../bootstrap/variables";
+//@import "../bootstrap/variables-dark";
+//@import "../bootstrap/maps";
+//@import "../bootstrap/mixins";
+
+body {
+	> section, > footer, > header { 
+		position:relative;
+		//padding:5rem 0;
+		
+		&.bg-alternate:nth-child(even) {
+			//background-color:rgba(var(--bs-body-color-rgb), 0.05);
+		}
+		
+		.background-container, .overlay {
+			position:absolute;
+			top:0;
+			left:0;
+			z-index:-2;
+			width:100%;
+			height:100%;
+			overflow:hidden;
+			
+			&::before {
+			}
+			
+			img, video {
+				width:auto;
+				height:auto;
+				top:0;
+				left:0;
+				max-width: initial;
+				min-height: 100%;
+				min-width: 100%;
+				object-fit: cover;
+
+			
+				//center hero image on mobile
+				/*
+				@include media-breakpoint-down(md) { 
+					margin: 0 0 0 -25%;
+				}
+				
+				@include media-breakpoint-down(sm) {
+					margin: 0 0 0 -50%;	
+				}
+				*/
+			}
+			
+			img {
+			  position: absolute;
+			  left: 50%;
+			  top: 50%;
+			  height: 100%;
+			  width: auto;
+			  -webkit-transform: translate(-50%,-50%);
+				  -ms-transform: translate(-50%,-50%);
+					  transform: translate(-50%,-50%);
+			}
+		}
+
+		.overlay {
+			z-index:-1;
+			//background: var(--bs-body-color);
+			background: var(--bs-black);
+			opacity: 0.6;
+		}
+
+		.separator {
+
+			z-index:2;
+			position:absolute;
+			width:100%;
+			//height:5rem;
+			color:#fff;
+			
+			/*> svg, */>  img {
+				width:100%;
+				height:100%;
+			}
+			
+			&.bottom {
+				bottom:0;
+			}
+			
+			&.top {
+				top:0px;
+			}
+		}
+		/*
+		&.overlay {
+			position: relative;
+			
+			
+			&:before {
+				z-index: 1;
+				position: absolute;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				top: 0;
+				content: "";
+				background: rgba(var(--bs-body-color-rgb), 0.4);
+			}
+		}*/
+		
+		//parallax
+		.background-container.parallax {
+			clip-path: inset(0 0 0 0);
+			
+			> * {
+				position:fixed;
+			}
+		}
+	}
+}
+
+
+.logo-sticky {
+	display:none;
+}
+
+.logo-default-dark {
+	display:none;
+}
+
+.logo-default-dark-sticky {
+	display:none;
+}
+
+
+
+div.sticky {
+	.logo-sticky {
+		display:unset;
+	}
+	.logo-default {
+		display:none;
+	}
+	.logo-default-dark {
+		display:none;
+	}
+	.logo-default-dark-sticky {
+		display:none;
+	}
+	.logo-dark {
+		display:none;
+	}
+}
+
+[data-bs-theme="dark"] {
+
+	.logo-default-dark {
+		display:unset;
+	}
+
+	.logo-default {
+		display:none;
+	}
+
+
+	div.sticky {
+		.logo-sticky {
+			display:none;
+		}
+		.logo-default-dark {
+			display:none;
+		}
+		.logo-default-dark-sticky {
+			display:unset;
+		}
+	}
+}
+
+
+.navbar-dark {
+	.logo-default {
+		display:none;
+	}
+	.logo-default-dark {
+		display:unset;
+	}
+}
+
+.navbar-light {
+	.logo-default {
+		display:unset;
+	}
+	.logo-default-dark {
+		display:none;
+	}
+}
+
+
+.fixed-top ~ .fixed-top {
+    position: unset;
+}