/* Theme Name: Restor'Cars Child Theme URI: https://restorcars.ch Description: Child theme Kadence pour Restor'Cars — site vitrine restauration véhicules anciens et youngtimers, atelier Pascal Andrey à Fiaugères (FR/CH). Author: Restor'Cars Author URI: https://restorcars.ch Template: kadence Version: 0.1.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: restorcars */ /* ========================================================================== Variables CSS globales — palette Restor'Cars (bâche officielle) ========================================================================== */ :root { /* ---------------------------------------------------------------------- Couleurs — relevées dans le fichier vectoriel de la bâche (260409_BAT_RESTOR_CARS_Baches.pdf, page 2). Valeurs exactes, non estimées : ne pas les modifier sans revenir à la source. ---------------------------------------------------------------------- */ --color-primary: #043B58; /* Marine — titres, header, footer */ --color-accent: #EE5C2B; /* Orange — ornements uniquement */ --color-bg-warm: #F6EAD4; /* Parchemin — sections alternées */ --color-bg-light: #FAFAF7; /* Blanc cassé — fond principal */ --color-text: #1A1A1A; /* Corps de texte */ --color-text-muted: #666666; /* Textes secondaires */ /* * ORANGE D'ACTION — le même orange, 15 % plus sombre. * * Du blanc sur l'orange de marque donne 3,39:1, sous le seuil WCAG AA de * 4,5:1. Assombri de 15 %, il atteint 4,54:1 : l'œil ne distingue pas les * deux, mais le texte devient lisible pour tout le monde. * * Répartition : --color-accent pour ce qui ne porte pas de texte (filet, * liserés, bandeaux), --color-action pour les boutons et les liens. */ --color-action: #CA4E24; --color-action-survol: #A83814; /* * Le rouge #BD0926 figure sur la bâche (prestations, téléphone, logo). * Volontairement NON utilisé sur le site : deux accents chauds côte à côte * se disputent l'attention. Conservé ici au cas où. */ --color-red: #BD0926; --color-yellow: #FFD200; /* Jaune du script du logo — non utilisé */ /* Nuances dérivées */ --color-primary-clair: #0565A2; /* Bleu de l'illustration du logo */ --color-parchemin-2: #F1E2C6; /* Marbrure du fond */ /* ---------------------------------------------------------------------- Typographie Le texte de la bâche est vectorisé : le nom de sa police n'est pas récupérable. C'est un serif gras, plus trapu et moins contrasté que Playfair Display. À arbitrer avec le graphiste si l'écart gêne. ---------------------------------------------------------------------- */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-accent: 'Dancing Script', cursive; /* ---------------------------------------------------------------------- Échelle d'espacement — une seule source pour tout le site. Progression régulière : chaque cran vaut environ 1,5 fois le précédent. Aucun bloc ne doit écrire une marge en dur. ---------------------------------------------------------------------- */ --space-3xs: 0.25rem; /* 4px — micro-écarts */ --space-2xs: 0.375rem; /* 6px — intérieur des étiquettes */ --space-xs: 0.625rem; /* 10px — sous un texte court */ --space-sm: 1rem; /* 16px — référence */ --space-md: 1.5rem; /* 24px — entre éléments d'un même groupe */ --space-lg: 2.5rem; /* 40px — entre groupes, autour des boutons */ --space-xl: 4rem; /* 64px — entre sections */ --space-2xl: 6rem; /* 96px — respiration maximale */ /* Rythme vertical d'une section, adapté à la largeur d'écran */ --section-spacing-y: clamp(var(--space-xl), 7vw, var(--space-2xl)); /* Layout */ --max-width: 1280px; --radius-sm: 4px; --radius-md: 8px; /* * Largeur de l'en-tête de page — pages ET archive Projets. * * 75rem (1200 px) et non davantage : l'archive vit à l'intérieur du * conteneur de contenu de Kadence, qui plafonne à 1231 px, alors que les * pages disposent de toute la largeur. Un plafond supérieur à 1231 px est * donc atteint par les pages mais pas par l'archive — mesuré : 1248 contre * 1231, soit les 31 px d'écart constatés. * * Une valeur que LES DEUX peuvent atteindre est la seule façon de garantir * l'alignement. Ne pas augmenter sans vérifier la largeur de contenu de * Kadence (Personnaliser → Mise en page). */ --header-width: 75rem; /* Ombres et transitions */ --shadow-sm: 0 1px 3px rgba(4, 59, 88, 0.08); --shadow-md: 0 4px 14px rgba(4, 59, 88, 0.10); --shadow-lg: 0 8px 28px rgba(4, 59, 88, 0.14); --transition: 0.2s ease; /* Hauteur du header sticky — sert aussi au décalage des ancres */ --header-height: 5.5rem; --header-height-scrolled: 4.25rem; } /* ========================================================================== Le filet — signature visuelle du site -------------------------------------------------------------------------- Un trait orange court, flanqué de deux traits marine. Posé sous chaque titre de section et sous le titre de page, c'est le seul ornement du site. Décoratif : il n'est pas lu par les lecteurs d'écran. ========================================================================== */ /* * Le filet n'apparaît PAS sur le bloc d'appel au contact : sur son fond * marine, les segments bleus disparaissent, et l'ornement n'apporte rien à un * bloc dont tout l'objet est le bouton. * * Le remplissage bas des titres d'en-tête est posé dans layout.css, avec leur * taille de police et leur hauteur de ligne : ces trois valeurs déterminent * ensemble la position du filet et ne doivent pas être séparées. */ .rc-block__title, .rc-hero__titre { position: relative; padding-bottom: var(--space-md); } .entry-hero .entry-title, .rc-projets-archive__title { position: relative; } /* * Le filet est UN SEUL élément de 172 px, dessiné par un dégradé. * * La version précédente empilait des `box-shadow` décalés de ±68 px autour * d'un bloc de 56 px. Ce montage dépend de la largeur du parent et de * l'arrondi du centrage : il ne pouvait pas rendre à l'identique dans deux * conteneurs différents, d'où des écartements variables d'une page à l'autre. * * Ici les trois segments et les deux intervalles sont posés en pixels absolus * dans un dégradé. Le rendu est le même partout, par construction. * * 0 44 60 112 128 172 * [ marine ] [ orange ] [ marine ] */ :root { --filet-largeur: 172px; --filet-motif: linear-gradient( to right, var(--filet-cote) 0 44px, transparent 44px 60px, var(--color-accent) 60px 112px, transparent 112px 128px, var(--filet-cote) 128px 172px ); --filet-cote: var(--color-primary); } .rc-block__title::after, .entry-hero .entry-title::after, .rc-projets-archive__title::after, .rc-hero__titre::after { content: ""; position: absolute; bottom: 0; left: 0; width: var(--filet-largeur); height: 3px; background-image: var(--filet-motif); } /* Sur le bandeau d'accueil, à fond sombre, les segments latéraux passent en blanc : du marine sur une photo assombrie ne se verrait pas. */ .rc-hero__titre { --filet-cote: rgba(255, 255, 255, 0.55); } /* Titres centrés : le filet se centre avec eux, sans calcul de décalage */ .entry-hero .entry-title::after, .rc-projets-archive__title::after, .rc-hero__titre::after { left: 50%; transform: translateX(-50%); } /* Les styles globaux sont dans assets/css/main.css (chargés via wp_enqueue_style). */