malikparth05/alpha-sentiment-engine

1:root {2  --cream: #F5F0E8;3  --cream2: #EDE8DD;4  --cream3: #E2DBD0;5  --ink: #1C1A17;6  --gold: #A88B5A;7  --gold-glow: rgba(184, 146, 74, 0.2);8  --border: rgba(216, 209, 196, 0.4);9}10 11* { margin: 0; padding: 0; box-sizing: border-box; }12 13body {14  background: var(--cream);15  color: var(--ink);16  font-family: 'DM Sans', sans-serif;17  overflow-x: hidden;18  min-height: 100vh;19}20 21.landing-noise {22  position: fixed;23  inset: 0;24  background: url('https://grainy-gradients.vercel.app/noise.svg');25  opacity: 0.15;26  pointer-events: none;27  z-index: 50;28}29 30/* ---- Splatter Background (The Theme) ---- */31.splatter-bg {32  position: fixed;33  inset: 0;34  z-index: 0;35  pointer-events: none;36  overflow: hidden;37}38 39.splat {40  position: absolute;41  filter: blur(80px);42  border-radius: 50%;43  opacity: 0.25;44}45 46.splat-1 {47  width: 800px; height: 800px;48  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);49  top: -200px; right: -200px;50  animation: float 25s infinite alternate;51}52 53.splat-2 {54  width: 600px; height: 600px;55  background: radial-gradient(circle, #D8D1C4 0%, transparent 60%);56  bottom: -100px; left: -100px;57}58 59.splat-3 {60  width: 400px; height: 400px;61  background: var(--gold-glow);62  top: 40%; left: 10%;63  filter: blur(120px);64}65 66@keyframes float {67  0% { transform: translate(0, 0) scale(1); }68  100% { transform: translate(100px, 150px) scale(1.1); }69}70 71/* ---- Navigation ---- */72.glass-nav {73  position: fixed;74  top: 0; left: 0; width: 100%;75  padding: 30px 40px;76  z-index: 100;77  backdrop-filter: blur(10px);78  -webkit-backdrop-filter: blur(10px);79  border-bottom: 1px solid var(--border);80}81 82.nav-content {83  display: flex;84  justify-content: space-between;85  align-items: center;86  max-width: 1400px;87  margin: 0 auto;88  padding: 0 24px;89}90 91.logo {92  font-family: 'Playfair Display', serif;93  font-size: 24px;94  font-weight: 700;95  letter-spacing: -1px;96}97 98.logo span {99  font-weight: 400; color: var(--gold);100  margin-left: 4px;101}102 103.nav-links {104  display: flex; gap: 30px; align-items: center;105}106 107.nav-links a {108  text-decoration: none; color: var(--ink);109  font-size: 14px; text-transform: uppercase;110  letter-spacing: 2px; transition: color 0.3s;111}112 113.cta-mini {114  background: var(--ink); color: var(--cream) !important;115  padding: 10px 24px; border-radius: 40px;116  font-weight: 700; letter-spacing: 1px;117}118 119/* ---- Hero Section (Couture Impact) ---- */120.hero {121  min-height: 100vh;122  display: flex;123  align-items: center;124  padding: clamp(100px, 15vh, 140px) clamp(24px, 5vw, 80px) 40px;125  max-width: 1400px;126  margin: 0 auto;127  position: relative;128  z-index: 10;129}130 131.hero-content { flex: 1; position: relative; }132 133.badge-reveal {134  font-family: 'DM Mono', monospace;135  font-size: 11px;136  text-transform: uppercase;137  letter-spacing: 4px;138  color: var(--gold);139  margin-bottom: 24px;140  overflow: hidden;141}142 143.badge-reveal span {144  display: block;145  animation: reveal-up 1s cubic-bezier(0.2, 0.8, 0.2, 1);146}147 148h1 {149  font-family: 'Playfair Display', serif;150  font-size: clamp(4rem, 15vw, 15rem);151  line-height: 0.8;152  margin-left: -0.5vw;153  letter-spacing: -4px;154  font-weight: 900;155  color: var(--ink);156  text-shadow: 0 10px 30px rgba(28,26,23,0.05);157  animation: reveal-up 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);158}159 160.hero-tagline {161  font-family: 'DM Sans', sans-serif;162  font-size: clamp(1.5rem, 4vw, 2.6rem);163  font-weight: 300;164  margin: 30px 0;165  max-width: 800px;166  color: #4A4540;167}168 169.accent { font-family: 'Playfair Display', serif; font-style: italic; color: var(--gold); }170 171.hero-desc {172  font-size: 18px; line-height: 1.6;173  max-width: 500px; color: #8A837A;174  margin-bottom: 40px;175}176 177.hero-actions { display: flex; gap: 20px; }178 179.btn-primary {180  background: var(--ink); color: var(--cream);181  padding: 18px 40px; border-radius: 50px;182  text-decoration: none; font-weight: 700;183  box-shadow: 0 10px 30px rgba(28,26,23,0.15);184  transition: transform 0.3s;185}186 187.btn-secondary {188  border: 1px solid var(--border);189  padding: 18px 40px; border-radius: 50px;190  text-decoration: none; font-weight: 700; color: var(--ink);191  transition: background 0.3s;192}193 194.btn-primary:hover, .btn-secondary:hover { transform: translateY(-5px); }195 196/* ---- Features Grid (Bento) ---- */197.features { padding: 120px 80px; max-width: 1400px; margin: 0 auto; position: relative; }198 199.section-header { margin-bottom: 60px; }200.section-header h3 { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 6px; color: var(--gold); margin-bottom: 10px; }201.section-header p { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 300; }202 203.feature-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-bottom: 30px;}204 205.f-card {206  padding: 50px 40px;207  border-radius: 32px;208  background: rgba(255,255,255,0.4);209  border: 1px solid var(--border);210  transition: transform 0.4s, border-color 0.4s;211  position: relative;212  overflow: hidden;213}214 215.f-card:hover { transform: translateY(-10px); background: #FFF; border-color: var(--gold); }216 217.f-icon { font-size: 32px; margin-bottom: 30px; color: var(--gold); }218.f-card h4 { font-size: 22px; margin-bottom: 15px; }219.f-card p { color: #8A837A; line-height: 1.5; }220 221/* ---- Code Glass (Engine Detail) ---- */222.code-glass {223  background: #1C1A17;224  color: #EDE8DD;225  padding: 40px;226  border-radius: 24px;227  font-family: 'DM Mono', monospace;228  font-size: 13px;229  line-height: 1.6;230  border: 1px solid rgba(184, 146, 74, 0.3);231  position: relative;232  box-shadow: 0 20px 50px rgba(0,0,0,0.2);233}234 235.code-header {236  display: flex; gap: 8px; margin-bottom: 20px;237  border-bottom: 1px solid rgba(255,255,255,0.1);238  padding-bottom: 15px;239}240 241.dot { width: 10px; height: 10px; border-radius: 50%; background: #4A4540; }242.dot.gold { background: var(--gold); }243 244.code-glass pre { color: #8A837A; }245.code-glass .gold { color: var(--gold); }246 247/* ---- Intelligence Layer ---- */248.intelligence {249  background: #FFF;250  padding: 140px 80px;251  position: relative;252  overflow: hidden;253}254 255.intel-grid {256  display: grid;257  grid-template-columns: 1fr 1.5fr;258  gap: 100px;259  max-width: 1400px;260  margin: 0 auto;261  align-items: center;262}263 264.intel-content h2 {265  font-family: 'Playfair Display', serif;266  font-size: 56px;267  margin-bottom: 30px;268  line-height: 1;269}270 271.intel-content p {272  font-size: 18px;273  color: var(--ink2);274  line-height: 1.7;275  margin-bottom: 40px;276}277 278.signal-flow {279  display: grid;280  grid-template-columns: repeat(2, 1fr);281  gap: 20px;282}283 284.flow-step {285  padding: 30px;286  border-bottom: 1px solid var(--border);287}288 289.flow-num { font-family: 'DM Mono', monospace; color: var(--gold); margin-bottom: 10px; font-size: 11px; }290.flow-step h5 { font-size: 18px; margin-bottom: 10px; }291.flow-step p { font-size: 14px; color: var(--ink3); }292 293/* ---- Simulator Prototype ---- */294.sim-box {295  background: var(--cream);296  padding: 40px;297  border-radius: 20px;298  border: 1px solid var(--border);299}300 301.sim-input {302  width: 100%;303  background: transparent;304  border: none;305  border-bottom: 2px solid var(--ink);306  padding: 15px 0;307  font-family: 'Playfair Display', serif;308  font-size: 24px;309  margin-bottom: 30px;310  outline: none;311}312 313.sim-result {314  min-height: 60px;315  display: flex;316  align-items: center;317  gap: 20px;318}319 320.sim-indicator {321  width: 40px; height: 40px;322  border-radius: 50%;323  background: var(--border);324  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);325}326 327.sim-indicator.active-bullish { background: #2D6A4F; box-shadow: 0 0 20px rgba(45,106,79,0.3); }328.sim-indicator.active-bearish { background: #C0392B; box-shadow: 0 0 20px rgba(192,57,43,0.3); }329 330.sim-msg { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--gold); }331 332/* ---- Animations ---- */333@keyframes reveal-up {334  from { transform: translateY(100%); opacity: 0; }335  to { transform: translateY(0); opacity: 1; }336}337 338@media (max-width: 1024px) {339  .hero { flex-direction: column; text-align: center; }340  .hero-tagline { margin: 30px auto; }341  .hero-desc { margin: 0 auto 40px; }342  .hero-actions { justify-content: center; }343  .feature-grid { grid-template-columns: 1fr; }344  .intel-grid { grid-template-columns: 1fr; gap: 60px; text-align: center; }345  .signal-flow { grid-template-columns: 1fr; }346}347 348@media (max-width: 768px) {349  .hero { padding-top: 120px; }350  .features, .intelligence { padding: 80px 24px; }351  .glass-nav { padding: 16px 0; }352  .nav-links a:not(.cta-mini) { display: none; } /* Hide only text links */353  .cta-mini { padding: 8px 16px; font-size: 12px; }354  .f-card { padding: 30px 24px; }355}356 357@media (max-width: 480px) {358  h1 { font-size: clamp(3.5rem, 25vw, 8rem); margin-bottom: 20px; }359  .hero-tagline { font-size: 1.4rem; line-height: 1.3; }360  .section-header p { font-size: 22px; }361  .hero-actions { flex-direction: column; width: 100%; }362  .btn-primary, .btn-secondary { width: 100%; text-align: center; }363}364