/** Theme Name: Astra Child - Wcycling Theme URI: https://wcycling-shop.fr Description: Thème enfant Astra pour Wcycling — identité visuelle premium, structure confiance/fulfillment. Author: Wcycling Template: astra Version: 1.0.6 Text Domain: astra-child */ /* ========================================================================== Sur les pages WooCommerce (fiche produit, catégories, panier, checkout, compte), le footer par défaut d'Astra (#colophon) et le footer custom Header Footer Elementor (.wcy-footer) s'affichent tous les deux — on masque celui d'Astra pour ne garder que le footer de marque. WooCommerce ajoute la classe "woocommerce-page" au sur tout son périmètre. ========================================================================== */ body.woocommerce-page #colophon { display: none; } /* ========================================================================== Grille produits (boutique, catégories, produits liés) — épurée façon ccache.cc : image, titre, prix, uniquement. Les boutons de choix de variation (taille, couleur…) ne s'affichent que sur la fiche produit elle-même, jamais dans une grille/liste. ========================================================================== */ ul.products .variable-items-wrapper, ul.products .wvs-archive-variations-wrapper, ul.products .woo-variation-swatches-select-wrapper, ul.products .variations_form, ul.products .cfvsw_variations_form { display: none !important; } /* ========================================================================== Boutons — style "shadcn button" (rounded-lg, ombre subtile, hover foncé) appliqué aux couleurs Wcycling (navy / accent performance). ========================================================================== */ :root { --wcycling-btn-radius: 8px; --wcycling-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); --wcycling-btn-transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } /* Bouton par défaut (variant "default") — appliqué aux vrais boutons du site : panier WooCommerce, blocs Elementor, boutons Astra. */ .woocommerce a.button, .woocommerce button.button, .woocommerce button.button.alt, .woocommerce #respond input#submit, .woocommerce input.button, .woocommerce a.added_to_cart, .elementor-button, .ast-button, a.ast-button, button.ast-button, .wcycling-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--wcycling-btn-radius); border: 1px solid transparent; padding: 0.55rem 1.25rem; font-weight: 600; font-size: 0.9rem; white-space: nowrap; background-color: var(--ast-global-color-0); color: #ffffff; box-shadow: var(--wcycling-btn-shadow); transition: var(--wcycling-btn-transition); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover, .woocommerce #respond input#submit:hover, .woocommerce input.button:hover, .elementor-button:hover, .ast-button:hover, a.ast-button:hover, button.ast-button:hover, .wcycling-btn:hover { background-color: var(--ast-global-color-1); color: #ffffff; } .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible, .elementor-button:focus-visible, .ast-button:focus-visible, .wcycling-btn:focus-visible { outline: 2px solid var(--ast-global-color-7); outline-offset: 2px; } .woocommerce a.button:disabled, .woocommerce button.button:disabled, .woocommerce a.button.disabled, .wcycling-btn:disabled { pointer-events: none; opacity: 0.5; } /* Variantes utilitaires, à poser en classe CSS additionnelle dans Elementor (onglet Avancé > Classes CSS) sur n'importe quel bouton. */ /* Accent — appel à l'action fort (ex. "Ajouter au panier" mis en avant, CTA guide) */ .wcycling-btn--accent { background-color: var(--ast-global-color-7); } .wcycling-btn--accent:hover { background-color: var(--ast-global-color-8); } /* Outline — action secondaire */ .wcycling-btn--outline { background-color: transparent; color: var(--ast-global-color-0); border-color: var(--ast-global-color-6); box-shadow: var(--wcycling-btn-shadow); } .wcycling-btn--outline:hover { background-color: var(--ast-global-color-4); color: var(--ast-global-color-0); } /* Secondary — neutre, sur fond papier */ .wcycling-btn--secondary { background-color: var(--ast-global-color-4); color: var(--ast-global-color-2); box-shadow: var(--wcycling-btn-shadow); } .wcycling-btn--secondary:hover { background-color: var(--ast-global-color-6); } /* Ghost — sans fond, pour les actions discrètes (liens de navigation en bouton) */ .wcycling-btn--ghost { background-color: transparent; color: var(--ast-global-color-2); box-shadow: none; } .wcycling-btn--ghost:hover { background-color: var(--ast-global-color-4); } /* Link — texte souligné au survol, aucune enveloppe */ .wcycling-btn--link { background-color: transparent; color: var(--ast-global-color-0); box-shadow: none; padding: 0; } .wcycling-btn--link:hover { text-decoration: underline; } /* Tailles */ .wcycling-btn--sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; border-radius: var(--wcycling-btn-radius); } .wcycling-btn--lg { padding: 0.75rem 1.75rem; font-size: 1rem; } .wcycling-btn--icon { padding: 0.55rem; width: 2.25rem; height: 2.25rem; } /* ========================================================================== Boutons de choix de variation produit (plugin Woo Variation Swatches) — même langage visuel que les boutons : coins rounded-lg, état sélectionné en navy plein, hover discret. Sélecteurs alignés sur ceux du plugin pour passer devant sa propre spécificité, sans surcharger tout le site en !important. ========================================================================== */ .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item { border-radius: var(--wcycling-btn-radius) !important; border: 1px solid var(--ast-global-color-0) !important; background-color: var(--ast-global-color-0) !important; color: #ffffff !important; font-weight: 600; box-shadow: var(--wcycling-btn-shadow); transition: var(--wcycling-btn-transition); min-width: 2.5rem; padding: 0.55rem 1rem !important; } .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item:hover { border-color: var(--ast-global-color-1) !important; background-color: var(--ast-global-color-1) !important; color: #ffffff !important; } .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item.selected { border-color: var(--ast-global-color-7) !important; background-color: var(--ast-global-color-7) !important; color: #ffffff !important; } .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item.selected:hover { background-color: var(--ast-global-color-8) !important; border-color: var(--ast-global-color-8) !important; } .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item:focus-visible { outline: 2px solid var(--ast-global-color-7); outline-offset: 2px; } .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item.disabled, .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item.no-stock { background-color: var(--ast-global-color-4) !important; border-color: var(--ast-global-color-6) !important; color: var(--ast-global-color-3) !important; opacity: 0.55; text-decoration: line-through; }