/* ========================================================================= Metronome & Kalista — feuille de style principale ========================================================================= Système à 3 "tiers" visuels validé avec Julien le 20/08 : - .tier--kalista fond très sombre, accent or/champagne, serif - .tier--aqwo-classica fond sombre, accent bronze/cuivre, serif - .tier--digital-sharing fond clair, accent bronze, sans-serif only Les tokens ci-dessous reprennent exactement les couleurs utilisées dans les maquettes montrées à Julien (hero homepage + comparatif 3 tiers). ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Michroma&display=swap'); :root { /* Neutres communs */ --mk-bg-dark: #000000; --mk-bg-dark-2: #000000; --mk-text-light: #f2ede6; --mk-text-light-70: rgba(242, 237, 230, 0.7); --mk-bg-light: #ece7da; --mk-text-dark: #2c2c2a; --mk-border: rgba(255, 255, 255, 0.12); /* "Chrome" du site (header, footer, pages communes, formulaires) — noir par défaut. Redéfini en beige pour l'univers Metronome plus bas — demande du 23/08 : essai d'un environnement Metronome entièrement beige, y compris le header/footer/menu et les pages partagées (About Us, Support, Find Us, Register product...), pas seulement les pages produits comme précédemment. */ --mk-chrome-bg: var(--mk-bg-dark-2); --mk-chrome-bg-2: #0a0a0a; --mk-chrome-text: var(--mk-text-light); --mk-chrome-text-70: var(--mk-text-light-70); --mk-chrome-border: var(--mk-border); /* Accents par univers */ --mk-accent-kalista: #d9c07a; /* or / champagne */ --mk-accent-metronome: #cf9a5f; /* bronze / cuivre */ /* Couleur des boutons — dorée par défaut (Kalista, fond sombre). Redéfinie plus bas en bronze/cuivre pour l'univers Metronome (fond clair) où le doré manque de contraste — demande du 23/08, même principe que pour les bordures (--mk-border). */ --mk-btn-color: var(--mk-accent-kalista); /* Typographie */ /* Michroma pour titres/sous-titres/menus/boutons, Space Grotesk pour le texte courant (même esprit géométrique/technique, mais bien plus lisible en continu) — demande du 22/08, suite à l'essai Michroma partout qui était difficile à lire sur les paragraphes. */ --mk-font-display: 'Michroma', Georgia, serif; --mk-font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --mk-radius: 6px; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--mk-font-body); background: var(--mk-bg-dark); color: var(--mk-text-light); } /* Univers Metronome entier en fond clair/beige (comme Digital Sharing auparavant) — Kalista reste en noir. Demande du 23/08 : plutôt que de retoucher chaque section une par une, un seul changement au niveau du (déjà marqué "univers-metronome" ou "univers-kalista" par mk_get_current_univers(), voir header.php) suffit à propager la bonne couleur de fond/texte par défaut à tout le contenu qui n'a pas de fond spécifique déjà défini. */ /* Univers Metronome : essai d'un environnement entièrement beige — fond de page, header, footer, menu ET pages communes (About Us, Support, Find Us, Register/Compare product...) — demande du 23/08. On ne restreint plus à ".mk-produits-section" comme avant : tout l'univers Metronome bascule désormais, page par page, via cette seule règle sur le . Kalista reste inchangé (noir partout). */ body.univers-metronome { background: var(--mk-bg-light); color: var(--mk-text-dark); /* Bordures sombres plutôt que blanches semi-transparentes : sur fond clair, une bordure blanche à 12% d'opacité devient quasi invisible. Redéfinir la variable ici la propage automatiquement à tous les composants qui l'utilisent (cartes, bandeaux, boutons...). */ --mk-border: rgba(44, 44, 42, 0.15); --mk-btn-color: var(--mk-accent-metronome); /* "Chrome" du site (header, footer, sous-menu déroulant, pages communes, champs de formulaire) — beige avec texte sombre. */ --mk-chrome-bg: var(--mk-bg-light); --mk-chrome-bg-2: var(--mk-bg-light); /* même beige que le fond des pages, demande du 23/08 */ --mk-chrome-text: var(--mk-text-dark); --mk-chrome-text-70: rgba(44, 44, 42, 0.7); --mk-chrome-border: rgba(44, 44, 42, 0.15); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ------------------------------------------------------------------------- Header ------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; padding: 20px 40px; /* Fond solide et sticky plutôt que transparent/flottant par-dessus le contenu : demandé par Julien le 21/08 pour un rendu plus net façon dcsaudio.com, et ça règle définitivement les problèmes de contraste avec le contenu qui défile en dessous (le header ne chevauche plus jamais rien, il pousse le contenu en dessous de lui). */ background: var(--mk-chrome-bg-2); border-bottom: 1px solid var(--mk-chrome-border); /* Le header suit désormais la couleur "chrome" de l'univers en cours (beige/texte sombre pour Metronome, noir/texte clair pour Kalista) — essai demandé le 23/08. */ color: var(--mk-chrome-text); } .site-header__inner { display: flex; align-items: center; gap: 36px; max-width: 1400px; margin: 0 auto; } .site-header__logo img { height: 28px; width: auto; } .site-header__nav { /* Occupe tout l'espace disponible entre le logo et "Find Us" plutôt que de se limiter à sa largeur de contenu — c'est ce qui permet à .mk-nav-push-right (ci-dessous) de pousser certains items jusqu'au bord droit, juste à côté de "Find Us" (demande du 22/08). */ flex: 1; } .site-header__nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; /* Police géométrique proche des formes du logo METRONOME (majuscules fines, espacement large) plutôt que la police de texte courant — demande du 22/08. Michroma est la police Google Fonts la plus proche visuellement du logotype (pas de police exacte disponible, le logo étant vectorisé sur mesure). */ font-family: 'Michroma', var(--mk-font-body); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } /* Sous-menus (ex : Products > Collections > Kalista/AQWO/Classica/Digital Sharing). WordPress imbrique naturellement un