Produits Entr'ouvert » Intégrations graphiques Publik

//

//	TYPO

//

html {

	@media ($min-desktop-viewport) {

		font-size: calc(170% / 1.6);

	}

}

h1 {

	font-size: $fz-h1;

	color: $blue;

	font-style: italic;

	font-weight: 900;

}

h2 {

	font-size: $fz-h3;

	color: $green;

	text-transform: uppercase;

	font-style: italic;

	border-bottom: 1px solid;

	padding-bottom: .33em;

	margin-bottom: 1rem;

}

//

// Components

//

%button {

	display: inline-block;

	font-weight: 800;

	padding: 0.4em 1em;

	box-shadow: none;

	text-transform: uppercase;

	&:hover, &:focus {

		box-shadow: 0px 0px 5px $green;

	}

}

%cancel-button {

	&, &:hover {

		background-color: white;

		color: $blue;

		border-color: currentColor;

	}

}

%gray-button {

	@extend %button;

	&, &:hover {

		background-color: $gray-light;

		color: $blue;

		border-color: $gray-light;

	}

}

.white-btn {

	@extend %button;

	padding: calc(7em / 17) calc(15em  / 17);

	background-color: white;

	color: $blue;

	border-radius: 3em;

	line-height: 1;

	text-transform: none;

	&:hover {

		background-color: $green;

		color: white;

	}

}

//

//	HEADER

//

body {

	margin-top: 2em;

	@media ($min-desktop-viewport) {

		margin-top: 1em;

	}

}

#header-wrapper {

	background-image: linear-gradient(

		to bottom,

		transparent #{$logo-height/2}, #{$blue} #{$logo-height/2}

	);

}

h1#logo.has-logo {

	@media ($max-mobile-viewport) {

		padding-left: 0;

	}

	a {

		height: $logo-height;

		width: $logo-width;

	}

} 

// User-links

#toplinks {

	// display: flex;

	//justify-content: flex-end;

	position: static;

	border: none;

	box-shadow: none;

	padding: 0;

	background-color: transparent;

	border-radius: 0;

	max-width: none;

	font-size: $fz-small;

	text-align: right;

	padding-bottom: 1rem;

	@media ($max-mobile-viewport) {

		padding-top: 2rem;

	}

	a:not(.account-link) {

		@extend .white-btn;

	}

	.account-link {

		display: inline-block;

		color: white;

		margin-right: 1em;

		margin-bottom: 0.5em;

	}

}

//

//	NAV

//

@media ($min-desktop-viewport) {

	// Nav top right header

	$a11y-link-width: 50px;

	.site-nav {

		order: -1;

	}

	div.gru-nav {

		text-align: right;

		position: relative;

		z-index: 1000;

		height: 0;

		> ul {

			margin: 0;

			display: inline-flex;

			width: calc(100% - #{$logo-width} - #{$a11y-link-width});

			justify-content: space-around;

			> li a {

				padding-top: 0;

				padding-bottom: 0;

				display: flex;

				height: 100%;

				> span {

					margin: auto;

				}

			}

		}

	}

	.a11y-link {

		display: inline-block;

		img {

			width: $a11y-link-width;

			height: auto;

			vertical-align: bottom;

		}

	}

}

@media ($max-mobile-viewport) {

	div.gru-nav .gru-nav-button {

		// rounded btn

		border: 8px solid transparent;

		border-radius: 50%;

		width: $nav-menu-side;

		box-shadow: 0 0 0 1px white;

		&.toggled .icon-bar {

			border-color: white;

		}

	}

	// right-to-left adaptation

	@if $responsive-menu == left-to-right {

		body {

			border-left: none;

		}

		div.gru-nav .gru-nav-button {

			left: auto;

			right: 0.7rem;

			+ ul {

				transform: translateX(100%);

				left: auto;

				right: 0;

			}

		}

	}

}

// Top carrousel

.theme-top-carrousel {

	background-color: $blue;

	&--wrapper {

		max-width: $width;

		margin: 0 auto;

		box-shadow: 0 12px 0 0 $green;

		position: relative;

		z-index: 101;

	}

	div.carrousel-content {

		$content-mobile-height: 10rem;

		$content-desktop-width: 50%;

		input + div {

			@media ($max-mobile-viewport) {

				padding-bottom: $content-mobile-height;

			}

			@media ($min-desktop-viewport) {

				padding-right: $content-desktop-width;

			}

			div.carrousel-item {

				padding: 0;

				@media ($min-desktop-viewport) {

					align-items: stretch;

					justify-content: flex-start;

				}

				div.carrousel-item-content {

					background-color: white;

					color: $blue;

					padding: 1.5rem;

					padding-bottom: 2.5rem;

					margin-bottom: 0;

					font-style: italic;

					* {

						display: inline;

					}

					@media ($max-mobile-viewport) {

						flex-grow: 1;

						min-height: $content-mobile-height;

						margin-bottom: -1 * $content-mobile-height;

						text-align: center;

					}

					@media ($min-desktop-viewport) {

						transform: translateX(100%);

						flex: 0 0 100%;

						display: flex;

						align-items: flex-end;

						text-align: left;

						padding: 2rem;

						padding-bottom: 3rem;

					}

				}

			}

		}

		div.carrousel-nav {

			@media ($min-desktop-viewport) {

				width: 50%;

				left: 50%;

				text-align: left;

				padding-left: calc(2rem - 10px);

			}

		}

		a.carrousel-previous,

		a.carrousel-next {

			font-size: 14px;

			width: 2.5em;

			height: 2.5em;

			border-radius: 50%;

			border: 0.2em solid white;

			top: 0;

			bottom: 0;

			margin: auto 0;

			line-height: 2.4em;

			&:after {

				font-size: inherit;

			}

		}

		a.carrousel-next {

			right: calc(50% + 0.7rem);

		}

	}

}

//

//	MAIN

//

main {

	background-color: $gray_light;

	padding-top: 2rem;

	padding-bottom: 2rem;

	.page-template-two-columns-sidebar &,

	.page-template-standard-sidebar & {

		background-color: white;

		padding-top: 0;

		padding-bottom: 0;

	}

}

.gru-content { 

	flex-wrap: wrap;

}

.gru-content #theme-top-section {

	margin-top: 1rem;

	margin-bottom: 1rem;

	div.cell {

		margin-left: 0;

		margin-right: 0;

		&[class^='grid-'],

		&[class*=' grid-'] {

			padding-right: 0;

			margin-right: $grid-gutter;

		}

	}

}

.gru-content #sidebar {

	background-color: $gray-light;

	padding-top: 2rem;

	& + #columns-wrapper {

		padding-top: 2rem;

		padding-bottom: 2rem;

		@media ($min-desktop-viewport) {

			margin-left: 5em;

			flex: 1 0 0;

		}

	}

	@media ($max-mobile-viewport) {

		margin-left: 0;

		margin-right: 0;

	}

	@media (min-width: $width) {

		box-sizing: content-box;

		margin-left: calc(-50vw + #{$width/2});

		padding-left: calc(50vw - #{$width/2});

	}

}

//

//	CELLS

//

div.textcell {

	h1, h2 {

		margin: 0.7em 1rem;

	}

}

div.cell:not(.textcell) {

	p {

		color: $blue;

	}

}

div.searchcell form {

	align-items: center;

}

// custom styles

.list-of-forms-cell {

	$image-size: 3rem;

	.gru-content &.cell {

		background-color: white;

		border-radius: 5px;

		overflow: hidden;

		h2:first-child {

			font-size: $fz-h3;

			font-style: normal;

			text-align: left;

			padding-top: 1em;

			padding-bottom: 1em;

		}

		// Picture position

		&.has-asset-picture {

			h2:first-child {

				padding-left: $image-size + 2;

			}

			> div {

				display: flex;

				flex-wrap: wrap;

				align-items: center;

				> * {

					flex: 0 0 100%;

				}

				> h2:first-child {

					flex: 1 0 50%;

					margin-left: -1 * ($image-size + 1);

				}

				> picture {

					display: block;

					order: -1;

					flex: 0 0 $image-size;

					align-self: center;

					margin-left: 1rem;

					position: relative;

					z-index: 1;

					img {

						padding: 0;

						height: $image-size;

						width: $image-size;

						object-fit: contain;

					}

				}

			}

		}

	}

}

// Foldable icon

div.cell.foldable > div > h2:first-child {

	padding-right: 3em;

	&::after {

		width: 1em;

		height: 1em;

		border: 1px solid;

		padding: .2em;

		color: $green;

		text-align: center;

		box-sizing: content-box;

		border-radius: 50%;

		top: 0;

		bottom: 0;

		margin: auto;

		background-color: white;

	}

}

.wcs-forms-of-category-cell {

	@extend .list-of-forms-cell;

}

//

//	WCS

//

.wcs-page main {

	background-color: white;

}

// Steps

.wcs-steps {

	@media ($mq-max--wcs-steps-small-layout) {

		padding: 0;

	}

	@include desktop-vertical-steps() {

		padding: 0;

		padding-bottom: 2rem;

		@media (min-width: $width) {

			box-sizing: content-box;

			margin-left: calc(-50vw + #{$width/2});

			padding-left: calc(50vw - #{$width/2});

		}

	}

}

.wcs-step {

	@include desktop-vertical-steps() {

		margin-bottom: 0;

	}

	&.current &--label {

		@media ($mq-min--wcs-steps-horizontal-layout) and ($max-mobile-viewport) {

			color: $blue;

		}

	}

}

div#tracking-code {

	h3 {

		padding-left: 0;

		padding-bottom: 0;

	}

	a {

		font-size: 1rem;

		color: $blue;

		display: block;

		padding: 0.33em;

		border: 1px solid;

		border-radius: 5px;

		line-height: 1;

	}

}

div.gru-content div#rub_service {

	@media ($min-desktop-viewport) {

		padding-left: 4rem;

	}

	h2 {

		@extend h1;

		padding-left: 0.5rem;

	}

	h3 {

		@extend h2;

		padding-left: 0;

	}

	.submit-button button::after {

		content: "\f138";

		font-family: FontAwesome;

		margin-left: 0.66em;

	}

	.previous-button button {

		@extend %gray-button;

	}

}

//

//	A2

//

.authentic-page {

	main {

		background-image: linear-gradient(

			to bottom,

			$blue 200px,

			$gray-light 200px

		);

	}

	.gru-content {

		background-color: white;

		padding: 2rem;

		margin-bottom: 2rem;

		box-shadow: 0 12px 0 0 $green;

		.a2-block h2,

		.block h2 {

			@extend h2;

		}

	}

}

//

//	FOOTER

//

#footer-wrapper {

	margin-top: 0;

	padding-top: 2rem;

	padding-bottom: 2rem;

}

// Colors

$blue: #005694;

$green: #95C11F;

$gray_light: #E9E9E9;

$gray: #616161;

// fonts size

$fz-h1: calc(40em / 17);

$fz-h2: calc(23em / 17);

$fz-h3: calc(20em / 17);

$fz-small: calc(15em / 17);

// Layout

$logo-height: 84px;

$logo-width: 250px;

// Core vars

$primary-color: $blue;

$font-family: "Lato", sans-serif;

$font-color: $gray;

$link-color: $primary-color;

$width: 1120px;

$mobile-limit: 64em;

$very-small-limit: 560px;

$columns-gutter: 1.5rem;

$sidebar-columns-gutter: $columns-gutter;

$sidebar-width: calc(240em / 17 + #{$sidebar-columns-gutter});

$grid-gutter: $columns-gutter;

$nav-color: $blue;

$nav-item-selected-background: transparent;

$nav-item-selected-border: 3px solid $green;

$nav-item-selected-mode: bottom-border;

$nav-height: $logo-height / 2;

$nav-menu-color: $blue;

$nav-after-image: false;

$responsive-menu: left-to-right;

$nav-menu-side: 40px;

$nav-button-background: $blue;

$nav-button-color: white;

$nav-mobile-menu-background: $blue;

$nav-mobile-menu-item-color: white;

$nav-mobile-menu-item-hover-color: white;

$title-color: $blue;

$title-background: transparent;

$title-font-size: $fz-h3;

$title-weight: 900;

$title-transform: uppercase;

$title-font-style: italic;

$cell-background: transparent;

$cell-border: none;

$cell-title-cover-border: false;

$cell-entry-font-weight: 600;

$cell-entry-color: $blue;

$cell-entry-border-color: $blue;

$cell-entry-hover-color: $cell-entry-color;

$cell-entry-hover-background: $gray-light;

$carrousel-height: 280px;

$carrousel-text-position: bottom middle;

$carrousel-item-mask-color: transparent;

$carrousel-navigation-bullet-color: $blue;

$carrousel-navigation-bullet-border: 2px solid $blue;

$button-background: $blue;

$button-color: white;

$button-border-radius: 5px;

$button-border: 2px solid transparent;

$buttons-order: cancel (grow), previous, submit;

$widget-color: $blue;

$widget-border: 1px solid $blue;

$widget-border-radius: $button-border-radius;

$widget-unique-checkbox-position: left;

$wcs-steps-background: $gray-light;

$wcs-step-color: $blue;

$wcs-step-current-color: white;

$wcs-step-current-background: $blue;

$wcs-step-border-bottom: 2px solid;

$wcs-step-current-border-bottom: 2px solid $blue;

$footer-background: $blue;

$footer-color: white;

$footer-link-color: white;

{

  "label": "Haguenau",

  "variables": {

    "pwa_display": "standalone",

    "theme_color": "#005694",

    "email_header_asset": "emails:logo"

  },

  "settings": {

    "combo": {

      "COMBO_ASSET_SLOTS.update": {

        "header:logo": { "label": "Têtière : logo" },

        "emails:logo": {"label": "Emails : logo"}

      }

    }

  }

}

<?xml version="1.0" encoding="UTF-8"?>

<svg width="55" height="22" version="1.1" viewBox="0 0 55 22" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <style>.cls-1 {

        fill: #005694;

        fill-rule: evenodd;

      }</style>

    <style>.cls-1 {

        fill: #005694;

      }</style>

  </defs>

  <g transform="translate(-871.4 -819.2)" fill="#005694" fill-rule="evenodd" data-name="Groupe 91">

    <path class="cls-1" transform="translate(0 -1161)" d="m917.8 1991a0.8 0.8 0 0 0 0.8-0.793 4.365 4.365 0 1 0-8.73 0 0.793 0.793 0 1 0 1.586 0 2.781 2.781 0 0 1 4.015-2.49l-10.7 10.72a0.509 0.509 0 0 0 0 0.719l2.083 2.083a0.509 0.509 0 0 0 0.719 0z" data-name="Tracé 127"/>

    <path class="cls-1" transform="translate(-575.1)" d="m1489 821.8a7.144 7.144 0 0 0-7.144 7.144 0.795 0.795 0 0 0 1.589 0 5.556 5.556 0 1 1 11.11 0 4.294 4.294 0 0 1-1.428 3.1 5.681 5.681 0 0 0-1.784 4.042 3.184 3.184 0 0 1-3.175 3.175 0.793 0.793 0 1 0 0 1.586 4.762 4.762 0 0 0 4.761-4.761 4.129 4.129 0 0 1 1.4-3 5.834 5.834 0 0 0 1.808-4.143 7.145 7.145 0 0 0-0.417-2.409l4.069-4.059a0.521 0.521 0 0 0 0-0.729l-2.083-2.083a0.526 0.526 0 0 0-0.733 0l-3.622 3.619a7.1 7.1 0 0 0-4.353-1.482z" data-name="Tracé 128"/>

  </g>

  <path class="cls-1" d="m25.06 10.9a14.98 14.98 0 0 0-12.58-7.033c-0.161 0-0.319 0-0.477 8e-3l-0.753-3.539-1.155 0.246 0.718 3.376a14.63 14.63 0 0 0-10.76 6.891 13.74 13.74 0 0 0 2.151 2.894l-0.6-2.831-0.027-0.033a8.423 8.423 0 0 1 0.737-1l1.063 4.97a14.4 14.4 0 0 0 1.436 1.077l-1.51-7.087a13.26 13.26 0 0 1 1.02-0.872l1.862 8.753a13.28 13.28 0 0 0 1.33 0.577l-2.138-10.06c0.349-0.218 0.723-0.428 1.124-0.626l2.363 11.11q0.608 0.155 1.261 0.255l-0.9-4.228a4.33 4.33 0 0 0 1.505 1.167l0.68 3.2c0.282 0.017 0.569 0.027 0.862 0.027 0.117 0 0.234 0 0.35-5e-3l-0.606-2.847a4.377 4.377 0 0 0 0.539 0.034 4.326 4.326 0 0 0 0.662-0.05l1.36 6.402 1.154-0.246-0.754-3.542a16.12 16.12 0 0 0 10.08-6.983zm-16.66-1.044-0.793-3.729c0.373-0.142 0.765-0.271 1.175-0.384l0.518 2.436a4.3 4.3 0 0 0-0.9 1.677zm1.923-2.542-0.39-1.834c0.376-0.069 0.766-0.123 1.17-0.162l0.324 1.523a4.28 4.28 0 0 0-1.104 0.473zm2.279-0.622-0.306-1.436h0.193c0.282 0 0.557 9e-3 0.828 0.024a5.8 5.8 0 0 1 1.339 11.07l-0.3-1.422a4.311 4.311 0 0 0-1.752-8.23zm5.079 8.958a7.026 7.026 0 0 0-0.156-9.466 13.08 13.08 0 0 1 6 4.736 14.12 14.12 0 0 1-5.844 4.73z" fill="#005694" data-name="Tracé 126"/>

  <path d="m28.84 0.01609v21.97" fill="none" stroke="#005694" stroke-width="1px"/>

</svg>

@charset "UTF-8";

@import '../includes/fonts/lato';

@import 'vars';

@import '../includes/publik';

@import 'custom';

{% extends "combo/page_template_sidebar.html" %}

{% load combo i18n %}

{# remove top-section #}

{% block content-top %}

{% endblock %}

{% extends "combo/search-cell.html" %}

{% block cell-content %}

<h2>Rechercher</h2>

{{ block.super }}

{% endblock %}

{% extends "theme.html" %}

{% load gadjo static %}

{% block nav-bottom %}

	<a class="a11y-link" href="{{ a11y_url }}">

		<img src="{{site_base}}{% static "" %}{{css_variant}}/img/a11y.svg" alt="accessibilité" />

	</a>

{% endblock %}

{% block before-main-content %}

	<div class="theme-top-carrousel">

		<div class="theme-top-carrousel--wrapper">

			{% placeholder "top_carrousel" name="Carrousel Entête" %}

		</div>

	</div>

{% endblock %}

{% block content-top %}

	<div id="theme-top-section">

		{% placeholder "top-section" name="Haut de page" %}

	</div>

{% endblock %}