publik-base-theme/static/calvados-intranet-cd14/_custom.scss

@mixin fixed-header {
	transition: all ease 0.2s;
	margin-top: $toplinks-height;
	@media ($min-desktop-viewport) {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;

		body.scrolled & {
			transform: translateY(-#{$toplinks-height});
		}
	}
}


@mixin fixed-header-height {
	@media ($min-desktop-viewport) {
		display: flex;
		height: $header-desktop-height;
		body.scrolled & {
			height: $header-desktop-fixed-height;
		}
	}
}

@mixin h1 {
	font-size: $fz-h1;
	font-weight: bold;
	color: $font-color;
	font-family: $ff-serif;
	line-height: 1.1;

}
@mixin h2 {
	font-size: $fz-h2;
	font-weight: bold;
	color: $primary-color;
	font-family: $ff-serif;
	line-height: 1.1;
}
@mixin h3 {
	font-size: $fz-h3;
	font-weight: bold;
	color: $blue-dark;
}
@mixin h4 {
	font-size: $fz-h4;
	font-weight: 600;
	color: $pink-xxdark;
}

%button {
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
	font-weight: 600;
	transition:
		background 0.5s ease,
		color 0.5s ease,
		border 0.5s ease,
		box-shadow 0.5s ease;
	&:hover {
		box-shadow: none;
	}
}

%cancel-button {
	@extend %button;
	background-color: white;
	color: $primary-color;
	border-color: currentColor;
	font-weight: 400;

	&:hover {
		background-color: white;
		color: $primary-color;
	}
}

html {
	@media (max-width: $very-small-limit) {
		font-size: $fz-mobile;
	}
}

a {
	&:hover, &:focus {
		text-decoration: underline;
	}
}

label {
	font-weight: 300;
}

a#publik-portal-agent {
	right: auto;
	left: 5px;
}

#toplinks {
	height: $toplinks-height;
	top: -($toplinks-height);
	left: 0;
	max-width: none;
	width: 100vw;

	box-shadow: none;
	border-radius: 0;
	line-height: $toplinks-height / 1.5;
	font-size: 14px;
	text-align: right;
	border: 0;
	background: #eae9e2;
	text-transform: uppercase;
	a {
		color: #555;
		&:hover {
			color: black;
		}
	}
}

.site-header {

	#header {
		background-color: $grayish-yellow;
		max-width: none;

		@include fixed-header;
		@include fixed-header-height;

		@media ($min-desktop-viewport) {
			z-index: 20;
			background-color: transparent;
			right: auto;
			width: auto;
			align-items: center;
		}

		h1 {
			@media ($max-mobile-viewport) {
				padding-top: 0.5rem;
				padding-bottom: 0.5rem;
			}

			a {
				background-size: contain;
				width: 320px;
				height: 50px;
				display: block;
				@media ($max-mobile-viewport) {
					padding-left: 0;
					width: 100%;
				}
			}
		}
	}
}

.gru-nav-wrapper {
	@media ($max-mobile-viewport) {
		margin-top: -($nav-menu-side);
	}
}

div#nav {
	font-size: 16px;
	max-width: none;

	@include fixed-header;

	@media ($min-desktop-viewport) {
		z-index: 10;
		padding-right: 1rem;
		border-bottom: 1px solid #aaa;
	}

	@media ($max-mobile-viewport) {
		margin-top: 0;
	}


	& > ul {
		margin-top: 0;
		margin-bottom: 0;

		@include fixed-header-height;

		@media ($min-desktop-viewport) {
			justify-content: flex-end;

			> li {
				display: flex;

				> a {
					display: flex;
					align-items: center;
					padding: 1em;
				}
			}
		}

		li > a {
			font-weight: normal;
		}
		// Sub nav
		ul {
			@media ($min-desktop-viewport) {
				top: 100%;
			}
		}

	}
}

// Picture
body.has-picture .site-nav::after {
	top: 0;
}
@media ($min-desktop-viewport) {
	body.has-picture .site-nav::after {
		transition: top ease 0.2s;
		top: calc(#{$toplinks-height} + #{$header-desktop-height});
	}
	body.has-picture.scrolled .site-nav::after {
		top: $header-desktop-fixed-height;
	}
}


div#main-content-wrapper {
	z-index: 0;
	line-height: 1.5;
	padding-top: 2rem;

	@media ($min-desktop-viewport) {
		padding-top: calc(#{$toplinks-height} + #{$header-desktop-height} + 2rem);
	}
}

// cells

.text-cell {
	h1 { @include h1; }
	h2 {
		@include h2;
		padding-left: 0.5rem;
	}
	h3 { @include h3; }
	h4 { @include h4; }
}

div#tracking-code h3 {
	border-bottom: none;
	padding-left: 0.5rem;
}

// WCS

// WCS typo
div#rub_service {
	h2 {
		@include h1;
		text-align: left;
		padding-left: 0.5rem;
	}
	h3 {
		@include h2;
		font-size: $fz-h3;
		font-family: $ff-ss-serif;
	}
	h4 {
		@include h3;
		font-size: $fz-h4;
	}

	// Page récap avant validation
	div.form-validation .page {
		h3 {
			color: $blue-dark;
		}
		h4 {
			color: $pink-xxdark;
		}
 	}
	// Page récap après validation
	div.dataview {

		div.title h3 {
			@include h4;
			color: $blue-dark;
		}

		div.subtitle h4 {
			@include h4;
			color: $pink-xxdark;
		}
		div.field {
			.label {
				font-weight: 300;
			}
			.value {
				font-weight: 500;
			}
		}
	}
}


body.has-picture {
	div#main-content-wrapper {
		padding-top: 0;
		#columns {
			> div:first-child {
				padding-top: 2rem;
			}
			> div#rub_service,
			> .form-content--sidebox {
				padding-top: 0rem;
				background: white;
			}
		}
	}
}

div.widget div.title {
	margin-bottom: 2px;
}

span.helptext, div.hint {
	font-size: $fz-small;
	color: $gray;
}

#footer {
	font-size: 14px;
	.menu-cell {
		li a {
			color: $footer-color;
			text-transform: uppercase;
			font-weight: 600;

			&:hover, &:focus {
				color: $blue-dark;
			}
		}
	}
}