BlackArmOperator/Operator-Voice-Agent

1:root {2    --bg: #05070c;3    --panel: rgba(255,255,255,0.03);4    --border: rgba(255,255,255,0.08);5    --text: #e6e9ef;6    --muted: #9aa4b2;7    --blue: #4ea1ff;8    --green: #22c55e;9  }10 11  body {12    margin: 0;13    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;14    background: radial-gradient(circle at top, #0b1220, var(--bg));15    color: var(--text);16  }17 18  /* Topbar */19  .topbar {20    display:flex;21    justify-content:space-between;22    align-items:center;23    padding:18px 40px;24    border-bottom:1px solid var(--border);25    backdrop-filter: blur(10px);26  }27 28  .logo img {29    width: 140px;30    opacity: 0.95;31  }32 33  .badge {34    font-size:12px;35    padding:6px 10px;36    border:1px solid var(--border);37    border-radius:999px;38    color: var(--green);39    background: rgba(34,197,94,0.08);40  }41 42  /* Layout */43  .container {44    max-width: 980px;45    margin: 0 auto;46    padding: 60px 20px;47    text-align: center;48  }49 50  h1 {51    font-size: 42px;52    letter-spacing: -0.5px;53    margin-bottom: 10px;54    background: linear-gradient(90deg, #ffffff, #4ea1ff);55    -webkit-background-clip: text;56    -webkit-text-fill-color: transparent;57  }58 59  .subtitle {60    font-size: 16px;61    color: var(--muted);62    max-width: 720px;63    margin: 0 auto 30px auto;64    line-height: 1.6;65  }66 67  /* Feature cards */68  .grid {69    display: grid;70    grid-template-columns: repeat(3, 1fr);71    gap: 12px;72    margin-top: 30px;73  }74 75  .card {76    background: var(--panel);77    border: 1px solid var(--border);78    border-radius: 12px;79    padding: 14px;80    font-size: 13px;81    color: var(--muted);82  }83 84  .card strong {85    color: var(--text);86    display:block;87    margin-bottom:4px;88  }89 90  /* CTA hint */91  .cta {92    margin-top: 35px;93    font-size: 13px;94    color: var(--muted);95  }96 97  .cta span {98    color: var(--blue);99    font-weight: 600;100  }101 102  /* Widget */103  .widget-wrapper {104    margin-top: 30px;105    display:flex;106    justify-content:center;107  }108 109  #black-arm-operator {110    width: 520px;111    border-radius: 14px;112    border: 1px solid var(--border);113    box-shadow: 0 0 40px rgba(78,161,255,0.08);114    overflow: hidden;115  }116 117  /* Responsive */118  @media (max-width: 900px) {119    .grid {120      grid-template-columns: 1fr;121    }122    h1 {123      font-size: 32px;124    }125  }126 127.cta-section {128  margin-top: 50px;129  padding: 30px;130  border: 1px solid rgba(255,255,255,0.08);131  border-radius: 14px;132  background: rgba(255,255,255,0.02);133  backdrop-filter: blur(10px);134}135 136.cta-section h2 {137  font-size: 22px;138  margin-bottom: 10px;139  color: #ffffff;140}141 142.cta-section p {143  font-size: 14px;144  color: #9aa4b2;145  line-height: 1.6;146  max-width: 700px;147  margin: 0 auto 15px auto;148}149 150.cta-button {151  display: inline-block;152  margin-top: 10px;153  padding: 12px 20px;154  background: linear-gradient(90deg, #2f6bff, #4ea1ff);155  color: white;156  text-decoration: none;157  font-weight: 600;158  border-radius: 10px;159  box-shadow: 0 0 20px rgba(78,161,255,0.25);160  transition: transform 0.2s ease, box-shadow 0.2s ease;161}162 163.cta-button:hover {164  transform: translateY(-2px);165  box-shadow: 0 0 30px rgba(78,161,255,0.35);166}167 168.cta-sub {169  margin-top: 10px;170  font-size: 12px;171  color: #6b7280;172}173