diff --git a/frontend/src/components/ConsultorCard.css b/frontend/src/components/ConsultorCard.css index 6f1cff9..f31b0b8 100644 --- a/frontend/src/components/ConsultorCard.css +++ b/frontend/src/components/ConsultorCard.css @@ -3,7 +3,6 @@ background: linear-gradient(155deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid var(--stroke); border-radius: 18px; - overflow: hidden; box-shadow: var(--shadow); transition: transform 200ms ease, border 200ms ease, box-shadow 200ms ease; cursor: pointer; @@ -13,13 +12,13 @@ .ranking-card::before { content: ""; position: absolute; - inset: -40% auto auto -40%; - width: 60%; - height: 160%; - background: radial-gradient(circle at center, rgba(79,70,229,0.18), transparent 55%); - transform: rotate(-8deg); + inset: 0; + width: 100%; + height: 100%; + background: radial-gradient(circle at -20% 50%, rgba(79,70,229,0.18), transparent 40%); opacity: 0.8; pointer-events: none; + border-radius: inherit; } .ranking-card:hover { @@ -175,6 +174,7 @@ border-top: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); position: relative; + overflow: visible; } .details-grid { @@ -189,7 +189,7 @@ border: 1px solid var(--stroke); border-radius: 12px; padding: 0.9rem 1rem 0.75rem; - overflow: hidden; + overflow: visible; } .detail-section h4 { @@ -206,10 +206,14 @@ flex-wrap: wrap; gap: 0.55rem; margin-top: 0.4rem; + overflow: visible; + position: relative; } .score-breakdown .score-item, -.score-breakdown-total .score-item { +.score-breakdown-total .score-item, +.score-breakdown .score-item-wrapper .score-item, +.score-breakdown-total .score-item-wrapper .score-item { width: 58px; height: 58px; display: flex; @@ -241,6 +245,82 @@ color: var(--muted); } +.score-item-wrapper { + position: relative; + display: inline-block; +} + +.score-item-wrapper .score-item { + cursor: help; + transition: transform 150ms ease, border-color 150ms ease; +} + +.score-item-wrapper:hover .score-item { + transform: scale(1.05); + border-color: var(--accent); +} + +.score-tooltip { + position: absolute; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98)); + border: 1px solid var(--accent); + border-radius: 8px; + padding: 0.6rem 0.8rem; + font-size: 0.75rem; + line-height: 1.4; + color: var(--text); + white-space: pre-line; + min-width: 180px; + max-width: 280px; + text-align: left; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); + opacity: 0; + visibility: hidden; + transition: opacity 200ms ease, visibility 200ms ease; + z-index: 100; + pointer-events: none; +} + +.score-tooltip::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border: 6px solid transparent; + border-top-color: var(--accent); +} + +.score-item-wrapper:hover .score-tooltip { + opacity: 1; + visibility: visible; +} + +.score-item-wrapper:first-child .score-tooltip { + left: 0; + transform: translateX(0); +} + +.score-item-wrapper:first-child .score-tooltip::after { + left: 29px; + transform: translateX(0); +} + +.score-item-wrapper:last-child .score-tooltip { + left: auto; + right: 0; + transform: translateX(0); +} + +.score-item-wrapper:last-child .score-tooltip::after { + left: auto; + right: 20px; + transform: translateX(0); +} + .extra-details { margin-top: 1.5rem; background: rgba(255,255,255,0.02);