One Hat Cyber Team

Edit File: _rd-navbar-fullwidth.scss

.rd-navbar-fullwidth {
	height: 80px;
	color: $navbar-color;
	background-color: $navbar-background;
	box-shadow: 0 0 0 rgba( #888, 0 );
	transition: height .2s, box-shadow .2s, background-color .2s;

.logo-image-default {
		display: none;
	}

.logo-image-inverse {
		display: inline-block;
	}

.navbar-container {
		display: flex;
		align-items: stretch;
		padding: 0 23px;
		height: 100%;
		max-width: 1826px;
		margin-left: auto;
		margin-right: auto;
	}

.navbar-cell {
		display: flex;
		align-items: stretch;
		padding: 0 15px;
	}

.navbar-spacer {
		display: block;
		flex-grow: 1;
		padding: 0;
	}

.navbar-switch {
		display: none;
	}

.navbar-panel {
		align-self: center;
	}

.navbar-subpanel {
		display: flex;
		align-self: center;
		margin: px-to-rem( 0, -16px );
	}

.navbar-subpanel-item {
		position: relative;
		display: flex;
		align-items: center;
		padding: px-to-rem( 0, 16px );
	}

.navbar-subpanel-item-mobile {
		display: none;
	}

.navbar-button {
		display: block;
		font-size: px-to-rem( 25px );
	}

.navbar-action-button {
		margin: 0;
	}

.logo {
		max-width: 120px;
	}

.navbar-switch-menu {
		width: px-to-rem( 45px );
		height: px-to-rem( 45px );
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: px-to-rem( 45px );
	}

// Navbar Social
	.navbar-social {
		@include group( px-to-rem( 15px ) );
	}

.navbar-social-text {
		padding-top: 2px;
		font-size: $font-size-sm;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: rgba( $navbar-color, .6 );

&:hover {
			color: rgba( $navbar-color, 1 );
		}
	}

.navbar-social-icon {
		font-size: px-to-rem( 20px );
		color: rgba( $navbar-color, .3 );

&:hover {
			color: $navbar-color;
		}
	}

.navbar-social-button {
		display: none;
	}

// Navbar list
	.navbar-list {
		font-size: px-to-rem( 18px );
	}

.navbar-list-icon {
		padding-right: px-to-rem( 6px );
	}

.navbar-list-link {
		color: $navbar-color;
		transition: $transition-base;

&:hover {
			color: rgba( $navbar-color, .7 );
		}
	}

.navbar-list-button {
		display: none;
	}

// Info
	.navbar-info {
		> * + * {
			margin-left: 30px;
		}
	}

.navbar-info-button {
		display: none;
	}

.navbar-info-icon {
		color: $primary;
	}

.navbar-info-link {
		color: $gray-900;
		font-weight: 400;
		font-size: px-to-rem( 17px );

&:hover {
			color: $primary;
		}
	}

// Contact
	.navbar-contact-btn {
		width: px-to-rem( 45px );
		height: px-to-rem( 45px );
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: px-to-rem( 45px );

&::after {
			margin-top: .05em;
		}

&-rounded {
			width: px-to-rem( 45px );
			height: px-to-rem( 45px );
			font-size: px-to-rem( 26px );
			border: 2px solid;
			border-radius: 50%;
		}
	}

.navbar-contact-text {
		margin-right: px-to-rem( 16px );
		font-size: $font-size-sm *.93;
		font-weight: 600;
		letter-spacing: .05em;
		text-transform: uppercase;
	}

.navbar-contact {
		position: absolute;
		top: 100%;
		right: -10px;
		width: 321px;
		padding: 35px 15px 35px 22px;
		color: $body-color;
		background: $white;
		overflow-y: auto;
		transform: translateY( -10px );
		box-shadow: $box-shadow-sm;
		opacity: 0;
		pointer-events: none;
		transition: .2s;

.blurb-title {
			color: $headings-color;
		}

.list-divided > .list-item {
			border-bottom-color: $border-color;
		}
	}

&.navbar-contact-active {
		.navbar-contact {
			transform: translateX(0);
			opacity: 1;
			pointer-events: auto;
		}
	}

// Navbar cart
	.navbar-cart {
		position: absolute;
		top: 100%;
		right: -10px;
		width: 321px;
		margin-top: 10px;
		padding: 26px 15px 26px 22px;
		color: $body-color;
		background: $white;
		transform: translateY( -10px );
		box-shadow: $box-shadow-sm;
		opacity: 0;
		pointer-events: none;
		transition: .2s;
	}

&.navbar-cart-active {
		.navbar-cart {
			transform: translateX(0);
			opacity: 1;
			pointer-events: auto;
		}
	}

&.rd-navbar--is-stuck {
		box-shadow: $navbar-shadow;

.navbar-action-button {
			padding-top: 1px;
			padding-bottom: 1px;
		}

.navbar-non-stuck {
			display: none;
		}
	}

.navbar-cart-item {
		display: flex;
		padding-bottom: px-to-rem( 29px );
		border-bottom: 1px solid $border-color;
	}

.navbar-cart-item-left {
		flex-shrink: 0;
	}

.navbar-cart-item-body {
		padding-left: 20px;
		flex-grow: 1;
	}

.navbar-cart-item-heading,
	.navbar-cart-total {
		font-size: $font-size-lg;
		font-weight: 400;
	}

.navbar-cart-item-heading {
		color: $body-color;

&:hover {
			color: $navbar-hover;
		}
	}

.navbar-cart-total {
		color: $gray-900;
	}

.navbar-cart-item-price-value {
		color: $navbar-hover;
	}

.navbar-cart-remove {
		font-size: $font-size-lg;
		color: $gray-400;
		transition: $transition-base;

&:hover {
			color: $primary;
		}
	}

* + .navbar-cart-total {
		margin-top: px-to-rem( 17px );
	}

* + .navbar-cart-btn {
		margin-top: px-to-rem( 15px );
	}

// Navbar stuck
	&.rd-navbar--is-stuck {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 60px;
	}

.navbar-navigation-back {
		display: none;
	}

// Root
	.navbar-navigation {
		display: flex;
		padding: 0;
		margin: 0 -20px;
	}

.navbar-navigation-root-item {
		display: flex;
		align-items: center;
		padding: 0 20px;
		font-size: $font-size-sm *.93;
		font-weight: 600;
		letter-spacing: .05em;
		text-transform: uppercase;

> .rd-navbar-submenu-toggle {
			right: px-to-rem( 7px );
			transform: translateY( -50% ) rotate( 90deg );
			-moz-padding-left: px-to-rem( 3px );
		}

&.focus,
		&.opened,
		&.active,
		&.rd-navbar-submenu.focus,
		&.rd-navbar-submenu.opened {
			> .navbar-navigation-root-link {
				color: rgba( $white, .5 );
			}

> .rd-navbar-submenu-toggle {
				color: $primary;
			}
		}
	}

.navbar-navigation-root-link {
		position: relative;
		top: 3px;
		display: block;
		line-height: 1;
		color: $navbar-color;
		transition: opacity .2s;
		font-size: $font-size-sm;
		letter-spacing: .05em;
		font-weight: 600;

&:hover {
			color: rgba( $navbar-color, .7 );
		}
	}

// Dropdown
	.navbar-navigation-dropdown {
		position: absolute;
		left: -20px;
		top: 100%;
		transform: translate(0, 10%) scale(.8);
		z-index: 1;
		padding: 22px 20px 22px 38px;
		min-width: 220px;
		opacity: 0;
		font-size: $font-size-base;
		font-weight: 400;
		text-transform: none;
		visibility: hidden;
		background: $white;
		transition: .2s;
		letter-spacing: .03em;
		border-radius: 6px;
		box-shadow: $box-shadow;
	}

.navbar-navigation-dropdown-item + .navbar-navigation-dropdown-item {
		margin-top: 8px;
	}

.navbar-navigation-dropdown-link {
		position: relative;
		display: block;
		color: $navbar-dropdown-color;
		transition: .2s;

&::before {
			content: '\f14f';
			position: absolute;
			top: 45%;
			left: -25px;
			z-index: -1;
			font-size: 1.25em;
			font-family: "Material Design Icons";
			transition: transform .1s;
			transform: translateY( -50% ) scale( 0 );
		}

& + .rd-navbar-submenu-toggle {
			display: block;
		}

&:hover {
			color: $navbar-hover;

&::before {
				transform: translateY( -50% ) scale( 1 );
			}
		}
	}

// Megamenu
	.navbar-navigation-megamenu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		transform: translateY(-10%) scale(.8);
		display: flex;
		justify-content: center;
		padding: 57px 40px 100px;
		opacity: 0;
		visibility: hidden;
		background: $navbar-background;
		box-shadow: $box-shadow;
		transition: .2s;
	}

.navbar-navigation-megamenu-container {
		max-width: 1320px;
		width: 100%;
		padding: 0 20px;
		margin: 0 auto;
	}

.navbar-navigation-megamenu-row {
		display: flex;
		margin: 0 -20px;
	}

.navbar-navigation-megamenu-column {
		flex: 1 0 25%;
		padding: 0 20px;
	}

.navbar-navigation-megamenu-heading {
		padding: 0 10px;
		font-size: px-to-rem( 24px );
		line-height: 1.2;
	}

.navbar-navigation-megamenu-link {
		position: relative;
		display: block;
		padding: 4px 10px;
		border-radius: 4px;
		overflow: hidden;
		color: $navbar-color;
		transition: .2s;

&::before {
			content: '';
			position: absolute;
			top: 10%;
			left: 10%;
			transform: translate(-50%,-50%);
			padding: 0;
			border-radius: 50%;
			z-index: -1;
			background: $gray-700;
			transition: padding .05s;
		}

& + .rd-navbar-submenu-toggle {
			display: block;
		}

&:hover {
			color: $white;

&::before {
				transition: padding .25s ease-in;
			}
		}
	}

.navbar-navigation-megamenu-heading + .navbar-navigation-megamenu-row,
	.navbar-navigation-megamenu-heading + .navbar-navigation-megamenu-item {
		margin-top: 19px;
	}

// Disabled
	.navbar-navigation-item-disabled {
		opacity: .5;
		pointer-events: none;
	}

// RD Navbar elements
	.rd-navbar--has-dropdown {
		position: relative;
	}

.rd-navbar-submenu-toggle {
		position: absolute;
		top: 50%;
		right: px-to-rem( -9px );
		font-size: .72em;
		line-height: 1;
		color: $navbar-dropdown-color;
		transform: translateY( -50% );
		transition: .2s;
		cursor: pointer;

&::before {
			content: '\f4f9';
			font-family: 'Material Design Icons';
		}
	}

.rd-navbar-megamenu {
		.rd-navbar-dropdown {
			transform: translate(10%, 0) scale(.8);
			left: 100%;
			top: -24px;
		}
	}

.rd-navbar-dropdown {
		.rd-navbar-dropdown {
			transform: translate(10%, 0) scale(.8);
			left: calc( 100% + 10px );
			top: -22px; // Parent dropdown padding compensation
		}

.rd-navbar-open-left {
			transform: translate(-10%, 0) scale(.8);
			left: auto;
			right: calc( 100% + 10px );
		}
	}

.rd-navbar-submenu {
		&.focus,
		&.opened {
			> .navbar-navigation-dropdown {
				transform: translate(0, 0) scale(1);
				opacity: 1;
				visibility: visible;
			}

> .navbar-navigation-megamenu {
				transform: translateY(0) scale(1);
				opacity: 1;
				visibility: visible;
			}

> .navbar-navigation-dropdown-link,
			> .navbar-navigation-megamenu-link {
				color: $navbar-hover;
			}

> .rd-navbar-submenu-toggle {
				color: $primary;
			}
		}
	}

.navbar-spacer-small {
		width: 8.4%;
	}

.navbar-cell-right {
		margin-left: auto;
		margin-right: 0;
	}

// Modifiers
	&.rd-navbar-default {

.rd-navbar-submenu-toggle {
			color: $white;
		}

.navbar-navigation-root-link {
			&:hover {
				color: $primary;
			}
		}

.navbar-navigation-root-item {
			&.active,
			&.focus,
			&.opened {
				> .navbar-navigation-root-link {
					color: $primary;
				}
			}
		}

.navbar-contact {
			margin-top: 10px;
		}

&.rd-navbar--is-stuck {
			.navbar-cart {
				top: 42px;
			}
		}
	}

&.navbar-dark {
		background-color: $gray-900;

.navbar-container {
			max-width: 2000px;
			padding: 0 0 0 54px;
		}

.navbar-subpanel {
			align-self: inherit;
		}

.navbar-subpanel-item-no-padding {
			padding: 0;
		}

.navbar-list {
			height: 100%;
			padding: px-to-rem( 10px, 26px );
			background: $primary;
		}

.navbar-list-link {
			color: $navbar-color;

&:hover {
				color: $gray-900;
			}
		}

// Contact
		.navbar-contact {
			right: 0;
			width: 100%;
			margin-top: 0;
			padding: px-to-rem( 38px, 42px );
			text-transform: none;
		}

.navbar-contact-text {
			position: absolute;
			top: 0;
			left: -543px;
			bottom: 0;
			display: flex;
			align-items: center;
			padding: 10px 40px;
			width: 799px;
			margin-right: 0;
			background-color: $gray-800;
			opacity: 0;
			transition: opacity .2s;
			pointer-events: none;

> span {
				color: $navbar-color;
			}
		}

&.navbar-contact-active {
			.navbar-contact-text {
				opacity: 1;
				pointer-events: auto;
			}
		}

// Cart
		.navbar-cart {
			margin-top: 0;
		}

// Dropdown
		.navbar-navigation-dropdown {
			background-color: $white;
			border-bottom: 2px solid $primary;
			border-radius: 2px;

.rd-navbar-submenu-toggle {
				color: $gray-900;
			}
		}

.navbar-navigation-dropdown-link {
			color: $gray-900;

&:hover {
				color: $navbar-hover;

+ .rd-navbar-submenu-toggle {
					color: $navbar-hover;
				}
			}
		}

.navbar-navigation-root-item > .navbar-navigation-dropdown {
			&::before {
				background-color: inherit;
				position: absolute;
				width: 12px;
				height: 12px;
				left: 20%;
				top: 0;
				content: '';
				transform: translateY( -50% ) rotate( -45deg );
			}
		}

// Stuck
		&.rd-navbar--is-stuck {
			height: 60px;
		}
	}

&.rd-navbar-line {
		background-color: transparent;

.navbar-container {
			max-width: 100%;
			padding: 0;
		}

// Dropdown
		.navbar-navigation-dropdown {
			background-color: $white;
			border-bottom: 2px solid $primary;
			border-radius: 2px;

.rd-navbar-submenu-toggle {
				color: $gray-900;
			}
		}

.navbar-navigation-dropdown-link {
			color: $gray-900;

&:hover {
				color: $navbar-hover;

+ .rd-navbar-submenu-toggle {
					color: $navbar-hover;
				}
			}
		}

.navbar-navigation-root-item > .navbar-navigation-dropdown {
			margin-top: 30px;

&::before {
				background-color: inherit;
				position: absolute;
				width: 12px;
				height: 12px;
				left: 20%;
				top: 0;
				content: '';
				transform: translateY( -50% ) rotate( -45deg );
			}
		}

// Contact
		.navbar-subpanel-contact {
			position: relative;
		}

.navbar-contact {
			right: 0;
			width: 100%;
			min-width: 310px;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

// Line grow
		.intro-line-row,
		.intro-line-col {
			min-height: 0;
		}

.intro-line-col {
			justify-content: center;
		}

.intro-line-col-center {
			padding: 0 px-to-rem( 15px );
		}

&.rd-navbar--is-stuck {
			background-color: $navbar-background;

.navbar-navigation-root-item > .navbar-navigation-dropdown {
				margin-top: 20px;
			}
		}
	}

&.rd-navbar-creative {
		background-color: transparent;

.navbar-container {
			max-width: 100%;
			padding: 0;
		}

.logo {
			position: relative;
			top: -4px;
		}

.navbar-row-left,
		.navbar-row-right {
			display: flex;
		}

.navbar-row-left {
			position: relative;
			flex-grow: 1;
			flex-shrink: 0;
			max-width: 70%;
			padding-right: 90px;
			margin-left: auto;

&::before,
			&::after {
				position: absolute;
				right: 90px;
				content: '';
				opacity: 0;
			}

&::before {
				top: 0;
				bottom: 0;
				width: 100vw;
				background-color: $white;
				transform: scale( .8 );
				transition: $transition-base;
			}

&::after {
				top: 50%;
				transform: translateY( -50% );
				height: 50%;
				border-left: 2px solid $primary;
				transition: 0s;
			}
		}

.navbar-navigation-item-hidden {
			opacity: 0;
			transition: $transition-base;
		}

&.navbar-navigation-active {

.navbar-navigation-dropdown {
				border-top-left-radius: 0;
				border-top-right-radius: 0;
			}

.navbar-navigation-root-link {
				color: $gray-900;

&:hover {
					color: $gray-900;
					opacity: .7;
				}
			}

.navbar-navigation-root-item {
				&.focus {
					.navbar-navigation-root-link {
						color: $gray-900;
						opacity: .7;
					}
				}
			}

.navbar-button.navbar-navigation-active::after {
				color: $gray-900;
			}

.logo-image-default {
				display: inline-block;
			}

.logo-image-inverse {
				display: none;
			}

.navbar-row-left {
				&::before {
					transform: scale( 1 );
				}

&::after {
					transition: .1s .2s;
				}

&::before,
				&::after {
					opacity: 1;
				}
			}

.navbar-navigation-item-hidden {
				opacity: 1;
			}

.rd-navbar-submenu-toggle {
				 color: $primary;
			 }
		}

.navbar-row-right {
			flex: 0 0 27%;
			max-width: 27%;
		}

.rd-navbar-submenu-toggle {
			color: $white;
		}

.navbar-subpanel {
			margin: 0 px-to-rem( -27px );
		}

.navbar-subpanel-item {
			padding: 0 px-to-rem( 27px );
		}

// Cart
		.navbar-cart {
			right: 1px;
			margin-top: 15px;

&::before {
				background-color: inherit;
				position: absolute;
				width: 8px;
				height: 8px;
				right: px-to-rem( 32px );
				top: 0;
				content: '';
				transform: translateY( -50% ) rotate( -45deg );
			}
		}

.navbar-cart-button {
			font-size: px-to-rem( 20px );
			color: rgba( $white, .3 );

&:hover {
				color: $white;
			}
		}

&.rd-navbar--is-stuck {
			background-color: $gray-900;
		}
	}

// Builder Context
	[data-x-mode='true'] & {
		.navbar-navigation-root-item {
			& > .rd-navbar-submenu-toggle {
				position: static;
				display: block;
				margin-left: 6px;
				line-height: 1;

&::before {
					content: '\e924';
				}

&:hover {
					cursor: pointer;
				}
			}

&.opened > .rd-navbar-submenu-toggle {
				color: $primary;
			}
		}
	}

// Media
	@include media-breakpoint-up( xxl ) {
		height: 134px;

.logo {
			max-width: 300px;
		}

.navbar-list {
			font-size: px-to-rem( 25px );
		}

&.navbar-dark {
			height: 112px;

.navbar-navigation-root-item > .navbar-navigation-dropdown {
				margin-top: -20px;
			}

.navbar-contact-text {
				left: -478px;
			}

&.rd-navbar--is-stuck {
				.navbar-navigation-root-item > .navbar-navigation-dropdown {
					margin-top: 0;
				}
			}
		}

&.rd-navbar-line {
			height:  134px;

.intro-line-col-center {
				padding: 0 px-to-rem( 40px );
			}

&.rd-navbar--is-stuck {
				height: 60px;
			}
		}

&.rd-navbar-creative {
			height: 123px;

// Dropdown
			.navbar-navigation-root-item {
				> .navbar-navigation-dropdown {
					margin-top: -30px;
				}
			}

&.navbar-navigation-active {
				.navbar-navigation-root-item {
					> .navbar-navigation-dropdown {
						margin-top: 0;
					}
				}
			}

&.rd-navbar--is-stuck {
				height: 60px;

&,
				&.navbar-navigation-active {
					.navbar-navigation-root-item {
						> .navbar-navigation-dropdown {
							margin-top: 0;
						}
					}
				}
			}
		}
	}

@media (min-width: 1920px) {
		&.rd-navbar-line {
			.navbar-contact {
				left: 0;
				min-height: calc( 100vh - 135px - 135px );
			}
		}
	}

&.rd-navbar-default .navbar-navigation-dropdown-item .rd-navbar-submenu-toggle {
		color: $primary;
	}
}

// Page title context
.page-title {
	position: relative;

.rd-navbar-wrap {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

.rd-navbar-fullwidth {
		background-color: rgba( $white, .1 );

&.rd-navbar--is-stuck {
			background-color: $navbar-background;
		}
	}

// Media
	@include media-breakpoint-up( xxl ) {
		.rd-navbar-fullwidth {
			height: 134px;

&.rd-navbar--is-stuck {
				height: 60px;
			}
		}
	}
}

.intro-line,
.intro-dotted {
	.rd-navbar-wrap {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
}

.rd-navbar-wrap-absolute {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}