/** * Theme Name: WENS Musico Child * Author: tianoteam * Template: wens-musico * Text Domain: wens-musico-child * Description: blablabla */ /* * (Votre règle @font-face pour Bakso Sapi doit être insérée ici) * Utilisez le même 'font-family' que dans theme.json */ @font-face { font-family: 'Bakso Sapi'; font-style: normal; font-weight: normal; font-display: swap; src: url('fonts/hinted-subset-BaksoSapi.eot'); /* Format pour IE9 */ src: url('fonts/hinted-subset-BaksoSapi.eot?#iefix') format('embedded-opentype'), url('fonts/hinted-subset-BaksoSapi.woff2') format('woff2'), /* Le plus léger et performant (prioritaire) */ url('fonts/hinted-subset-BaksoSapi.woff') format('woff'), /* Bonne compatibilité */ url('fonts/hinted-subset-BaksoSapi.ttf') format('truetype'); /* Format de secours */ } /* Votre CSS personnalisé commence ici */ /* Cibler TOUS les lecteurs Sonaar */ .iron-audioplayer .srp_control_box { padding: 0 10px 0 20px !important; } .iron-audioplayer .playlist .audio-track path, .iron-audioplayer .playlist .sricon-play { color: #f2f2f2; margin: 20px; } .srp_player_button .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .sr-playlist-item, .srp_player_button .iron-audioplayer[data-playertemplate="skin_boxed_tracklist"] .playlist { padding: 20px 20px 20px 0; padding: 10px 0; } .iron-audioplayer .playlist .track-number .number { padding-right: 10px; width: 5px; display: inline-flex; } .wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container { color: #ffffff; } .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background-color: #151515; border: 1px solid #555555; } .wp-block-navigation__submenu-container.wp-block-navigation-submenu .wp-block-navigation-item:hover { background: #2c2c2c; } .wp-block-navigation__container .wp-block-navigation-link:hover { color: #acacac; } .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open { color: white; background-color: black; } .wp-block-navigation.items-justified-right { --navigation-layout-justify: center; --navigation-layout-justification-setting: center; } .wp-block-column .wp-block-cover__image-background.wp-image-55 { object-position: 60% 50% !important; } /* --- MOBILE MENU CUSTOMIZATION (Max 800px) --- */ @media screen and (max-width: 900px) { /* --- A. FORCE MOBILE MENU VIEW (Hamburger) at 800px Max --- */ .wp-block-navigation__responsive-container-content a.wp-block-navigation-item__content:hover { color: #acacac !important; } /* 1. Force the desktop menu to hide */ /* Target the main navigation wrapper and hide the desktop container */ nav.wp-block-navigation > ul.wp-block-navigation__container:not(.wp-block-navigation__responsive-container-content > .wp-block-navigation__container) { display: none !important; } /* 2. Force the hamburger button to show */ .wp-block-navigation__responsive-container-open { display: block !important; } /* --- B. Restructure 'En Savoir Plus' within the Mobile Menu --- */ /* 1. Hide the 'En savoir plus' link and the submenu toggle button */ .wp-block-navigation__container > .wp-block-navigation-submenu > a, .wp-block-navigation__container > .wp-block-navigation-submenu > button.wp-block-navigation-submenu__toggle { display: none !important; } /* 2. Force the submenu (the three links) to be visible immediately */ .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container { /* Overrides hidden state and position */ position: static !important; visibility: visible !important; opacity: 1 !important; max-height: none !important; border: none !important; /* Remove default submenu styling */ margin: 0 !important; padding-left: 0 !important; background: none !important; } /* 3. Style the child links to look like top-level menu items */ .wp-block-navigation__submenu-container > li { /* Remove the wrapping LI's styling */ list-style: none; padding: 0; margin: 0; } /* 4. Ensure the final links match the padding of the other main items */ .wp-block-navigation__submenu-container a.wp-block-navigation-item__content { /* Match the padding used by other main links like Discographie */ padding-left: var(--wp--style--block-gap, 1em); padding-top: 0.8em; padding-bottom: 0.8em; } .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { padding-right: unset; row-gap: 25px; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { align-items: var(--navigation-layout-justification-setting, initial); display: flex; flex-direction: column; font-size: 3vh; } } @media screen and (max-width: 781px) { .wp-block-template-part .wp-block-columns .wp-block-column { /* Centers text (H2 and P tags) */ text-align: center !important; } /* 2. Center the inner Group blocks (Contact/Instagram titles and content wrappers) */ /* This ensures the entire container is centered if it doesn't take up 100% width */ .wp-block-template-part .wp-block-column > .wp-block-group { margin-left: auto !important; margin-right: auto !important; text-align: center !important; /* Redundant, but ensures consistency */ } /* 3. Center the Social Links (which is a flex container) */ .wp-block-template-part .wp-block-social-links { justify-content: center !important; /* Centers the icons */ margin-left: auto !important; margin-right: auto !important; } .wp-block-template-part .wp-block-column h2.has-text-align-left { text-align: center !important; } /* 4. Center the Instagram Feed content and container */ #sb_instagram { margin-left: auto !important; margin-right: auto !important; } /* If the Instagram images are also wrapped in a flex/grid that needs centering: */ #sb_instagram #sbi_images { display: flex !important; justify-content: center !important; /* Ensures the 3 images stay centered together */ } }