/* Theme Name: Starter Block Theme v0.4 Theme URI: https://jakson.co/ Author: Jakson Author URI: https://jakson.co/ Description: Requires at least: 6.0 Tested up to: 6.5-RC3-57856 Requires PHP: 5.7 Version: 1.0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: blank-block-starter-v0-4 Tags: block-patterns, full-site-editing */ /* Smoot Scroll html { scroll-behavior: smooth; } */ /* Réduire la vitesse au scroll, si l'utilisateur n'a pas configuré explicitement la vitesse sur son navigateur (respecte les choix d'accessibilité) */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Reduced motion prefs */ @media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Fixes for Core Weirdnress whereby auto padding is applied that can drive you a litle bit nuts - better to add your own when and where you need it! */ .has-global-padding>.alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid))> :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]), p, h1, h2, h3, h4, h5, h6, ul, ol) { padding-right: 0 !important; padding-left: 0 !important; } /* Stop core margin top on groups and others */ /* semble mettre le brin dans les espacement de blocs de la carte de visite contact */ /*.wp-block-group, .wp-block-columns, .wp-block-cover { margin-block-start: 0; } */ /* Remove underlines / show on hover */ a { text-decoration: none !important; } a:hover:not(.wp-block-site-title a, .wp-block-button__link.wp-element-button) { text-decoration: underline !important; } /* Search Button default: color */ .wp-block-search__button.wp-element-button { color: var(--wp--preset--color--base); } /* Button hover .wp-block-button__link:hover { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--primary); } .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); } */ /* ------- Hide the Page Title in the Editor - it can get anoying! ------- */ .editor-editor-canvas__post-title-wrapper.edit-post-visual-editor__post-title-wrapper.has-global-padding h1 { display: none; } /* ============================================== ajouté par dja ============================================== */ /* largeur mini d'écran sans débordement horizontal : 350px */ /* redéfinition préçise du dégradé vertical beige et blanc (les réglages de l'éditeur ne sont pas précis) */ /* page ACCUEIL REPARATION RESTAURATION PASSION */ :root { --wp--preset--gradient--custom-sections-2-couleurs: linear-gradient(90deg,#efebe8 25%,#ffffff 25%) !important; } /* ne pas afficher */ /* pour les TESTs .dja-no-display { display: none !important; } /* à supprimer car utiliser clic droit / cacher sur les blocs */ /* ================================================================ */ /* ------------ Controles CSS supplémentaires sur les blocs ------------ */ /* ------------ texte justifié à droite et à gauche */ .dja-texte-justifie { text-align: justify; } /* (A PROPOS) */ /* ------------ cézure dans un mot * lorsqu'un mot est trop long pour tenir sur une ligne, on peut générer une cézure un intégrant le code HTML inline * -
 au bon endroit dans le texte */ @media (min-width:400px) {.dja-cezure-400 {display: none;}} /* (non utilisé) */ /* ------------ ombre de texte */ .dja-text-shadow { text-shadow: 0.08em 0.08em 0.08em #000000; } /* pour les titres ds bannières */ .dja-text-shadow-hover:hover { text-shadow: 0.08em 0.08em 0.08em rgba(0,0,0,0.5); } /* pour icone téléphone au survol (ACCUEIL) */ /* ------------ ombre de bloc au survol */ .dja-shadow-hover:hover {box-shadow: 0px 12px 18px 0px rgba(0,0,0,0.3) !important;} /* ------------ zoom au survol */ [class*="dja-zoom-hover-"] { transition: transform .2s ease-in-out ; } /* durée de la transformation zoom */ .dja-zoom-hover-101:hover { transform: scale(1.01) !important; } /* pour les 4 blocs service (ACCUEIL) */ .dja-zoom-hover-11:hover { transform: scale(1.1) !important; } /* pour l'icone téléphone (ACCUEIL) */ /* ------------ z-index */ /* surélever un bloc image pour que l'ombre passe au dessus de la section suivante */ .dja-z-index-1 { z-index: 1; position: relative; } /* contournement de ce qui ressemble limite à un bug WP, dans les blocs intro */ /* ------------ REGLAGE ENTETE ------------ */ /* ======================================== */ /* ------------ MENU PRINCIPAL ------------ */ /* afficher l'entrée courante du menu en rouge */ .current-menu-item { color: var(--wp--preset--color--custom-rouge-logo); } /* ------------ hauteurs sticky ------------ */ /* Définition des variables de hauteur des blocs sticky d'entête * utilisées pour définir le décalage haut pour l'affichage des menus secondaires sticky (via css) */ :root { --dja-ht-admin-bar: 0px; /* modifié si session admin */ --dja-ht-bande-rouge: 32px; --dja-ht-menu-scrolle: 70px; /* modifié en responsive */ } /* si session admin */ :root:has(.admin-bar) { --dja-ht-admin-bar: 32px; } @media (max-width:782px) { :root:has(.admin-bar) { --dja-ht-admin-bar: 46px; }} /* la barre d'admin n'est plus sticky en dessous de 600px */ @media (max-width:600px) { :root:has(.admin-bar) { --dja-ht-admin-bar: 0px; }} /* ------------ hauteur logo au SCROLL ------------ */ /* le script js.js permet d'ajouter la classe dja-is-scroll à .dja-surveille-scroll quand le scroll est > 100px */ /* (il faut la classe dja-surveille-scroll sur le bloc logo) */ /* diminuer la hauteur du logo */ .dja-surveille-scroll.dja-is-scroll img { width: 50px !important; } /* en douceur */ .dja-surveille-scroll img , .dja-surveille-scroll.dja-is-scroll img { transition: all 0.3s ease-in-out; } /* ------------ RESPONSIVE ------------ */ /* ------------ tablette */ @media (max-width:1150px) { .dja-surveille-scroll img { width: 50px !important; margin: 5px 0 !important; } /* diminuer la hauteur du logo */ .dja-ligne-menu-entete , .dja-ligne-rouge-entete { padding: 0 3vw !important; } /* réduction padding */ .dja-surveille-scroll a { width: 70px !important; } /* garder la place à gauche pour le logo si débordement */ :root { --dja-ht-menu-scrolle: 60px; } /* modif variables hauteurs sticky */ } /* ------------ mobile */ @media (max-width:625px) { .dja-hidden-mobile { display: none !important; } } /* cacher les icones RS de la bande rouge */ /* @media (max-width:380px) { .dja-ligne-rouge-entete p { font-size: 13px !important; } } /* réduire la police de la bande rouge */ .dja-ligne-rouge-entete p { font-size: clamp(0px, 3.5vw, 16px) !important; } /* réduire la police de la bande rouge */ @media (max-width:360px) { .dja-ligne-menu-entete , .dja-ligne-rouge-entete { padding: 0 1vw !important; } } /* réduire le padding */ /* ------------ REGLAGE FOOTER ------------ */ /* ======================================== */ /* suppression de la marge du footer */ footer { margin-block-start: 0; } /* ------------ bouton back-to-top */ /* il s'agit d'une icone, avec la classe dja-bouton-scroll-to-top */ /* l'opacité passe de 0 à 1 au scroll via le script js */ .dja-bouton-scroll-to-top { position: fixed; bottom: 15vh; right: 0px; opacity: 0; transition: all 1s; z-index: 100; } /* ------------ REGLAGE COMMUN AUX PAGES ------------ */ /* ================================================== */ /* ------------ BREAKPOINT SPECIFIQUE COLONNES RESPONSIVE ------------ */ /* le bloc COLONNES (avec classe dja-breakpoint-col) empile les colonnes en largeur 100% à partir du breakpoint Tablette à 981px (idem divi). * Nativement WP empile à partir de 781px si le paramètre "empiler sur mobile" est coché, dans ce cas les sélecteurs sont différents, * le code ci-dessous gère les 2 cas (avec et sans empilement natif WP) */ @media (max-width:980px) { .dja-breakpoint-col > .wp-block-column { flex-basis: 100% !important; } .dja-breakpoint-col.is-not-stacked-on-mobile , /* cas sans "empiler sur mobile" */ .dja-breakpoint-col { flex-wrap: wrap !important; } /* cas avec "empiler sur mobile" */ } /* ------------ RESPONSIVE images intro */ @media (max-width: 980px) { .dja-image-intro-gauche { max-width: 50%; } } /* RAF à transformer en clamp() */ @media (max-width: 768px) { .dja-image-intro-gauche { max-width: 75%; } } @media (max-width: 980px) { .dja-image-intro-droite { max-width: 70%; } } @media (max-width: 768px) { .dja-image-intro-droite { max-width: 100%; } } /* ------------ ANIMATIONS ------------ */ /* bannieres hautes */ @keyframes slidedown { 0%{ transform: translateY(-4%); /*opacity: 0.7; */} 100%{} } .dja-banniere-haut { animation-name: slidedown; animation-duration: 1000ms; animation-delay: 0ms; animation-timing-function: ease-in-out; animation-iteration-count: 1;} /* bannieres basses */ /* l'animation ne doit se déclencher que lorsque la banière est visible */ /* il faut positionner .dja-scroll-declenche sur la bannière pour récupérer la classe .dja-visible via le script JS */ @keyframes slideup { 0%{ transform: translateY(10%); /*opacity: 0.7; */} 100%{ } } .dja-scroll-declenche.dja-visible { animation-name: slideup; animation-duration: 1000ms; animation-delay: 0ms; animation-timing-function: ease-in-out; animation-iteration-count: 1;} /* menus secondaires */ @keyframes slidedown-menu { 0%{ transform: translateY(-50%); opacity: 0; } 50%{ transform: translateY(-50%); opacity: 0; } 100%{ } } .dja-anim-slidedown { animation-name: slidedown-menu; animation-duration: 2000ms; animation-delay: 0ms; animation-timing-function: ease-in-out; animation-iteration-count: 1;} /* ------------ OFFSET STICKY MENUS SECONDAIRES ------------ */ /* par défaut le groupe est épinglé en haut de l'écran, il faut ajouter à l'offset la hauteur de l'entête (épinglée elle aussi) */ .dja-menu-sec-sticky { top: calc( var(--dja-ht-admin-bar) + var(--dja-ht-bande-rouge) + var(--dja-ht-menu-scrolle) ) ; overflow-y: hidden; /* pour masquer le débord du à l'animation */ } /* ------------ BANNIERES ------------ */ /* ------------ hauteur des bannières */ .dja-banniere-haut { height: clamp(220px,60vh,475px); } .dja-banniere-bas { height: 50vh; max-height: 475px; } /* ------------ BOUTON ------------ */ /* ------------ animation au survol du bouton */ .dja-bouton a { transition: all .3s ease-in-out ; } .dja-bouton a:hover { /* dimension bouton au survol */ padding-right: 30px; border-radius: 4px !important; } .dja-bouton a::after { /* icone masquée */ content: '>'; position: absolute; margin-left: 10px; opacity: 0; } .dja-bouton a:hover::after { /* icone démasquée au survol */ transition: all .3s ease-in-out ; opacity: 1; } /* test is-style-boutonrouge dja-bouton */ .is-style-boutonrouge a { transition: all .3s ease-in-out ; } .is-style-boutonrouge a:hover { /* dimension bouton au survol */ padding-right: 30px; border-radius: 4px !important; } .is-style-boutonrouge a::after { /* icone masquée */ content: '>'; position: absolute; margin-left: 10px; opacity: 0; } .is-style-boutonrouge a:hover::after { /* icone démasquée au survol */ transition: all .3s ease-in-out ; opacity: 1; } /* ------------ PARAGRAPHE ICONE ------------ */ /* l'icone est en fait un bloc PARAGRAPHE (avec la classe .dja-aspect-icon) contenant un caractère de la police 'dja-icone' * Cette police contient différentes icones téléphone (page ACCUEIL) et flèche Up (FOOTER). * => J'ai suivi le tuto https://www.youtube.com/watch?v=86HJYPsTEVc pour fabriquer cette police de caractères via le site https://icomoon.io/app/#/select. */ .dja-aspect-carre { aspect-ratio: 1 / 1 !important; } /* ------------ LIENS ------------ */ /* neutraliser le souligné du lien au survol */ .dja-survol-sans-souligner a:hover:not(.wp-block-site-title a, .wp-block-button__link.wp-element-button) { text-decoration: none !important; } /* ------------ GALERIES ------------ */ /* ratio affichage selon l'orientation */ .dja-galerie-portrait img { aspect-ratio: 3 / 4 ; } .dja-galerie-paysage img { aspect-ratio: 4 / 3; } /* ne pas agrandir les images sur les lignes non remplies */ .dja-galerie-portrait figure , .dja-galerie-paysage figure { flex-grow: 0 !important; } /* ne pas afficher la légende (elle est visible uniquement dans la lightbox) .dja-galerie-portrait figcaption, .dja-galerie-paysage figcaption { display: none; } /* ne pas afficher le blur sous la légende .dja-galerie-portrait figure::before , .dja-galerie-paysage figure::before { display: none; } /* ------------ Responsive portrait */ /* la galerie est réglée sur 5 images par lignes, WP prévoit seulement le passage à 2 à partir de 600px * on va modifier le nb d'image par ligne en fonction de la largeur */ @media (max-width: 1020px /*980px*/) { .dja-galerie-portrait .wp-block-image { width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px)*.75) !important; }} /* 4 img */ @media (max-width: 980px /*750px*/) { .dja-galerie-portrait .wp-block-image { width: calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px)*.66667) !important;} } /* 3 img */ @media (max-width: 767px /*600px*/) { .dja-galerie-portrait .wp-block-image { width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)*.5) !important; } } /* 2 img */ @media (max-width: 479px /*450px*/) { .dja-galerie-portrait .wp-block-image { width: 100% !important; } } /* 1 img */ /* ------------ Responsive paysage */ @media (max-width: 980px) { .dja-galerie-paysage .wp-block-image { width: calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px)*.66667) !important;} } /* 3 img */ @media (max-width: 767px) { .dja-galerie-paysage .wp-block-image { width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)*.5) !important; } } /* 2 img */ @media (max-width: 479px) { .dja-galerie-paysage .wp-block-image { width: 100% !important; } } /* 1 img */ /* ------------ GALERIES en vue LIGHTBOX (extension Lightbox for Gallery & Image Block) ------------ * la lightbox est en fait un bloc horizontal (baguetteBox-overlay) qui intègre les vues de toutes les images à 100% de largeur d'écran, les unes à la suite des autres, * le bloc dépasse de l'écran et est scrollé à chaque changement d'image */ /* affichage image */ #baguetteBox-overlay .full-image img { border: 1px solid white; /* ajoute liseret blanc autour */ box-shadow: 0px 2px 25px 15px black !important; /* ajoute une ombre */ max-width: 92%; /* ajoute une marge, doit être réglée en vue téléphone, conjointement avec la largeur de l'ombre, pour éviter la surimpression de l'ombre de l'image suivante */ max-height: calc(100vh - 3rem); /* laisser une marge en bas pour afficher la légende */ } /* affichage de la légende */ #baguetteBox-overlay .full-image figcaption { background-color: transparent; /* supprimer couleur de fond noire */ bottom: unset; /* garde la légende collée sous la photo (et non collée en bas de page) */ font-family: unset; /* conserve la police Montserrat */ } /* couleur de fond */ #baguetteBox-overlay { background-color: rgba(0,0,0,0.85) !important; } /* ------------ REGLAGE PAGE ACCUEIL ------------ */ /* ============================================== */ /* ------------ grille 4 blocs services */ /* gap horizontal */ .dja-grille { column-gap: clamp(30px,4%,48px);} /* RESPONSIVE - passage à 2 colonnes/ligne , puis 1 */ @media (max-width:980px) { .dja-grille { grid-template-columns: repeat(2, minmax(0, 1fr)) ; } } @media (max-width:480px) { .dja-grille { grid-template-columns: repeat(1, minmax(0, 1fr)) ; } } /* ------------ carte visite */ @media (max-width: 400px){ .dja-groupe-contact { margin-left: -20px !important; } } /* marge sur écran tel */ /* ------------ carte googlemaps */ .dja-googlemaps iframe { max-width:100% !important; } /* centrage googlemaps dans son conteneur */ /* ------------ REGLAGE PAGE MECANIQUE & CARROSSERIE ------------ */ /* ============================================================== */ /* ------------ REGLAGE PAGE REPARATION ------------ */ /* =================================================== */ /*.dja-gap { column-gap: clamp(1.125rem, 0.7654rem + 1.6438vw, 1.875rem);}*/ /* ------------ REGLAGE PAGE RESTAURATION ------------ */ /* =================================================== */ /* ------------ REGLAGE PAGE PASSION ------------ */ /* ============================================== */ /* ------------ REGLAGE PAGE A PROPOS ------------ */ /* ============================================== */ .dja-taille-icones { /* gap: 25px;*/ font-size: var(--wp--preset--font-size--x-large) !important; } /* ------------ REGLAGE PAGE CONTACT ------------ */ /* ============================================== */ /* la classe dja-cf7 est positionné dans le formulaire, sur les 3 champs de texte */ .dja-cf7 { width: 100%; font-size: inherit; font-weight: inherit; font-family: inherit; } /* la classe dja-cf7-bouton est positionné dans le formulaire, sur le bouton */ .dja-cf7-bouton { font-family: inherit; background-color: white; color: #d32b32; padding: .75rem var(--wp--preset--spacing--40); transition: all .3s ease-in-out ; font-size: 0.875rem !important; border-width: 1px; border-radius: 5px; border-color: #d32b32; border-style: solid; font-weight: 700; } /* il n'est pas possible d'ajouter le > au hover car c'est un void (sans contenu, donc sans contenu généré ::after non plus) */ .dja-cf7-bouton:hover { background-color: #d32b32; color: white; box-shadow: var(--wp--preset--shadow--shadow-1); } /* largeur max du formulaire pour éviter débordement sur écran petit .dja-contact-form input[type="text"],.dja-contact-form input[type="email"], .dja-contact-form textarea { width: 100%; font-size: inherit; line-height:1.2; } /* bouton du formulaire p:has(.dja-envoi) { text-align: center; } /* p:has(.dja-envoi)::after { content: '>'; } .dja-envoi { font-family: var(--wp--preset--font-family--montserrat) !important; text-align: center; background-color: #d32b32; color: white; padding: .75rem var(--wp--preset--spacing--40); transition: all .3s ease-in-out ; font-size: 0.875rem !important; border-width: 6px; border-radius: 2px; border-color: #d32b32; border-style: solid; font-weight: 700; box-shadow: var(--wp--preset--shadow--shadow-1); } /* le bouton du formulaire n'a pas le > au hover car c'est un void, et donc n'a pas de contenu, et donc pas de contenu généré :after non plus .dja-envoi:hover { padding-right: 30px; border-radius: 4px !important; /* font-size: 15px !important; } /* SUITE à traiter /* ====================================================================== */