| Current Path : /home/h/a/p/happyrenas/old/devis-huissier.fr/old/components/scss/ |
Linux webd005.cluster105.gra.hosting.ovh.net 5.15.206-ovh-vps-grsec-zfs-classid #1 SMP Fri May 15 02:41:25 UTC 2026 x86_64 |
| Current File : /home/h/a/p/happyrenas/old/devis-huissier.fr/old/components/scss/_general.scss |
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
font-variant-ligatures: no-common-ligatures!important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* -------------------------------------------------------------------- PARAMETRES GENERAUX ------------------------------------------------------------------- */
html {
font-size:10px;
font-family:$font;
color:$gris-alt;
width:100%;
height:100%;
}
body {
height:100%;
width:100%;
}
section,
header,
footer,
figure,
article,
aside,
nav,
main {
display: block;
}
button,
input,
textarea {
border: none;
background: none;
}
a,
a *,
button,
button *,
input[type=submit] {
transition: all .3s ease;
color: inherit;
text-decoration: none;
cursor: pointer;
outline: none!important;
}
a img {
border: 0;
}
a:hover,
button:hover {
color: $bleu;
}
img,
svg {
vertical-align: middle;
border: none;
}
ul,
li {
list-style-type: none;
}
b,
strong {
font-family: $font-b;
@extend %fonts-properties;
}
div,
p {
font-size: 15px;
font-family: $font;
text-align: left;
color: $gris;
line-height:normal;
}
textarea {
overflow: auto;
resize: none;
}
input[type=submit] {
cursor: pointer;
}
.h1 {
font: 4rem $font-b;
line-height:normal;
color: $blanc;
text-align:center;
position:relative;
@extend %fonts-properties;
span {
@include dsp-ib(top);
font-size:3rem;
line-height:normal;
}
}
.h2 {
font: 17px $font-b;
width:100%;
text-align:center;
position:relative;
color: $blanc;
text-transform:uppercase;
@extend %fonts-properties;
}
.h3 {
font:18px $font-b;
width:100%;
text-align:left;
position:relative;
color: $gris;
text-transform:uppercase;
@extend %fonts-properties;
}
/* ---------------------------------------------------------------- ELEMENTS GLOBAUX ------------------------------------------------------------------------- */
.bouton {
@include dsp-ib(middle);
height:50px;
font-size:15px;
font-family:$font-b;
padding:0px 4rem;
color: $blanc!important;
line-height: 50px;
text-align:center;
position:relative;
&:hover {
color:$blanc!important;
background:$bleu-hover;
}
&.bg.gris-alt:hover {
background:$gris;
}
&.bg.bleu:hover {
background:$bleu-hover;
}
&.bg.gris:hover {
background:$gris-alt;
}
img {
width:16px;
margin:0 1rem;
}
span {
@include dsp-ib(middle);
}
}
.underline {
text-decoration: underline;
}
.center {
>* {
text-align:center;
}
}
.right {
text-align:right;
}
::-webkit-input-placeholder {color:#c8c8c8; opacity:1;}
::-moz-placeholder {color:#c8c8c8; opacity:1;}
::-ms-placeholder {color:#c8c8c8; opacity:1;}
::-ms-input-placeholder {color:#c8c8c8; opacity:1;}
:-ms-input-placeholder {color:#c8c8c8; opacity:1;}
.bleu {color:$bleu;
&.bg {
background:$bleu;
color:inherit;
}
}
.noir {color:$noir;
&.bg {
background:$noir;
color:inherit;
}
}
.gris-alt {color:$gris-alt;
&.bg {
background:$gris-alt;
color:inherit;
}
}
.gris {color:$gris;
&.bg {
background:$gris;
color:inherit;
}
}
.blanc {color:$blanc;
&.bg {
background:$blanc;
color:inherit;
}
}
/* ----------------------------------------------------------- DESIGN GENERAL ---------------------------------------------------------------- */
.header {
nav.bg.blanc {
.row {
display:flex;
align-items: center;
height:12rem;
#menu {
height:5rem;
align-items: center;
display: flex;
justify-content: flex-end;
li {
padding:0 2rem;
height:100%;
display: flex;
align-items: center;
font-size:12px;
font-family:$font-b;
color:$gris-alt;
letter-spacing:.14em;
@include position(relative);
margin-left:2rem;
a {
color:inherit;
&:hover {
color:inherit;
}
}
&:after {
width:0; height:1px; content:''; display:block;
@include position(absolute,1,auto,0,0,0);
transition:all .3s ease; border-top:solid 1px;
margin:auto;
}
&.active {
color:$bleu;
&:after {
width:100%;
}
}
&:hover {
color:$gris;
&:after {
width:100%;
}
}
&:first-child {
margin-left:0;
}
}
}
}
}
#visuel-header {
width:100%;
background-size:cover;
background-position:center center;
background-repeat: no-repeat;
background-image:url(../images/header-devis-huissier.jpg);
.row {
height:40rem;
.h1 {
position:relative;
top:50%;
transform: translateY(-50%);
}
}
}
}
#main {
padding:6rem 0 13rem 0;
position:relative;
#txt-home {
strong.bleu {
font-size:20px;
}
}
.after, .before {
width:15%;
height:auto;
display:block;
@include position(absolute,1,10%,0,auto,auto);
}
.after {
left:0; right:auto; bottom:10%; top:auto;
}
}
#formulaires {
margin-top:7rem;
.border {
border:solid 1px $bleu;
padding:0 6rem;
background:$blanc;
header {
margin:0 -6rem;
background:$bleu;
display:flex; align-items: center;
height:11rem;
position:relative;
&:after {
content:'';
width:16px; height:18px;
display:block; margin:auto;
@include position(absolute,1,auto,0,15px,0);
background:url(../images/icons/arrow.png);
background-size:cover;
}
}
>p {
padding:2rem 0 0 0;
>span.bleu.bg {
display:block;
margin:0 -1.5rem;
padding:1rem 1.5rem;
text-align:center;
}
}
+.border {
margin-top:30px;
}
}
}
.form-horizontal {
margin-top:3rem;
margin-bottom:4.5rem;
label {
display:block;
width:100%;
font-size:15px;
font-family: $font-b;
margin-bottom:8px;
}
input[type=text], textarea, input[type=email], input[type=tel] {
width:100%;
height:50px;
padding:0 2rem;
border:solid 1px $gris;
font-size:15px;
font-family:$font-b;
color:$gris;
transition:all .3s ease;
margin-bottom:25px;
&:focus {
border-color:$bleu;
}
}
textarea {
padding-top:15px;
height:12rem;
}
p.txt-demande {
text-align:center;
}
div#div_etape1, div#div_etape2, div#div_etape3 {
margin-top:3rem;
}
}
#accelerateurs {
padding:8rem 0;
background:url('../images/background-avantages-devis-huissier.jpg') no-repeat center center;
background-size:cover;
a {
padding:0 5rem;
color:$blanc;
img {
max-height:7rem;
}
strong {
display:inline-block;
padding:5px 10px;
font-size:20px;
text-shadow: none;
}
&:hover {
color:$blanc;
text-shadow:0px 0px 5px rgba(0,0,0,.8);
strong {background:$blanc; color:$bleu; text-shadow: none; box-shadow:0px 3px 5px rgba(0,0,0,.3);}
}
}
}
.footer {
margin-top:6rem;
padding:3rem 0;
.container>.row {
padding:3rem 0;
display:flex;
align-items:center;
}
.menu-footer {
display:flex;
align-items: center;
justify-content:space-between;
li {
font-size:12px;
font-family:$font-b;
letter-spacing:.1em;
}
}
}
#txt-tarifs {
.h2 {
font-size:3.5rem;
text-align:left;
margin-bottom:4rem;
}
p+h3, h3+p {
margin-top:3rem;
}
p {
padding-left:2rem;
}
}
#txt-contact {
.h2 {
font-size:2.8rem;
margin-bottom:4rem;
}
}
div.form-contact {
border:solid 1px rgba(0,0,0,.1);
padding:0 4.5rem;
margin-top:6rem;
h2 {
margin-bottom:5rem;
font-size:20px;
&:after {
display:block; width:20px; height:3px; background:$bleu;
content:''; position:absolute; bottom:-15px; left:0; right:0; margin:auto;
}
}
.message-formulaire {
padding:3rem 0;
}
}
/* ------------------------------------------------------------------- ANNUAIRES ---------------------------------------------------------------------- */
.counter-huissiers {
@include dsp-ib(top);
padding:10px 20px;
color:$blanc!important;
font-size:16px;
@include position(absolute,10,auto,15px,0,auto);
}
#recherche-huissier {
.form-horizontal {
margin-top:0;
}
.nav-tabs {
border:solid 1px $gris;
li {
a {
display:block;
padding:15px;
font-size:15px;
&:hover {
background:#f2f2f2;
}
}
&.active {
a {
background:#f2f2f2;
color:$bleu;
}
}
&.bleu.bg {
padding:15px;
color:$blanc;
}
}
}
}
#resultats-huissiers {
.h2 {
font-family:$font-b;
font-size:3rem;
margin-bottom:6rem;
text-align:left;
&:after {
display:block; width:20px; height:3px; background:$bleu;
content:''; position:absolute; bottom:-3rem; left:0;
}
}
.h3 {
margin:3rem 0;
}
}
.collapse {
display:none;
}
.collapse.in {
display:block;
}
.collapsing {
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease
}
.check-icone {
width:25px;
height:25px;
margin-right:10px;
}
.panel-title {
line-height:50px;
@include dsp-ib(top);
width:100%;
border-bottom:solid 1px rgba(0,0,0,.1);
}
.panel-body {
padding:3rem 0;
.bouton {
height:40px;
line-height:40px;
padding:0 15px;
margin-top:2rem;
text-transform: uppercase;
border-radius:7px;
}
}
#detail-huissier {
.h2 {
font-family:$font-b;
font-size:24px;
margin-bottom:6rem;
text-align:left;
line-height:24px;
&:after {
display:block; width:20px; height:3px; background:$bleu;
content:''; position:absolute; bottom:-3rem; left:0;
}
}
p {
margin:1rem 0;
}
ul.c-content-list-1 {
text-transform: uppercase;
margin:2rem 0;
li {
padding-left:20px;
position:relative;
padding:5px 0 5px 20px;
&:after {
content:'';
display:block;
width:10px;
height:2px;
background:$bleu;
margin:auto;
@include position(absolute,2,0,auto,0,0);
}
}
}
div.col-xs-12 {
margin-bottom:4rem;
&:last-child {
margin-bottom:0;
}
}
.bt-maps {
margin-top:2rem;
}
}
/* --------------------------------------------
-----------------------------------------------
-----------------------------------------------
!----------- BREAKPOINTS
-----------------------------------------------
-----------------------------------------------
---------------------------------------------*/
/* --------------------
---------------- 1200PX
-------------------- */
@media (max-width: 1200px) {
html {
font-size: 8.5px;
}
/* ----------------------------------------------------------- ELEMENTS GLOBAUX ---------------------------------------------------------------- */
.bouton {
height:45px;
line-height: 45px;
}
.header {
nav.bg.blanc {
.row {
#menu {
li {
letter-spacing:.1em;
margin-left:1rem;
}
}
}
}
}
}
/* --------------------
----------------- 992PX
-------------------- */
@media (max-width: 992px) {
html {
font-size: 7.2px;
}
/* -------------------------------------------------------------- ELEMENTS GLOBAUX --------------------------------------------------------- */
.bouton {
height:40px;
line-height: 40px;
}
.header {
nav.bg.blanc {
position:relative;
z-index:10;
.row {
display:block;
height:12rem;
>p {
line-height:12rem;
&.visible-sm {
text-align:right;
}
}
#bt-menu {
@include dsp-ib(middle);
width:40px;
height:40px;
background:$bleu;
line-height:normal;
img {
max-height:15px;
margin-top:-2px;
&.close-icone {
display:none;
}
}
&:hover {
background:$bleu-hover;
}
}
#menu {
height:auto;
max-height:auto;
display:block;
position:absolute;
top:100%;
z-index:10;
li {
display:block;
height:0px;
overflow:hidden;
display: flex;
justify-content: center;
margin:0;
text-align:center;
background:$bleu;
color:$blanc;
padding:0;
transition:all .6s ease;
a {
text-align:center;
width:100%;
height:100%;
line-height:60px;
&:hover {
background:rgba(255,255,255,.1);
}
}
&:after {
display:none;
}
&.active {
background:$bleu-hover;
color:$blanc;
}
&:hover {
color:$blanc;
&:after {
width:100%;
}
}
}
}
}
}
&.ouvert {
nav.bg.blanc {
.row {
#menu {
top:100%;
li {
height:60px;
}
}
#bt-menu {
img {
&.close-icone {
display:inline;
}
&.menu-icone {
display:none;
}
}
}
}
}
}
}
#formulaires {
.border {
padding:0 20px;
header {
margin:0 -20px;
&:after {
display:none;
}
}
}
}
.form-horizontal {
label {
margin-bottom:5px;
}
input[type=text], textarea, input[type=email], input[type=tel] {
height:45px;
margin-bottom:20px;
}
textarea {
padding-top:15px;
height:120px;
}
p.txt-demande {
text-align:center;
}
}
#accelerateurs {
a {
padding:0 15px;
strong {
font-size:18px;
}
}
}
}
/* ------------------------------------------------------------------- ANNUAIRES ---------------------------------------------------------------------- */
.panel-title {
line-height:normal;
padding:10px 0;
display:flex;
align-items: center;
}
#detail-huissier {
.h2 {
font-family:$font-b;
font-size:3rem;
margin-bottom:6rem;
text-align:left;
line-height:3rem;
&:after {
display:block; width:20px; height:3px; background:$bleu;
content:''; position:absolute; bottom:-3rem; left:0;
}
}
p {
margin:10px 0;
}
}
/* --------------------
----------------- 760PX
-------------------- */
@media (max-width: 760px) {
html {
font-size: 6.1px;
}
.h2 {
font: 16px $font-b;
}
.h3 {
font:16px $font-b;
}
.reverse {
display:flex;
flex-direction: column-reverse;
}
.header {
nav.bg.blanc {
.row {
#logo img {
width:210px;
max-width:210px;
min-width:210px;
}
#menu {
li {
a {
line-height:50px;
}
}
}
}
}
&.ouvert {
nav.bg.blanc {
.row {
#menu {
li {
height:50px;
}
}
}
}
}
}
#main {
padding:6rem 0 13rem 0;
#txt-home {
strong.bleu {
font-size:20px;
}
.bouton {
padding:0 20px;
img {
display:none;
}
}
}
}
#formulaires>div.alt {
margin-top:30px;
}
#formulaires {
.border {
max-height:11rem;
overflow:hidden;
transition:all .8s ease;
header {
cursor:pointer;
}
&.ouvert {
max-height:99rem;
}
}
}
.form-horizontal {
input[type=text], textarea, input[type=email], input[type=tel] {
height:40px;
margin-bottom:15px;
}
textarea {
padding-top:15px;
height:120px;
}
p.txt-demande {
text-align:center;
}
}
#accelerateurs {
a {
padding:0 15px;
margin-bottom:30px;
&:last-child {
margin:0;
}
strong {
padding:5px 10px;
}
}
}
.footer {
padding:3rem 0;
.container>.row {
padding:0;
display:block;
>* {
padding:1.5rem 15px;
text-align:center;
}
img {
max-width:210px;
}
}
.menu-footer {
display:inline-block;
width:100%;
li {
font-size:12px;
font-family:$font-b;
letter-spacing:.1em;
padding:10px 0;
}
}
}
#txt-tarifs {
p {
padding-left:0rem;
}
span.tableau {
display:block;
overflow:auto;
padding:10px;
padding-bottom:15px;
border:solid 1px rgba(0,0,0,.1);
img {
width:700px;
margin-right:10px;
}
}
}
div.form-contact {
margin:0 15px;
padding:0 15px;
margin-top:3rem;
width:calc(100% - 30px);
h2 {
font-size:18px;
}
}
/* ------------------------------------------------------------------- ANNUAIRES ---------------------------------------------------------------------- */
.counter-huissiers {
padding:10px;
left:15px;
text-align: center;
font-size:14px;
}
#recherche-huissier {
margin-bottom:4rem;
padding-bottom:4rem;
border-bottom:solid 1px rgba(0,0,0,.2);
.nav-tabs {
li {
max-height:0;
transition:all .6s ease;
opacity:0;
overflow:hidden;
&.bleu.bg {
max-height:80px!important;
opacity:1!important;
text-align:center;
}
}
&.ouvert {
li {
max-height:80px;
opacity:1;
}
}
}
}
.panel-body {
.bouton {
height:35px;
line-height:35px;
font-size:12px;
}
}
#detail-huissier {
.h2 {
font-size:20px;
text-align:left;
line-height:20px;
}
ul.c-content-list-1 {
li {
padding:5px 0 5px 20px;
}
}
}
}