/****************************************************************** * SITE 960 : Feuille de style Site * File : colors.css * Package : Xbois / Xylan * Version : 2.5.2 - 2021-01-13 * Copyright (C) 2016-2020 W.M. All Rights Reserved * Author : W.M. * COULEURS ET PARAMETRES DE LA CHARTE * Color Picker : https://coolors.co/473C3A * Color Blender : https://meyerweb.com/eric/tools/color-blend/#473C3A:CCCCCC:10:hex * Roue chromatique hexadecimale (CC) : https://color.adobe.com/fr/create/color-wheel/ * Regle par defaut Roue chromatique : Nuances * Convertisseur HEX > RGBA : http://www.netgfx.com/RGBaZR/ * Conversion : http://pxtoem.com/ ******************************************************************/ /* Codes couleurs couleur 1 : #2b160c - Arriere-plan page - Tints 5ème droite / couleur dominante image de fond - Original : #cd8d42 couleur 2 : #473C3A - pour Titres et textes libres couleur 3 : #6A4A33 - pour textes libres, hover menu Nav - Shades 5ème de la gauche couleur 4 : #322A29 - rgba(71, 60, 58) - pour arriere-plan, titre zone certification - Shades 5ème droite couleur 5 : #680E10 - liens active Menu - Shades 3ème de la gauche couleur 6 : #EEECE9 - Arriere plan sous-menu - Mesurer par capture d'ecran zone Nav couleur 7 : #CCCCCC - Arrière plan hover sous-menu (predefini) couleur 8 : #f4f4f4 - Arriere plan sous-menu (predefini) couleur 9 : #f2f2f2 - Arriere plan bordure sous-menu (predefini) ------------------------------------------------------------------------- couleur 10 : #322A29 - COULEUR DE REFERENCE : Barre d'informations haute, nom entreprise... ------------------------------------------------------------------------- couleur 11 : #F5EDDC - Arrière plan sous-menu petit ecran couleur 12 : #01BAF3 - Barre d'informations haute - texte + lien + lien reseaux sociaux - Tints/Shades 1ère ou 2ème droite couleur 13 : #00F7FF - Barre d'informations haute - liens hover - Tints/Shades 2ème ou 3ème droite couleur 14 : #CEC5C3 - rgba(206, 197, 195) - Arriere-plan zone Menu Nav et page couleur 15 : #CDCB00 - rgba(255, 203, 0) - liens Menu ??? couleur 16 : #C0BFBF - rgba(192, 191, 191) - Arriere plan Certification, Services - variante 11 Color Blender couleur 17 : 3F2C1F - rgba(63, 44, 31) - Arriere plan page dynamique et galerie - Shades 7ème droite ******************************************************************/ /* Donnees globales */ .bodycolor { background-color: #2b160c; } /* couleur 1 : arriere-plan page - Zone 1 CC */ .txtcolor1 { color: #322A29; } /* couleur 2 : pour Titres et textes libres */ .txtcolor2 { color: #6A4A33; } /* couleur 3 : pour textes libres */ .bgcolor1 { color: #322A29; } /* couleur 4 : pour arriere-plan */ /* Barre haut de page */ #topbar { background: none repeat scroll 0 0 #322A29; border-bottom: 1px solid #000; } /* couleurs 10 : arriere-plan et bordure - Zone 4 CC */ #topbar p, #topbar a { color: #01BAF3; } /* couleur 12 : texte + lien - Zone 5 CC */ #topbar a:hover, #topbar i:hover { color: #00F7FF; } /* couleur 13 : liens hover - Zone 3 CC */ #topbar i, .icon { color: #01BAF3; } /* idem couleur 12 : lien reseaux sociaux */ /* Zone Nav logo + Menu * Valeur A pour background / border : 0.9 / 0.5 */ nav { background: none repeat scroll 0 0 rgba(220, 211, 200, 0.8); border-bottom: 4px solid rgba(71, 60, 58, 0.50); } /* couleur 14 : arriere-plan page - avec A 0.8/0.5 et couleur 4 */ .top-nav li a { border-top: 1px solid rgba(255, 203, 0, 0); color: #000; } /* couleur 15 : liens Menu (ou Idem couleur 2) */ .top-nav li a:hover { background:none repeat scroll 0 0 #322A29; border-top: 1px solid #6A4A33; color: #fff; } /* couleur liens hover Menu (Idem couleur 3) */ .top-nav li a.active-item { background: none repeat scroll 0 0 rgba(157, 138, 135, 0.4); border-top: 1px solid #5F422E; color: #473C3A; } /* couleur liens Menu actif - Shades 6ème ou 7ème gauche/droite */ .top-nav li a.active-item:hover { border-top: 1px solid #5F422E; color: #fff; } /* couleur liens hover Menu - Shades 6ème ou 7ème gauche/droite */ .top-nav li ul li a { background:none repeat scroll 0 0 #EEECE9; } /* Arrière plan sous-menu */ .aside-nav li a:hover {background: #CCCCCC;} /* Arrière plan sous-menu */ .aside-nav ul { background: #e8e8e8; } /* ? */ .aside-nav > ul > li.active-item > a:link, .aside-nav > ul > li.active-item > a:visited { background:none repeat scroll 0 0 #9D8A87; color:#fff; } .aside-nav li > ul { background: #f4f4f4; border-left:solid 1px #f2f2f2; border-right:solid 1px #f2f2f2; } /* ? */ p.logo img { height: 80px; } /* Hauteur du logo entreprise */ @media screen and (max-width: 800px) { nav { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9) } .nav-text, .top-nav li a { background: #322A29 none repeat scroll 0 0; } /* couleur 4 : pour petits ecrans */ .top-nav li a { color: #fff; } .top-nav li a:hover { background:none repeat scroll 0 0 #645552; border-top: 1px solid #6A4A33; color: #fff; } .top-nav li a.active-item { background:none repeat scroll 0 0 #B5A7A5; border-top: 1px solid #5F422E; color: #473C3A; } /* couleur liens Menu actif - Shades 6ème ou 7ème gauche/droite */ .top-nav li ul li a { background:none repeat scroll 0 0 #D7BDAB; } /* Arriere plan sous-menu */ } /* Titres : arriere plan et couleur */ h2.section-title:after { background: #dedede none repeat scroll 0 0; } /* arriere plan des titres du site */ h2.section-title { color: #C0BFBF; } /* arriere plan des titres du site (variante 11 Color Blender) */ /* Carousel */ .prev-arrow, .next-arrow, #carousel .text p { background: none repeat scroll 0 0 #322A29; color: #fff; } /* couleur 4 : arriere-plan, texte + fleche + autres */ #first-block, #about-us { background: none repeat scroll 0 0 #322A29; color: #fff; } /* couleur 4 : arriere-plan, texte + fleche + autres */ #carousel .text h2 { background: rgba(220, 211, 200, 0.8) none repeat scroll 0 0; color: #322A29; } /* couleurs Titres (Idem couleur 1 et 2) */ #carousel .owl-theme .owl-controls { background: none repeat scroll 0 0 rgba(71, 60, 58, 0.5); } /* couleur 4 : arriere-plan barre defilement sous carousel */ .owl-theme .owl-controls .owl-page span { background: #322A29 none repeat scroll 0 0; } /* couleur 4 : arriere plan barre defilement sous carousel */ .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { background: none repeat scroll 0 0 #01BAF3; } /* couleur 12 : barre defilement sous carousel */ #carousel .surimp { position: absolute; top: 0.5em; width: 100%; height: auto; overflow: hidden; display: inline-block; *display: inline; text-align: center; z-index: 11; } /* Presentation */ /* #presentation { background: #000 none repeat scroll 0 0; color: #000; } /* couleurs arriere-plan (blanc par defaut sans transparence), titres et texte (noir par defaut) */ #presentation { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95); } /* couleurs arriere-plan (blanc par defaut avec opacité 95%), titres et texte (noir par defaut) */ #presentation a, #presentation a:link { color: #322A29;} /* couleur 10 */ #presentation a:hover, #presentation a:active, #presentation a:focus, #presentation a:visited { color: #322A29; text-decoration:underline; } /* couleur 2 */ /* certification */ #certification { background: none repeat scroll 0 0 rgba(192, 191, 191, 0.9); } /* couleur 16 : arriere-plan */ /* #certification { background: none repeat scroll 0 0 rgba(95, 151, 153, 0.9); } /* couleurs arriere-plan, titres et texte (variante 3 ColorBlender) */ #certification h4, #certification h5 { color: #322A29; } /* couleur 4 : titres */ #certification p { text-align: center; color: #000; padding: 0.75em;} /* justification et couleur texte */ #certification a, #certification a:link { color: #322A29;} /* idem couleur 10 */ #certification a:hover, #certification a:active, #certification a:focus, #certification a:visited { color: #322A29; text-decoration:underline; } /* couleur 2 */ #certification i, .icon { color:#5F422E; } /* Titres : arriere plan et couleur */ #certification h2.section-title:after, #certification h5.section-title:after { background: #CCCCCC none repeat scroll 0 0; } /* arriere plan des titres du site */ #certification h2.section-title, #certification h5.section-title { color: #322A29; } /* couleur 4 - couleur des titres du site */ /* Services */ #services, #services_encart, #geographie { background: none repeat scroll 0 0 rgba(192, 191, 191, 0.9); color: #000;} /* couleur 16 : arriere-plan */ #services p, #services_encart p, #geographie p { text-align: left; padding: 0;} /* justification texte */ #services i, #services_encart i, #geographie i { background: none repeat scroll 0 0 #000; color: #fff; } /* couleurs boutons (variante 3 ColorBlender) */ #services a, #services a:link { color: #322A29;} /* idem couleur 10 */ #services a:hover, #services a:active, #services a:focus, #services a:visited { color: #322A29; text-decoration:underline; } /* couleur 2 */ /* Encart produits */ #encart-produits, #encart-produits { background: none repeat scroll 0 0; color: #fff;} /* pas d'arriere-plan */ #encart-produits p, #encart-produits p { text-align: left; padding: 0;} /* justification texte */ #encart-produits i, #encart-produits i { background: none repeat scroll 0 0; color: #fff; } /* couleurs boutons (variante 3 ColorBlender) */ #encart-produits .demo-gallery { left: 50%; margin-left: auto; margin-right: auto; padding: 0; font-size: 80%; } #encart-produits .demo-gallery > ul > li { margin: 0; box-shadow: 5px 5px 5px #5E5652; } #encart-produits .demo-gallery > ul > li a { color: #DCD3C8; border: 0 solid #DCD3C8; border-radius: 0; } /* couleur 4 : bordures images et valeur arrondi */ /* Actualites - Offres */ #actualites { background: none repeat scroll 0 0 rgba(63, 44, 31, 0.50); text-align: center; } /* couleur 17 arriere-plan page dynamique */ #actualites .actu { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95); margin-bottom: 1em; } /* couleurs arriere-plan, page dynamique (variante 2 ColorBlender) */ .news-text { /* background: #000 none repeat scroll 0 0; border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; */ min-height: 120px; } /* couleurs arriere-plan, titres et texte actualite */ .news-text h4 { text-align: left; padding: 0.5em 0 0.5em 0;} /* justification texte */ .news-text p { text-align: justify; padding-bottom: 0.5em; color: #000;} /* justification texte */ #actualites a, #actualites a:link { color: #322A29;} /* idem couleur 10 */ #actualites a:hover, #actualites a:active, #actualites a:focus, #actualites a:visited { color: #322A29; text-decoration:underline; } /* couleur 2 */ #actualites .actu p { } /* color: #000 pour chartes sombres */ #actualites .demo-gallery { left: 50%; margin-left: auto; margin-right: auto; padding: 0; font-size: 80%; } #actualites .demo-gallery > ul > li { margin: 0; } #actualites .demo-gallery > ul > li a { color: #DCD3C8; border: 0 solid #DCD3C8; border-radius: 0; } /* couleur 4 : bordures images et valeur arrondi */ #actualites i, .icon { color: #fff; } #actualites h1.section-title { color: #C0BFBF; } /* arriere plan des titres du site (variante 11 Color Blender) */ /* Actualites version avec mini-Carousel */ #actualitesv2 { background: none repeat scroll 0 0 rgba(63, 44, 31, 0.50); text-align: center; } /* couleur 17 arriere-plan page dynamique */ #actualitesv2 .actu { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95); margin-bottom: 1em; } /* couleurs arriere-plan, page dynamique (variante 2 ColorBlender) */ #actualitesv2 a, #actualitesv2 a:link { color: #322A29;} /* idem couleur 10 */ #actualitesv2 a:hover, #actualitesv2 a:active, #actualitesv2 a:focus, #actualitesv2 a:visited { color: #322A29; text-decoration:underline; } /* idem couleur 2 */ /* GALERIE */ /* #galerie { background: #000 none repeat scroll 0 0; color: #000; } /* couleurs arriere-plan (blanc par defaut sans transparence), titres et texte (noir par defaut) */ /* .tab-item { background: #000 none repeat scroll 0 0; margin-top: 1.25em; padding: 1.25em 0; } /* Definition couleur fond, marges et espaces galerie (fond blanc par defaut) */ #galerie { background: none repeat scroll 0 0 rgba(63, 44, 31, 0.50); text-align: center; } /* couleur 17 arriere-plan page dynamique */ #galerie .demo-gallery { left: 50%; margin-left: auto; margin-right: auto; padding: 0; font-size: 80%; } #galerie .demo-gallery > ul > li { margin: 0; } #galerie .demo-gallery > ul > li a { color: #DCD3C8; border: 0 solid #DCD3C8; border-radius: 0; } /* couleur 4 : bordures images et valeur arrondi */ #galerie h1.section-title { color: #C0BFBF; } /* arriere plan des titres du site (variante 11 Color Blender) */ /* Formulaire de contact */ /* #contact { background: #000 none repeat scroll 0 0; color: #000; } /* couleurs arriere-plan (blanc par defaut sans transparence), titres et texte (noir par defaut) */ #contact { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95); } /* couleurs arriere-plan (blanc par defaut avec opacité 90%), titres et texte (noir par defaut) */ #contact .soc_i {background: #473C3A; } /* Fond icônes réseaux idem couleur 10 */ #contact a, #contact a:link { color: #322A29;} /* idem couleur 10 */ #contact a:hover, #contact a:active, #contact a:focus, #contact a:visited { color: #322A29; text-decoration:underline; } /* idem couleur 2 */ #contact h1.section-title { color: #C0BFBF; } /* arriere plan des titres du site (variante 11 Color Blender) */ #contact h2 { color: #322A29; } /* couleur 10 : Nom de l'entreprise */ #contact input, #contact textarea { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border-radius: 3px; } input, select, textarea { background-color: #CCCCCC; border: 1px solid #000; border-radius: 3px; } /* Caracteristiques champs formulaire */ #contact img { width: auto; margin: 0 auto 0 auto; text-align: center; } /* Alignement logo de la page contact */ #contact .g-recaptcha { margin-bottom: 1em; } /* Google Recaptcha */ /* Carte */ #map-block { filter: url('data:image/svg+xml;utf8,#g'); -webkit-filter: grayscale(50%); filter: grayscale(50%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=0.5); } /* Filtre carte contact */ /* Footer */ /* footer { background: none repeat scroll 0 0 #322A29; } /* Idem couleur 4 ou 10 : texte + flèche + autres */ footer { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.80); } /* couleurs arriere-plan, titres et texte (variante 2 ColorBlender) */ footer p, footer a { color: #000; } /* couleur 11 : texte - Zone 5 CC */ footer a:hover { color: #000; } /* couleur 13 : liens hover - Zone 3 CC */ /* Page erreurs */ #mentions h1.section-title { color: #C0BFBF; } /* arriere plan des titres du site (variante 11 Color Blender) */ #mentions h2 { color: #322A29; } /* couleur 10 : Nom de l'entreprise */ #mentions { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95); } /* couleurs arriere-plan (blanc par defaut avec opacité 90%), titres et texte (noir par defaut) */ #mentions a, #mentions a:link { color: #322A29;} /* idem couleur 10 */ #mentions a:hover, #mentions a:active, #mentions a:focus, #mentions a:visited { color: #322A29; text-decoration:underline; } /* idem couleur 2 */ #mentions .erreur a, #mentions .erreur a:link, #mentions .erreur a:active, #mentions .erreur a:visited { color: #000; text-decoration:none; } #mentions .erreur a:hover { color: #000; text-decoration:underline; } /* TABLE */ th, td {text-align: center;} /* justification texte des cellules */ /* Administration Site */ #administration { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95); text-align: center; } /* couleurs arriere-plan (blanc par defaut avec opacite 90%), titres et texte (noir par defaut) */ #administration a, #administration a:link { color: #322A29;} /* idem couleur 10 */ #administration a:hover, #administration a:active, #administration a:focus, #administration a:visited { color: #5F422E; text-decoration:underline; } /* idem couleur 11 */ #features { background: none repeat scroll 0 0 rgba(255, 255, 255, 0); } /* Comme Galerie - couleurs arriere-plan, titres et texte (variante 2 ColorBlender) */ #features i { background: none repeat scroll 0 0 rgba(71, 60, 58, 0.8); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2) inset; color: #000; } /* couleur 4 */ #features h2 { } #features p { } #features a, #features a:link { color: #322A29;} /* idem couleur 10 */ #features a:hover, #features a:active, #features a:focus, #features a:visited { color: #5F422E; text-decoration:none; } /* idem couleur 11 */ .news-text-admin { background: #DCD3C8 none repeat scroll 0 0; border: 1px solid #e0e0e0; min-height: 8.5em; padding: 0.5em; margin: 0.5em 0.5em 0.5em 0; } /* couleurs arriere-plan, titres et texte actualite */ .text-adm h4 { text-align: left; padding: 0.5em 0 0.5em 0; color: #000; } /* justification et couleur texte */ .text-adm p { text-align: justify; padding-bottom: 0.5em; color: #000; } /* justification et couleur texte */ h2.section-title-admin:after { background: #dedede none repeat scroll 0 0; } /* arriere plan des titres du site */ h2.section-title-admin { color: #dedede; } /* arriere plan des titres du site */ /* * STYLES PERSONNALISES CHARTE */ body { /* Exemple arriere-plan fixe avec couleur * background: #008EA7 none repeat scroll 0 0; */ background-image: url("/images/fond.jpg"); background-position: left top; background-repeat: repeat; background-attachment: fixed; padding: 1.25em; } .sup { vertical-align: top; font-size: .8em; line-height: .8em; } h5.vericaltext { width: 1px; padding: 10px 10px 10px 5px; word-wrap: break-word; font-family : Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-display: swap; } .white { color: #000FFF; } .red { color: #FF0000; } .langue { display:inline-block; } .item h3 { color: #000; }