/* Theme Name: starterCreative-k-invest Theme URI: https://github.com/startercreative Template: starterCreative Author: Studio Creative Author URI: https://example.com Description: Thème enfant de starterCreative pour K-Invest — Cabinet de gestion de patrimoine à Montpellier. Design basé sur les maquettes Figma K-Invest. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.2 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: k-invest Domain Path: /languages */ /* ========================================================= DESIGN TOKENS — K-Invest (issu des maquettes Figma) ========================================================= */ :root { /* Couleurs principales */ --ki-navy: #162741; /* bleu nuit — fond hero, header, footer */ --ki-navy-deep: #0f1a2c; /* bleu très sombre — fond footer */ --ki-navy-mid: #1e2f4c; /* bleu intermédiaire — cartes hero */ --ki-gold: #bf8d38; /* or — accent principal, CTA, hover */ --ki-gold-dark: #a6772a; /* or foncé — hover boutons */ /* Texte */ --ki-white: #ffffff; --ki-gray-100: #f3f4f6; --ki-gray-200: #e5e7eb; --ki-gray-300: #d1d5db; --ki-gray-400: #9ca3af; --ki-gray-500: #6b7280; --ki-gray-600: #4b5563; --ki-gray-800: #1f2937; /* Couleur de texte secondaire — identique à la référence React : oklch(44.6% .03 256.802) */ --ki-text-muted: oklch(44.6% .03 256.802); /* Couleur de texte tertiaire / placeholders — oklch(0.872 0.01 258.338) */ --ki-text-subtle: oklch(87.2% .01 258.338); /* Fonds */ --ki-bg-light: #f9fafb; --ki-bg-card: #ffffff; /* Typographie */ --ki-font: 'Inter', ui-sans-serif, system-ui, sans-serif; --ki-font-size: 16px; /* Rayons */ --ki-radius-sm: 0.5rem; --ki-radius: 0.75rem; --ki-radius-lg: 1rem; --ki-radius-xl: 1.5rem; --ki-radius-full: 9999px; /* Ombres */ --ki-shadow: 0 4px 24px 0 rgba(22, 39, 65, 0.08); --ki-shadow-gold: 0 8px 24px 0 rgba(191, 141, 56, 0.20); /* Hero CTA or — aligné Hero.tsx (shadow-xl shadow-[#bf8d38]/20) */ --ki-shadow-gold-xl: 0 20px 25px -5px rgba(191, 141, 56, 0.22), 0 8px 10px -6px rgba(191, 141, 56, 0.12); /* CTA navy — aligné Services.tsx / Reviews.tsx (shadow-xl shadow-[#162741]/20) */ --ki-shadow-navy: 0 25px 50px -12px rgba(22, 39, 65, 0.22); /* Hover fond navy plein — entre Services (#1a3154) et Reviews (#1a2e4c) */ --ki-navy-cta-hover: #1a3154; /* Anneau focus clavier (équivalent shadcn ring / WCAG 2.4.7) */ --ki-focus-ring: var(--ki-gold); --ki-focus-ring-strong: var(--ki-navy); --ki-focus-offset: 3px; /* Tokens cartes — shadow-lg shadow-gray-200/50 (Figma) */ --ki-card-border: 1px solid #f3f4f6; --ki-card-shadow: 0 10px 15px -3px rgba(229, 231, 235, 0.5), 0 4px 6px -4px rgba(229, 231, 235, 0.5); --ki-card-shadow-hover: 0 20px 25px -5px rgba(229, 231, 235, 0.6), 0 8px 10px -6px rgba(229, 231, 235, 0.6); /* Transitions */ --ki-transition: all 0.3s ease; --ki-transition-fast: all 0.15s ease; --ki-transition-color: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; /* Opacités navy/gold fréquentes (évite les rgba() hardcodés en CSS) */ --ki-navy-06: rgba(22, 39, 65, 0.06); --ki-navy-08: rgba(22, 39, 65, 0.08); --ki-navy-12: rgba(22, 39, 65, 0.12); --ki-navy-18: rgba(22, 39, 65, 0.18); --ki-navy-22: rgba(22, 39, 65, 0.22); --ki-gold-10: rgba(191, 141, 56, 0.10); --ki-gold-20: rgba(191, 141, 56, 0.20); /* Palette warning/amber (composants alerte fiscale, badges "bad/warn") */ --ki-warning-bg: #fffbeb; --ki-warning-bg-alt: #fefce8; --ki-warning-text: #78350f; --ki-warning-mid: #92400e; --ki-warning-dark: #451a03; --ki-warning-accent: #b45309; --ki-warning-shadow: rgba(180, 83, 9, 0.07); --ki-warning-border: color-mix(in srgb, #b45309 22%, transparent); /* Conteneur */ --ki-container: 1280px; /* Logo (header + pied de page) — largeur d’affichage fixe, ratio conservé */ --ki-logo-width: 10rem; /* Espacement — aligné sur les fallbacks utilisés dans k-invest.css (--ki-space-*) */ --ki-space-3: 0.75rem; --ki-space-4: 1rem; --ki-space-5: 1.25rem; --ki-space-6: 1.5rem; --ki-space-8: 2rem; --ki-space-10: 2.5rem; --ki-space-11: 2.75rem; --ki-space-12: 3rem; --ki-space-16: 4rem; --ki-space-24: 6rem; /* Padding vertical unifié des blocs « section » (pleine largeur) */ --ki-section-padding-y: clamp(3rem, 6vw, 6rem); /* Bordures dérivées (tableaux / séparateurs sur fond clair) */ --ki-border-navy-muted: color-mix(in srgb, var(--ki-navy) 12%, transparent); /* Largeur max typique du fil de lecture article (blocs alignwide) */ --ki-article-prose-max: 48rem; /* Rayons supplémentaires */ --ki-radius-2xl: 2rem; /* Surfaces / bordures sur fond navy (CTA contact) */ --ki-on-navy-border: color-mix(in srgb, var(--ki-white) 10%, transparent); --ki-on-navy-surface: color-mix(in srgb, var(--ki-white) 5%, transparent); --ki-on-navy-divider: color-mix(in srgb, var(--ki-white) 6%, transparent); --ki-on-navy-gold-tint: color-mix(in srgb, var(--ki-gold) 10%, transparent); /* Tailles composants coordonnées */ --ki-contact-coords-icon-size: 2.75rem; --ki-contact-coords-social-hit: 3rem; --ki-cta-booking-icon-wrap: 3.5rem; /* Rail d’ancres (starterCreative anchor-rail) — mappe les --sc-* du parent */ --sc-anchor-scroll-margin: 5.75rem; /* Pastilles : état par défaut navy ; survol + actif gold */ --sc-anchor-dot-bg: var(--ki-navy); --sc-anchor-dot-border: var(--ki-navy); --sc-anchor-dot-bg-hover: var(--ki-gold); --sc-anchor-dot-border-hover: var(--ki-gold-dark); --sc-anchor-dot-active: var(--ki-gold); --sc-anchor-dot-active-border: var(--ki-gold); --sc-anchor-dot-active-hover-bg: var(--ki-gold); --sc-anchor-dot-active-hover-border: var(--ki-gold-dark); --sc-anchor-tip-font-size: 0.9375rem; --sc-anchor-tip-padding: 0.5rem 0.85rem; --sc-anchor-fab-bg: var(--ki-navy); --sc-anchor-fab-bg-hover: var(--ki-navy-mid); --sc-anchor-fab-outline: var(--ki-gold); --sc-anchor-dialog-bg: var(--ki-navy); --sc-anchor-dialog-active: var(--ki-gold); --sc-anchor-tip-bg: color-mix(in srgb, var(--ki-navy-deep) 94%, transparent); --sc-anchor-tip-color: var(--ki-white); } /* ========================================================= RESET & BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--ki-font-size); scroll-behavior: smooth; } body { font-family: var(--ki-font); color: var(--ki-gray-800); background: var(--ki-white); line-height: 1.6; -webkit-font-smoothing: antialiased; } p { margin-bottom: var(--ki-space-6); } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: var(--ki-transition); } a:hover, a:focus-visible { color: var(--ki-gold); text-decoration: none; } /* ========================================================= CONTENEUR CENTRÉ ========================================================= */ .ki-container { max-width: var(--ki-container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }