_sass/pages/_ducklake.scss


@use 'sass:color';
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;


/** DUCKLAKE STYLES **/


/** General DuckLake Styles **/

::-moz-selection {
  background: #B2E2FF80;
}
::selection {
  background: #B2E2FF80;
}

main h1,
h1{
	@include display-2();
}

/*
h4{
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
}
*/

h1, h2, h3, h4, h5, h6{
	a{
		color: inherit;
	}
}

strong, b{
	font-weight: 600;
}

svg *[stroke],
svg path{
	transition: all .3s;
}

.textbutton:hover{
	color: var(--blue-70, #2eafff);
}

.banner{
	background: var(--lake-ribbon-background-color, #99D8FF);
	color: var(--main-text-primary-color, #F2F2F2);
	z-index: 800;
	a{
		text-decoration: none;
	}
	a:hover{
		text-decoration: underline;
		text-underline-offset: 2px;
	}
}

header .headerline .headercontent .landingmenu nav .hasSub:hover a,
header .headerline .headercontent .landingmenu nav a:hover,
header .headerline .headercontent .landingmenu nav .hasSub + .submenuwrap ul li a:hover{
	color: var(--blue-60, #2eafff);
}

.cards{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	&.vertical.images{
		.card{
			position: relative;
			width: calc(50% - 10px);
			border-radius: 10px;
			border: 1px solid var(--lake-infobox-border-color, rgba(204, 235, 255, 0.60));
			background: var(--lake-infobox-primary-background-color, rgba(229, 245, 255, 0.60));
			backdrop-filter: blur(7px);
			color: var(--main-text-primary-color, #0D0D0D);
			.image{
				width: 100%;
				aspect-ratio: 16/9;
				background: #ffffff66;
			}
			.content{
				padding: 30px 20px;
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				gap: 20px;
				p{
					margin: 0;
				}
			}
		}
	}
	&.horizontal.icons,
	&.vertical.icons{
		justify-content: flex-start;
		.card{
			position: relative;
			width: calc( (100% - 60px) / 4);
			padding: 30px 20px;
			border-radius: 15px;
			border: 1px solid var(--lake-infobox-border-color, rgba(204, 235, 255, 0.60));
			background: var(--lake-infobox-primary-background-color, rgba(229, 245, 255, 0.60));
			backdrop-filter: blur(7px);
			.icon{
				width: 50px;
				height: 50px;
				margin-bottom: 20px;
				position: relative;
				overflow: hidden;
				img{
					object-fit: contain;
					object-position: center center;
					width: 100%;
					height: 100%;
				}
			}
			.content{
				h3{
					@include title-1();
					margin-bottom: 15px;
				}
				p{
					@include body-standard();
					margin: 0;
				}
			}
		}
	}
	&.horizontal.icons{
		row-gap: 50px;
		.card{
			width: calc( (100% / 6) * 4);
			border: 1px solid var(--lake-infobox-border-color, rgba(204, 235, 255, 0.60));
			background: var(--grey-transparent-95, rgba(242, 242, 242, 0.60));
			backdrop-filter: blur(21.5px);
			display: flex;
			gap: 20px;
			flex-wrap: wrap;
			.icon{
				margin-bottom: 0;
				img{
					object-position: top center;
				}
			}
			.content{
				width: calc(100% - 70px);
				h3{
					font-weight: 600;
					margin-bottom: 10px;
				}
			}
			&:nth-child(even){
				margin-left: auto;	
			}
		}
	}
}


/** Landing page styles **/
body.landing{
	@include body-standard();
	section.welcome{
		background: linear-gradient(180deg, var(--lake-background-gradient-start, #F5FBFF) 0%, var(--lake-background-gradient-end, #E5F5FF) 100%);
		padding-bottom: 130px;
		.ducklake{
			margin: 0 auto;
			max-width: 770px;
			text-align: center;
			display: flex;
			flex-direction: column;
			row-gap: 25px;
			p{
				margin: 0;
			}
		}
		
	}
	section.architecture{
		padding-top: 80px;
	}
	.wave{
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 364.8 28.6'%3E%3Cpath d='M364.8 0h-.1c-45.5 0-68.3 4.2-91.1 8.3-22.8 4.2-45.5 8.3-91 8.3s-68.3-4.2-91.1-8.3C68.7 4.2 45.9 0 .4 0H0v28.6h364.8V0Z' style='fill:%23fbfbfb'/%3E%3C/svg%3E");
		width: 100%;
		height: 30px;
		background-size: contain;
		background-repeat: repeat-x;
		transform: translateY(-20px);
		position: relative;
		z-index: 200;
		background-position: 0 bottom;
		animation: waveMove 20s linear infinite;
	}
	@keyframes waveMove {
		0% { background-position-x: 0; }
		100% { background-position-x: 1000px; }
	}
	section#quickinstall{
		.wrap{
			.install{
				margin: 0 auto;
				margin-top: 50px;
				width: 750px;
			}
		}
		&:after{
			display: none;
		}
	}
	section{
		.section-text{
			//max-width: 640px;
			max-width: 700px;
			text-align: center;
			margin: 0 auto;
		}
	}
	h1{
		@include display-1();
	}
	h2{
		@include display-2();
		text-align: center;
	}
	h3{
		@include display-3();
	}
	
	h2 + div{
		margin-top: 50px;
	}
	.faq{
		.frequentlyaskedquestions{
			margin-top: 50px;
		}
		.cta{
			margin-top: 50px;
			text-align: center;
		}
	}
	
}

.newswrap .postwrap .infoline .icon{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' fill='none' viewBox='0 0 58 58'%3E%3Cpath fill='%230D0D0D' d='M29.04.257C13.193.257.297 13.152.297 29c0 15.848 12.896 28.743 28.743 28.743 15.848 0 28.743-12.895 28.743-28.743C57.783 13.152 44.888.257 29.04.257Z'/%3E%3Cpath fill='%232EAFFF' fill-rule='evenodd' d='M26.603 15.4c5.226 0 9.773 2.804 12.244 6.989h2.583v.015c3.565 0 6.572 2.867 6.58 6.506h.015c0 3.615-2.965 6.58-6.58 6.58h-1.912c-2.165 4.738-6.848 8.084-12.34 8.308l-.59.012-.731-.019c-7.51-.38-13.473-6.58-13.474-14.185v-.017c0-7.85 6.354-14.204 14.205-14.204v.014Zm0 4.312c-5.446 0-9.877 4.417-9.877 9.877v.017c0 5.445 4.416 9.877 9.877 9.877a9.876 9.876 0 0 0 9.395-6.822l.484-1.498h4.962c1.206 0 2.245-1.02 2.253-2.238h-.014c0-1.195-.998-2.209-2.253-2.209h-5.28l-.575-1.256a9.853 9.853 0 0 0-8.972-5.748Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

@keyframes spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

section.architecture {
	.illustration {
		//width: calc(100% - 450px);
		width: 750px;
		margin: 50px auto 0;
	}
	.diagram {
		display: flex;
		padding: 20px;
		gap: 15px;

		.client,
		.database,
		.storage {
			border-radius: 15px;
			border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
			background: var(--doc-codebox-background-color, #F2F2F2);
			padding: 15px;
			position: relative;

			h4 {
				@include title-2;
				
				.choosen-storage{
					font-weight: 400;
				}
			}

			&:hover {
				border-color: var(--lake-infobox-border-color, rgba(204, 235, 255, 0.60));

				.hover-content {
					visibility: visible;
					opacity: 1;
				}
			}
		}
		
		.database, 
		.storage{
			border-radius: 15px;
			border: 1px solid var(--main-ribbon-border-color-blue, rgba(153, 216, 255, 0.60));
			background: var(--lake-infobox-quaternary-background-color, rgba(178, 226, 255, 0.60));
		}

		.client {
			position: relative;
			width: calc(50% - 8px);
			overflow: hidden;

			.browser-wrap {
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				position: absolute;
				
				.browser {
					width: 250px;
					transition: all 0.5s;
				}
				
			}

			.browser.multi {
				opacity: 0;
				pointer-events: none;
				position: absolute;
				top: 0;
				z-index: 10;
				transform: translate(0,0);
			}

			.browser {
				position: relative;
				transition: all 0.4s;
				z-index: 20;
				
				>img {
					width: 100%;
					height: auto;
					z-index: 50;
					position: relative;
				}

				.broser-content {
					position: absolute;
					top: 60px;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 12px;
					z-index: 60;
					transition: all 0.3s;
				}

				.ducklake{
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					
					transition: all 0.4s;

					img {
						height: 60px;
						width: 60px;

						&.active-icon {
							opacity: 1;
							visibility: visible;
						}
					}
				}
			}
			
			.browser-wrap.contains-multi{
				.browser.multi{
					opacity: 1;
					transform: translate(10px, 10px);
				}
				.browser:not(.multi){
					transform: translate(-10px, -10px);
					filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.05));
				}
			}
		}

		.hover-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 100;
			border-radius: 15px;
			background: var(--lake-architecture-background-hover, #E5F5FF);
			padding: 15px;
			visibility: hidden;
			opacity: 0;
			transition: all 0.3s;
			cursor: default;

			>div {
				display: none;

				&.active-item {
					display: block;
				}
			}

			h4 {
				color: var(--blue-40, #357197);
			}

			p {
				@include body-small();
				color: var(--main-text-secondary-color, #666);
			}
		}

		

		.storage .folder,
		.database .catalog {
			height: 120px;
			padding: 30px;
			text-align: center;

			img {
				width: 80px;
			}
		}

		.database .catalog {
			>img {
				width: 65px;
			}

			.icons {
				position: absolute;
				top: 97px;
				left: 50%;
				transform: translateX(-50%);
				width: 65px;
				height: 50px;

				img {
					width: 26px;
					height: auto;
					position: absolute;
					left: 50%;
					top: 0;
					transform: translateX(-50%);
					opacity: 0;
					visibility: hidden;
					transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.4s ease-in-out;

					&.active-icon {
						opacity: 1;
						visibility: visible;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
	
	span.choosen-catalog,
	span.choosen-storage{
		font-weight: 400;
	}

	.database-storage {
		position: relative;
		width: calc(50% - 8px);
		display: flex;
		flex-direction: column;
		gap: 15px;
		padding: 16px;
		border-radius: 15px;
		border: 1px solid var(--lake-ribbon-border-color, rgba(153, 216, 255, 0.60));
		background: var(--lake-infobox-tertiary-background-color, rgba(178, 226, 255, 0.60));
		
		> h4 {
			@include title-2;
		}
		
		.connector {
			position: absolute;
			top: calc(50% + 1px);
			height: 10px;
			width: 50px;
			left: calc(-28px - 8px);
			z-index: 101;
		
			svg {
				width: 100%;
				height: auto;
			}
		}
	}
}

.topbar{
	.hoverlabel{
		color: var(--main-text-tertiary-color, #B2B2B2);
		position: absolute;
		left: 385px;
		top: 33px;
		pointer-events: none;
		opacity: 0;
		transition: opacity .3s;
	}
	ul:hover + .hoverlabel{
		opacity: 1;
	}
}

/** DOCS / SPECIFICATION **/
body.documentation #ducklake_logo{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' version='1.1' viewBox='0 0 211.844 38'%3E%3Cdefs%3E%3Cstyle%3E.st0%7Bfill:%231d1d1b%7D%3C/style%3E%3C/defs%3E%3Cpath d='M19 0C8.507 0 0 8.507 0 19s8.507 19 19 19 19-8.507 19-19S29.493 0 19 0Z' style='fill:%231a1a1a'/%3E%3Cpath d='M16.603 9.608a9.308 9.308 0 0 1 8.075 4.62h1.727c2.375 0 4.361 1.9 4.361 4.318 0 2.375-1.943 4.361-4.361 4.361h-1.252a9.324 9.324 0 0 1-8.161 5.484h-.864c-4.966-.259-8.895-4.361-8.895-9.37 0-5.182 4.189-9.414 9.37-9.414Zm0 2.85c-3.584 0-6.52 2.936-6.52 6.52a6.514 6.514 0 0 0 6.52 6.52c2.893 0 5.355-1.9 6.218-4.491l.302-.993h3.282c.777 0 1.468-.691 1.468-1.468s-.648-1.468-1.468-1.468h-3.498l-.389-.82c-1.036-2.245-3.282-3.8-5.916-3.8Z' style='fill:%232eafff;fill-rule:evenodd'/%3E%3Cpath d='M70.327 22.083c0 1.684-.475 3.093-2.245 3.093s-2.245-1.409-2.245-3.093v-7.168h-3.195v7.859c0 3.066 2.461 4.853 5.441 4.853s5.441-1.787 5.441-4.853v-7.859h-3.195v7.168ZM51.456 10.62h-4.953v16.705h4.953c5.3 0 9.286-1.729 9.286-8.364s-3.986-8.341-9.286-8.341Zm-.138 14.124h-1.521V13.2h1.521c3.041 0 6.014.76 6.014 5.76 0 5.045-2.973 5.784-6.014 5.784ZM81.675 25.158c-1.751 0-2.995-1.451-2.995-4.055 0-2.581 1.313-3.986 2.972-3.986 1.222 0 2.327.853 2.581 2.051h3.041c-.438-3.064-3.019-4.516-5.622-4.516-3.709 0-6.221 2.719-6.221 6.498 0 3.756 2.373 6.475 6.083 6.475 2.58 0 5.138-1.129 5.875-4.517h-3.041c-.438 1.475-1.567 2.051-2.673 2.051ZM100.52 14.928h-3.571l-4.516 4.977V10.62h-3.179v16.704h3.179v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.446-4.747zM105.38 10.62h-3.294v16.704h11.427v-2.673h-8.133V10.62zM123.073 16.518c-.668-1.175-1.936-1.866-3.502-1.866-3.019 0-5.461 2.581-5.461 6.474 0 3.963 2.512 6.498 5.461 6.498 1.29 0 2.695-.484 3.502-1.866v1.566h3.18V14.928h-3.18v1.59Zm-2.788 8.664c-1.659 0-2.834-1.613-2.834-4.032s1.175-4.055 2.834-4.055c1.751 0 2.903 1.543 2.903 4.032 0 2.558-1.152 4.056-2.903 4.056ZM140.351 14.928h-3.571l-4.516 4.977V10.62h-3.179v16.704h3.179v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.446-4.747zM147.031 14.652c-3.663 0-6.221 2.742-6.221 6.428 0 3.571 2.327 6.544 6.313 6.544 3.387 0 5.184-2.051 5.853-3.895h-3.272c-.645 1.083-1.612 1.429-2.604 1.429-1.521 0-2.949-1.037-3.134-3.156h9.147c.115-4.378-2.258-7.35-6.083-7.35Zm-3.018 5.161c.253-2.097 1.797-2.834 2.995-2.834 1.336 0 2.811.737 2.88 2.834h-5.875ZM165.611 10.62h-4.056v16.705h4.056c5.322 0 9.055-1.936 9.055-8.364 0-6.382-3.732-8.341-9.055-8.341Zm-.047 15.299h-2.465V12.025h2.465c3.802 0 7.466.76 7.466 6.935s-3.664 6.958-7.466 6.958ZM181.921 14.721c-2.949 0-5.599 1.936-5.599 6.451s2.649 6.452 5.599 6.452c2.972 0 5.622-1.936 5.622-6.452s-2.65-6.451-5.622-6.451Zm0 11.59c-2.396 0-4.078-1.566-4.078-5.139s1.682-5.138 4.078-5.138c2.373 0 4.102 1.567 4.102 5.138s-1.729 5.139-4.102 5.139ZM194.798 26.311c-2.143 0-4.055-1.636-4.055-5.161 0-3.41 1.912-5.115 4.032-5.115 1.82 0 3.271 1.014 3.732 2.88h1.497c-.368-2.212-2.258-4.194-5.092-4.194-3.617 0-5.69 2.604-5.69 6.451 0 3.802 2.073 6.452 5.575 6.452 2.742 0 4.839-1.659 5.322-4.217h-1.521c-.368 1.544-1.682 2.903-3.802 2.903ZM207.561 20.435l-1.752-.322c-1.382-.253-2.327-.898-2.327-2.12 0-1.498 1.798-2.027 3.157-2.027 1.751 0 3.11.875 3.41 2.35h1.497c-.299-1.958-2.097-3.618-4.77-3.618-2.787 0-4.746 1.452-4.746 3.41s1.59 2.949 3.364 3.318l1.936.369c1.682.322 3.064.829 3.064 2.28 0 1.659-1.866 2.281-3.364 2.281-1.89 0-3.502-.898-3.756-2.834h-1.497c.368 2.834 2.58 4.102 5.138 4.102 2.695 0 4.931-1.313 4.931-3.779 0-2.35-2.258-3.041-4.285-3.41Z' class='st0'/%3E%3C/svg%3E");
	width: 211.84px;
}

html.darkmode body.documentation #ducklake_logo{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' version='1.1' viewBox='0 0 211.844 38'%3E%3Cdefs%3E%3Cstyle%3E.st2%7Bfill:%23fff%7D%3C/style%3E%3C/defs%3E%3Cpath d='M70.327 22.083c0 1.684-.475 3.093-2.245 3.093s-2.245-1.409-2.245-3.093v-7.168h-3.195v7.859c0 3.066 2.461 4.853 5.441 4.853s5.441-1.787 5.441-4.853v-7.859h-3.195v7.168ZM51.456 10.62h-4.953v16.705h4.953c5.3 0 9.286-1.729 9.286-8.364s-3.986-8.341-9.286-8.341Zm-.138 14.124h-1.521V13.2h1.521c3.041 0 6.014.76 6.014 5.76 0 5.045-2.973 5.784-6.014 5.784ZM81.675 25.158c-1.751 0-2.995-1.451-2.995-4.055 0-2.581 1.313-3.986 2.972-3.986 1.222 0 2.327.853 2.581 2.051h3.041c-.438-3.064-3.019-4.516-5.622-4.516-3.709 0-6.221 2.719-6.221 6.498 0 3.756 2.373 6.475 6.083 6.475 2.58 0 5.138-1.129 5.875-4.517h-3.041c-.438 1.475-1.567 2.051-2.673 2.051ZM100.52 14.928h-3.571l-4.516 4.977V10.62h-3.179v16.704h3.179v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.446-4.747zM105.38 10.62h-3.294v16.704h11.427v-2.673h-8.133V10.62zM123.073 16.518c-.668-1.175-1.936-1.866-3.502-1.866-3.019 0-5.461 2.581-5.461 6.474 0 3.963 2.512 6.498 5.461 6.498 1.29 0 2.695-.484 3.502-1.866v1.566h3.18V14.928h-3.18v1.59Zm-2.788 8.664c-1.659 0-2.834-1.613-2.834-4.032s1.175-4.055 2.834-4.055c1.751 0 2.903 1.543 2.903 4.032 0 2.558-1.152 4.056-2.903 4.056ZM140.351 14.928h-3.571l-4.516 4.977V10.62h-3.179v16.704h3.179v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.446-4.747zM147.031 14.652c-3.663 0-6.221 2.742-6.221 6.428 0 3.571 2.327 6.544 6.313 6.544 3.387 0 5.184-2.051 5.853-3.895h-3.272c-.645 1.083-1.612 1.429-2.604 1.429-1.521 0-2.949-1.037-3.134-3.156h9.147c.115-4.378-2.258-7.35-6.083-7.35Zm-3.018 5.161c.253-2.097 1.797-2.834 2.995-2.834 1.336 0 2.811.737 2.88 2.834h-5.875ZM165.611 10.62h-4.056v16.705h4.056c5.322 0 9.055-1.936 9.055-8.364 0-6.382-3.732-8.341-9.055-8.341Zm-.047 15.299h-2.465V12.025h2.465c3.802 0 7.466.76 7.466 6.935s-3.664 6.958-7.466 6.958ZM181.921 14.721c-2.949 0-5.599 1.936-5.599 6.451s2.649 6.452 5.599 6.452c2.972 0 5.622-1.936 5.622-6.452s-2.65-6.451-5.622-6.451Zm0 11.59c-2.396 0-4.078-1.566-4.078-5.139s1.682-5.138 4.078-5.138c2.373 0 4.102 1.567 4.102 5.138s-1.729 5.139-4.102 5.139ZM194.798 26.311c-2.143 0-4.055-1.636-4.055-5.161 0-3.41 1.912-5.115 4.032-5.115 1.82 0 3.271 1.014 3.732 2.88h1.497c-.368-2.212-2.258-4.194-5.092-4.194-3.617 0-5.69 2.604-5.69 6.451 0 3.802 2.073 6.452 5.575 6.452 2.742 0 4.839-1.659 5.322-4.217h-1.521c-.368 1.544-1.682 2.903-3.802 2.903ZM207.561 20.435l-1.752-.322c-1.382-.253-2.327-.898-2.327-2.12 0-1.498 1.798-2.027 3.157-2.027 1.751 0 3.11.875 3.41 2.35h1.497c-.299-1.958-2.097-3.618-4.77-3.618-2.787 0-4.746 1.452-4.746 3.41s1.59 2.949 3.364 3.318l1.936.369c1.682.322 3.064.829 3.064 2.28 0 1.659-1.866 2.281-3.364 2.281-1.89 0-3.502-.898-3.756-2.834h-1.497c.368 2.834 2.58 4.102 5.138 4.102 2.695 0 4.931-1.313 4.931-3.779 0-2.35-2.258-3.041-4.285-3.41Z' class='st2'/%3E%3Cpath d='M19 0C8.507 0 0 8.507 0 19s8.507 19 19 19 19-8.507 19-19S29.493 0 19 0Z' style='fill:%232eafff;fill-rule:evenodd'/%3E%3Cpath d='M16.603 9.608a9.308 9.308 0 0 1 8.075 4.62h1.727c2.375 0 4.361 1.9 4.361 4.318 0 2.375-1.943 4.361-4.361 4.361h-1.252a9.324 9.324 0 0 1-8.161 5.484h-.864c-4.966-.259-8.895-4.361-8.895-9.37 0-5.182 4.189-9.414 9.37-9.414Zm0 2.85c-3.584 0-6.52 2.936-6.52 6.52a6.514 6.514 0 0 0 6.52 6.52c2.893 0 5.355-1.9 6.218-4.491l.302-.993h3.282c.777 0 1.468-.691 1.468-1.468s-.648-1.468-1.468-1.468h-3.498l-.389-.82c-1.036-2.245-3.282-3.8-5.916-3.8Z' style='fill-rule:evenodd;fill:%231d1d1b'/%3E%3C/svg%3E");
}

section.blog .postpreview .postimg, section.upcoming-events .postpreview .postimg, .post-list .newstiles .postpreview .postimg{
	background: var(--blue-70);
}


body.faq,
body.manifesto{
	.wrap * + h3{
		margin-top: 1.8em;
	}
	ol,
	ul{
		padding: 0;
		margin: 0;
		padding-left: 20px;
	}
	ol li,
	ul li,
	p{
		@include body-large();
	}
	p + h4{
		margin-top: 2em;
	}
	img{
		vertical-align: bottom;
	}
	#main_content_wrap{
		img{
			width: 100%;
			height: auto;
		}
		@media only screen and (max-width: 750px) {
			padding: 15px;	
		}
	}
}

body.manifesto{
	.pagetitle{
		padding-bottom: 10px;
	}
}

/* Footer **/
footer .sitefooter .footercontent > div a:hover{
	color: var(--blue-70, #2eafff);
}


@media only screen and (max-width: 1200px) {

	section.architecture .illustration{
		width: 700px;
	}
	
	section.architecture .diagram .client .browser-wrap .browser{
		width: 220px;
		.broser-content{
			top: 52px;
		}
	}
	
}

@media only screen and (max-width: 940px) {
	.cards.horizontal.icons .card, .cards.vertical.icons .card{
		width: calc((100% - 60px) / 2);
	}
	body.landing h1{
		max-width: unset;
	}
	body.documentation #ducklake_logo{
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' fill='none'%3E%3Cpath fill='%231A1A1A' d='M19 0C8.524 0 0 8.524 0 19s8.524 19 19 19 19-8.524 19-19S29.476 0 19 0Z'/%3E%3Cpath fill='%232EAFFF' fill-rule='evenodd' d='M17.39 9.66a9.376 9.376 0 0 1 8.093 4.62h1.707v.01c2.357 0 4.345 1.895 4.35 4.3h.01c0 2.39-1.96 4.35-4.35 4.35h-1.264c-1.43 3.132-4.526 5.344-8.157 5.492l-.39.008-.483-.013A9.384 9.384 0 0 1 8 19.05v-.01c0-5.19 4.2-9.39 9.39-9.39v.01Zm0 2.85c-3.6 0-6.53 2.92-6.53 6.53v.01a6.531 6.531 0 0 0 12.74 2.02l.32-.99h3.28c.797 0 1.484-.674 1.49-1.48h-.01c0-.79-.66-1.46-1.49-1.46H23.7l-.38-.83a6.513 6.513 0 0 0-5.93-3.8Z' clip-rule='evenodd'/%3E%3C/svg%3E");
		width: 38px;
	}
	html.darkmode body.documentation #ducklake_logo{
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='38' fill='none'%3E%3Cpath fill='%232EAFFF' d='M19.459 0c-10.476 0-19 8.524-19 19s8.524 19 19 19 19-8.524 19-19-8.524-19-19-19Z'/%3E%3Cpath fill='%231A1A1A' fill-rule='evenodd' d='M17.849 9.66a9.376 9.376 0 0 1 8.093 4.62h1.707v.01c2.357 0 4.345 1.895 4.35 4.3h.01c0 2.39-1.96 4.35-4.35 4.35h-1.264c-1.43 3.132-4.526 5.344-8.157 5.492l-.39.008-.483-.013A9.384 9.384 0 0 1 8.46 19.05v-.01c0-5.19 4.2-9.39 9.39-9.39v.01Zm0 2.85c-3.6 0-6.53 2.92-6.53 6.53v.01a6.531 6.531 0 0 0 12.74 2.02l.32-.99h3.28c.797 0 1.484-.674 1.49-1.48h-.01c0-.79-.66-1.46-1.49-1.46h-3.49l-.38-.83a6.513 6.513 0 0 0-5.93-3.8Z' clip-rule='evenodd'/%3E%3C/svg%3E");
	}
}

@media only screen and (max-width: 730px) {
	
	section.architecture .illustration{
		width: 100%;
	}
}
@media only screen and (max-width: 690px) {
	body.landing {
		.wave{
			height: 15px;
			transform: translateY(-15px);
		}
		section.architecture{
			padding-top: 50px;
		}
		section.welcome{
			padding-bottom: 100px;
		}
	}

	.cards.horizontal.icons .card,
	.cards.vertical.icons .card {
		width: 100%;
	}
	body.landing .window .content{
		padding: 15px;
	}
	body.landing section#quickinstall .wrap .install{
		width: 100%;
	}
	
	.topbar{ 
		.hoverlabel{
			display: none;
		}
		ul{
			margin-left: 15px;
		}
	}

	section.architecture {
		.diagram {
			flex-wrap: wrap;
			padding: 15px;
			
			.client,
			.database,
			.storage {
				padding: 10px;
			}

			.client {
				width: 100%;
				height: 250px;

				.browser-wrap {
					
					.browser {
					
						&.multi{
							opacity: 1;
						}
					
						.broser-content {
							top: 58%;
							transform: translateY(-50%);
							gap: 10px;
						}
						
					}
				}

				.browser {

					.ducklake img{
						width: 60px;
						height: 60px;
					}

					.broser-content {
						top: 48%;
						transform: translateY(-50%);
						gap: 20px;
					}
				}
			}

			.database-storage {
				width: 100%;
				flex-direction: row;
				flex-wrap: wrap;
				
				>h4{
					width: 100%;
				}
				
				.connector{
					left: calc(50% - 18px);
					top: -14px;
					transform: rotate(90deg);
				}
			}

			.database,
			.storage {
				width: calc(50% - 8px);
				height: 165px;
			}
			
			.storage .folder,
			.database .catalog{
				padding: 0;
				display: flex;
				height: calc(100% - 18px);
				position: relative;
				
				.icons{
					top: 60px;
				}
			}


		}
		
	}
	

	
	@media (pointer: coarse) {
		section.architecture .diagram .client:hover .hover-content, section.architecture .diagram .database:hover .hover-content, section.architecture .diagram .storage:hover .hover-content{
			opacity: 0;
		}
	}
	
}

@media only screen and (max-width: 590px) {
	section.architecture .diagram .client {
		height: unset;
		aspect-ratio: 16 / 9;
	}
}

@media only screen and (max-width: 550px) {
	section.architecture {
		.diagram {
			.database .catalog>img {
				width: 60px;
			}

			.storage .folder img {
				width: 70px;
			}
		
		
			.client .browser .ducklake img{
				width: 55px;
				height: 55px;
			}
		}
	}
}

@media only screen and (max-width: 490px) {
	section.architecture .diagram .client{
		aspect-ratio: 16 / 13;
	}
}






// General Code-Highlight Styles (Todo: Remove from docu.scss 767 to 816)
.highlight {
	border-radius: 10px;
}

.highlighter-rouge + .highlighter-rouge{
	margin-top: 1em;
}

code.highlighter-rouge,
code.language-plaintext {
	border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
	background: var(--doc-codebox-background-color, #F2F2F2);
	font-family: $fontMonoMedium;
	border-radius: 3px;
	padding: 0 2px;
	margin: 0;

	em {
		font-family: $fontMonoItalicMedium;
	}
}

pre code {
	display: block;
	-webkit-box-shadow: none;
	box-shadow: none;
	@include code-large();
}

pre.highlight {
	tab-size: 4;
	-moz-tab-size: 4;
	-o-tab-size: 4;

	white-space: pre;
	overflow-x: auto;
	padding: 15px;
	margin: 0;

	&::-webkit-scrollbar {
		height: 5px;
	}

	&::-webkit-scrollbar-track {
		background: var(--doc-scrollbar-bg, #E6E6E6);
	}

	&::-webkit-scrollbar-thumb {
		background: var(--doc-scrollbar-slider, #CCC);
	}
}

div.highlight {
	width: 100%;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: var(--doc-codebox-background-color, #F2F2F2);
	border: 1px solid var(--doc-codebox-border-color, #D9D9D9);

	transition: border-color 0.3s;
	-webkit-transition: border-color 0.3s;
	-o-transition: border-color 0.3s;
}

.language-text div.highlight {
	border: none;
}

.language-console div.highlight {
	border: 1px solid var(--doc-warning-border-color, rgba(255, 204, 204, 0.60));
}

.language-console pre {
	background: var(--doc-warning-background-color, rgba(255, 229, 229, 0.60));
}



/** SPECIAL DUCKLAKE DARKMODE STYLES **/

html.darkmode {
	body.landing {
		.wave {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 364.8 28.6'%3E%3Cpath d='M364.8 0h-.1c-45.5 0-68.3 4.2-91.1 8.3-22.8 4.2-45.5 8.3-91 8.3s-68.3-4.2-91.1-8.3C68.7 4.2 45.9 0 .4 0H0v28.6h364.8V0Z' style='fill:%230d0d0d'/%3E%3C/svg%3E");
		}
	}
	body .newswrap .postwrap .infoline .icon{
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38.177 38'%3E%3Cpath d='M19 0C8.507 0 0 8.507 0 19s8.507 19 19 19 19-8.507 19-19S29.493 0 19 0Z' style='fill:%232eafff;fill-rule:evenodd'/%3E%3Cpath d='M16.603 9.608a9.31 9.31 0 0 1 8.075 4.62h1.727c2.375 0 4.361 1.9 4.361 4.318 0 2.375-1.943 4.361-4.361 4.361h-1.252a9.326 9.326 0 0 1-8.161 5.484h-.864c-4.966-.259-8.895-4.361-8.895-9.37 0-5.182 4.189-9.414 9.37-9.414Zm0 2.85c-3.584 0-6.52 2.936-6.52 6.52a6.513 6.513 0 0 0 6.508 6.52h.012c2.893 0 5.355-1.9 6.218-4.491l.302-.993h3.282c.777 0 1.468-.691 1.468-1.468s-.648-1.468-1.468-1.468h-3.498l-.389-.82c-1.036-2.245-3.282-3.8-5.916-3.8Z' style='fill-rule:evenodd;fill:%231d1d1b'/%3E%3C/svg%3E")!important;
	}
	.banner .close{
		filter: invert(0);
	}
	section.architecture {
		.diagram {
			.connector svg path {
				fill: #B2B2B2;
			}
			.database .catalog .icons img:not(.duckdb){
				filter: invert(1);
			}
			.client .browser .ducklake img.ducklake_icon{
				content: url('/images/deployment_diagram/dark/ducklake_comb.svg');
			}
			.client .browser>img{
				content: url('/images/deployment_diagram/dark/window.svg');
			}
			.storage .folder img{
				content: url('/images/deployment_diagram/dark/parquet_folder.svg');
			}
			.database .catalog > img{
				content: url('/images/deployment_diagram/dark/database.svg');
			}
		}
	}

}