/* ============================================================================ MURATTRADE_UZ · NEON SIGNAL — production design tokens & components Vanilla CSS. Framework-agnostic. Mobile-first. Подключение шрифтов — см. в index.html. ============================================================================ */ :root{ /* ——— палитра ——— */ --bg: #05080C; /* фон блоков */ --bg-2: #0A1018; /* второй слой */ --panel: rgba(20,30,40,.5); /* стеклянные карточки */ --neon: #3DF59B; /* основной неон (рост, CTA, акцент) */ --neon-2: #37E0FF; /* вторичный неон (cyan, данные) */ --down: #FF6B5A; /* падение / негатив */ --candle-dn: #1C6B4F; /* тусклая свеча вниз */ --white: #EAF2EE; /* основной текст */ --mut: rgba(234,242,238,.60); /* приглушённый текст */ --dim: rgba(234,242,238,.40); /* самый тусклый */ --line: rgba(61,245,155,.22); /* неон-рамки */ --grid: rgba(61,245,155,.06); /* сетка фона */ /* ——— типографика ——— */ --font: 'Manrope', system-ui, -apple-system, sans-serif; --font-disp: 'Unbounded', sans-serif; /* заголовки */ --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* данные/лейблы */ /* ——— радиусы / свечение ——— */ --r-sm:9px; --r-md:13px; --r-lg:18px; --glow-strong: 0 0 32px rgba(61,245,155,.45); --glow-soft: 0 0 26px rgba(61,245,155,.55); } *{box-sizing:border-box} .neon-root{ background:var(--bg); color:var(--white); font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ============================================================================ БЛОК-ОБОЛОЧКА — каждый hero это .nblock (mobile-first, центр-колонка) ============================================================================ */ .nblock{ position:relative; overflow:hidden; background:var(--bg); color:var(--white); width:100%; max-width:430px; margin:0 auto; min-height:760px; display:flex; flex-direction:column; isolation:isolate; } /* фоновая неон-сетка */ .n-grid{position:absolute; inset:0; z-index:-1; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:26px 26px;} /* радиальное свечение */ .n-glow{position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 38% at 50% 40%, rgba(61,245,155,.16), transparent 72%);} /* зерно/текстура поверх */ .n-grain{position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.4; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px;} /* слои фона уходят под контент (z-index:-1), зерно — поверх (z-index:5). .nblock{isolation:isolate} держит эти z-index внутри блока. */ /* ============================================================================ ЛОГО-ЗНАК (используется через ) ============================================================================ */ .mark{display:block; flex:none;} /* ШАПКА */ .n-head{position:relative; z-index:3; display:flex; align-items:center; gap:9px; padding:20px 22px;} .n-brand{font-weight:800; font-size:15px; letter-spacing:-.02em; color:var(--white);} .n-brand b{color:var(--neon); font-weight:800;} .n-live{margin-left:auto; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; color:var(--neon); display:flex; align-items:center; gap:6px;} .n-live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--neon); box-shadow:0 0 8px var(--neon); animation:n-blink 1.4s infinite;} /* ТИПОГРАФИКА */ .kicker{font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; color:var(--mut); text-transform:uppercase;} .h-display{font-family:var(--font-disp); font-weight:800; letter-spacing:-.03em; line-height:.9; color:var(--white);} .h-neon{color:var(--neon); text-shadow:var(--glow-soft);} .h-outline{color:transparent; -webkit-text-stroke:1.5px var(--white);} .lede{color:var(--mut); font-size:14px; line-height:1.5;} .mono{font-family:var(--font-mono);} /* CTA */ .btn-neon{display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--neon); color:#03130B; font-weight:800; font-size:18px; padding:17px; border-radius:var(--r-md); text-decoration:none; box-shadow:var(--glow-strong); transition:transform .15s, box-shadow .15s; min-height:56px; justify-content:center;} .btn-neon:hover{transform:translateY(-2px); box-shadow:0 0 42px rgba(61,245,155,.6);} .btn-neon small{font-size:11px; font-weight:600; opacity:.65;} /* МЕТРИКИ (стекло) */ .metrics{display:flex; gap:10px;} .metric{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; backdrop-filter:blur(6px);} .metric .k{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; color:rgba(234,242,238,.55);} .metric .v{font-weight:800; font-size:21px; margin-top:4px; color:var(--white);} .metric .v.cy{color:var(--neon-2);} /* нижний блок CTA-зоны */ .n-foot{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:0 22px 26px;} /* ============================================================================ A · ПУЛЬС ============================================================================ */ .pulse-kicker{text-align:center; letter-spacing:.28em; margin-top:18px;} .pulse-wrap{position:relative; margin-top:30px;} .pulse-callout{position:absolute; left:50%; top:0; transform:translateX(-50%); background:rgba(5,8,12,.8); border:1px solid var(--neon); border-radius:9px; padding:8px 13px; font-family:var(--font-mono); font-size:13px; backdrop-filter:blur(3px);} .pulse-callout b{color:var(--neon); font-weight:700;} .pulse-callout span{color:var(--mut);} .pulse-foot .h-display{font-size:58px; text-align:center;} /* ============================================================================ B · ПРИЦЕЛ / HUD ============================================================================ */ .radar{position:relative; height:330px; margin-top:14px;} .radar .core-glow{position:absolute; inset:0; background:radial-gradient(40% 40% at 50% 50%, rgba(61,245,155,.14), transparent 70%);} .ring{position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%); border:1px solid rgba(61,245,155,.3);} .ring.r1{width:300px;height:300px;border-color:rgba(61,245,155,.35);} .ring.r2{width:220px;height:220px;border-color:rgba(61,245,155,.28);} .ring.r3{width:140px;height:140px;border-color:rgba(61,245,155,.22);} .ring.r4{width:60px;height:60px;border-color:rgba(61,245,155,.5);} .cross-h,.cross-v{position:absolute; left:50%; top:50%; background:rgba(61,245,155,.25);} .cross-h{width:320px;height:1px;transform:translate(-50%,-50%);} .cross-v{width:1px;height:320px;transform:translate(-50%,-50%);} .sweep{position:absolute; left:50%; top:50%; width:300px; height:300px; transform:translate(-50%,-50%); border-radius:50%; background:conic-gradient(from 0deg, rgba(61,245,155,.32), transparent 28%); animation:n-spin 3.6s linear infinite;} .radar-core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); filter:drop-shadow(0 0 10px var(--neon));} .blip{position:absolute; transform:translate(-50%,-50%); text-align:center;} .blip i{display:block; width:8px; height:8px; border-radius:50%; margin:0 auto; background:var(--neon); box-shadow:0 0 8px var(--neon);} .blip.dn i{background:var(--down); box-shadow:0 0 8px var(--down);} .blip span{font-family:var(--font-mono); font-size:9px; color:var(--white); margin-top:4px; white-space:nowrap; display:block;} .blip b{color:var(--neon);} .blip.dn b{color:var(--down);} .hud-kicker{text-align:center; letter-spacing:.2em; color:var(--neon); font-family:var(--font-mono); font-size:10.5px;} .hud-kicker::before{content:"● ";} .reticle-foot .h-display{font-size:46px; text-align:center; line-height:.92;} /* ============================================================================ C · КАНДЛЫ ============================================================================ */ .crown{display:flex; justify-content:flex-end; padding:8px 24px 0; text-align:right;} .crown .lbl{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; color:var(--mut);} .crown .num{font-weight:800; font-size:60px; letter-spacing:-.04em; line-height:.9; color:var(--neon); text-shadow:0 0 28px rgba(61,245,155,.5);} .candles{position:relative; height:330px; margin:10px 18px 0;} .candles .sig{position:absolute; inset:0; width:100%; height:100%;} .candle-row{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-between;} .candle{position:relative; width:18px; display:flex; align-items:center; justify-content:center;} .candle .wick{position:absolute; top:0; bottom:0; width:2px; background:var(--neon); opacity:.5;} .candle .body{width:100%; border-radius:2px; background:var(--neon); box-shadow:0 0 12px rgba(61,245,155,.5);} .candle.dn .wick{background:var(--candle-dn);} .candle.dn .body{background:var(--candle-dn); box-shadow:none;} .candles-foot .h-display{font-size:54px;} /* ============================================================================ D · ГЛУБИНА ============================================================================ */ .depth{background:linear-gradient(180deg,#05080C 0%,#061410 58%,#0a2a1e 100%);} .depth .sky{position:absolute; top:120px; left:0; opacity:.5; z-index:1;} .depth .horizon{position:absolute; left:0; right:0; top:52%; height:2px; z-index:1; background:var(--neon); box-shadow:0 0 30px 8px rgba(61,245,155,.6);} .depth .horizon-glow{position:absolute; left:0; right:0; top:52%; height:240px; z-index:1; background:radial-gradient(60% 100% at 50% 0%, rgba(61,245,155,.28), transparent 70%);} .depth .floor{position:absolute; left:-50%; right:-50%; top:52%; bottom:0; z-index:1; background-image: linear-gradient(rgba(61,245,155,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(61,245,155,.35) 1px, transparent 1px); background-size:44px 44px; transform:perspective(320px) rotateX(64deg); transform-origin:top center;} .depth-top{position:absolute; left:0; right:0; top:17%; padding:0 22px; text-align:center; z-index:2;} .depth-top .h-display{font-size:62px; line-height:.88; margin-top:14px;} /* ============================================================================ KEYFRAMES ============================================================================ */ @keyframes n-spin{to{transform:translate(-50%,-50%) rotate(360deg);}} @keyframes n-blink{0%,100%{opacity:1;} 50%{opacity:.25;}} @media (prefers-reduced-motion: reduce){ .sweep, .n-live::before{animation:none;} .btn-neon{transition:none;} }