/* Theme Name: LOMA Theme URI: https://lomabeats.fr Author: Fanch Bezard - LOMA Description: Thème sur mesure pour la vente d'instrumentales. WooCommerce, lecteur persistant, une variation par licence, livraison automatique. Aucune dépendance à un constructeur de pages : tout est du PHP et du CSS lisibles. Version: 0.6.0 Requires at least: 6.4 Requires PHP: 8.1 License: Propriétaire - usage réservé à LOMA Text Domain: loma Tags: woocommerce, music, dark, e-commerce */ /* ============================================================ 1. JETONS La charte graphique, et rien d'autre. Aucune couleur écrite en dur ailleurs dans le thème : tout passe par ces variables. Sombre par défaut. Le clair s'active par data-theme="light" sur , posé par le bouton et retenu en localStorage. ============================================================ */ :root { /* Cases à cocher, listes et barres de défilement natives en sombre. */ color-scheme: dark; /* Fonds et surfaces */ --encre: #0A0A0C; /* fond de page */ --carbone: #141418; /* cartes */ --graphite: #1E1E24; /* survol, lecteur */ --trait: #2C2C34; /* bordures, waveform inactive */ /* Texte */ --texte: #FFFFFF; /* 19:1 sur encre */ --texte-doux: #A1A1AE; /* 7,8:1 - texte secondaire */ --texte-faible: #6E6E7A; /* 4,6:1 - méta, désactivé */ /* Bleus */ --bleu-nuit: #101A3D; /* fonds d'accent */ --bleu-600: #1E4FD6; /* bordures d'accent */ --bleu-500: #2F6BFF; /* aplats, boutons - 4,5:1 */ --bleu-400: #6D95FF; /* liens sur sombre - 7,0:1 */ --bleu-clair: #A8BFFF; /* texte sur bleu-nuit */ /* États */ --succes: #34C77B; --alerte: #FF5A4E; --alerte-doux: #FFB3AC; --alerte-fond: #2A1113; --vendue: #3A3A44; /* Inversions : ce qui doit rester lisible quel que soit le thème */ --sur-accent: #FFFFFF; /* texte sur --bleu-500 */ --contraste: #FFFFFF; /* fond des boutons principaux */ --sur-contraste:#0A0A0C; /* texte sur --contraste */ /* Typographie */ --police: "NeueHaas", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --police-titre: "Badger", var(--police); --corps: 1.0625rem; /* 17px - le texte courant */ --corps-lh: 1.7; --ui: 0.9375rem; /* 15px - boutons, champs, navigation */ --meta: 0.875rem; /* 14px */ --meta-petit: 0.8125rem; /* 13px */ /* Rayons - rien de carré, rien de complètement rond sauf les pilules */ --r-petit: 12px; --r: 16px; --r-grand: 22px; --pilule: 999px; /* Rythme */ --gouttiere: 56px; /* marge latérale desktop */ --gouttiere-m: 16px; /* marge latérale mobile */ --largeur-max: 1440px; --lecture-max: 700px; /* colonne de texte long : au-delà, l'œil perd la ligne */ /* Cibles tactiles - jamais en dessous */ --cible: 44px; --cible-large: 48px; --transition: 160ms cubic-bezier(0.2, 0, 0.2, 1); } :root[data-theme="light"] { color-scheme: light; --encre: #FAFAFB; --carbone: #FFFFFF; --graphite: #F2F2F5; --trait: #E4E4EA; --texte: #0A0A0C; --texte-doux: #5A5A66; /* 6,5:1 */ --texte-faible: #8E8E9A; /* 3,1:1 - réservé aux gros corps */ --bleu-nuit: #EEF2FF; --bleu-600: #C7D4FF; --bleu-500: #2555E0; /* 5,8:1 sur blanc */ --bleu-400: #2555E0; --bleu-clair: #1E3A8A; --succes: #0C7A46; /* le vert clair ne passe pas sur fond blanc */ --alerte: #C1281C; --alerte-doux: #8A1E15; --alerte-fond: #FDECEA; --vendue: #B4B4C2; --contraste: #0A0A0C; --sur-contraste:#FFFFFF; } /* ============================================================ 2. POLICES Auto-hébergées. Aucun appel à un CDN tiers : une requête vers Google Fonts transmet l'IP du visiteur, ce qui demande un consentement qu'on n'a pas envie de demander. Les fichiers sont dans assets/fonts/. Neue Haas est en .ttf : les navigateurs le lisent sans problème, et GD en a besoin pour composer les vignettes de partage. ============================================================ */ @font-face { font-family: "Badger"; src: url("assets/fonts/badger.woff2") format("woff2"); font-weight: 400; /* graisse unique - jamais de faux gras dessus */ font-style: normal; font-display: swap; } @font-face { font-family: "NeueHaas"; src: url("assets/fonts/neue-haas-roman.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "NeueHaas"; src: url("assets/fonts/neue-haas-medium.ttf") format("truetype"); font-weight: 500 600; /* la coupe n'a pas de 600 : on y ramène le Medium */ font-style: normal; font-display: swap; } @font-face { font-family: "NeueHaas"; src: url("assets/fonts/neue-haas-bold.ttf") format("truetype"); font-weight: 700 800; font-style: normal; font-display: swap; } @font-face { font-family: "NeueHaas"; src: url("assets/fonts/neue-haas-black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } /* ============================================================ 3. BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--encre); color: var(--texte); font-family: var(--police); font-size: var(--corps); line-height: var(--corps-lh); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Le lecteur est fixé en bas : on réserve sa hauteur pour que le pied de page ne passe jamais dessous. */ body.a-lecteur { padding-bottom: 84px; } @media (max-width: 767px) { body.a-lecteur { padding-bottom: 72px; } } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--bleu-400); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--bleu-clair); } :root[data-theme="light"] a:hover { color: var(--bleu-600); } /* Un contour visible au clavier, invisible à la souris. */ :focus-visible { outline: 2px solid var(--bleu-400); outline-offset: 3px; border-radius: 4px; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } /* ============================================================ 4. TYPOGRAPHIE Badger sert à quatre choses : le wordmark, le monogramme, les titres de page, et un mot mis en avant par grand titre. Jamais deux dans le même titre, jamais sous 24px, jamais dans un paragraphe. ============================================================ */ h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.18; letter-spacing: -0.024em; } h1 { font-size: clamp(2.125rem, 1.4rem + 3vw, 3.25rem); } /* 34 → 52 */ h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); } /* 24 → 32 */ h3 { font-size: 1.3125rem; letter-spacing: -0.018em; } /* 21 */ h4 { font-size: 1.0625rem; letter-spacing: -0.012em; } /* 17 */ p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .loma-titre-page { font-family: var(--police-titre); font-weight: 400; /* Badger n'a que cette graisse */ letter-spacing: -0.028em; line-height: 1; } /* Le mot mis en avant dans un grand titre. Un seul par titre. */ .loma-accent { font-family: var(--police-titre); font-weight: 400; letter-spacing: -0.03em; } .loma-wordmark { font-family: var(--police-titre); font-weight: 400; font-size: 1.625rem; letter-spacing: -0.035em; color: var(--texte); line-height: 1; } /* Tout ce qui est chiffré et comparé d'une ligne à l'autre : BPM, tonalité, durée, prix. Sans ça les colonnes dansent. */ .loma-nombre, .loma-bpm, .loma-tonalite, .loma-duree, .loma-prix, .woocommerce-Price-amount { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .loma-sur-titre { font-size: var(--meta-petit); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-faible); } .loma-meta { font-size: var(--meta); color: var(--texte-doux); } /* Lisible par les lecteurs d'écran, invisible à l'œil. */ .loma-hors-ecran { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Le lien qui saute la navigation, premier élément focusable de la page. */ .loma-evitement { position: absolute; left: 50%; transform: translate(-50%, -140%); z-index: 200; padding: 12px 22px; background: var(--contraste); color: var(--sur-contraste); border-radius: 0 0 var(--r-petit) var(--r-petit); font-size: var(--ui); font-weight: 700; transition: transform var(--transition); } .loma-evitement:focus { transform: translate(-50%, 0); color: var(--sur-contraste); } /* ============================================================ 5. MISE EN PAGE ============================================================ */ .loma-conteneur { width: 100%; max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--gouttiere); } .loma-lecture { max-width: var(--lecture-max); } @media (max-width: 767px) { :root { --gouttiere: var(--gouttiere-m); } } .loma-section { padding-block: clamp(36px, 4vw, 64px); } /* ============================================================ 6. BOUTONS Trois variantes, pas davantage. La règle du projet est qu'un écran ne porte qu'une seule action principale. ============================================================ */ .loma-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--cible); padding: 0 22px; border: 1px solid transparent; border-radius: var(--pilule); font-size: var(--ui); font-weight: 700; line-height: 1; text-align: center; transition: background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition); } .loma-bouton--principal { background: var(--bleu-500); color: var(--sur-accent); } .loma-bouton--principal:hover { background: var(--bleu-600); color: var(--sur-accent); } /* Le bouton fort d'un écran neutre : inversé plutôt que coloré. */ .loma-bouton--contraste { background: var(--contraste); color: var(--sur-contraste); } .loma-bouton--contraste:hover { opacity: 0.88; color: var(--sur-contraste); } .loma-bouton--fantome { background: transparent; border-color: var(--trait); color: var(--texte); font-weight: 600; } .loma-bouton--fantome:hover { background: var(--graphite); color: var(--texte); } .loma-bouton--grand { min-height: 54px; padding: 0 28px; font-size: 1.0625rem; } .loma-bouton--pleine { width: 100%; } .loma-bouton[disabled], .loma-bouton[aria-disabled="true"] { background: var(--graphite); border-color: var(--trait); color: var(--texte-faible); cursor: not-allowed; pointer-events: none; } /* Bouton icône seul - toujours accompagné d'un aria-label. */ .loma-bouton-icone { display: inline-flex; align-items: center; justify-content: center; width: var(--cible-large); height: var(--cible-large); padding: 0; background: var(--carbone); border: none; border-radius: var(--pilule); color: var(--texte-doux); transition: background var(--transition), color var(--transition); } .loma-bouton-icone:hover { background: var(--graphite); color: var(--texte); } /* ============================================================ 7. CHAMPS ============================================================ */ .loma-champ { display: flex; flex-direction: column; gap: 7px; } .loma-champ > label { font-size: var(--meta-petit); font-weight: 600; color: var(--texte-doux); } input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="number"], input[type="password"], select, textarea { width: 100%; min-height: 52px; padding: 0 18px; background: var(--carbone); border: 1px solid var(--trait); border-radius: var(--r-petit); color: var(--texte); font-size: var(--ui); transition: border-color var(--transition); } textarea { min-height: 128px; padding: 14px 18px; line-height: 1.6; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--texte-faible); } input:focus, select:focus, textarea:focus { border-color: var(--bleu-500); outline: none; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--bleu-400); outline-offset: 2px; } input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--alerte); border-width: 1.5px; } /* Le message dit ce qui manque, pas « champ invalide ». */ .loma-erreur-champ { display: flex; align-items: center; gap: 7px; font-size: var(--meta-petit); color: var(--alerte-doux); } :root[data-theme="light"] .loma-erreur-champ { color: var(--alerte); } input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; flex-shrink: 0; accent-color: var(--bleu-500); } .loma-case { display: flex; align-items: flex-start; gap: 11px; font-size: var(--meta); line-height: 1.55; color: var(--texte-doux); } /* ============================================================ 8. SURFACES ============================================================ */ .loma-carte { background: var(--carbone); border-radius: var(--r-grand); padding: 22px 24px; } .loma-carte--trait { background: transparent; border: 1px solid var(--trait); } .loma-encart { background: var(--bleu-nuit); border-radius: var(--r); padding: 16px 18px; font-size: var(--meta); line-height: 1.6; color: var(--bleu-clair); } .loma-encart--alerte { background: var(--alerte-fond); color: var(--alerte-doux); } .loma-pilule { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--trait); border-radius: var(--pilule); font-size: var(--meta-petit); font-weight: 600; color: var(--texte-doux); white-space: nowrap; transition: border-color var(--transition), color var(--transition), background var(--transition); } .loma-pilule:hover { border-color: var(--texte-faible); color: var(--texte); } .loma-pilule[aria-pressed="true"], .loma-pilule--active { background: var(--bleu-nuit); border-color: var(--bleu-600); color: var(--bleu-clair); } .loma-etiquette { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--pilule); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .loma-etiquette--gratuit { background: var(--bleu-nuit); color: var(--bleu-400); } .loma-etiquette--vendue { background: var(--vendue); color: var(--texte); } :root[data-theme="light"] .loma-etiquette--vendue { color: var(--encre); } /* ============================================================ 9. ÉTATS VIDES Aucune impasse sans sortie : chaque état vide porte au moins un bouton qui ramène vers une prod écoutable. ============================================================ */ .loma-vide { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding-block: 32px; } .loma-vide__icone { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--pilule); background: var(--carbone); color: var(--texte-faible); } .loma-vide__titre { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; } .loma-vide__texte { font-size: var(--corps); color: var(--texte-doux); max-width: 46ch; } .loma-vide__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } /* ============================================================ 10. IMPRESSION Quelqu'un imprimera son contrat ou sa facture depuis le navigateur. Fond blanc, texte noir, liens dépliés. ============================================================ */ @media print { :root { --encre: #FFFFFF; --carbone: #FFFFFF; --graphite: #FFFFFF; --trait: #CCCCCC; --texte: #000000; --texte-doux: #333333; --texte-faible: #666666; } body { background: #FFFFFF; color: #000000; font-size: 11pt; } .loma-entete, .loma-pied, .loma-lecteur, .loma-bouton, .loma-filtres { display: none !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666666; } }