DataScope26/WEB

1.company-card {2  background-color: #13131f;3  border: 0.0625rem solid #1f2133;4  border-radius: 0.375rem;5  padding: 1.5rem 1.375rem 1.25rem;6  cursor: pointer;7  position: relative;8  overflow: hidden;9  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;10 11  /* subtle top accent line, hidden by default */12  outline: none;13}14 15.company-card::before {16  content: '';17  position: absolute;18  top: 0;19  left: 0;20  right: 0;21  height: 0.125rem;22  background: #2ee88a;23  transform: scaleX(0);24  transform-origin: left;25  transition: transform 0.25s ease;26}27 28.company-card:hover,29.company-card:focus-visible {30  border-color: #2ee88a;31  transform: translateY(-0.1875rem);32  box-shadow: 0 0.5rem 1.75rem rgba(0, 230, 118, 0.08);33}34 35.company-card:hover::before,36.company-card:focus-visible::before {37  transform: scaleX(1);38}39 40/* "click to enter" chevron — visible on hover */41.company-card__arrow {42  position: absolute;43  top: 1.125rem;44  right: 1.125rem;45  color: #2ee88a;46  font-size: 1rem;47  opacity: 0;48  transform: translateX(-0.25rem);49  transition: opacity 0.2s ease, transform 0.2s ease;50}51 52.company-card:hover .company-card__arrow,53.company-card:focus-visible .company-card__arrow {54  opacity: 1;55  transform: translateX(0);56}57 58/* ── Logo area ───────────────────────────────────────────────────────── */59.company-card__logo-wrap {60  width: 3.25rem;61  height: 3.25rem;62  border-radius: 0.625rem;63  background-color: #1c1c2e;64  border: 0.0625rem solid #2a2a40;65  display: flex;66  align-items: center;67  justify-content: center;68  margin-bottom: 1rem;69  overflow: hidden;70}71 72.company-card__logo {73  width: 2.25rem;74  height: 2.25rem;75  object-fit: contain;76}77 78.company-card__logo-placeholder {79  font-size: 1.3rem;80  font-weight: 700;81  color: #2ee88a;82  line-height: 1;83}84 85/* ── Text ────────────────────────────────────────────────────────────── */86.company-card__name {87  font-size: 1rem;88  font-weight: 600;89  color: #ffffff;90  margin: 0 0 0.625rem 0;91  white-space: nowrap;92  overflow: hidden;93  text-overflow: ellipsis;94}95 96/* ── Plan badge ──────────────────────────────────────────────────────── */97.company-card__plan {98  display: inline-flex;99  align-items: center;100  gap: 0.375rem;101  font-size: 0.72rem;102  font-weight: 600;103  text-transform: uppercase;104  letter-spacing: 0.07em;105  padding: 0.25rem 0.625rem;106  border-radius: 0.1875rem;107}108 109.company-card__plan--basic {110  color: #90a4ae;111  background-color: rgba(144, 164, 174, 0.1);112  border: 0.0625rem solid rgba(144, 164, 174, 0.2);113}114 115.company-card__plan--pro {116  color: #2ee88a;117  background-color: rgba(0, 230, 118, 0.08);118  border: 0.0625rem solid rgba(0, 230, 118, 0.2);119}120 121.company-card__plan--enterprise {122  color: #ffd740;123  background-color: rgba(255, 215, 64, 0.07);124  border: 0.0625rem solid rgba(255, 215, 64, 0.2);125}126 127.company-card__plan-dot {128  width: 0.375rem;129  height: 0.375rem;130  border-radius: 50%;131  background-color: currentColor;132}133 134/* ── CTA hint at the bottom of each card ────────────────────────────── */135.company-card__cta {136  margin-top: 1.25rem;137  padding-top: 0.875rem;138  border-top: 0.0625rem solid #1f2133;139  font-size: 0.75rem;140  color: #3a4455;141  display: flex;142  align-items: center;143  gap: 0.3125rem;144  transition: color 0.2s ease;145}146 147.company-card:hover .company-card__cta {148  color: #2ee88a;149}