/* Theme Name: Kadence Sentin Child Theme URI: https://editionsdusentin.com Description: Thème enfant de Kadence pour les Éditions du Sentin — direction artistique éditoriale (or, ivoire, brun) reproduisant l'identité de la maison. Author: Éditions du Sentin Author URI: https://editionsdusentin.com Template: kadence Version: 1.5.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: kadence-sentin-child */ /* ============================================================ 1. DESIGN TOKENS — Éditions du Sentin Source de vérité unique pour couleurs, typographies, easing. Repris de landing4.html. ============================================================ */ :root { /* Palette */ --color-ink: #1a0f08; --color-ink-soft: #3a2820; --color-ivory: #fff9ef; --color-paper: #faf3e3; --color-sand: #d4c8a8; --color-gold: #c9a55a; --color-gold-dim: #8a7340; --color-gold-light: #d6b56b; --color-burgundy: #a53030; --color-burgundy-light: #c4413e; /* Typographies (chargées via Google Fonts dans functions.php) */ --ff-serif: 'Cormorant Garamond', Georgia, serif; --ff-caps: 'Montserrat', system-ui, -apple-system, sans-serif; /* Échelle typographique fluide */ --fs-xs: clamp(0.75rem, 1vw, 0.875rem); --fs-sm: clamp(0.875rem, 1.2vw, 1rem); --fs-md: clamp(1rem, 1.5vw, 1.125rem); --fs-lg: clamp(1.125rem, 1.8vw, 1.25rem); --fs-xl: clamp(1.25rem, 2vw, 1.5rem); --fs-2xl: clamp(1.5rem, 3vw, 2.25rem); --fs-3xl: clamp(2rem, 4vw, 3rem); --fs-4xl: clamp(2.5rem, 5vw, 4rem); /* Easing standard */ --ease: cubic-bezier(.4, 0, .2, 1); } /* ============================================================ 2. KADENCE PALETTE OVERRIDES On remplace les 9 couleurs de palette de Kadence par les nôtres. Toute UI Kadence (boutons, headers, blocks…) suivra. ============================================================ */ /* * Note : on utilise !important sur les variables Kadence parce que * Kadence injecte sa propre CSS inline dans à partir des * réglages Customizer (theme_mods), qui charge APRÈS nos styles * et donc écrase nos overrides. Avec !important, nos valeurs gagnent. */ :root, body, .wp-site-blocks, .editor-styles-wrapper { /* Slots de la palette Kadence */ --global-palette1: var(--color-gold) !important; /* Accent primary */ --global-palette2: var(--color-gold-light) !important; /* Accent secondary */ --global-palette3: var(--color-ink) !important; /* Text strongest */ --global-palette4: var(--color-ink-soft) !important; /* Text strong */ --global-palette5: var(--color-gold-dim) !important; /* Text muted */ --global-palette6: var(--color-sand) !important; /* Border subtle */ --global-palette7: var(--color-paper) !important; /* Background alt */ --global-palette8: var(--color-ivory) !important; /* Background main */ --global-palette9: #ffffff !important; /* White */ /* Highlights (utilisés par Kadence pour liens, accents UI) */ --global-palette-highlight: var(--color-gold) !important; --global-palette-highlight-alt: var(--color-gold-light) !important; --global-palette-highlight-alt2: var(--color-burgundy) !important; /* Boutons globaux Kadence */ --global-palette-btn: #ffffff !important; --global-palette-btn-bg: var(--color-burgundy) !important; --global-palette-btn-hover: #ffffff !important; --global-palette-btn-bg-hover: var(--color-burgundy-light) !important; /* Typographies */ --global-body-font-family: var(--ff-caps) !important; --global-heading-font-family: var(--ff-serif) !important; --global-primary-nav-font-family: var(--ff-caps) !important; --global-secondary-nav-font-family: var(--ff-caps) !important; --global-button-font-family: var(--ff-caps) !important; --global-content-edge-padding: clamp(1rem, 4vw, 2.5rem) !important; } /* ----- Marqueur de diagnostic (à retirer après validation) ------ Petit badge en bas à droite pour confirmer que ce CSS est bien chargé dans la preview. Si vous le voyez, le child theme s'applique. ---------------------------------------------------------------- */ body::after { content: "✓ Kadence Sentin Child v1.3.6"; position: fixed; bottom: 8px; right: 8px; z-index: 99999; background: var(--color-gold); color: var(--color-ink); padding: 3px 8px; font: 11px/1.2 'Montserrat', sans-serif; font-weight: 600; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); pointer-events: none; } /* ============================================================ 3. TON GLOBAL — body, headings, paragraphs, links ============================================================ */ body { background-color: var(--color-ivory); color: var(--color-ink); font-family: var(--ff-caps); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .entry-title, .site-title { font-family: var(--ff-serif); color: var(--color-ink); font-weight: 500; line-height: 1.2; text-wrap: balance; letter-spacing: -0.01em; } h1 { font-size: var(--fs-4xl); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-2xl); } h4 { font-size: var(--fs-xl); } /* Emphase italique dans les titres → or */ h1 em, h2 em, h3 em, h4 em, h5 em, h6 em { color: var(--color-gold); font-style: italic; font-weight: 500; } p { text-wrap: pretty; } a { color: var(--color-gold); text-decoration: none; transition: color .2s var(--ease); } /* Hover text color UNIQUEMENT pour les liens "texte", pas les boutons. Les boutons (.btn, .button, etc.) gardent leur propre couleur de hover. */ a:not(.btn):not(.button):not(.wp-block-button__link):not(.kb-button):not(.kadence-button):hover, a:not(.btn):not(.button):not(.wp-block-button__link):not(.kb-button):not(.kadence-button):focus-visible { color: var(--color-gold-light); } a:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; border-radius: 2px; } /* ============================================================ 4. BOUTONS — primary (bordeaux) / ghost (ivoire) Hover : élévation 1px + brillance 6 % + ombre élargie. Reproduit fidèlement le pattern de landing4.html. ============================================================ */ .button, .wp-block-button__link, button.kb-button, .kadence-button, .woocommerce a.button, .woocommerce button.button, .woocommerce-Button, input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; background-color: var(--color-burgundy); color: #ffffff; font-family: var(--ff-caps); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.85em 1.6em; border: 0; border-radius: 2px; cursor: pointer; transition: transform .25s var(--ease), filter .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); box-shadow: 0 2px 4px rgba(26, 15, 8, 0.12), 0 4px 12px rgba(165, 48, 48, 0.15); } .button:hover, .wp-block-button__link:hover, button.kb-button:hover, .kadence-button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce-Button:hover, input[type="submit"]:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 4px 8px rgba(26, 15, 8, 0.15), 0 8px 20px rgba(165, 48, 48, 0.22); } /* Ghost / outline button */ .is-style-outline .wp-block-button__link, .kb-button.kb-button-style-outline, .button.alt { background-color: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-gold-dim); box-shadow: 0 1px 3px rgba(26, 15, 8, 0.06); } .is-style-outline .wp-block-button__link:hover, .kb-button.kb-button-style-outline:hover, .button.alt:hover { background-color: #f0e8d5; color: var(--color-ink); filter: brightness(1.012); box-shadow: 0 3px 8px rgba(26, 15, 8, 0.1); } /* ============================================================ 5. WOOCOMMERCE — prix, badges, formulaires ============================================================ */ .woocommerce .price, .woocommerce-Price-amount, .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--color-burgundy); font-family: var(--ff-serif); font-weight: 600; font-size: var(--fs-xl); } /* Prix barré (promo) */ .woocommerce del, .woocommerce del .woocommerce-Price-amount { color: var(--color-gold-dim); opacity: 0.65; font-weight: 400; } /* Badge "promo" */ .woocommerce span.onsale { background-color: var(--color-gold); color: var(--color-ink); font-family: var(--ff-caps); font-weight: 600; letter-spacing: 0.05em; border-radius: 2px; padding: 0.4em 0.8em; } /* Inputs formulaires (panier, checkout, contact) */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], textarea, select { background-color: #ffffff; border: 1px solid var(--color-sand); border-radius: 2px; padding: 0.7em 0.9em; font-family: var(--ff-caps); font-size: var(--fs-sm); color: var(--color-ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 165, 90, 0.15); } /* ============================================================ 6. KADENCE — header / nav par défaut (ajustements doux) ============================================================ */ #main-header, .site-header { background-color: var(--color-ivory); border-bottom: 1px solid var(--color-sand); } .header-navigation .menu > li > a, .site-header .menu-item > a { font-family: var(--ff-caps); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-burgundy); transition: color .2s var(--ease); } .header-navigation .menu > li > a:hover, .site-header .menu-item > a:hover, .header-navigation .menu > li.current-menu-item > a { color: var(--color-gold); } /* ============================================================ 7. PLACEHOLDERS — sections à coder ensuite ============================================================ */ /* TODO: archive-product (catalogue boutique) */ /* TODO: single-product (fiche livre) */ /* TODO: cart drawer */ /* TODO: checkout */ /* ============================================================ 8. FIXES — corrections après première intégration landing4 Ces règles surchargent du CSS Kadence injecté qui ne pouvait pas être prévu dans landing4.css. ============================================================ */ /* 8.1 — Logo header : contrainte de taille pour éviter le débordement dans le contexte Kadence (landing4 le faisait, mais Kadence ajoute ses propres règles sur .site-header img). */ .home-front-page .site-header .brand-logo { max-width: none !important; width: auto !important; height: 52px !important; display: block; } @media (max-width: 480px) { .home-front-page .site-header .brand-logo { height: 44px !important; } } /* 8.2 — Italiques en or dans les titres de la home : Kadence injecte du CSS inline qui force la couleur du heading sur les `em`. */ .home-front-page .hero-h1 em, .home-front-page .hero-accent em, .home-front-page .hero-accent, .home-front-page .featured-title em, .home-front-page .house-title em, .home-front-page .authors-title em, .home-front-page .contact-title em { color: var(--color-gold) !important; font-style: italic; }