@import "zframework.less"; /* -------------------------------------------------- -------------------------------------------------- Project : NEVA NETTOYAGES Creation date : 29/07/2013 By : JB Guillard -------------------------------------------------- -------------------------------------------------- SOMMAIRE : == header == navigation == footer == widgets -------------------------------------------------- -------------------------------------------------- */ /* -------------------- == header -------------------- */ #header{ background: #1d1d1b; color: #fff; a{ color: #fff; text-decoration: none; } border-bottom: 1px solid #fff; } #logo{margin-bottom: 10px;} #header-inner{ text-align: center; padding-bottom: 10px; } .message-submenu{display:none;} /* -------------------- == navigation -------------------- */ #nav-container{ background: #951b80; border-bottom: 1px solid #fff; font-family: 'Helvetica Roman' , Arial, Roboto, "Nimbus Sans L", sans-serif; } #nav-top{ position: relative; z-index: 2; .first-level{ background: #1d1d1b; width: 100%; position: relative; z-index: 2; a{ text-transform: uppercase; } > li{ transition: all 0.3s ease; > a{ padding-left: 26px; padding-right: 26px; z-index: 3; position: relative; background: #951b80; transition: background 0.3s ease; text-align: center; padding: 15px; } &:hover > a, &:focus > a, &.active>a{ background: #383836; } } > li:first-child{ a{ padding-left: 33px; padding-right: 33px; text-indent: -999em; min-width: 34px; min-height: 28px; background: url('/images/ico-home.png') no-repeat #951b80 center; &:hover{ background-color: #000; } } } } .second-level{ background: #1d1d1b; > li a{ padding:8px; display: block; text-align: center; text-transform: none; &:hover, &:focus, &.active{ background: #383836; } } } } .sub-arrow { position: absolute; right: 10px; top: 50%; margin-top: -10px; } .oldie #nav-top .first-level{ & > li:hover .second-level{ position: absolute; z-index: 1; bottom:-40px; } & > li.active{ .second-level{ position: absolute; z-index: 0; bottom: -40px; } } } #nav-footer{ margin: 35px 0 0 0px; text-align: center; .first-level > li{ margin-top: 10px; > a{ padding: 8px 0 8px 0; text-transform: uppercase; background: #951b80; margin-bottom: 10px; } } a{ color: #fff; text-decoration: none; } .second-level{ margin: 0; li { display: block; margin-bottom: 5px; a{ padding: 0!important; } } } .accueil{ display: none !important; } } /* -------------------- == CONTENT -------------------- */* #main{ padding: 0 10px; } .crumbles-chocolat-banane{ margin-top: 5px; margin-left: 40px; .pxtoem(13); color: #000; text-decoration: none; a{ color: #000; text-decoration: none; } } #main > article > p:first-child{ border-radius: 0 0 30px 30px; overflow: hidden; } .formulaire_de_contact h1{ margin-top:30px; } #main > article > ul{ list-style-image: url('/images/list-image.png'); } #main > article > table{ border: 0; margin: 0 0 30px 60px; border-radius: 20px; background: #e5e5e5; overflow: hidden; width: 310px!important; min-height: 180px; margin-left: 50px; td{ border: 0; padding: 0 0 20px 0; & > *{ padding: 0 20px; text-align: justify; } p:first-child{ padding: 0; border-radius: 20px 20px 0 0; overflow: hidden; } } img{ width: 100%; border-bottom: 10px solid #f39201; margin-bottom: 5px; } } .notre_equipe_a_votre_equipe #main > article > table { border: 0; margin: 0; border-radius:0; background: transparent; width:100%!important; min-height: 180px; table-layout: fixed; td{ display: block; text-align: center; & > *{ padding: 0; } &:first-child{ & + td{ padding-left:30px; } } } img{ border:0; margin:0; height:auto !important; } } /* ---- SLIDER -------- */ .legend a{ display: block; position: absolute; bottom:45px; background: rgba(0,0,0,0.3); width:100%; padding:20px; color: #fff; text-decoration: none; } #main > article > p:first-child, .flexslider + p{ margin:0; padding: 0; } /* ---- ACCUEIL -------- */ .rubrique_sommaire_{ .crumbles-chocolat-banane{ position: absolute; top: -999em; } #main > article{ margin-top:0; > h1{ .pxtoem(16); border:0; text-transform: none; font-family: 'Helvetica Roman' , Arial, Roboto, "Nimbus Sans L", sans-serif; font-weight:bold; } } } /* -------------------- == footer -------------------- */ #footer{ background: #1d1d1b; } #overDiv{display: none;} /* -------------------- == widgets -------------------- */ .widget-adresse{ display: inline-block; vertical-align: top; p{display: none;} .widget-title{ display: none; } } .widget-tel{ display: inline-block; vertical-align: top; a{ display: block; text-indent: -9999px; background: url('/images/ico-phone.png') transparent no-repeat right center; padding: 6px 7px 5px; margin:0 5px; } .widget-title{ display: none; } } .widget-list{ ul{ list-style: none; margin: 15px 0 0 0; padding: 0; } li{ display: block; vertical-align: top; margin-bottom: 30px; &:nth-child(3n-8){ padding-left: 0; } > div{ border-radius:20px; background: #e5e5e5; margin:auto; overflow: hidden; width: 310px; min-height:180px; > a > span{ color: #C7C7C7; .pxtoem(50); float: right; line-height: 0.8em; margin-right: 20px; text-decoration: none; } } } p:not(.widget-title){ margin-left: 20px; background: url('/images/ico-gmap.png') no-repeat top left; padding-left:15px; .pxtoem(18); float: left; margin-top: 5px; line-height: 0.8em; padding-top: 3px; font-family: 'Helvetica Roman' , Arial, Roboto, "Nimbus Sans L", sans-serif; > a{ text-decoration: none; color: #3c3c3c; > span{ color: #adacac; .pxtoem(11); } } } img{ width:100%; border-bottom: 10px solid #951b80; margin-bottom: 15px; } } .oldie .widget-list li{ padding-left:17px; } .aside-neva{ .widget-title{ margin-left:10px; margin-right:10px; } p:not(.widget-title){ text-transform: uppercase; > a{ > span{ text-transform: lowercase; } } } } .widget-prestations{ /* margin-top: 30px; */ li > div{ min-height: 220px; } a{ text-decoration: none; } h2{ text-transform: uppercase; .pxtoem(20); margin-left: 20px; margin-bottom: 0; margin-top: 10px; font-family: 'Helvetica Roman' , Arial, Roboto, "Nimbus Sans L", sans-serif; } p:not(.widget-title){ background: transparent; .pxtoem(13); color:#646464; padding-left: 0; margin-right: 20px; margin-top: 0; & > a{ line-height: 1em; } } img{ margin-bottom: 0; border-bottom: 10px solid #f39201; } } .widget-adresse-footer{ color:#fff; text-align: center; .widget-title{ position: absolute; top: -999em; } // p{ // margin-left: 15px; // } a{ color: #fff; text-decoration: none; } .widget-adresse-footer--link{ display:block; } } .widget-links{ width: 100%; text-align: center; color: #fff; overflow: hidden; clear: both; .pxtoem(13); padding-top: 50px; a{ color: #fff; text-decoration: none; } .widget-title{ position: absolute; top: -999em; } } /*menu*/ #nav-top{ .sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;-webkit-tap-highlight-color:rgba(0,0,0,0);} .sm-rtl,.sm-rtl ul,.sm-rtl li{direction:rtl;text-align:right;} .sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0;} .sm ul{display:none;} .sm li,.sm a{position:relative;} .sm a{display:block;} .sm a.disabled{cursor:not-allowed;} .sm:after{content:"\00a0";display:block;height:0;font:0px/0 serif;clear:both;visibility:hidden;overflow:hidden;} .sm,.sm *,.sm *:before,.sm *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} #main-menu.collapsed { display: none; } } #menu-button { display: inline-block; vertical-align: top; } .nav-btn { background: #951B80; display: inline-block; padding: 14px 8px; text-align: center; border-radius: 17px; .nav-btn--line{ transform: rotate(45deg); &, &:before{ width:14px; background:white; height:2px; position: relative; display: block; } &:before{ content: ""; position: absolute; top:0px; left:0; transform: rotate(90deg); } } } .nav-btn.collapsed{ .nav-btn--line{ &, &:before, &:after{ width:14px; background:white; height:2px; position: relative; display: block; transform: rotate(0deg); } &:before{ content: ""; position: absolute; top:-4px; } &:after{ content: ""; position: absolute; bottom:-4px; } } } /* -------------------------------------------------- == cookies validation -------------------------------------------------- */ .alert-cookie { transition:none; overflow: hidden; text-align: center; background-color: #000; background-color: rgba(0,0,0,0.85); color:#fff; max-height: unit(round((100/@basefont),4),em); animation: cookie-anim 1s ease-in; padding:10px; margin:0 0 10px 0; &.is-hidden{ animation: none; max-height: 0; padding:0; margin:0; transition : all 0.5s linear; } } @keyframes cookie-anim { 0% { max-height: 0; padding:0; margin:0; } 100% { max-height: unit(round((100/@basefont),4),em); padding:10px; margin:0 0 10px 0; } } .alert-cookie--link, .alert-cookie--link:visited { display: inline-block; color: #fff; } .alert-cookie--btn { background-color: #fff; padding:3px 10px; margin-left:10px; } @media (min-width: 670px) { .widget-list li{ float: left; width: 50%; } .notre_equipe_a_votre_equipe #main > article > table { td{ display: table-cell; vertical-align: middle; &:first-child{ width: 200px!important; } } } } @media (min-width: 768px) { #logo{ float: left; max-width: 44%; } .widget-adresse--link{display:none;} .widget-adresse{ margin-top:25px; float: right; margin-right: 10px; padding-right: 45px; text-align: right; background: url('/images/ico-adresse.png') transparent no-repeat right center; font-family: 'Helvetica Roman' , Arial, Roboto, "Nimbus Sans L", sans-serif; p{display: block;} } .message-submenu{ height: 40px; padding-top: 3px; display: block; p{ margin: 0; text-align: center; } } .widget-tel{ float: right; a{ margin-top:8px; margin-right: 10px; padding-right: 45px; text-align: right; background: url('/images/ico-phone.png') transparent no-repeat right center; .pxtoem(30); font-weight: bold; text-indent: 0; } .widget-title{ display: none; } } #nav-top{ .sm ul{position:absolute;} .sm li{float:left;} .sm.sm-rtl li{float:right;} //.sm ul li,.sm.sm-rtl ul li,.sm.sm-vertical li{float:none;} .sm a{white-space:nowrap;} .sm ul a,.sm.sm-vertical a{white-space:normal;} .sm .sm-nowrap > li > a,.sm .sm-nowrap > li > :not(ul) a{white-space:nowrap;} /* always show the menu in desktop view */ #main-menu.collapsed { display: block; } #main-menu { position: relative; z-index: 9999; } #main-menu ul { width: 12em; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */ } .sub-arrow{display: none;} .first-level>li{ float: left; >a{ padding: 11px 15px; } } } #menu-button { display: none; } /* -------------------- == navigation -------------------- */ #nav-container{ background: #951b80; border-bottom: 1px solid #fff; font-family: 'Helvetica Roman' , Arial, Roboto, "Nimbus Sans L", sans-serif; } .rubrique_sommaire_ #nav-top .first-level li.accueil a{ background-color: #1d1d1b; border-bottom: 1px solid #000; margin-bottom: -1px; } #nav-top{ position: relative; z-index: 4; //height:56px; .first-level{ background: #951b80; width: 100%; position: relative; z-index: 2; overflow: visible !important; a{ text-transform: uppercase; } > li{ transition: background 0.3s ease; position: static; z-index: 1; > a{ padding:20px 15px; text-transform: none; // transition: all 0.3s ease; // -webkit-transition: all 0.3s ease; z-index: 30; position: relative; } &:hover > a{ background: #1d1d1b; border-bottom: 1px solid #1d1d1b; margin-bottom: -1px; } &:hover .second-level{ position: absolute; z-index: 1; transform: translateY(40px); -ms-transform: translateY(40px); -webkit-transform: translateY(40px); border-top: 1px solid #FFF; background: #1d1d1b; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; } } > .active{ & > a{ background: #3D3D3B; border-bottom: 1px solid #000; margin-bottom: -1px; } .second-level{ position: absolute; z-index: 0; transform: translateY(40px); -ms-transform: translateY(40px); -webkit-transform: translateY(40px); border-top: 1px solid #FFF; background: #1d1d1b; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; .active a{ background: #3D3D3B; } } } > li:first-child{ a{ padding-left: 33px; padding-right: 33px; text-indent: -999em; min-width: 34px; min-height: 28px; background: url('/images/ico-home.png') no-repeat #951b80 center; &:hover{ background-color: #000; } } } } .second-level{ position: absolute; bottom: 0; height: 40px; background: #951b80; left: 0; border-top: 0; z-index: 1; transition: all 0.3s ease; -webkit-transition: all 0.3s ease;; width:100% !important; max-width: none !important; margin-left:0 !important; > li{ float: left; a{ padding-top:11px; height: 40px; padding:11px 20px 0; display: block; text-transform: none; &:hover{ background: #951b80; } } } } } .oldie #nav-top .first-level{ & > li:hover .second-level{ position: absolute; z-index: 1; bottom:-40px; } & > li.active{ .second-level{ position: absolute; z-index: 0; bottom: -40px; } } } /*nav footer*/ #nav-footer{ float: right; width: 75%; margin: 35px 0 0 0px; .pxtoem(11); .first-level > li{ padding-left: 20px; display: inline-block; vertical-align: top; margin-top: 0; > a{ padding: 6px 10px; text-transform: uppercase; } } } .widget-adresse-footer{ float: left; text-align: left; padding-left: 20px; width: 25%; } .alert-cookie--btn { &:hover { background-color: #999; color: #fff; } } .alert-cookie--link, .alert-cookie--link:visited { &:hover { color:#fff; } } } @media (min-width: 900px) { #nav-top .first-level > li > a{ text-transform: uppercase; } .message-submenu{ padding-top:11px; } } @media (min-width: 990px) { #logo{max-width:none;} #header{ background: #1d1d1b url('/images/bg-header.jpg') no-repeat top right; } #header-inner{ height:163px; } #nav-top .first-level > li > a{ padding-right:26px; padding-left: 26px; } #nav-top .second-level >li > a{ padding-right:30px; padding-left: 30px; } #main{padding:0;} .rubrique_sommaire_{ #main > article{ > h1{ margin:20px 40px 0 40px; } > p{ margin-left: 40px; margin-right: 40px; } } } .widget-list{ li{ display: inline-block; padding-left:26px; vertical-align: top; margin-bottom: 30px; float: none; min-width:310px; width: auto; &:nth-child(3n-8){ width: 310px; padding-left: 0; } } } #footer{ background: url('/images/bg-footer.jpg') repeat-x top left #1d1d1b; } #nav-footer{ float: right; width: 735px; text-align: left; .first-level > li{ > a{ padding: 4px 0 0 0; } } } .aside-neva .widget-title{ margin-left:0; margin-right:0; } } iframe{ max-width: 100%; } .block-left{ margin-bottom: 20px; } .block-right img{ display: block; margin: 0 auto; } @media (min-width: 768px) { .block-left{ float: left; width: 66%; margin-right: 4%; } .block-right{ float: left; width: 30%; } } .equipe{ clear: both; } .equipe>div{ margin-bottom: 20px; } .equipe>div:last-child{ margin-bottom: 0px; } .equipe h2{ display: inline-block; color: white; padding: 20px 15px; text-align: center; margin-bottom: 20px; margin-top: 20px; } .gerant h2 { background: #951b80; padding: 20px 15px ; margin-left: 0px; box-shadow: 5px 5px 0px #6f145f; } .assistante h2 { width: 215px; } .assistante h2, .animateur h2 { background-color: #f39201; box-shadow: 5px 5px 0px #c57601; } @media (min-width: 768px) { .equipe { background-image: url("/images/formes.png"); background-repeat: no-repeat; background-position-x: center; background-position-y: 215px; overflow: hidden; } .gerant h2 { background: #951b80; padding: 20px 15px 20px 100px; margin-left: -100px; } .equipe div { width: 50%; position: relative; } .gerant { margin: 0 auto; } .gerant img { position: absolute; top: -5px; left: -210px; } .assistante { float: left; margin-top: 85px; padding-right: 4%; } .animateur { float: right; text-align: right; padding-left: 4%; } }