/* Theme Name: Ets Mama Khoudia Theme URI: https://mamakhoudia.com Author: Ets Mama Khoudia Author URI: https://mamakhoudia.com Description: Thème WordPress pour Ets Mama Khoudia - Céréales locales du Sénégal Version: 1.0.6 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: mama-khoudia Tags: e-commerce, woocommerce, custom-colors, wide-blocks, block-patterns */ /* ============================================================ VARIABLES & CUSTOM PROPERTIES ============================================================ */ :root { /* Border radius */ --radius: 0.85rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --radius-3xl: calc(var(--radius) + 12px); /* Colors - Warm earthy palette inspired by EMK logo */ --background: oklch(0.975 0.018 75); /* warm cream */ --foreground: oklch(0.27 0.045 35); /* deep cocoa */ --card: oklch(0.99 0.012 75); --card-foreground: oklch(0.27 0.045 35); --popover: oklch(0.99 0.012 75); --popover-foreground: oklch(0.27 0.045 35); --primary: oklch(0.42 0.115 35); /* terracotta brown (logo brown) */ --primary-foreground: oklch(0.98 0.015 80); --secondary: oklch(0.93 0.03 80); /* soft sand */ --secondary-foreground: oklch(0.30 0.05 35); --muted: oklch(0.94 0.02 80); --muted-foreground: oklch(0.45 0.035 50); --accent: oklch(0.52 0.13 145); /* leaf green (logo leaves) */ --accent-foreground: oklch(0.98 0.015 80); --destructive: oklch(0.55 0.21 28); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.88 0.025 70); --input: oklch(0.88 0.025 70); --ring: oklch(0.42 0.115 35); --cream: oklch(0.975 0.018 75); --leaf: oklch(0.52 0.13 145); --clay: oklch(0.55 0.15 40); --honey: oklch(0.78 0.14 75); /* Fonts */ --font-display: "Fraunces", Georgia, serif; --font-sans: "Nunito", system-ui, sans-serif; } /* ============================================================ GLOBAL STYLES ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; border-color: var(--border); } html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--background); color: var(--foreground); font-feature-settings: "ss01", "cv11"; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.1; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ============================================================ UTILITY CLASSES ============================================================ */ .grain { background-image: radial-gradient(ellipse at top, oklch(0.95 0.035 75 / 0.6), transparent 60%), radial-gradient(ellipse at bottom right, oklch(0.85 0.06 145 / 0.25), transparent 50%); } .text-balance { text-wrap: balance; } /* ============================================================ WOOCOMMERCE COMPATIBILITY ============================================================ */ /* Pas de mise en page sur le des pages WooCommerce : chaque template fournit son propre conteneur .max-w-7xl mx-auto px-4 sm:px-6, pour un espacement identique à toutes les autres pages du site. */ .woocommerce-breadcrumb { margin-bottom: 2rem; font-size: 0.875rem; color: var(--muted-foreground); } /* ============================================================ WOOCOMMERCE STYLES ============================================================ */ /* Image produit avec hover effect */ .woocommerce ul.products li.product .woocommerce-LoopProduct-link img { transition: transform 0.5s ease; } .woocommerce ul.products li.product:hover .woocommerce-LoopProduct-link img { transform: scale(1.05); } /* Bouton Ajouter au panier style Lovable */ .woocommerce ul.products li.product .button.add_to_cart_button, .woocommerce ul.products li.product .button.product_type_simple, .woocommerce ul.products li.product .added_to_cart { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; background-color: var(--primary); color: var(--primary-foreground); padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 600; border: none !important; transition: all 0.3s ease; text-decoration: none; } .woocommerce ul.products li.product .button.add_to_cart_button:hover, .woocommerce ul.products li.product .button.product_type_simple:hover { background-color: var(--primary); opacity: 0.9; } .woocommerce ul.products li.product .button.add_to_cart_button:before, .woocommerce ul.products li.product .button.product_type_simple:before { content: "+"; font-size: 1.25rem; font-weight: bold; line-height: 1; } /* Prix style Lovable */ .woocommerce ul.products li.product .price { font-family: var(--font-display); font-size: 1.125rem; color: var(--foreground); font-weight: normal !important; } .woocommerce ul.products li.product .price del { opacity: 0.5; } /* Grille de produits */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; list-style: none !important; margin: 0 !important; padding: 0 !important; } @media (min-width: 640px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } } .woocommerce ul.products li.product { margin: 0 !important; padding: 0 !important; width: 100% !important; } /* Titre de la boutique */ .woocommerce .page-title, .woocommerce-products-header__title, .woocommerce-products-header h1 { font-family: var(--font-display); font-size: 3rem; color: var(--primary); margin-bottom: 2rem; line-height: 1.1; } @media (min-width: 768px) { .woocommerce .page-title, .woocommerce-products-header__title, .woocommerce-products-header h1 { font-size: 3.75rem; } } /* Résultats et tri */ .woocommerce-result-count, .woocommerce-ordering { font-size: 0.875rem; color: var(--foreground); opacity: 0.75; } .woocommerce-ordering select { border-radius: 0.75rem; border: 1px solid var(--input); background-color: var(--background); padding: 0.5rem 1rem; font-size: 0.875rem; } /* Breadcrumb */ .woocommerce-breadcrumb { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1.5rem; } .woocommerce-breadcrumb a { color: var(--primary); text-decoration: none; transition: color 0.3s ease; } .woocommerce-breadcrumb a:hover { color: var(--accent); } /* Pagination */ .woocommerce nav.woocommerce-pagination ul { display: flex; gap: 0.5rem; justify-content: center; margin-top: 3rem; border: none !important; } .woocommerce nav.woocommerce-pagination ul li { border: 0 !important; margin: 0 !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; width: 2.5rem; border-radius: 9999px; background-color: var(--secondary); color: var(--secondary-foreground); border: none !important; text-decoration: none; transition: all 0.3s ease; } .woocommerce nav.woocommerce-pagination ul li a:hover { background-color: var(--primary); color: var(--primary-foreground); } .woocommerce nav.woocommerce-pagination ul li span.current { background-color: var(--primary); color: var(--primary-foreground); } /* Page produit single */ .woocommerce div.product { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .woocommerce div.product { grid-template-columns: 1fr 1fr; } } .woocommerce div.product .product_title { font-family: var(--font-display); font-size: 2.5rem; color: var(--primary); margin-bottom: 0.5rem; } .woocommerce div.product .price { font-family: var(--font-display); font-size: 2rem; color: var(--foreground); } .woocommerce div.product form.cart .button { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; background-color: var(--primary); color: var(--primary-foreground); padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border: none !important; cursor: pointer; transition: all 0.3s ease; } .woocommerce div.product form.cart .button:hover { opacity: 0.9; } /* Panier */ .woocommerce-cart .woocommerce { max-width: 80rem; margin: 0 auto; } .woocommerce table.shop_table { border-radius: 1rem; overflow: hidden; border: 1px solid var(--border); } .woocommerce table.shop_table th { background-color: var(--secondary); color: var(--secondary-foreground); font-weight: 600; padding: 1rem; } .woocommerce table.shop_table td { padding: 1rem; border-bottom: 1px solid var(--border); } .woocommerce .cart-collaterals { margin-top: 2rem; } .woocommerce .cart_totals h2 { font-family: var(--font-display); font-size: 1.875rem; color: var(--primary); } .woocommerce .cart_totals table { border-radius: 1rem; overflow: hidden; } .woocommerce .checkout-button { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; background-color: var(--primary); color: var(--primary-foreground); padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border: none !important; text-decoration: none; transition: all 0.3s ease; } .woocommerce .checkout-button:hover { opacity: 0.9; } /* Messages/Notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: 0.75rem; padding: 1rem 1.5rem; margin-bottom: 1.5rem; } .woocommerce-message { background-color: var(--accent); color: var(--accent-foreground); border-left: 4px solid var(--accent); } /* Image produit single - style Lovable */ .woocommerce div.product div.images { margin-bottom: 0; } .woocommerce div.product div.images img { border-radius: 2.5rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { margin: 0; } /* Input quantité style Lovable */ .woocommerce div.product form.cart div.quantity { margin-right: 1rem; } .woocommerce div.product form.cart div.quantity input.qty { border-radius: 0.75rem; border: 1px solid var(--border); padding: 0.75rem 1rem; width: 5rem; text-align: center; } /* Tabs produit */ .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 2rem; list-style: none; display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border); } .woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: 0.75rem 0.75rem 0 0; padding: 1rem 1.5rem; background-color: var(--secondary); cursor: pointer; border: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background-color: var(--primary); color: var(--primary-foreground); } .woocommerce div.product .woocommerce-tabs .panel { padding: 2rem 0; } /* Panier vide */ .woocommerce-cart .cart-empty { text-align: center; padding: 4rem 2rem; } .woocommerce .return-to-shop a.button { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; background-color: var(--primary); color: var(--primary-foreground); padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border: none !important; text-decoration: none; } /* ========================================================================== WOOCOMMERCE : PAGE MON COMPTE (Login / Dashboard) ========================================================================== */ .woocommerce-account .woocommerce { display: flex; flex-direction: column; gap: 2rem; max-width: 1100px; margin: 0 auto; } /* -------------------------------------------------------------------------- 1. Formulaires de Connexion / Inscription -------------------------------------------------------------------------- */ .woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; } /* @media (min-width: 768px) { border: 1px solid var(--border); border-radius: 1.5rem; overflow: hidden; } */ @media (min-width: 768px) { .woocommerce-MyAccount-navigation { width: 280px; flex-shrink: 0; } } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0.5rem; } .woocommerce-MyAccount-navigation li { margin-bottom: 0.25rem; } .woocommerce div.product form.cart .button:hover { opacity: 0.9; } /* Panier */ .woocommerce-cart .woocommerce { max-width: 80rem; margin: 0 auto; } .woocommerce table.shop_table { border-radius: 1rem; overflow: hidden; border: 1px solid var(--border); } .woocommerce table.shop_table th { background-color: var(--secondary); color: var(--secondary-foreground); font-weight: 600; padding: 1rem; } .woocommerce table.shop_table td { padding: 1rem; border-bottom: 1px solid var(--border); } .woocommerce .cart-collaterals { margin-top: 2rem; } .woocommerce .cart_totals h2 { font-family: var(--font-display); font-size: 1.875rem; color: var(--primary); } .woocommerce .cart_totals table { border-radius: 1rem; overflow: hidden; } .woocommerce .checkout-button { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; background-color: var(--primary); color: var(--primary-foreground); padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border: none !important; text-decoration: none; transition: all 0.3s ease; } .woocommerce .checkout-button:hover { opacity: 0.9; } /* Messages/Notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: 0.75rem; padding: 1rem 1.5rem; margin-bottom: 1.5rem; } .woocommerce-message { background-color: var(--accent); color: var(--accent-foreground); border-left: 4px solid var(--accent); } /* Image produit single - style Lovable */ .woocommerce div.product div.images { margin-bottom: 0; } .woocommerce div.product div.images img { border-radius: 2.5rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { margin: 0; } /* Input quantité style Lovable */ .woocommerce div.product form.cart div.quantity { margin-right: 1rem; } .woocommerce div.product form.cart div.quantity input.qty { border-radius: 0.75rem; border: 1px solid var(--border); padding: 0.75rem 1rem; width: 5rem; text-align: center; } /* Tabs produit */ .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 2rem; list-style: none; display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border); } .woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: 0.75rem 0.75rem 0 0; padding: 1rem 1.5rem; background-color: var(--secondary); cursor: pointer; border: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background-color: var(--primary); color: var(--primary-foreground); } .woocommerce div.product .woocommerce-tabs .panel { padding: 2rem 0; } /* Panier vide */ .woocommerce-cart .cart-empty { text-align: center; padding: 4rem 2rem; } .woocommerce .return-to-shop a.button { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; background-color: var(--primary); color: var(--primary-foreground); padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border: none !important; text-decoration: none; } /* ========================================================================== WOOCOMMERCE : PAGE MON COMPTE (Login / Dashboard) ========================================================================== */ .woocommerce-account .woocommerce { display: flex; flex-direction: column; gap: 2rem; max-width: 1100px; margin: 0 auto; } /* -------------------------------------------------------------------------- 1. Formulaires de Connexion / Inscription -------------------------------------------------------------------------- */ .woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; } .woocommerce-account .u-columns.col2-set::before, .woocommerce-account .u-columns.col2-set::after { display: none !important; } @media (min-width: 768px) { .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr 1fr; } } /* Cartes des formulaires */ .woocommerce-account .u-column1, .woocommerce-account .u-column2 { width: 100% !important; float: none !important; max-width: none !important; background-color: var(--card); border: 1px solid var(--border); border-radius: 1.5rem; /* rounded-2xl */ padding: 2rem; box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--foreground) 5%, transparent); } .woocommerce-account .u-column2 { background-color: color-mix(in srgb, var(--secondary) 30%, transparent); } .woocommerce form.login, .woocommerce form.register { border: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } .woocommerce-account .u-column1 h2, .woocommerce-account .u-column2 h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--primary); margin-bottom: 1.5rem; font-weight: 600; } /* Champs de saisie */ .woocommerce-account form .form-row { margin-bottom: 1rem; } .woocommerce-account form label { display: block; font-size: 0.75rem; /* text-xs */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in srgb, var(--foreground) 60%, transparent); margin-bottom: 0.5rem; } .woocommerce-account form .input-text { width: 100%; padding: 0.75rem 1rem; /* px-4 py-3 */ border-radius: 0.75rem; /* rounded-xl */ border: 1px solid var(--input); background-color: var(--background); font-size: 0.875rem; color: var(--foreground); transition: all 0.2s; } .woocommerce-account form .input-text:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent); } /* Boutons */ .woocommerce-account form .button { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; /* rounded-full */ background-color: color-mix(in srgb, var(--primary) 90%, transparent); color: var(--primary-foreground); padding: 0.75rem 1.5rem; font-weight: 600; transition: all 0.25s ease; border: none; cursor: pointer; margin-top: 0.5rem; } .woocommerce-account form .button:hover { transform: translateY(-2px); background-color: var(--primary); box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--primary) 30%, transparent); } /* -------------------------------------------------------------------------- 2. Tableau de Bord (Connecté) -------------------------------------------------------------------------- */ @media (min-width: 768px) { .woocommerce-account.logged-in .woocommerce { flex-direction: row; align-items: flex-start; } } /* Navigation Latérale */ .woocommerce-MyAccount-navigation { width: 100%; background-color: var(--card); border: 1px solid var(--border); border-radius: 1.5rem; overflow: hidden; } @media (min-width: 768px) { .woocommerce-MyAccount-navigation { width: 280px; flex-shrink: 0; } } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0.5rem; } .woocommerce-MyAccount-navigation li { margin-bottom: 0.25rem; } .woocommerce-MyAccount-navigation li a { display: block; padding: 0.75rem 1rem; border-radius: 1rem; font-size: 0.875rem; font-weight: 500; color: var(--foreground); transition: all 0.2s; text-decoration: none; } .woocommerce-MyAccount-navigation li a:hover { background-color: var(--secondary); color: var(--primary); } .woocommerce-MyAccount-navigation li.is-active a { background-color: var(--primary); color: var(--primary-foreground); } /* Contenu du tableau de bord */ .woocommerce-MyAccount-content { flex: 1; width: 100%; background-color: var(--card); border: 1px solid var(--border); border-radius: 1.5rem; padding: 2rem; box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--foreground) 5%, transparent); } .woocommerce-MyAccount-content h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--primary); margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; font-weight: 600; } .woocommerce-MyAccount-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; } /* Tableaux (Commandes) */ .woocommerce-MyAccount-content table { width: 100%; border-collapse: collapse; margin-top: 1rem; border-radius: 1rem; overflow: hidden; border: 1px solid var(--border); } .woocommerce-MyAccount-content table thead th { background-color: var(--secondary); padding: 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: color-mix(in srgb, var(--foreground) 60%, transparent); } .woocommerce-MyAccount-content table tbody th { background-color: transparent; padding: 1rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; font-weight: normal; text-align: left; } .woocommerce-MyAccount-content table td { padding: 1rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; } .woocommerce-MyAccount-content table .button { padding: 0.5rem 1rem; font-size: 0.75rem; text-decoration: none; background-color: var(--secondary); color: var(--secondary-foreground); border-radius: 9999px; display: inline-block; } .woocommerce-MyAccount-content table .button:hover { background-color: var(--primary); color: var(--primary-foreground); } .woocommerce-message { display: none !important; } /* -------------------------------------------------------------------------- 3. Mots de passe perdus et réinitialisation -------------------------------------------------------------------------- */ .woocommerce form.lost_reset_password { background-color: var(--card); border: 1px solid var(--border); border-radius: 1.5rem; padding: 2rem; box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--foreground) 5%, transparent); max-width: 500px; margin: 3rem auto; } .woocommerce form.lost_reset_password p { margin-bottom: 1.5rem; } .woocommerce form.lost_reset_password .form-row, .woocommerce form.lost_reset_password .form-row-first, .woocommerce form.lost_reset_password .form-row-last { width: 100%; float: none; } .woocommerce form.lost_reset_password label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in srgb, var(--foreground) 60%, transparent); margin-bottom: 0.5rem; } .woocommerce form.lost_reset_password .input-text { width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem; border: 1px solid var(--input); background-color: var(--background); font-size: 0.875rem; color: var(--foreground); transition: all 0.2s; } .woocommerce form.lost_reset_password .input-text:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent); } .woocommerce form.lost_reset_password .button { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background-color: color-mix(in srgb, var(--primary) 90%, transparent); color: var(--primary-foreground); padding: 0.75rem 1.5rem; font-weight: 600; transition: all 0.25s ease; border: none; cursor: pointer; width: 100%; } .woocommerce form.lost_reset_password .button:hover { transform: translateY(-2px); background-color: var(--primary); box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--primary) 30%, transparent); } /* Correction alignement Se Souvenir de moi */ .woocommerce form.login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .woocommerce form.login .form-row:has(.woocommerce-form-login__submit) .button { margin-top: 0.5rem; width: 100%; } .woocommerce-account form label.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 0.5rem; text-transform: none; font-size: 0.875rem; font-weight: 500; margin: 0; cursor: pointer; color: var(--foreground); } .woocommerce-account form label.woocommerce-form-login__rememberme input[type="checkbox"] { margin: 0; width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: var(--primary); }