Decoder2704/python-chatbot-jay

1.home {2  --home-max: 1180px;3  padding: 2.5rem 1.25rem 4rem;4  max-width: var(--home-max);5  margin: 0 auto;6}7 8.home__hero {9  display: grid;10  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);11  gap: clamp(2rem, 5vw, 4rem);12  align-items: center;13}14 15.home__title {16  margin: 0 0 1.25rem;17  font-size: clamp(2.25rem, 4.5vw, 3.25rem);18  font-weight: 800;19  line-height: 1.08;20  letter-spacing: -0.035em;21  color: #0f172a;22}23 24.home__highlight {25  color: #6366f1;26  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);27  -webkit-background-clip: text;28  background-clip: text;29  color: transparent;30  -webkit-text-fill-color: transparent;31}32 33.home__sub {34  margin: 0 0 2rem;35  max-width: 32rem;36  font-size: 1.0625rem;37  line-height: 1.65;38  color: #64748b;39}40 41.home__ctas {42  display: flex;43  flex-wrap: wrap;44  gap: 0.75rem 1rem;45}46 47/* Preview card */48.home__preview {49  position: relative;50}51 52.home__preview::before {53  content: "";54  position: absolute;55  inset: -8% -6% auto -6%;56  height: 60%;57  background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, transparent 70%);58  pointer-events: none;59  z-index: 0;60}61 62.home__preview-card {63  position: relative;64  z-index: 1;65  background: #ffffff;66  border: 1px solid rgba(15, 23, 42, 0.08);67  border-radius: 16px;68  padding: 1.25rem 1.35rem;69  box-shadow:70    0 1px 2px rgba(15, 23, 42, 0.05),71    0 12px 40px rgba(15, 23, 42, 0.08);72  transition:73    transform var(--duration-normal) var(--ease-out),74    box-shadow var(--duration-normal) var(--ease-out),75    border-color var(--duration-normal) var(--ease-standard);76}77 78@media (hover: hover) {79  .home__preview:hover .home__preview-card {80    transform: translateY(-4px);81    border-color: rgba(99, 102, 241, 0.18);82    box-shadow:83      0 4px 16px rgba(15, 23, 42, 0.08),84      0 24px 56px rgba(99, 102, 241, 0.12);85  }86}87 88.home__mock-header {89  display: flex;90  align-items: center;91  gap: 0.5rem;92  margin-bottom: 1rem;93  padding-bottom: 0.75rem;94  border-bottom: 1px solid rgba(15, 23, 42, 0.06);95}96 97.home__mock-dots {98  display: flex;99  gap: 0.35rem;100}101 102.home__mock-dots span {103  width: 8px;104  height: 8px;105  border-radius: 50%;106  background: #e2e8f0;107}108 109.home__mock-dots span:first-child {110  background: #fca5a5;111}112 113.home__mock-dots span:nth-child(2) {114  background: #fcd34d;115}116 117.home__mock-dots span:nth-child(3) {118  background: #86efac;119}120 121.home__mock-title {122  flex: 1;123  text-align: center;124  font-size: 0.7rem;125  font-weight: 600;126  letter-spacing: 0.06em;127  text-transform: uppercase;128  color: #94a3b8;129}130 131.home__mock-msg {132  margin-bottom: 0.75rem;133}134 135.home__mock-msg--user {136  display: flex;137  justify-content: flex-end;138}139 140.home__mock-bubble {141  max-width: 92%;142  padding: 0.65rem 0.85rem;143  font-size: 0.8125rem;144  line-height: 1.45;145  border-radius: 12px;146}147 148.home__mock-bubble--user {149  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);150  border: 1px solid rgba(99, 102, 241, 0.2);151  color: #1e1b4b;152}153 154.home__mock-bubble--bot {155  background: #f8fafc;156  border: 1px solid rgba(15, 23, 42, 0.08);157  color: #334155;158}159 160.home__mock-code {161  margin: 0.65rem 0 0;162  padding: 0.65rem 0.75rem;163  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;164  font-size: 0.7rem;165  line-height: 1.5;166  color: #0f172a;167  background: #f1f5f9;168  border: 1px solid rgba(15, 23, 42, 0.06);169  border-radius: 8px;170  overflow-x: auto;171}172 173.home__mock-source {174  display: inline-flex;175  align-items: center;176  margin-top: 0.75rem;177  padding: 0.35rem 0.6rem;178  font-size: 0.65rem;179  font-weight: 600;180  letter-spacing: 0.02em;181  color: #64748b;182  background: rgba(241, 245, 249, 0.9);183  border-radius: 6px;184  border: 1px solid rgba(15, 23, 42, 0.06);185}186 187@media (max-width: 960px) {188  .home__hero {189    grid-template-columns: 1fr;190    gap: clamp(2rem, 5vw, 2.75rem);191  }192 193  .home__preview {194    max-width: 520px;195    margin: 0 auto;196    width: 100%;197  }198}199 200@media (min-width: 481px) and (max-width: 960px) {201  .home {202    padding: 2.25rem clamp(1rem, 4vw, 1.5rem) 3.5rem;203  }204}205 206@media (max-width: 480px) {207  .home {208    padding: 1.5rem 1rem 3rem;209  }210 211  .home__ctas {212    flex-direction: column;213    align-items: stretch;214  }215 216  .home__ctas .ui-btn {217    width: 100%;218    justify-content: center;219  }220}221