1795 lines
35 KiB
SCSS
1795 lines
35 KiB
SCSS
@import '../includes/fonts/montserrat';
|
|
@import 'encombrants';
|
|
|
|
$header-height: 62px;
|
|
$nav-width: 150px;
|
|
$intro-height: calc(100vh - 200px);
|
|
|
|
div.a2-block, div.block,
|
|
.gru-content div.cell {
|
|
overflow: visible;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
%toulouse-button {
|
|
background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
|
|
border-radius: 5px;
|
|
font-size: 1.154rem;
|
|
font-weight: bold;
|
|
color: white;
|
|
position: relative;
|
|
padding: 1.5rem 3rem;
|
|
box-shadow: 0px 0px 5px black;
|
|
text-transform: uppercase;
|
|
overflow: visible;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
background: url(img/formulaire/chevron-fond-blanc.png) top left no-repeat;
|
|
width: 51px;
|
|
height: 51px;
|
|
right: -25px;
|
|
top: calc(50% - 25px);
|
|
transition: right ease 0.1s;
|
|
}
|
|
&:hover::after {
|
|
right: -30px;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
background: url(img/home/home-associations/encoche-blanche.png) top left no-repeat;
|
|
width: 19px;
|
|
height: 23px;
|
|
left: -6px;
|
|
top: calc(50% - 10px);
|
|
}
|
|
}
|
|
|
|
.page-template-two-columns #columns {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.site-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #d2cccc;
|
|
z-index: 999;
|
|
h1#logo {
|
|
background: url(img/logo.png) center center no-repeat;
|
|
text-indent: -10000px;
|
|
height: $header-height;
|
|
width: 210px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
left: $nav-width / 2; // make it look centered like page content
|
|
a {
|
|
display: block;
|
|
width: 207px;
|
|
height: $header-height;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: static;
|
|
margin: 0 0 0 auto;
|
|
}
|
|
}
|
|
#toplinks {
|
|
margin-left: 3rem;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
padding-left: 60px;
|
|
background: url(img/header/icone-connexion.png) center left no-repeat;
|
|
top: 0;
|
|
left: 0;
|
|
height: $header-height;
|
|
line-height: 52px;
|
|
width: 40%;
|
|
border: none;
|
|
box-shadow: none;
|
|
a {
|
|
color: #322f38;
|
|
font-size: 0.692rem;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
cursor: pointer;
|
|
margin-left: 1ex;
|
|
width: calc(100% - 210px);
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.site-nav {
|
|
position: fixed;
|
|
height: $intro-height;
|
|
top: $header-height;
|
|
left: 0;
|
|
background: rgba(204,88,49,1);
|
|
background: linear-gradient(to bottom, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
|
|
@media screen and ($max-mobile-viewport) {
|
|
background: linear-gradient(to left, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
|
|
}
|
|
color: white;
|
|
font-size: 0.846rem;
|
|
width: $nav-width;
|
|
text-transform: uppercase;
|
|
z-index: 150;
|
|
> div {
|
|
position: relative;
|
|
z-index: 10;
|
|
height: 100%;
|
|
}
|
|
&::after {
|
|
box-shadow: 0 0 5px black;
|
|
z-index: 0;
|
|
position: fixed;
|
|
content: "";
|
|
display: block;
|
|
background: transparent;
|
|
pointer-events: none;
|
|
width: $nav-width;
|
|
top: 0;
|
|
height: 100vh;
|
|
@media screen and ($max-mobile-viewport) {
|
|
content: none;
|
|
}
|
|
}
|
|
div#nav {
|
|
height: 100%;
|
|
ul li {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
a {
|
|
padding-top: 60px;
|
|
background: transparent 50% 25px no-repeat;
|
|
@media screen and (min-width: #{$mobile-limit - 1px}) {
|
|
span {
|
|
transition: transform linear 0.1s;
|
|
display: block;
|
|
}
|
|
&:hover span {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
background: transparent 50% 10px no-repeat;
|
|
padding-top: 45px;
|
|
span {
|
|
display: inline;
|
|
font-size: 0.846rem;
|
|
}
|
|
}
|
|
}
|
|
&.menu-particuliers a,
|
|
&.menu-particuliers.selected a,
|
|
&.menu-particuliers a:hover {
|
|
background-image: url(img/menu/menu-particuliers.png);
|
|
}
|
|
&.menu-associations a,
|
|
&.menu-associations.selected a,
|
|
&.menu-associations a:hover {
|
|
background-image: url(img/menu/menu-associations.png);
|
|
}
|
|
&.menu-professionnels a,
|
|
&.menu-professionnels.selected a,
|
|
&.menu-professionnels a:hover {
|
|
background-image: url(img/menu/menu-professionnels.png);
|
|
}
|
|
&.menu-famille a,
|
|
&.menu-famille.selected a,
|
|
&.menu-famille a:hover {
|
|
background-image: url(img/menu/menu-famille.png);
|
|
}
|
|
ul {
|
|
display: none;
|
|
}
|
|
&.selected a,
|
|
&:hover a {
|
|
@media screen and ($max-mobile-viewport) {
|
|
background: transparent 50% 10px no-repeat;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: fixed;
|
|
height: $nav-mobile-bottom-bar-height;
|
|
top: auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
z-index: 0;
|
|
margin-left: $nav-width;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-left: 0;
|
|
}
|
|
#footer-wrapper {
|
|
padding-bottom: 0;
|
|
}
|
|
div.trackingcodeinputcell,
|
|
div.feedcell {
|
|
display: none;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
div.trackingcodeinputcell {
|
|
display: block;
|
|
text-align: center;
|
|
h2 {
|
|
text-transform: uppercase;
|
|
margin-bottom: 0;
|
|
}
|
|
form {
|
|
margin-top: 0;
|
|
}
|
|
p {
|
|
display: none;
|
|
}
|
|
input {
|
|
background: transparent;
|
|
border: 0;
|
|
border-bottom: 1px solid #66606b;
|
|
}
|
|
button {
|
|
border: 0;
|
|
cursor: pointer;
|
|
background: url(img/menu/menu-validation.png) center center no-repeat;
|
|
text-indent: -1000px;
|
|
height: 43px;
|
|
width: 43px;
|
|
}
|
|
|
|
}
|
|
div.textcell img {
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
#page {
|
|
// simulate left black band (may be replaced by a data uri PNG)
|
|
background: linear-gradient(to right, #2e2d35 0%, #2e2d35 $nav-width, white $nav-width);
|
|
@media screen and ($max-mobile-viewport) {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
div#main-content-wrapper {
|
|
padding-left: $nav-width;
|
|
padding-top: $header-height;
|
|
flex: unset;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
div#main-content br:last-child {
|
|
display: none;
|
|
}
|
|
|
|
div#main-content div.meetings_table br:last-child {
|
|
display: block;
|
|
}
|
|
|
|
.page-template-homepage .gru-content,
|
|
.page-template-homepage_family .gru-content {
|
|
display: block;
|
|
}
|
|
|
|
section {
|
|
padding: 2rem;
|
|
}
|
|
|
|
section#intro {
|
|
min-height: $intro-height;
|
|
background: url(img/home/bg-portable-home.jpg) top right no-repeat;
|
|
@media screen and ($max-mobile-viewport) {
|
|
min-height: none;
|
|
background: url(img/mobile-laptop.png) bottom center no-repeat;;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
section#section-particuliers,
|
|
section#section-associations,
|
|
section#section-professionnels {
|
|
position: relative;
|
|
h1:first-child {
|
|
font-size: 2.462rem;
|
|
font-weight: 600;
|
|
margin-bottom: 3rem;
|
|
@media screen and (max-width: 380px) {
|
|
font-size: 1.846rem;
|
|
}
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
background: white center center no-repeat;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 100%;
|
|
box-shadow: 0 0 5px 5px #ccc;
|
|
position: relative;
|
|
top: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
+ a {
|
|
position: absolute;
|
|
top: -4rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
top: -2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
section#section-particuliers {
|
|
background: #322f38 url(img/home/home-particuliers/bg-home-particuliers-bg.png) bottom left no-repeat;
|
|
color: white;
|
|
min-height: 400px;
|
|
h1:first-child {
|
|
&::before {
|
|
background-image: url(img/home/home-particuliers/picto-particuliers.png);
|
|
box-shadow: 0 0 5px 5px #222;
|
|
}
|
|
position: absolute;
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: static;
|
|
}
|
|
}
|
|
&.icone-famille {
|
|
min-height: 500px;
|
|
h1:first-child::before {
|
|
background-image: url(img/home/home-particuliers/picto-famille.png);
|
|
}
|
|
}
|
|
h1 + div.link-list-cell,
|
|
h1 + div.wcsformsofcategorycell {
|
|
margin-top: 70px;
|
|
}
|
|
div.forms {
|
|
margin-left: 400px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
div.search-results,
|
|
div.link-list-cell,
|
|
div.wcsformsofcategorycell {
|
|
background: transparent;
|
|
margin-left: 0px;
|
|
margin-bottom: 0;
|
|
width: 400px;
|
|
border: none;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0;
|
|
width: auto;
|
|
}
|
|
div.intro {
|
|
display: none;
|
|
}
|
|
ul {
|
|
display: none;
|
|
}
|
|
h2 {
|
|
background: #4f4c56;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
padding: 2rem;
|
|
box-shadow: 0px 0px 5px #333;
|
|
> span {
|
|
display: inline-block;
|
|
background-position: 0px center;
|
|
background-repeat: no-repeat;
|
|
font-weight: bold;
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-position: 10px center;
|
|
}
|
|
> span {
|
|
display: inline-block;
|
|
line-height: 14px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
i.opener {
|
|
display: block;
|
|
background: url(img/home/home-associations/fleche-fond-rouge.png) center center no-repeat;
|
|
width: 45px;
|
|
height: 45px;
|
|
position: absolute;
|
|
right: -22px;
|
|
top: 10px;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
background-image: url(img/home/home-professionnels/encoche-noire.png);
|
|
display: block;
|
|
height: 23px;
|
|
width: 19px;
|
|
position: absolute;
|
|
left: -8px;
|
|
top: 20px;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-top: 2ex;
|
|
i.opener {
|
|
background-image: url(img/FlecheBas.png);
|
|
}
|
|
}
|
|
}
|
|
position: relative;
|
|
ul {
|
|
box-sizing: content-box;
|
|
padding: 20px 30px;
|
|
position: absolute;
|
|
background: white;
|
|
left: 350px;
|
|
top: -30px;
|
|
width: 300px;
|
|
z-index: 1000;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 5px black;
|
|
li {
|
|
a {
|
|
border: none;
|
|
color: $dark-link-color;
|
|
background: url(img/home/home-particuliers/fleche-rouge.png) 10px 50% no-repeat;
|
|
padding-left: 30px;
|
|
padding-right: 10px;
|
|
&:hover {
|
|
text-decoration: none;
|
|
background-color: #eee;
|
|
}
|
|
&::after {
|
|
// don't mark forms requiring authentication
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
background: url(img/home/home-particuliers/encoche-rouge.png) center center no-repeat;
|
|
height: 22px;
|
|
width: 23px;
|
|
position: absolute;
|
|
left: -10px;
|
|
top: 42px;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
border-radius: 0 0 10px 10px;
|
|
position: static;
|
|
left: auto;
|
|
top: auto;
|
|
width: auto;
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
.opened {
|
|
h2 {
|
|
background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
|
|
border-radius: 5px 5px 0 0;
|
|
}
|
|
ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($min-desktop-viewport) {
|
|
&:hover {
|
|
h2 {
|
|
background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
|
|
}
|
|
ul {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#search {
|
|
position: absolute;
|
|
top: 170px;
|
|
max-width: 320px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: static;
|
|
}
|
|
h3 {
|
|
text-transform: uppercase;
|
|
font-size: 1.231rem;
|
|
line-height: 135%;
|
|
}
|
|
p {
|
|
font-weight: bold;
|
|
}
|
|
form {
|
|
display: flex;
|
|
input {
|
|
flex: 1;
|
|
background: transparent;
|
|
color: white;
|
|
&::placeholder,
|
|
&:-ms-input-placeholder,
|
|
&::-ms-input-placeholder {
|
|
color: #acacae;
|
|
}
|
|
}
|
|
button {
|
|
height: 43px;
|
|
width: 43px;
|
|
margin-right: 0;
|
|
box-shadow: none;
|
|
background: url(img/menu/menu-validation.png);
|
|
}
|
|
}
|
|
}
|
|
div.search-results {
|
|
display: none;
|
|
padding-top: 1rem;
|
|
p.no-hits {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 5px black;
|
|
color: black;
|
|
padding: 1rem;
|
|
margin: 0;
|
|
}
|
|
ul {
|
|
display: block;
|
|
position: static;
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
section#section-associations {
|
|
background: white url(img/home/home-associations/bg-home-associations.png) bottom right no-repeat;
|
|
h1:first-child {
|
|
&::before {
|
|
background-image: url(img/home/home-associations/picto-associations.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
section#section-professionnels {
|
|
background: #322f38 url(img/home/home-professionnels/bg-home-professionnels.png) top left no-repeat;
|
|
color: white;
|
|
h1:first-child {
|
|
&::before {
|
|
background-image: url(img/home/home-professionnels/picto-professionnels.png);
|
|
box-shadow: 0 0 5px 5px #222;
|
|
}
|
|
}
|
|
}
|
|
|
|
section#section-associations,
|
|
section#section-professionnels {
|
|
div.wcsformcell {
|
|
background: transparent;
|
|
display: inline-block;
|
|
border: none;
|
|
margin-right: 3rem;
|
|
margin-bottom: 3rem;
|
|
a {
|
|
box-sizing: content-box;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
width: 20vw;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 60vw;
|
|
}
|
|
display: inline-block;
|
|
padding: 2rem;
|
|
background: #fff;
|
|
color: $dark-link-color;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 4px #45434c;
|
|
font-size: 1rem;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
background: url(img/home/home-associations/encoche-blanche.png) top left no-repeat;
|
|
width: 19px;
|
|
height: 23px;
|
|
left: -8px;
|
|
top: calc(50% - 10px);
|
|
}
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
background: url(img/home/home-associations/chevron-fond-rouge.png) top right no-repeat;
|
|
width: 47px;
|
|
height: 48px;
|
|
right: -22px;
|
|
top: calc(50% - 24px);
|
|
}
|
|
&:hover {
|
|
background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
|
|
text-decoration: none;
|
|
color: white;
|
|
&::after {
|
|
background-image: url(img/home/home-associations/chevron-fond-blanc.png);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
section#section-professionnels {
|
|
div.wcsformcell {
|
|
a {
|
|
background: #4f4c57;
|
|
color: white;
|
|
&::before {
|
|
background-image: url(img/home/home-professionnels/encoche-noire.png);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#vos-services-en-ligne {
|
|
margin: 120px 0 0 40px;
|
|
> div {
|
|
margin: 0;
|
|
}
|
|
border: none;
|
|
width: calc(100vw - 700px);
|
|
background: rgba(255, 255, 255, 0.4);
|
|
max-width: 50rem;
|
|
font-size: 1.077rem;
|
|
h1 {
|
|
color: #2e2d35;
|
|
font-size: 4.538rem;
|
|
margin: 0;
|
|
}
|
|
h2 {
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
color: $primary-color;
|
|
margin: 0;
|
|
margin-bottom: 2rem;
|
|
font-size: 1.769rem;
|
|
letter-spacing: 3px;
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
p {
|
|
margin-left: 0;
|
|
line-height: 1.8;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 10px;
|
|
text-align: center;
|
|
width: auto;
|
|
h1 {
|
|
font-size: 3.077rem;
|
|
margin: 0 50px; // space for "actus" button
|
|
}
|
|
h2 {
|
|
font-size: 1.538rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
#intro {
|
|
#encart-inscription {
|
|
> div {
|
|
margin: 0;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 58px;
|
|
height: 58px;
|
|
background: url(img/home/inscription-accueil/home-utilisateur.png);
|
|
position: absolute;
|
|
top: -29px;
|
|
left: calc(50% - 29px);
|
|
}
|
|
box-sizing: content-box;
|
|
padding-top: 30px;
|
|
background-color: #ebebeb;
|
|
border-radius: 9px;
|
|
position: absolute;
|
|
width: 300px;
|
|
right: 150px;
|
|
top: 220px;
|
|
text-align: center;
|
|
@media screen and (max-width: 1500px) {
|
|
right: 80px;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 2rem 0;
|
|
position: relative;
|
|
right: auto;
|
|
top: auto;
|
|
width: auto;
|
|
}
|
|
h3 {
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: 1.385rem;
|
|
letter-spacing: 3px;
|
|
}
|
|
p {
|
|
font-size: 1rem;
|
|
padding: 0 1rem;
|
|
}
|
|
a {
|
|
text-decoration: underline;
|
|
&:hover {
|
|
color: #333;
|
|
}
|
|
}
|
|
a#creer-mon-compte {
|
|
margin-left: 10%;
|
|
display: block;
|
|
background: url(img/home/inscription-accueil/plus.png) left center no-repeat;
|
|
padding-left: 50px;
|
|
height: 60px;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
margin-right: 10%;
|
|
padding-top: 24px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
#footer {
|
|
div.menucell {
|
|
text-align: center;
|
|
li {
|
|
display: inline-block;
|
|
a {
|
|
border: none;
|
|
font-size: 0.769rem;
|
|
text-transform: uppercase;
|
|
color: #333;
|
|
background: inherit;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-bottom: 1ex;
|
|
border-right: 1px solid #666;
|
|
}
|
|
}
|
|
&:last-child a {
|
|
@media screen and ($max-mobile-viewport) {
|
|
border-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#title-section {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #322f38 url(img/formulaire/bg-titre-formulaire.png) bottom right no-repeat;
|
|
padding: 100px 50px 100px 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 50px 1rem 1rem 1rem;
|
|
}
|
|
color: white;
|
|
p.category-name {
|
|
background: url(img/formulaire/picto-formulaire.png) center left no-repeat;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
padding-left: 45px;
|
|
font-size: 1.154rem;
|
|
font-weight: bold;
|
|
}
|
|
h1 {
|
|
margin-top: 0;
|
|
font-size: 3.077rem;
|
|
margin-right: 160px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
div#temps-de-reponse {
|
|
box-sizing: content-box;
|
|
position: absolute;
|
|
right: 80px;
|
|
top: 110px;
|
|
width: 50px;
|
|
text-align: center;
|
|
background: linear-gradient(to bottom, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
|
|
border-radius: 5px;
|
|
padding: 10px 0;
|
|
span {
|
|
display: block;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
padding-top: 45px;
|
|
background: url(img/formulaire/picto-reveil.png) top center no-repeat;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: relative;
|
|
right: auto;
|
|
top: -20px;
|
|
display: inline-block;
|
|
width: auto;
|
|
padding: 0;
|
|
margin-bottom: 20px;
|
|
span {
|
|
background-position: 5px 50%;
|
|
padding: 10px 5px 10px 40px;
|
|
}
|
|
}
|
|
}
|
|
& > div {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
div#buttons-section {
|
|
background: #322f38 url(img/formulaire/bg-bandeau-suivant.png) 0px -63px no-repeat;
|
|
padding: 2rem 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
div#title-section,
|
|
div#buttons-section {
|
|
a.pk-button {
|
|
color: white;
|
|
position: relative;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 4px #45434c;
|
|
font-size: 1rem;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
background: url(img/home/home-professionnels/encoche-noire.png) top left no-repeat;
|
|
width: 19px;
|
|
height: 23px;
|
|
left: -8px;
|
|
top: calc(50% - 10px);
|
|
}
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
background: url(img/home/home-associations/chevron-fond-blanc.png) top right no-repeat;
|
|
width: 47px;
|
|
height: 48px;
|
|
right: -22px;
|
|
top: calc(50% - 24px);
|
|
}
|
|
&:hover {
|
|
color: $dark-link-color;
|
|
background: white;
|
|
text-decoration: none;
|
|
&::after {
|
|
background-image: url(img/home/home-associations/chevron-fond-rouge.png);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#buttons-section {
|
|
& > div {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
section#section-professionnels {
|
|
div.wcsformcell {
|
|
a {
|
|
&::before {
|
|
background-image: url(img/home/home-professionnels/encoche-noire.png);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#gauche {
|
|
position: relative;
|
|
div#tracking-code {
|
|
position: absolute;
|
|
top: -100px;
|
|
&.has-discard-button {
|
|
top: -180px;
|
|
button {
|
|
margin: 0 0 0.5em 0;
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
text-align: center;
|
|
position: static;
|
|
width: 80%;
|
|
margin: 0 auto 1rem auto;
|
|
}
|
|
right: 10px;
|
|
background: linear-gradient(to bottom, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
|
|
border-radius: 5px;
|
|
h3, a {
|
|
background: transparent;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
#steps {
|
|
h2 {
|
|
display: none;
|
|
}
|
|
margin-top: -55px;
|
|
ol {
|
|
position: relative;
|
|
text-align: left;
|
|
display: flex;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
li {
|
|
position: relative;
|
|
padding: 0 1rem;
|
|
&.first {
|
|
padding-left: 60px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
flex: 1;
|
|
text-align: center;
|
|
.marker {
|
|
display: inline-block;
|
|
padding: 0;
|
|
width: 70px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
border-radius: 100%;
|
|
color: #333;
|
|
border: 1px solid $primary-color;
|
|
background: white;
|
|
z-index: 100;
|
|
position: relative;
|
|
font-weight: bold;
|
|
font-size: 2.538rem;
|
|
}
|
|
&.step-before,
|
|
&.current {
|
|
background: transparent;
|
|
.marker {
|
|
background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
|
|
border-radius: 100%;
|
|
color: white;
|
|
}
|
|
}
|
|
.label {
|
|
padding-top: 10px;
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
&::before {
|
|
display: block;
|
|
position: absolute;
|
|
top: 38px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: $primary-color;
|
|
z-index: 50;
|
|
}
|
|
&.current::before {
|
|
content: '';
|
|
width: 50%;
|
|
}
|
|
&.step-before::before {
|
|
content: '';
|
|
}
|
|
&.step-before span.marker span.mark {
|
|
display: block;
|
|
height: 100%;
|
|
background: url(img/step-mark.png) center center no-repeat;
|
|
}
|
|
}
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 38px;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: #4d4d55;
|
|
}
|
|
}
|
|
&.steps-10, &.steps-11, &.steps-12, &.steps-13, &.steps-14, &.steps-15,
|
|
&.steps-16, &.steps-17, &.steps-18, &.steps-19, &.steps-20, &.steps-21,
|
|
&.steps-22, &.steps-23, &.steps-24, &.steps-25, &.steps-26, &.steps-27,
|
|
&.steps-28, &.steps-29, &.steps-30, &.steps-31, &.steps-32, &.steps-33 {
|
|
ol {
|
|
li {
|
|
&.step-before, &.step-after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
ol {
|
|
li {
|
|
min-width: none;
|
|
max-width: none;
|
|
width: 100%;
|
|
&.step-after,
|
|
&.step-before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#rub_service {
|
|
font-size: 1.308rem;
|
|
div.form-validation > div.infonotice,
|
|
div.drafts-recall,
|
|
form {
|
|
margin: 0 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0 10px;
|
|
}
|
|
padding: 0;
|
|
}
|
|
div.form-validation > div.infonotice {
|
|
background: white;
|
|
box-shadow: 0 3px 5px 5px #ccc;
|
|
border-radius: 10px;
|
|
padding: 1rem 1rem 1rem 4rem;
|
|
margin-bottom: 2rem;
|
|
color: $font-color;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0rem 1rem 0rem 4rem;
|
|
}
|
|
}
|
|
|
|
form {
|
|
> h3, > h4, > div, > p.comment-field {
|
|
&[class*=grid-] {
|
|
box-sizing: content-box;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
h3 {
|
|
font-size: 1.769rem;
|
|
text-transform: uppercase;
|
|
margin-bottom: 3rem;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 10px;
|
|
height: 3px;
|
|
width: 20px;
|
|
background: $primary-color;
|
|
}
|
|
}
|
|
div.page h3 {
|
|
border: none;
|
|
}
|
|
div.widget div.title {
|
|
font-size: 1.231rem;
|
|
}
|
|
> div.buttons {
|
|
margin: 0 -100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0 -10px;
|
|
}
|
|
background: #322f38 url(img/formulaire/bg-bandeau-suivant.png) 0px -63px no-repeat;
|
|
padding: 4rem 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.savedraft-button {
|
|
display: none;
|
|
}
|
|
div.widget {
|
|
margin: 0 5rem;
|
|
text-transform: uppercase;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0;
|
|
&.previous-button {
|
|
margin-left: 1ex;
|
|
}
|
|
}
|
|
}
|
|
button {
|
|
@extend %toulouse-button;
|
|
&::before {
|
|
background-image: url(img/formulaire/encoche-noire.png);
|
|
}
|
|
}
|
|
div.cancel-button {
|
|
visibility: hidden;
|
|
}
|
|
div.previous-button + div.cancel-button {
|
|
display: none;
|
|
}
|
|
div.previous-button {
|
|
button::after {
|
|
background: url(img/formulaire/chevron-gauche-fond-blanc.png) top left no-repeat;
|
|
width: 51px;
|
|
height: 51px;
|
|
right: auto;
|
|
left: -25px;
|
|
top: calc(50% - 25px);
|
|
}
|
|
button::before {
|
|
background: url(img/formulaire/encoche-gauche-noire.png) top left no-repeat;
|
|
width: 19px;
|
|
height: 23px;
|
|
left: auto;
|
|
right: -6px;
|
|
top: calc(50% - 10px);
|
|
}
|
|
}
|
|
div.submit-button {
|
|
order: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
span.required {
|
|
color: $primary-color;
|
|
}
|
|
|
|
.CheckboxWidget input + span::before,
|
|
.CheckboxesWidget input + span::before,
|
|
.RadiobuttonsWidget input + span::before {
|
|
border: none;
|
|
box-shadow: 0 0 6px 0px #505050;
|
|
}
|
|
|
|
.CheckboxWidget input + span::after,
|
|
.CheckboxesWidget input + span::after,
|
|
.RadiobuttonsWidget input + span::after {
|
|
left: 0;
|
|
top: calc(0.33em - 1px);
|
|
height: calc(0.66rem);
|
|
width: calc(0.66rem);
|
|
}
|
|
|
|
div#rub_service {
|
|
div#receipt-intro,
|
|
div.section {
|
|
padding: 0 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#evolution-log,
|
|
div#summary {
|
|
h2 {
|
|
font-size: 1.769rem;
|
|
text-transform: uppercase;
|
|
text-align: left;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 10px;
|
|
height: 3px;
|
|
width: 20px;
|
|
background: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
form + br,
|
|
div.back-home-button {
|
|
display: none;
|
|
}
|
|
|
|
ul#evolutions {
|
|
li {
|
|
span.item {
|
|
background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%) !important;
|
|
border: 1px solid transparent;
|
|
box-shadow: none;
|
|
}
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
&::after {
|
|
width: 3px;
|
|
background: $primary-color;
|
|
left: 29px;
|
|
}
|
|
}
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
div#columns-wrapper {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.gru-content .cell.textcell.encart {
|
|
float: right;
|
|
@media screen and ($max-mobile-viewport) {
|
|
float: none;
|
|
}
|
|
> div {
|
|
padding: 2rem;
|
|
max-width: 20em;
|
|
margin-right: 100px;
|
|
position: relative;
|
|
&::before {
|
|
content: "";
|
|
width: 85px;
|
|
height: 79px;
|
|
background: url(img/pointInterrogation.png) center center no-repeat;
|
|
display: block;
|
|
position: absolute;
|
|
top: -40px;
|
|
left: calc(50% - 43px);
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 1ex 3ex;
|
|
max-width: none;
|
|
}
|
|
box-shadow: 0 3px 5px 5px #ccc;
|
|
border-radius: 10px;
|
|
h3 {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gru-content .cell.items-history > div,
|
|
.gru-content .cell.active-items > div,
|
|
.gru-content .cell.textcell > div {
|
|
margin: 3rem 100px 0 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 3rem 1rem 0 1rem;
|
|
}
|
|
h2 {
|
|
display: inline-block;
|
|
padding: 0;
|
|
font-size: 1.769rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 10px;
|
|
height: 3px;
|
|
width: 20px;
|
|
background: $primary-color;
|
|
}
|
|
}
|
|
h3, h4, h5, ul, p, table {
|
|
margin: 1em 0;
|
|
line-height: 1.8;
|
|
}
|
|
ul {
|
|
padding-left: 2rem;
|
|
}
|
|
}
|
|
|
|
.gru-content {
|
|
div#title-section ~ div.profile,
|
|
div#title-section ~ div.account-management,
|
|
div#title-section ~ div.cell > div {
|
|
margin: 3rem 100px 0 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 3rem 1rem 0 1rem;
|
|
}
|
|
h2 {
|
|
display: inline-block;
|
|
padding: 0;
|
|
font-size: 1.769rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1rem;
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 10px;
|
|
height: 3px;
|
|
width: 20px;
|
|
background: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
div#title-section ~ div.profile,
|
|
div#title-section ~ div.account-management {
|
|
margin: 3rem 0px 0 0px;
|
|
padding: 0 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#a2-profile {
|
|
div#profile {
|
|
padding-left: 0;
|
|
font-size: 110%;
|
|
line-height: 130%;
|
|
}
|
|
}
|
|
|
|
div#account-management {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
div#account-management-fc {
|
|
div#fc-registration-user-info, div#fc-button-wrapper, div#fc-explanation-text {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
div.comment-field.note,
|
|
.gru-content div.cell.note {
|
|
box-shadow: 0 3px 5px 5px #ccc;
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
div.comment-field.note {
|
|
margin-right: 3rem;
|
|
h4 {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
body:not(.authentic-page) div#main-content-wrapper {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
div#actu {
|
|
position: absolute;
|
|
z-index: 100;
|
|
right: -400px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
right: calc(-100vw + 85px);
|
|
}
|
|
transition: right ease-out 0.5s;
|
|
top: 62px;
|
|
height: calc(100vh - 62px);
|
|
background: url(img/header/icone-actu-home.png) top left no-repeat;
|
|
img {
|
|
transition: opacity ease-out 0.5s;
|
|
opacity: 0;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
vertical-align: top;
|
|
position: relative;
|
|
right: -1px;
|
|
}
|
|
div#actu-content {
|
|
height: 100%;
|
|
background: white;
|
|
display: inline-block;
|
|
width: 400px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: calc(100vw - 85px);
|
|
}
|
|
padding: 20px 20px 20px 40px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
box-shadow: none;
|
|
}
|
|
border-bottom-left-radius: 10px;
|
|
h3 {
|
|
font-size: 3.077rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
font-size: 1.538rem;
|
|
}
|
|
margin-bottom: 2rem;
|
|
a.rss {
|
|
margin-left: 1rem;
|
|
display: inline-block;
|
|
background: url(img/home/home-actu-ouvert/flux-rss.png) center center no-repeat;
|
|
width: 17px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
div.feed-entries {
|
|
height: calc(100vh - 300px);
|
|
overflow-y: auto;
|
|
div.feed-entry {
|
|
border-top: 1px solid #d5d5d5;
|
|
padding: 1rem 0;
|
|
margin-right: 20px;
|
|
span.date {
|
|
background: url(img/home/home-actu-ouvert/picto-date.png) left center no-repeat;
|
|
padding-left: 20px;
|
|
font-style: italic;
|
|
}
|
|
a.read {
|
|
text-transform: uppercase;
|
|
display: block;
|
|
color: $dark-link-color;
|
|
text-align: right;
|
|
padding-right: 30px;
|
|
padding-top: 3px;
|
|
background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
}
|
|
h4 a {
|
|
color: $font-color;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: block;
|
|
padding-right: 30px;
|
|
background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
a.all {
|
|
margin-top: 3rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
padding-right: 30px;
|
|
color: $dark-link-color;
|
|
background: url(img/home/home-actu-ouvert/chevron-droite-rouge.png) center right no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
#content {
|
|
transition: opacity linear 0.2s;
|
|
}
|
|
|
|
#main-content.news-open {
|
|
div#actu {
|
|
right: 0;
|
|
div#actu-content {
|
|
box-shadow: 0 0 5px black;
|
|
}
|
|
img {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
#content {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
#login-page div.block,
|
|
#content div.a2-block {
|
|
padding-top: 4rem;
|
|
width: 40rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: auto;
|
|
padding-top: 1rem;
|
|
}
|
|
margin: 0 auto;
|
|
h2 {
|
|
font-size: 3.538rem;
|
|
font-weight: bold;
|
|
@media screen and ($max-mobile-viewport) {
|
|
font-size: 2.462rem;
|
|
}
|
|
}
|
|
p {
|
|
line-height: 1.8;
|
|
}
|
|
form > button {
|
|
@extend %toulouse-button;
|
|
}
|
|
|
|
form ul.errorlist.nonfield li {
|
|
background: #eee;
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
#login-page button.cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
ul {
|
|
list-style-image: url(img/puce.png);
|
|
}
|
|
|
|
#nav-tracking-code {
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
margin-top: -45px;
|
|
background: url(img/menu/menu-code-barre.png) top center no-repeat;
|
|
padding: 55px 1rem 0 1rem;
|
|
text-align: center;
|
|
input {
|
|
background: transparent;
|
|
border: 0;
|
|
border-bottom: 1px solid #66606b;
|
|
color: white;
|
|
}
|
|
button {
|
|
border: 0;
|
|
cursor: pointer;
|
|
background: url(img/menu/menu-validation.png) center center no-repeat;
|
|
text-indent: -1000px;
|
|
height: 43px;
|
|
width: 43px;
|
|
}
|
|
}
|
|
|
|
#messages li {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#steps-mobile {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
#steps {
|
|
display: none;
|
|
}
|
|
#steps-mobile {
|
|
display: block;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
div.position {
|
|
margin: -55px auto 0 auto;
|
|
width: 68px;
|
|
height: 68px;
|
|
background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
|
|
border-radius: 100%;
|
|
color: white;
|
|
span {
|
|
font-size: 1.385rem;
|
|
line-height: 34px;
|
|
font-weight: bold;
|
|
display: block;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
width: 2rem;
|
|
&.current-page {
|
|
border-bottom: 1px solid white;
|
|
}
|
|
}
|
|
}
|
|
.current-label {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
padding: 1ex;
|
|
}
|
|
}
|
|
.steps-10, .steps-11, .steps-12, .steps-13, .steps-14, .steps-15,
|
|
.steps-16, .steps-17, .steps-18, .steps-19, .steps-20, .steps-21,
|
|
.steps-22, .steps-23, .steps-24, .steps-25, .steps-26, .steps-27,
|
|
.steps-28, .steps-29, .steps-30, .steps-31, .steps-32, .steps-33 {
|
|
+ #steps-mobile {
|
|
span.total-pages {
|
|
display: none;
|
|
}
|
|
div.position span.current-page {
|
|
border-bottom: none;
|
|
line-height: 70px;
|
|
font-size: 2.538rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.CheckboxWidget, .CheckboxesWidget, .RadiobuttonsWidget {
|
|
> .title {
|
|
padding-bottom: 2px;
|
|
}
|
|
.content {
|
|
line-height: 150%;
|
|
}
|
|
}
|
|
|
|
#content #registration-title {
|
|
text-align: center;
|
|
width: auto;
|
|
max-width: 80rem;
|
|
p {
|
|
font-weight: 600;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-top: 70px;
|
|
}
|
|
}
|
|
|
|
#login-blocks,
|
|
#registration-blocks {
|
|
display: flex;
|
|
justify-content: center;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: block;
|
|
}
|
|
div.a2-block {
|
|
max-width: 35rem;
|
|
margin: 0 3rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
max-width: none;
|
|
margin: 0 1rem;
|
|
}
|
|
position: relative;
|
|
h2 {
|
|
font-size: 2.769rem;
|
|
padding-left: 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
&#frontend-login-password::after,
|
|
&#frontend-registration-email::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
background: #666;
|
|
width: 1px;
|
|
top: 80px;
|
|
bottom: 80px;
|
|
right: -3rem; // -margin
|
|
@media screen and ($max-mobile-viewport) {
|
|
height: 1px;
|
|
width: auto;
|
|
top: auto;
|
|
bottom: -12px;
|
|
left: 40px;
|
|
right: 40px;
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#login-page.methods1 #login-blocks #frontend-login-password::after,
|
|
#registration-blocks div.a2-block.registration-frontend-0#frontend-registration-email::after {
|
|
content: none;
|
|
}
|
|
|
|
#login-blocks {
|
|
padding-bottom: 7rem; // enough space for lost password/create account lines
|
|
}
|
|
|
|
#frontend-login-password {
|
|
.login-actions {
|
|
// get lost password/create account lines out of flow, so the
|
|
// FranceConnect button can be aligned with the login button.
|
|
position: absolute;
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: static;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#frontend-login-fc,
|
|
div#frontend-registration-fc {
|
|
div#fc-button-wrapper, div#fc-explanation-text, div#fc-registration-user-info {
|
|
text-align: left;
|
|
padding-top: 0;
|
|
p {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
div#fc-registration-user-info {
|
|
p.certified {
|
|
margin-left: 2rem;
|
|
}
|
|
}
|
|
|
|
div#fc-button {
|
|
box-shadow: none;
|
|
width: auto;
|
|
a div img {
|
|
height: 60px;
|
|
}
|
|
position: absolute;
|
|
bottom: 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
div#fc-registration-user-info + div#fc-button-wrapper {
|
|
div#fc-button {
|
|
position: static;
|
|
}
|
|
}
|
|
}
|
|
|
|
.field-live-hint .close {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.list-of-forms span.form-number {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#profile span.label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
form p label,
|
|
form.quixote div.title label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
form.quixote div.widget {
|
|
margin-bottom: 4ex;
|
|
}
|
|
|
|
div#rub_service div#info {
|
|
padding: 100px;
|
|
h2 {
|
|
font-weight: bold;
|
|
text-align: left;
|
|
font-size: 3.077rem;
|
|
padding: 0;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 60px 20px;
|
|
}
|
|
}
|
|
|
|
.authentic-page {
|
|
.site-header, .site-nav, div#actu {
|
|
display: none;
|
|
}
|
|
div#page {
|
|
background: white;
|
|
}
|
|
div#main-content-wrapper {
|
|
padding-left: 0;
|
|
}
|
|
footer {
|
|
margin-left: 0;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
div#main-content-wrapper,
|
|
#content #registration-title {
|
|
padding-top: 1rem;
|
|
}
|
|
}
|
|
}
|