hazmat-suite/src-ui/scss/_layout.scss

// general style corrections


// stretch content -> sticky footer

html {
	scroll-behavior: smooth;
}

body {
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	min-height: 100vh;
	position: relative;
}

#ch-ggs-web-suite-content {
	flex: 1 0 auto;
}

.ch-ggs-web-suite-section-gray {
	background: $antrazit05;
}
.ch-ggs-web-suite-section-dark {
	background: $primary-d-200;
	&,
	& a:not([class]) {
		color: $white;
	}
}


h1, h2 {
	font-weight: 300;
}

footer h2 {
	margin-bottom: 1.5rem;
}

.ch-ggs-web-suite-section-title {
	margin-bottom: 2.5rem;
}

.navbar-brand svg,
.navbar-brand img {
	max-width: 243px;
	max-height: 60px;
	width: auto;
}

// header

#ch-ggs-web-suite-header {
	padding: 18px 0;
	border-bottom: 2px solid $primary;
}

// Navigation

#ch-ggs-web-suite-toggler-nav {
	li.level-rel-0 > .nav-link {
		color: $antrazit85;
		font-weight: bold;
		font-size: $font-size-md;
		text-transform: uppercase;
		padding: 0.5rem 1rem;
		line-height: 1;
		&:hover {
			color: $primary;
		}
		&.ch-ggs-web-suite-language-nav {
			background-color: $antrazit05;
			margin-left: 2px;
			padding: 0.5rem 0.75rem;
			&.active {
				background-color: $primary;
				color: white;
			}
		}

		.ifc {
			vertical-align: middle;
			position: relative;
			top: -1px;
		}
	}
}

.navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
}

.navbar-toggler {
  --bar-height: 4px;
  --bar-margin: 5px;
  --bar-color: #2d2d2d;
	&:focus {
		outline: none;
	}
	
	.navbar-toggler-bar {
		background-color: var(--bar-color);
        position: relative;
		display: block;
        height: var(--bar-height);
        margin: var(--bar-margin) 0;
		width: 26px;
		transform: rotate(0deg);
		transform-origin: center;
		transition: .25s ease-in-out;
		will-change: transform;
	}

    &[aria-expanded="true"],
    &:hover,
    &:focus {
      --bar-color: #{$primary};
    }

  &:focus-within {
    //--#{$prefix}navbar-toggler-focus-width: 1px;
  }

	&[aria-expanded="true"] {
		.navbar-toggler-bar:nth-child(1),
        .navbar-toggler-bar:nth-child(3) {
          transform: translateY(calc(var(--bar-height) + var(--bar-margin))) rotate(45deg);
		}
		.navbar-toggler-bar:nth-child(2) {
			opacity: 0;
		}
      .navbar-toggler-bar:nth-child(3) {
        transform: translateY(calc(-1 * calc(var(--bar-height) + var(--bar-margin)))) rotate(-45deg);
      }
	}
}

@include media-breakpoint-down(md) {
	.navbar-brand svg,
	.navbar-brand img {
		max-width: 180px;
		max-height: 44px;
	}

	#ch-ggs-web-suite-toggler-nav {
		> .navbar-nav {
			padding: 40px 0;
		}
		li.level-rel-0 > .nav-link {
			padding-left: 0;
		}
		
		.dropdown-menu {
			border: none;
			padding: 0.1rem 0 0.8rem;
			.dropdown-item {
				padding: 0.15rem .5rem;
			}
		}

		.ch-ggs-web-suite-language-nav {
			display: inline-block;
		}
	}
}

@include media-breakpoint-up(lg) {
	#ch-ggs-web-suite-nav {
		padding: 0;
	}
}


// content

h1 {
	color: $primary;
	text-align: center;
	border-bottom: 1px solid $antrazit05;
	padding-bottom: 22px;
	margin-bottom: 30px;
}


#ch-ggs-web-suite-content > .container,
#ch-ggs-web-suite-content > section > .container {
	padding-top: 120px;
	padding-bottom: 120px;
}

#ch-ggs-web-suite-content > section > .container:last-child > *:last-child,
.ch-ggs-web-suite-common-content-holder:last-child > .ch-ggs-web-suite-common-content > *:last-child {
	margin-bottom: 0;
}

#ch-ggs-web-suite-content-step {
	background-color: $antrazit05;
	padding: 15px 0;
}



// footer

#ch-ggs-web-suite-footer-addr {
	border-top: 5px solid $primary-d-100;
	background-color: $primary;
	color: white;
	padding: 40px 0 28px;
	a {
		color: white;
	}
}

#ch-ggs-web-suite-footer-payment {
	padding: 20px 0;
	dl {
		margin: 0;
		> dt {
			display: inline-block;
		}
		> dd {
			display: inline-block;
			font-weight: bold;
			color: $antrazit60;
		}
	}
	img {
		width: auto;
		height: 40px;
		margin-right: 15px;
	}
}

#ch-ggs-web-suite-footer-copyright {
	background-color: $antrazit;
	color: white;
	padding: 18px;
	a {
		color: white;
	}
}
#ch-ggs-web-suite-footer-creator > a {
	color: $antrazit60;
}