/* Core Bridge — Skin « Aurora » (signature, défaut recommandé) */ /* Personnalité : moderne, premium, chaleureux. Profondeur par ombres colorées */ /* multi-niveaux (dérivées de la primaire via color-mix), coins doux maîtrisés, */ /* CTA en dégradé dérivé, moments forts scénarisés. */ /* NE redéfinit QUE des tokens de personnalité — la palette reste héritée du thème.*/ .crb-skin--aurora { /* Coins doux maîtrisés */ --crb-radius: 14px; --crb-radius-sm: 10px; --crb-radius-lg: 22px; /* Profondeur : ombres colorées (dérivées de la primaire, pas du noir pur), en DEUX couches par niveau. Un objet réel projette un contact net et serré juste sous lui, et une ambiance large et diluée. La couche de contact reste neutre (elle décrit le point d'appui, pas la lumière ambiante) ; seule la couche large est teintée — c'est elle qui donne à ce skin sa chaleur. */ /* TROIS couches, et l'ordre compte : 1. contact — net, serré, neutre : c'est lui qui pose l'objet sur le plan ; 2. chute — large, neutre, tirée vers le bas : c'est LUI qui porte le poids. L'ancienne version confiait ce rôle à une couche corail, qui à faible opacité se lit comme une buée rose et non comme une ombre — d'où des cartes qui restaient plates sur fond clair ; 3. halo — corail, très large et très dilué : la signature chaleureuse du skin, en dernier plan, où elle réchauffe sans porter la structure. */ --crb-shadow-sm: 0 1px 2px color-mix(in srgb, var(--crb-text) 5%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--crb-text) 10%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--crb-primary) 22%, transparent); --crb-shadow-md: 0 1px 2px color-mix(in srgb, var(--crb-text) 5%, transparent), 0 14px 32px -12px color-mix(in srgb, var(--crb-text) 18%, transparent), 0 20px 44px -18px color-mix(in srgb, var(--crb-primary) 30%, transparent); --crb-shadow-lg: 0 2px 4px color-mix(in srgb, var(--crb-text) 6%, transparent), 0 28px 56px -20px color-mix(in srgb, var(--crb-text) 24%, transparent), 0 36px 72px -28px color-mix(in srgb, var(--crb-primary) 34%, transparent); /* CTA : primaire en dégradé subtil + halo doux au repos */ --crb-cta-end: color-mix(in srgb, var(--crb-primary) 70%, #7c3aed); --crb-cta-bg: linear-gradient(135deg, var(--crb-primary), var(--crb-cta-end)); /* Survol : par défaut le CTA ne change PAS de couleur (hover-base = primaire, donc le dégradé de survol est identique à celui du repos) et le retour visuel passe uniquement par le halo (règle `.crb-btn--primary:hover` plus bas). L'ancienne version recalculait la borne haute du dégradé avec 38 % de violet au lieu de 30 % : le bouton virait au mauve terne dès que la souris le touchait, et « Envoyer un message » (Découvrir, fiche profil) ne ressemblait plus au CTA de l'accueil. Si l'admin force une couleur de survol, elle arrive par `--crb-cta-hover-base` et alimente la MÊME recette de dégradé : le skin garde son identité, et les deux dégradés ayant angle et nombre de bornes identiques, la transition est interpolable (donc lisse, sans bascule discrète). */ --crb-cta-hover-base: var(--crb-primary); --crb-cta-end-hover: color-mix(in srgb, var(--crb-cta-hover-base) 70%, #7c3aed); --crb-cta-bg-hover: linear-gradient(135deg, var(--crb-cta-hover-base), var(--crb-cta-end-hover)); --crb-cta-shadow: 0 6px 16px color-mix(in srgb, var(--crb-primary) 34%, transparent); /* Hiérarchie typo nette : titres serrés et marqués */ --crb-heading-weight: 700; --crb-heading-tracking: -.01em; /* Mouvement : easing « expressif doux » */ --crb-ease: cubic-bezier(.22, 1, .36, 1); --crb-dur-base: .22s; --crb-transition: var(--crb-dur-base) var(--crb-ease); /* Élévation au survol un peu plus marquée : c'est la signature du skin — des surfaces qui flottent. */ --crb-lift: -3px; /* Lèvre un peu plus marquée : ce skin joue la profondeur, sa tranche doit se voir. */ --crb-edge-highlight: inset 0 -1px 0 color-mix(in srgb, var(--crb-text) 9%, transparent); } /* Cartes qui « flottent » : survol = légère élévation. */ .crb-skin--aurora .crb-card { transition: transform var(--crb-dur-base) var(--crb-ease), box-shadow var(--crb-dur-base) var(--crb-ease); } .crb-skin--aurora .crb-card:hover { transform: translateY(var(--crb-lift)); box-shadow: var(--crb-edge-highlight), var(--crb-shadow-lg); } /* CTA primaire : halo accentué au survol (valorise l'action sans criard). */ .crb-skin--aurora .crb-btn--primary:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--crb-primary) 42%, transparent); } /* Badge premium : finition « doré mat » dérivée de --crb-premium. */ .crb-skin--aurora .crb-badge--premium { background: linear-gradient(135deg, var(--crb-premium), color-mix(in srgb, var(--crb-premium) 78%, #c47f00)); } /* ── E3 Découvrir/Swipe : moments forts scénarisés ─────────────────────── */ /* Like : dégradé chaleureux + halo accentué au survol. */ .crb-skin--aurora .crb-swipe-btn--like { background: linear-gradient(135deg, var(--crb-like), color-mix(in srgb, var(--crb-like) 72%, var(--crb-premium))); } .crb-skin--aurora .crb-swipe-btn--like:hover { box-shadow: 0 10px 28px color-mix(in srgb, var(--crb-like) 56%, transparent); } .crb-skin--aurora .crb-swipe-btn--super:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--crb-superlike) 46%, transparent); } /* Carte de devant : profondeur multi-couches renforcée + tranche éclairée. C'est l'objet le plus manipulé du produit : c'est sur lui que la matière doit être la plus lisible. */ .crb-skin--aurora .crb-swipe-card--top { box-shadow: var(--crb-edge-highlight), var(--crb-shadow-lg), 0 2px 6px color-mix(in srgb, var(--crb-primary) 10%, transparent); } /* ── E4 Messages : bulles « mine » en dégradé dérivé + envoi cohérent ──── */ /* La couleur admin (--crb-bubble-mine-bg) l'emporte si définie ; sinon dégradé signature. */ .crb-skin--aurora .crb-bubble--mine { background: var(--crb-bubble-mine-bg, linear-gradient(135deg, var(--crb-secondary), color-mix(in srgb, var(--crb-secondary) 78%, #7c3aed))); } /* ── E7 Fiche profil : profondeur carte + galerie qui « flotte » ───────── */ .crb-skin--aurora .crb-profile { box-shadow: var(--crb-shadow-lg); } /* …sauf là où la carte est DISSOUTE. En « Immersif » (--full) et en « Fiche » (--minimal), main.css rend `.crb-profile` transparent et sans relief au-delà de 1024px : chaque colonne devient sa propre surface. Mais la règle ci-dessus pèse (0,2,0) contre (0,1,0) pour le `box-shadow: none` de la media query — une media query n'ajoute AUCUNE spécificité — et ce fichier est chargé après main.css : l'ombre revenait donc sur un conteneur vide, sous la forme d'un grand rectangle en relief flottant autour des deux colonnes (visible dans les gouttières, sous la photo et sous le CTA). Symptôme propre au seul skin Aurora, d'où le correctif ici plutôt que dans main.css. Sous 1024px la fiche redevient une carte pleine : l'ombre de la règle ci-dessus reste alors légitime. */ @media (min-width: 1024px) { .crb-skin--aurora .crb-profile--full, .crb-skin--aurora .crb-profile--minimal { box-shadow: none; } } .crb-skin--aurora .crb-profile__gallery-item { transition: transform var(--crb-dur-base) var(--crb-ease), box-shadow var(--crb-dur-base) var(--crb-ease); } .crb-skin--aurora button.crb-profile__gallery-item:hover { transform: scale(1.04); box-shadow: var(--crb-shadow-md); } /* Overlay de match : halo radial doux derrière le contenu. */ .crb-skin--aurora .crb-match-content::before { content: ''; position: absolute; inset: -40px; z-index: -1; background: radial-gradient(circle at center, color-mix(in srgb, var(--crb-premium) 30%, transparent), transparent 70%); pointer-events: none; }