/*
Theme Name: Sonaar Child Theme by bubulgum.comm'
Theme URI: https://sonaar.io/
Template: sonaar
Author: bubulgum.comm'
Author URI: https://bubulgum.com/
Description: Theme enfant du theme Sonaar, pour le site www.misterdelay.ch // Music and Podcast WordPress Themes - Sonaar designs and develops creative WordPress Themes for Musicians, Music Bands and Podcasters
Tags: custom-colors,custom-header,custom-menu,featured-images
Version: 1.0
Date: 10.02.22
Dernière mise à jour: 11.10.24
*/
/* ----------------------- CONTENU ----------------------- */
/*** 0) réglages généraux ***/
/*** 1) personnalisation du background-color du site ***/
/*** 2) personnalisation des textes (font, color, etc), liens, exposants, listes, etc ***/
/*** 3) personnalisation des boutons + flèches galeries ***/
/*** 4) réglages des Sections Lignes et Modules ***/
/*** 5) réglages du HEADER ***/
/*** 6) réglages du FOOTER ***/
/*** 7) réglages pages PROJETS, PORTFOLIO, PHOTOS, PRESSE, NEWS (Posts) ***/
/*** 7.1) réglages spécifiques pages PROJETS ***/
/*** 7.2) réglages spécifiques pages PRESSE ***/
/*** 7.3) réglages spécifiques pages AGENDA ***/
/*** 7.4) réglages spécifiques pages NEWS ***/
/*** 8) réglages spécifiques pages type ARCHIVES ***/
/*** 9) réglages pages RGPD ***/
/* ----------------------- CONTENU ----------------------- */
/*** ------------------------------------------------------------ ***/
/*** 0) réglages généraux ***/
/*** ------------------------------------------------------------ ***/
/* dans single-post.php: ajouté une div qui récupère les class du post
* >
* juste pour pouvoir régler le CSS en fonction des Tags / Catégories
* et bien-sûr, on masque cette div, qui n'existe que pour pouvoir gérer ça ^^ */
#affichage_class_post {
display: none !important;
}
/* lightbox: masquer nom fichier
.elementor-slideshow__title {display:none !important;}*/
/*** ------------------------------------------------------------ ***/
/*** 1) personnalisation du background-color du site ***/
/*** ------------------------------------------------------------ ***/
/*** ------------------------------------------------------------ ***/
/*** 2) personnalisation des textes (font, color, etc), liens, exposants, listes, etc ***/
/*** ------------------------------------------------------------ ***/
body {
font-family: Open Sans;
font-weight: 300;
font-style: normal;
font-size: 1rem;
line-height: 28px;
color: #ffffff;
}
p {
margin: 0 0 1em 0;
}
a {
color: #b3b3b3;
}
a:hover {
color: #ffffff;
}
/* à insérer dans html: */
span.espace-fine-insecable {
letter-spacing: -0.05em !important;
}
/* h1, h2, h3, h4, h5, h6, p, a {color:#000000 !important;} */
/*** ------------------------------------------------------------ ***/
/*** 3) personnalisation des boutons + flèches galeries ***/
/*** ------------------------------------------------------------ ***/
/* réglages généraux pour les boutons Elementor + boutons "Billetterie" */
.elementor-button,
a.button {
display: inline-block;
background-color: #60DFA58F;
font-size: 15px;
font-weight: 600;
line-height: 1;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 12px 24px;
border-radius: 3px;
color: #fff;
fill: #fff;
text-align: center;
transition: all .3s;
}
.elementor-button:hover {color: #fff;background: rgba(75,175,130,0.57) !important;}
a.button {background-color: #27bdbd !important;}
a.button:hover {color: #fff;background: #3b7c88 !important;}
body.single-event article.type-event .elementor-button,
body.single-event article.type-event a.button {min-width: 181px !important;}
/* boutons "Voir le projet" (dans les pages Events) : margin-top */
body.single-event .elementor-button {margin-top: 2rem;}
.elementor-button {
;
}
/*** ------------------------------------------------------------ ***/
/*** 4) réglages des Sections Lignes et Modules ***/
/*** ------------------------------------------------------------ ***/
/*** padding 20px (au lieu de 10px) sur les modules... pour créer un peu d'espace entre les colonnes ***/
.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated > .elementor-gkbox-wrap {
padding: 20px;
}
/*** ------------------------------------------------------------ ***/
/*** 5) réglages du HEADER ***/
/*** ------------------------------------------------------------ ***/
/* taille logo (petite maison) */
.elementor-6033 .elementor-element.elementor-element-f825d80 .sr-site-logo .sr-site-logo-container img, /* ordi */
.elementor-6033 .elementor-element.elementor-element-a5c66f5 .sr-site-logo .sr-site-logo-container img { /* mobile */
max-height: 20px !important;
width: auto;
}
.elementor-6033 .elementor-element.elementor-element-f825d80 .sr-site-logo {padding: 10px 0 !important;} /* même padding que sur les ul li a du menu nav, pour aligner le tout */
@media only screen and (min-width: 981px) { /* ordi */
.elementor-element.elementor-element-f825d80.elementor-gkbox__width-auto.elementor-gkbox.elementor-gkbox-sr-sitelogo {position: absolute; right: 40%; top: 50%; margin-right:20px !important;}
.elementor-element-6b6fe9f .elementor-col-33 {z-index: 999999;}
}
@media only screen and (min-width: 1050px) { /* autres tailles d'ordi */
.elementor-element.elementor-element-f825d80.elementor-gkbox__width-auto.elementor-gkbox.elementor-gkbox-sr-sitelogo {right: 30%;}
}
@media only screen and (min-width: 1110px) {
.elementor-element.elementor-element-f825d80.elementor-gkbox__width-auto.elementor-gkbox.elementor-gkbox-sr-sitelogo {right: 20%;}
}
@media only screen and (min-width: 1180px) {
.elementor-element.elementor-element-f825d80.elementor-gkbox__width-auto.elementor-gkbox.elementor-gkbox-sr-sitelogo {right: 10%;}
}
@media only screen and (min-width: 1250px) {
.elementor-element.elementor-element-f825d80.elementor-gkbox__width-auto.elementor-gkbox.elementor-gkbox-sr-sitelogo {right: 0;}
}
@media only screen and (min-width: 981px) { /* ordi */
.elementor-6033 .elementor-element.elementor-element-626e656 {
width: 79.666%;
position: absolute;
left: 50% !important;
transform: translateX(-50%);
}
.elementor-6033 .elementor-element.elementor-element-b0af2d1 > .elementor-gkbox-container {margin: 0 !important;}
}
/*** ------------------------------------------------------------ ***/
/*** 6) réglages du FOOTER ***/
/*** ------------------------------------------------------------ ***/
#footer_Mister_Delay span a.link-footer {
color: #ffffff !important;
text-transform: none;
letter-spacing: 1px;
}
#footer_Mister_Delay span a.link-footer:hover {text-decoration: underline !important;}
#footer_Mister_Delay.mobile * {line-height: 2em !important;}
@media only screen and (max-width: 767px) { /* smartphone */
.elementor-1011 .elementor-element.elementor-element-dc20135 .elementor-social-icon {
--icon-padding: -1px !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 7) réglages pages PROJETS, PORTFOLIO, PHOTOS, PRESSE, NEWS (Posts) ***/
/*** ------------------------------------------------------------ ***/
/* masquer sections agenda + en voir plus quand elles sont vides */
.masquer_section {display: none !important;}
section#section_related_post {display: none !important;} /* de base cette section est masquée */
section#section_related_post.afficher_section {display: initial !important;} /* si elle contient des éléments, alors on l'affiche */
/* masquer sections agenda dans les projets passés */
article.category-projets-passes #section_agenda {display: none !important;}
/*** réglages breadcrumbs Post (masqué... mais sinon, réglages p + margin) ***/
#section_fildariane {
display: none !important;
}
p#breadcrumbs {
margin: 0;
}
.elementor-gkbox-breadcrumbs {
font-size: 1rem;
}
#fildariane.elementor-gkbox-breadcrumbs {
margin-bottom: 60px;
}
/*** réglages titre Post ***/
h1 {
text-transform: uppercase;
}
/*** réglages catégorie+tag Post ***/
#tag_et_cat.elementor-gkbox-post-info {
margin-top: 0px;
}
.elementor-gkbox-post-info ul {
justify-content: center; /* Centre les éléments horizontalement */
list-style: none;
}
/* .fa-star:before {margin-left: 1em;} */
/*** réglages séparateur en-tête Post ***/
span.heading-b3 {
margin-top: 10px !important;
margin-bottom: 20px !important;
background-color: #ffffff;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
span.heading-b3 {margin-bottom: 0px !important;}
}
/*** margin-bottom en dessous de l'en-tête de page (titre + séparateur), pour les pages Photos, Presse, News ***/
body.tmplatgk6305 .page-title.rellax,
body.tmplatgk6470 .page-title.rellax,
body.tmplatgk6283 .page-title.rellax {
margin-bottom: 60px;
}
/*** réglages de la section contenant filtres et recherche ***/
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.sonaar-filters .esg-filter-wrapper {margin: 0 0 1.5rem 0 !important;}
.sonaar-filters .esg-filterbutton, .sonaar-filters .esg-navigationbutton, .sonaar-filters .esg-sortbutton, .sonaar-filters .esg-cartbutton {margin-top: 10px !important;}
}
@media only screen and (max-width: 767px) { /* smartphone */
article.esg-filters.esg-singlefilters {margin-bottom: 1rem !important;}
}
/*** réglages de la section Post Navigation (liens Post précédent/suivant) ***/
.epn_nav {
padding: 0 !important;
margin-top: 60px;
margin-bottom: 120px;
}
.epn_nav a {
font-size: 0.9rem;
color: #60c6df !important;
border: none !important;
}
.epn_nav .epn_left a {
float: none;
text-align: left !important;
}
.epn_nav .epn_right a {
float: none;
text-align: right !important;
}
.epn_nav a:hover {
background: none !important;
color: #ffffff !important;
}
.epn_nav span.post-navigation__arrow-wrapper {display:none !important;}
.epn_nav.elementor-post-navigation .post-navigation__arrow-wrapper i {
-webkit-transform: translateY(15%);
-ms-transform: translateY(15%);
transform: translateY(15%);
}
/*** masquer la section contenant le bouton BACK et les pictos de partage vers les réseaux sociaux ***/
aside.links-block {
display: none !important;
}
/*** réglages "Related Post" ***/
/** couleur de fond des encadrés **/
.elementor-posts .elementor-post__card {
background-color: rgba(0,0,0,0.7) !important;
}
/** couleur de fond des badges **/
#posts_meme_tag.elementor-gkbox-posts article .elementor-post__badge {
background-color: rgba(0,0,0,0.8);
}
/** margin du titre du Post **/
#posts_meme_tag.elementor-gkbox-posts article .elementor-post__text {
margin-top: 0px;
}
/* titres par dessus l'image du projet / album photo / etc */
.eg-sonaar-artists-element-12 {color: #f0f0f0 !important;} /* gris très clair */
/*** ------------------------------------------------------------ ***/
/*** 7.1) réglages spécifiques pages PROJETS ***/
/*** ------------------------------------------------------------ ***/
/*** réglages du contenu du Post ***/
/** margin et padding des titres Présentation et Médias **/
.presentation_titre .elementor-gkbox-container,
.medias_titre .elementor-gkbox-container {
margin: 0 0 30px 0;
padding: 0 0 8px 0;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.presentation_titre .elementor-gkbox-container,
.medias_titre .elementor-gkbox-container {
margin: 0 0 20px 0;
}
}
/** margin-bottom en dessous des img/vidéos, pour séparer les blocs **/
.medias_contenu_media {
margin-bottom: 2.5rem !important;
}
/*** masquer toutes les sections Soundcloud ***/
#section_soundcloud {
display: none;
}
/*** ------------------------------------------------------------ ***/
/*** 7.2) réglages spécifiques pages PRESSE ***/
/*** ------------------------------------------------------------ ***/
/*** dans les "sections internes", on met juste le padding 20px sur les modules à droite sur les colonnes impaires... ***/
article.category-presse section.elementor-inner-section > .elementor-column-gap-default > .elementor-row > .elementor-column:nth-child(odd) > .elementor-element-populated > .elementor-gkbox-wrap {
padding: 0 20px 0 0;
}
/*** ... et à gauche sur les colonnes paires (ET uniquement pour affichage ORDI + TABLETTE) ***/
article.category-presse section.elementor-inner-section > .elementor-column-gap-default > .elementor-row > .elementor-column:nth-child(even) > .elementor-element-populated > .elementor-gkbox-wrap {
padding: 0 0 0 20px;
}
@media only screen and (max-width: 767px) { /* smartphone */
article.category-presse section.elementor-inner-section > .elementor-column-gap-default > .elementor-row > .elementor-column:nth-child(odd) > .elementor-element-populated > .elementor-gkbox-wrap,
article.category-presse section.elementor-inner-section > .elementor-column-gap-default > .elementor-row > .elementor-column:nth-child(even) > .elementor-element-populated > .elementor-gkbox-wrap {
padding: 0;
}
}
/*** ------------------------------------------------------------ ***/
/*** 7.3) réglages spécifiques pages AGENDA ***/
/*** ------------------------------------------------------------ ***/
/*** largeur div contenant la date (sauf sur smartphone)
@media only screen and (min-width: 768px) { /* bureau et tablette
.sr-it-event-date {width: 75px !important;}
} ***/
/* masquer le bloc "date" sur la gauche de la ligne de chaque event (c'est vraiment pas clair quand on a plusieurs dates) */
.sr-it-event-date {display: none !important;}
/* remaniement des padding, pour l'esthétique */
article.event {padding: 0 30px;}
@media only screen and (max-width: 767px) { /* smartphone */
article.event {padding: 0 10px;}
}
/*** section events passé: on masque le bouton "Réserver" ***/
#renaud_past_events article .sr_it-event-buttons {
display: none !important;
}
/* dans chaque page d'event : masquer lignes "artiste" (1) + "date" (2) (pas utile!) */
body.single-event .righthalf table tbody tr:nth-child(1),
body.single-event .righthalf table tbody tr:nth-child(2) {display: none;}
.event-featured-img-bbg {
display: inline-block;
max-width: 80px;
height: auto;
}
@media only screen and (min-width: 981px) { /* ordi et tablette */
.sr_it-event-main {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding: 0 12px 0 30px;
}
}
@media only screen and (max-width: 980px) { /* tablette */
.sr_it-event-main {max-width: 400px !important;}
}
@media only screen and (max-width: 767px) { /* smartphone */
a.event-link {display: table; padding-bottom: 6px;}
.event-featured-img-bbg {max-width: 60px; float: right; padding: 0 6px; display: table-cell;}
.sr_it-event-main {width: calc(100% - 84px) !important; float: left; padding: 0 6px 6px 6px; display: table-cell;} /* 84px = width img 60 + paddings event-main (6+6) & img (6+6) */
.sr_it-event-main h1 {font-size: 19px !important;}
.sr_it-event-buttons {padding-left: 6px;}
}
/*** ------------------------------------------------------------ ***/
/*** 7.4) réglages spécifiques pages NEWS ***/
/*** ------------------------------------------------------------ ***/
/*** excepté sur les Posts de catégorie NEWS, on masque l'image à la une ***/
article:not(.category-news) img.gk-featured-image,
article:not(.category-news) .sr_it-meta {
display: none !important;
}
article.category-news .sr_it-meta .sr_it-datetime,
article.category-news .sr_it-meta span {
padding-right: 10px;
font-size: 18px;
line-height: 28px !important;
}
article.category-news .sr_it-meta span.post-categories i::before {content:"\f067" !important;font-size: 14px;} /* signe "+" */
article.category-news .sr_it-meta span.post-tags i::before {content:"\f005" !important;font-size: 14px;} /* signe "étoile" */
/*** page NEWS: on masque la section nav qui montre la page précédente/suivante (pas trouvé où la désactiver autrement) ***/
body.tmplatgk6283 .elementor-post-navigation{
display: none !important;
}
/*** ------------------------------------------------------------ ***/
/*** 8) réglages spécifiques pages type ARCHIVES ***/
/*** ------------------------------------------------------------ ***/
body.archive #post-list article .image img {
min-width: 100% !important;
max-width: 100% !important;
height: auto;
object-fit: cover !important;
max-height: 265px;
}
body.archive #post-list {
margin-top: 60px;
margin-bottom: 60px;
}
body.archive article.post {
margin-bottom: 1rem !important;
}
/*** ------------------------------------------------------------ ***/
/*** 9) réglages pages RGPD ***/
/*** ------------------------------------------------------------ ***/
#pages_rgpd {
max-width: 800px;
margin: 30px auto 0;
font-size: 14px;
line-height: 1.6em !important;
}
#pages_rgpd {padding: 0 15px;}
#pages_rgpd a {
color: #ffffff;
opacity: 0.75;
}
#pages_rgpd a:hover {
color: #ffffff;
opacity: 1;
}
#pages_rgpd h3 {
font-size: 14px;
line-height: 1.6em;
text-transform: uppercase;
margin-top: 30px !important;
}
#pages_rgpd h3:first-child {
margin-top: 0px !important;
}
/* réglages ligne hr insérée en bas des pages Politique de confidentialité + Mentions légales */
hr.ligne-pdc-ml {
border: 0.25px solid rgba(135, 135, 135, 0.34) !important;
margin-bottom: 0.25rem;
}
.comment-form input, .wpcf7-form-control {
background-color: transparent;
border: none;
padding: 0;
}
span.wpcf7-list-item {margin-left: 0;}
input#checkbox_rgpd {margin: 0.5em 0.75em 0.5em 0 !important;}
.wpcf7-form label {text-transform: none !important;}
.wpcf7-form label a {color: #ffffff; opacity: 0.65;}
.wpcf7-form label a:hover {opacity: 1; text-decoration: underline;}