| |
|
|
| |
| .score-badge { |
| display: inline-flex; align-items: center; gap: 6px; |
| padding: 5px 14px; border-radius: 100px; |
| font-family: 'Syne', sans-serif; font-weight: 700; font-size: .75rem; |
| letter-spacing: .08em; border: 1px solid; |
| } |
| .score-badge.pass { border-color: var(--green); color: var(--green); background: rgba(0,255,178,0.08); } |
| .score-badge.fail { border-color: var(--red); color: var(--red); background: rgba(255,77,109,0.08); } |
|
|
| |
| [data-tip] { position: relative; cursor: help; } |
| [data-tip]::after { |
| content: attr(data-tip); |
| position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); |
| background: rgba(12,17,32,0.95); border: 1px solid var(--border-bright); |
| color: var(--text); font-size: .62rem; letter-spacing: .06em; |
| padding: 5px 10px; border-radius: 6px; white-space: nowrap; |
| pointer-events: none; opacity: 0; transition: opacity .15s; |
| backdrop-filter: blur(12px); |
| } |
| [data-tip]:hover::after { opacity: 1; } |
|
|
