Piyush23890/Sign_Language_Decoder

1/* ═══════════════════════════════════════════════════════2   SignBridge — style.css3   Dark glassmorphism UI theme4   ═══════════════════════════════════════════════════════ */5 6/* ── Reset & base ───────────────────────────────────────── */7*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }8 9:root {10  --bg:          #0f172a;11  --card:        rgba(30, 41, 59, 0.75);12  --border:      rgba(255,255,255,0.10);13  --primary:     #3b82f6;14  --primary-glow:rgba(59,130,246,0.35);15  --accent:      #10b981;16  --accent-glow: rgba(16,185,129,0.35);17  --danger:      #ef4444;18  --text:        #f1f5f9;19  --muted:       #94a3b8;20  --radius:      14px;21  --font:        'Outfit', system-ui, sans-serif;22}23 24html, body {25  height: 100%;26  font-family: var(--font);27  color: var(--text);28  background: var(--bg);29  overflow: hidden;30}31 32body {33  background:34    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59,130,246,.12), transparent),35    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(16,185,129,.10), transparent),36    var(--bg);37}38 39/* ── Layout ──────────────────────────────────────────────── */40.main-container {41  height: 100vh;42  display: grid;43  grid-template-rows: auto 1fr;44  gap: 16px;45  padding: 16px;46  max-width: 1440px;47  margin: 0 auto;48}49 50.content-grid {51  display: grid;52  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);53  gap: 16px;54  overflow: hidden;55  min-height: 0;56}57 58/* ── Header ──────────────────────────────────────────────── */59header {60  display: flex;61  align-items: center;62  justify-content: space-between;63  padding: 12px 20px;64  background: var(--card);65  backdrop-filter: blur(12px);66  border: 1px solid var(--border);67  border-radius: var(--radius);68}69 70.logo-container {71  display: flex;72  align-items: center;73  gap: 14px;74}75 76.logo-fallback {77  width: 48px;78  height: 48px;79  border-radius: 50%;80  background: linear-gradient(135deg, var(--primary), var(--accent));81  display: flex;82  align-items: center;83  justify-content: center;84  font-size: 18px;85  font-weight: 700;86  color: #fff;87  flex-shrink: 0;88}89 90header h1 {91  font-size: 1.55rem;92  font-weight: 700;93  background: linear-gradient(135deg, #fff 40%, #94d2fe);94  -webkit-background-clip: text;95  -webkit-text-fill-color: transparent;96  background-clip: text;97  line-height: 1.2;98}99 100.tagline {101  font-size: 0.78rem;102  color: var(--muted);103  margin-top: 2px;104}105 106.header-right {107  display: flex;108  align-items: center;109  gap: 8px;110  font-size: 0.85rem;111  color: var(--accent);112}113 114.status-dot {115  width: 9px;116  height: 9px;117  background: var(--accent);118  border-radius: 50%;119  box-shadow: 0 0 8px var(--accent-glow);120  animation: pulse 2s ease-in-out infinite;121}122 123@keyframes pulse {124  0%, 100% { opacity: 1; transform: scale(1); }125  50%       { opacity: .6; transform: scale(.9); }126}127 128/* ── Video section ───────────────────────────────────────── */129.video-section {130  background: var(--card);131  backdrop-filter: blur(12px);132  border: 1px solid var(--border);133  border-radius: var(--radius);134  display: flex;135  align-items: center;136  justify-content: center;137  padding: 16px;138  min-height: 0;139}140 141.video-wrapper {142  position: relative;143  width: 100%;144  height: 100%;145  max-height: 100%;146  border-radius: 10px;147  overflow: hidden;148  background: #000;149  box-shadow: 0 8px 32px rgba(0,0,0,.5);150}151 152.video-feed {153  width: 100%;154  height: 100%;155  object-fit: cover;156  display: block;157}158 159/* Floating detected sign badge */160.sign-badge {161  position: absolute;162  bottom: 14px;163  left: 14px;164  background: rgba(15,23,42,.80);165  backdrop-filter: blur(8px);166  border: 1px solid var(--border);167  border-radius: 10px;168  padding: 8px 16px;169  display: flex;170  flex-direction: column;171  align-items: flex-start;172}173 174.sign-label {175  font-size: 0.68rem;176  text-transform: uppercase;177  letter-spacing: .08em;178  color: var(--muted);179}180 181.sign-value {182  font-size: 1.6rem;183  font-weight: 700;184  color: var(--accent);185  min-width: 1.5ch;186  transition: color .2s;187}188 189/* ── Control panel ───────────────────────────────────────── */190.control-panel {191  display: flex;192  flex-direction: column;193  gap: 14px;194  min-height: 0;195  overflow-y: auto;196}197 198/* Action buttons */199.btn-row {200  display: flex;201  gap: 10px;202}203 204.btn {205  flex: 1;206  padding: 12px 10px;207  border: none;208  border-radius: 10px;209  font-family: var(--font);210  font-size: 0.9rem;211  font-weight: 600;212  cursor: pointer;213  transition: transform .15s, box-shadow .15s, background .15s;214}215.btn:active { transform: scale(.97); }216 217.btn-speak {218  background: var(--primary);219  color: #fff;220  box-shadow: 0 4px 14px var(--primary-glow);221}222.btn-speak:hover { background: #2563eb; box-shadow: 0 6px 18px var(--primary-glow); }223 224.btn-backspace {225  background: rgba(255,255,255,.10);226  color: var(--text);227}228.btn-backspace:hover { background: rgba(255,255,255,.18); }229 230.btn-clear {231  background: rgba(239,68,68,.18);232  color: var(--danger);233}234.btn-clear:hover { background: var(--danger); color: #fff; }235 236/* Generic card */237.card {238  background: var(--card);239  backdrop-filter: blur(12px);240  border: 1px solid var(--border);241  border-radius: var(--radius);242  padding: 16px 18px;243  display: flex;244  flex-direction: column;245  gap: 10px;246}247 248.card-header {249  display: flex;250  align-items: center;251  justify-content: space-between;252}253 254.card-label {255  font-size: 0.72rem;256  text-transform: uppercase;257  letter-spacing: .09em;258  color: var(--muted);259  font-weight: 500;260}261 262.card-actions {263  display: flex;264  align-items: center;265  gap: 8px;266}267 268/* Sentence text */269.sentence-card { flex: 1 1 auto; }270 271.sentence-text {272  min-height: 72px;273  max-height: 220px;274  overflow-y: auto;275  background: rgba(0,0,0,.25);276  border-radius: 8px;277  padding: 14px;278  font-size: 1.55rem;279  font-weight: 500;280  line-height: 1.45;281  color: #fff;282  word-break: break-word;283}284 285/* Speech text */286.speech-text {287  min-height: 56px;288  background: rgba(0,0,0,.25);289  border-radius: 8px;290  padding: 14px;291  font-size: 1.1rem;292  font-weight: 400;293  line-height: 1.5;294  color: var(--accent);295  word-break: break-word;296}297 298/* Language select */299.lang-select {300  background: rgba(255,255,255,.08);301  color: var(--muted);302  border: 1px solid var(--border);303  padding: 3px 8px;304  border-radius: 7px;305  font-family: var(--font);306  font-size: 0.78rem;307  cursor: pointer;308  outline: none;309}310.lang-select:focus { border-color: var(--primary); }311 312/* Icon button */313.icon-btn {314  background: none;315  border: none;316  font-size: 1.1rem;317  cursor: pointer;318  transition: transform .2s;319  padding: 2px 4px;320  line-height: 1;321}322.icon-btn:hover { transform: scale(1.2); }323 324/* Mic button */325.mic-btn {326  background: rgba(255,255,255,.10);327  color: var(--muted);328  border: 1px solid var(--border);329  padding: 5px 12px;330  border-radius: 20px;331  font-family: var(--font);332  font-size: 0.80rem;333  cursor: pointer;334  transition: background .2s, color .2s, box-shadow .2s;335}336.mic-btn:hover { background: rgba(255,255,255,.18); }337.mic-btn.active {338  background: var(--accent);339  color: #000;340  font-weight: 600;341  box-shadow: 0 0 12px var(--accent-glow);342  animation: pulseMic 1.4s ease-in-out infinite;343}344 345@keyframes pulseMic {346  0%, 100% { box-shadow: 0 0 10px var(--accent-glow); }347  50%       { box-shadow: 0 0 22px var(--accent-glow); }348}349 350/* Keyboard shortcut hints */351.shortcuts {352  display: flex;353  gap: 12px;354  flex-wrap: wrap;355  margin-top: auto;356  padding-top: 4px;357}358 359.shortcut {360  font-size: 0.72rem;361  color: var(--muted);362  display: flex;363  align-items: center;364  gap: 4px;365}366 367kbd {368  background: rgba(255,255,255,.12);369  border: 1px solid var(--border);370  border-radius: 4px;371  padding: 2px 6px;372  font-size: 0.68rem;373  font-family: var(--font);374  color: var(--text);375}376 377/* ── Scrollbar ───────────────────────────────────────────── */378::-webkit-scrollbar { width: 5px; }379::-webkit-scrollbar-track { background: transparent; }380::-webkit-scrollbar-thumb { background: rgba(255,255,255,.20); border-radius: 10px; }381::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }382 383/* ── Responsive fallback ─────────────────────────────────── */384@media (max-width: 820px) {385  .content-grid {386    grid-template-columns: 1fr;387    grid-template-rows: auto auto;388    overflow-y: auto;389  }390  html, body { overflow: auto; }391  .main-container { height: auto; min-height: 100vh; }392  .video-wrapper { height: 300px; }393}394