/* ================================================================================ FORMATION PAGES - SHARED CARD FINISH One finish for every card grid of the formation pages: larger radius, soft accent glow, accent border and lift on hover, and a tinted icon tile that fills on hover. Theme colors come from the --ct-* tokens (shared/FormationTheme.css), so the light and dark themes follow without extra rules. Loaded after the section stylesheets: layout (grid, padding, content) stays in them. ================================================================================ */ .complete-training-page :is( .nos-formation-aide__card, .training-approach, .training-format-card, .sales-mtl-benefits__card, .sales-mtl-skills__list li, .coaching-seo-card, .coaching-objective, .prospection-seo-card, .prospection-work__item, .prospection-channel-card, .client-followup-seo-card, .closing-seo-card, .closing-objection-card, .closing-before-card, .complete-overview__challenge-card, .complete-overview__result-card, .complete-overview__sector-card, .complete-overview__format-card, .complete-overview__location-card ) { border: 1px solid var(--ct-border-soft); border-radius: 16px; background: radial-gradient( 120% 70% at 0% 0%, color-mix(in srgb, var(--ct-accent) 7%, transparent), transparent 60% ), linear-gradient(165deg, var(--ct-surface), var(--ct-surface-soft)); box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent) inset, 0 14px 34px -18px color-mix(in srgb, var(--ct-accent) 38%, transparent), 0 2px 8px rgba(15, 23, 42, 0.04); /* Keep the scroll reveal (styles/scroll-animations.css) and add the hover properties: the hover lift uses `translate`, so it never fights the reveal's `transform` */ transition: opacity var(--animation-duration, 800ms) var(--animation-easing-elegant) var(--animation-delay, 0ms), transform var(--animation-duration, 800ms) var(--animation-easing-overshoot) var(--animation-delay, 0ms), translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease; } .complete-training-page :is( .nos-formation-aide__card, .training-format-card, .sales-mtl-benefits__card, .sales-mtl-skills__list li, .coaching-seo-card, .coaching-objective, .prospection-seo-card, .prospection-work__item, .prospection-channel-card, .client-followup-seo-card, .closing-seo-card, .closing-objection-card, .closing-before-card, .complete-overview__challenge-card, .complete-overview__result-card, .complete-overview__sector-card, .complete-overview__format-card, .complete-overview__location-card ):hover { translate: 0 -3px; border-color: color-mix(in srgb, var(--ct-accent) 42%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent) inset, 0 24px 44px -20px color-mix(in srgb, var(--ct-accent) 55%, transparent), 0 2px 8px rgba(15, 23, 42, 0.05); } /* Icon tiles: tinted gradient at rest, solid accent on card hover */ .complete-training-page :is( .nos-formation-aide__icon, .sales-mtl-benefits__card .sales-mtl-icon, .sales-mtl-skills__icon, .coaching-seo-icon:not(.coaching-seo-icon--dark), .prospection-seo-icon, .client-followup-seo-icon, .closing-seo-icon, .complete-overview__large-icon ) { border: 1px solid color-mix(in srgb, var(--ct-accent) 20%, transparent); background: linear-gradient( 135deg, color-mix(in srgb, var(--ct-accent) 16%, transparent), color-mix(in srgb, var(--ct-accent) 5%, transparent) ); color: var(--ct-accent); transition: transform 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* These icons were bare glyphs: give them the same tile as the others */ .complete-training-page :is(.nos-formation-aide__icon, .sales-mtl-skills__icon, .complete-overview__large-icon) { width: 3.1rem; height: 3.1rem; border-radius: 14px; filter: none; } .complete-training-page :is(.nos-formation-aide__icon, .sales-mtl-skills__icon, .complete-overview__large-icon) svg { width: 1.6rem; height: 1.6rem; } .complete-training-page :is( .nos-formation-aide__card, .sales-mtl-benefits__card, .sales-mtl-skills__list li, .coaching-seo-card, .coaching-objective, .prospection-seo-card, .prospection-work__item, .client-followup-seo-card, .closing-seo-card, .closing-objection-card, .closing-before-card, .complete-overview__challenge-card, .complete-overview__result-card, .complete-overview__sector-card, .complete-overview__format-card ):hover :is( .nos-formation-aide__icon, .sales-mtl-icon, .sales-mtl-skills__icon, .coaching-seo-icon, .prospection-seo-icon, .client-followup-seo-icon, .closing-seo-icon, .complete-overview__large-icon, .complete-overview__format-icon ) { transform: rotate(-4deg) scale(1.05); border-color: transparent; background: linear-gradient( 135deg, var(--ct-accent), color-mix(in srgb, var(--ct-accent) 70%, #6366f1) ); color: #ffffff; } @media (hover: none), (prefers-reduced-motion: reduce) { .complete-training-page :is( .nos-formation-aide__card, .training-format-card, .sales-mtl-benefits__card, .sales-mtl-skills__list li, .coaching-seo-card, .coaching-objective, .prospection-seo-card, .prospection-work__item, .prospection-channel-card, .client-followup-seo-card, .closing-seo-card, .closing-objection-card, .closing-before-card, .complete-overview__challenge-card, .complete-overview__result-card, .complete-overview__sector-card, .complete-overview__format-card, .complete-overview__location-card ):hover { translate: none; } .complete-training-page :is( .nos-formation-aide__card, .sales-mtl-benefits__card, .sales-mtl-skills__list li, .coaching-seo-card, .coaching-objective, .prospection-seo-card, .prospection-work__item, .client-followup-seo-card, .closing-seo-card, .closing-objection-card, .closing-before-card, .complete-overview__challenge-card, .complete-overview__result-card, .complete-overview__sector-card, .complete-overview__format-card ):hover :is( .nos-formation-aide__icon, .sales-mtl-icon, .sales-mtl-skills__icon, .coaching-seo-icon, .prospection-seo-icon, .client-followup-seo-icon, .closing-seo-icon, .complete-overview__large-icon, .complete-overview__format-icon ) { transform: none; } }