/** * Theme Name: Blocksy Child * Description: Blocksy Child theme * Author: Creative Themes * Template: blocksy * Text Domain: blocksy */ /* ============================================================================================================ 1. STYLES DE BASE & TYPOGRAPHIE Styles globaux pour les éléments HTML de base. ============================================================================================================ */ /* 1.1 Ajustement du poids de la police pour les éléments 'strong' et 'b' ------------------------------------------------------------------------------------------------ */ strong, b { font-weight: 500; /* Définit un poids de police moyen, souvent entre normal (400) et gras (700) */ } /* ============================================================================================================ 2. CLASSES UTILITAIRES (UTILITIES) Classes réutilisables pour des effets spécifiques. ============================================================================================================ */ /* 2.1 Effet de flou d'arrière-plan (my-blur-behind) Applique un effet de flou sur l'arrière-plan avec un fond semi-transparent. Idéal pour les superpositions ou les éléments qui apparaissent par-dessus d'autres contenus. ------------------------------------------------------------------------------------------------ */ .my-blur-behind { /* --- Propriétés de base pour la visibilité --- */ /* Un fond semi-transparent est essentiel pour que l'effet de flou soit visible */ background-color: rgba(0, 0, 0, 0.261); /* --- L'effet de flou sur l'arrière-plan --- */ backdrop-filter: blur(15px); /* Ajustez la valeur en pixels (ex: 5px, 15px) */ -webkit-backdrop-filter: blur(15px); /* Préfixe pour la compatibilité Safari */ /* --- Styles optionnels pour mieux visualiser l'effet ou l'intégrer --- */ /* border: 1px solid rgba(0, 0, 0, 0.509); */ /* Exemple de bordure subtile */ border-radius: 30px; /* Coins très arrondis pour une forme de pilule */ padding: 20px; /* Marge intérieure pour le contenu de l'élément */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Ombre douce pour un effet de profondeur */ /* --- Positionnement pour z-index --- */ /* Assurez-vous que l'élément a un positionnement (relative, absolute, fixed, sticky) * pour que la propriété z-index puisse s'appliquer correctement et gérer les chevauchements. */ position: relative; z-index: 5; /* Assure que cet élément est au-dessus du contenu qu'il doit flouter */ } /* ============================================================================================================ 3. COMPOSANTS D'INTERFACE UTILISATEUR (COMPONENTS) Styles pour des éléments d'interface réutilisables. ============================================================================================================ */ /* 3.1 Image débordante (my-image-debordante) Style appliqué à une image pour la faire déborder de son conteneur et la positionner au-dessus du contenu suivant. ------------------------------------------------------------------------------------------------ */ .my-overflowing-image { position: relative; /* Nécessaire pour l'utilisation de 'top' et 'z-index' */ top: 100px; /* Déplace l'image vers le bas. Ajustez cette valeur pour le décalage. */ z-index: 1; /* S'assure que l'image passe AU-DESSUS du contenu qui la suit dans le flux. */ } /* 3.2 Conteneur de carte personnalisé (my-card-box) Conteneur de carte avec bordure, ombre, coins arrondis et masquage du contenu débordant. ------------------------------------------------------------------------------------------------ */ .my-card-box { /* Styles de bordure et d'ombre tirés de la palette du thème Blocksy */ border: 2px solid var(--theme-palette-color-2) !important; box-shadow: 0px 12px 18px -6px var(--theme-palette-color-6); /* Coins arrondis pour le cadre global de la carte */ border-radius: 30px; /* LA PROPRIÉTÉ ESSENTIELLE : tronque tout ce qui dépasse (par ex. les coins d'une image à l'intérieur) */ overflow: hidden; } /* 3.3 Contenu interne de la carte (my-card-content) Conteneur pour le contenu texte interne d'une '.my-card-box'. C'est ici qu'on applique les marges intérieures. ------------------------------------------------------------------------------------------------ */ .my-card-content { padding: 25px !important; /* Applique une marge intérieure uniforme au contenu de la carte */ } /* 3.4 Style des icônes de pied de page (my-svg-footer-icon) Définit les couleurs et la taille des SVGs utilisés comme icônes de pied de page. Les couleurs sont basées sur la palette du thème WordPress, et la taille est fixée à 60px. ------------------------------------------------------------------------------------------------ */ .my-svg-footer-icon svg { /* Déclaration des variables de couleur pour la portée de ce nouveau style */ --color-quasi-noir: var(--wp--preset--color--palette-color-8); /* Fixe la taille de l'image */ width: 60px; height: 60px; } /* Remplacement des couleurs spécifiques trouvées dans le code des SVGs pour le nouveau style */ .my-svg-footer-icon svg [style*="fill:rgb(1,1,1)"] { fill: var(--color-quasi-noir) !important; } .my-svg-footer-icon svg [style*="fill:rgb(192,192,192)"] { fill: var(--color-gris) !important; } .my-svg-footer-icon svg [style*="fill:white"] { fill: var(--color-blanc) !important; } /* ============================================================================================================ 4. SURCHARGE DES BLOCS GUTENBERG (BLOCKS OVERRIDES) Modifications de styles pour les blocs Gutenberg de WordPress. ============================================================================================================ */ /* 4.1 Réinitialisation du padding du contenu "Média & Texte" ------------------------------------------------------------------------------------------------ */ .wp-block-media-text .wp-block-media-text__content { padding: 0; /* Supprime le padding par défaut appliqué au contenu texte */ } /* 4.2 Media Query : Ajustement du bloc "Média & Texte" sur les petits écrans Fait passer la disposition en colonne unique à 1024px et moins, au lieu du défaut. ------------------------------------------------------------------------------------------------ */ @media (max-width: 1024px) { /* Cible le bloc "Média & Texte" qui a l'option "Empiler sur mobile" activée */ .wp-block-media-text.is-stacked-on-mobile { /* Force la disposition en une seule colonne pour l'ensemble du bloc */ grid-template-columns: 100% !important; } /* S'assure que les deux parties (média et texte) occupent bien cette colonne unique */ .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media, .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { grid-column: 1; /* Place l'élément sur la première colonne */ grid-row: auto; /* Permet à l'élément de prendre la ligne suivante automatiquement */ } /* Définit la hauteur du conteneur du média sur mobile */ .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media { height: 300px; /* <--- Ajustez cette valeur à la hauteur souhaitée (ex: 200px, 300px) */ overflow: hidden; /* Cache toute partie de l'image qui pourrait dépasser */ } /* L'image remplit la hauteur de son conteneur */ .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media img { width: 100%; /* S'assure que l'image occupe toute la largeur disponible */ height: 100%; /* S'assure que l'image prend toute la hauteur définie sur le conteneur */ object-fit: cover; /* Redimensionne l'image pour couvrir la zone sans la déformer, en coupant si nécessaire */ } } /* ============================================================================================================ 5. STYLES SPÉCIFIQUES (CUSTOM POST TYPES & ÉLÉMENTS) Styles pour des éléments liés à des types de publication personnalisés ou des sections spécifiques. ============================================================================================================ */ /* 5.1 Éléments liés du CPT 'Traitements' Stylisation des cartes de publications liées pour le Custom Post Type 'Traitements'. ------------------------------------------------------------------------------------------------ */ /* Styles de la carte individuelle (un seul post) */ div.ct-related-posts.is-width-constrained .traitements.hentry { border: 2px solid var(--theme-palette-color-2); box-shadow: 0px 12px 18px -6px var(--theme-palette-color-6); border-radius: 30px; overflow: hidden; background-color: var(--theme-palette-color-7, #fff); /* Maintient l'organisation interne du contenu en colonne */ display: flex; flex-direction: column; align-items: center; /* Assure que la carte utilise 100% de la hauteur disponible par le conteneur Flexbox */ height: 100%; } /* Styles pour le conteneur média (image ou vidéo) */ div.ct-related-posts.is-width-constrained .traitements.hentry .ct-media-container { display: block; width: 100%; } /* Styles pour le titre de la carte */ div.ct-related-posts.is-width-constrained .traitements.hentry .related-entry-title { padding-bottom: 20px; padding-left: 10px; padding-right: 10px; text-align: center; /* Centre le texte du titre */ }