1105 lines
46 KiB
HTML
1105 lines
46 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ROI24 — Данные. Без шума.</title>
|
||
<meta name="description" content="Один дашборд. Все ключевые цифры. Подключаем 1С, CRM, банки и рекламу.">
|
||
<link rel="preconnect" href="https://fonts.cdnfonts.com">
|
||
<link href="https://fonts.cdnfonts.com/css/inter" rel="stylesheet">
|
||
<link href="https://fonts.cdnfonts.com/css/jetbrains-mono" rel="stylesheet">
|
||
<style>
|
||
/* ============================================================
|
||
IBM-INSPIRED DESIGN TOKENS
|
||
Geometric, grid-visible, data-as-visual
|
||
============================================================ */
|
||
:root {
|
||
--bg: #050507;
|
||
--surface: #0c0c0f;
|
||
--card: #111115;
|
||
--border: rgba(255,255,255,0.08);
|
||
--border-strong: rgba(255,255,255,0.16);
|
||
--text: #f0f0f2;
|
||
--text-sec: #71717a;
|
||
--text-dim: #3f3f46;
|
||
--accent: #22c55e;
|
||
--accent-dim: rgba(34,197,94,0.08);
|
||
--blue: #3b82f6;
|
||
--blue-dim: rgba(59,130,246,0.08);
|
||
--amber: #f59e0b;
|
||
--red: #ef4444;
|
||
--red-dim: rgba(239,68,68,0.08);
|
||
--font: 'Inter', -apple-system, 'Segoe UI', sans-serif;
|
||
--mono: 'JetBrains Mono', 'SF Mono', monospace;
|
||
--grid: 8px;
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||
body {
|
||
background: var(--bg); color: var(--text); font-family: var(--font);
|
||
line-height: 1.5; overflow-x: hidden;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* ============================================================
|
||
GRID OVERLAY — visible structure, IBM hallmark
|
||
============================================================ */
|
||
body::before {
|
||
content: ''; position: fixed; inset: 0; z-index: 0;
|
||
pointer-events: none;
|
||
background-image:
|
||
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
|
||
background-size: calc(var(--grid) * 12) calc(var(--grid) * 12);
|
||
}
|
||
|
||
a { text-decoration: none; color: inherit; }
|
||
img { max-width: 100%; display: block; }
|
||
ul { list-style: none; }
|
||
|
||
/* ============================================================
|
||
LAYOUT
|
||
============================================================ */
|
||
.wrap {
|
||
max-width: 1280px; margin: 0 auto; padding: 0 32px;
|
||
}
|
||
section { padding: 120px 0; position: relative; z-index: 1; }
|
||
|
||
.section-label {
|
||
font-size: 0.6875rem; text-transform: uppercase;
|
||
letter-spacing: 0.18em; color: var(--accent);
|
||
margin-bottom: 16px; font-weight: 600;
|
||
font-family: var(--mono);
|
||
}
|
||
|
||
/* ============================================================
|
||
HEADER — IBM: minimal, structural
|
||
============================================================ */
|
||
.header {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
height: 64px; display: flex; align-items: center;
|
||
background: rgba(5,5,7,0.85); backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.header .wrap {
|
||
display: flex; align-items: center; justify-content: space-between; width: 100%;
|
||
}
|
||
.logo {
|
||
font-size: 1.125rem; font-weight: 800; letter-spacing: -0.03em;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.logo-mark {
|
||
width: 28px; height: 28px; border-radius: 6px;
|
||
background: var(--accent); display: flex; align-items: center;
|
||
justify-content: center; font-family: var(--mono);
|
||
font-size: 0.75rem; font-weight: 700; color: #000;
|
||
}
|
||
.nav { display: flex; align-items: center; gap: 40px; }
|
||
.nav a {
|
||
font-size: 0.8125rem; color: var(--text-sec);
|
||
transition: color 0.2s; letter-spacing: 0.01em;
|
||
}
|
||
.nav a:hover { color: var(--text); }
|
||
.header-actions { display: flex; align-items: center; gap: 20px; }
|
||
.header-phone {
|
||
font-size: 0.8125rem; color: var(--text-sec); font-family: var(--mono);
|
||
}
|
||
|
||
/* Buttons */
|
||
.btn {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
gap: 8px; padding: 10px 20px; border-radius: 4px;
|
||
font-weight: 600; font-size: 0.8125rem; cursor: pointer;
|
||
border: none; transition: all 0.2s ease; letter-spacing: 0.01em;
|
||
}
|
||
.btn-accent {
|
||
background: var(--accent); color: #000; font-family: var(--mono);
|
||
}
|
||
.btn-accent:hover { background: #16a34a; }
|
||
.btn-outline {
|
||
background: transparent; border: 1px solid var(--border-strong);
|
||
color: var(--text);
|
||
}
|
||
.btn-outline:hover { border-color: var(--text); }
|
||
.btn-lg { padding: 14px 28px; font-size: 0.875rem; }
|
||
|
||
/* ============================================================
|
||
HERO — Split: left content, right data panel
|
||
============================================================ */
|
||
.hero {
|
||
padding: 160px 0 80px; min-height: 90vh;
|
||
display: flex; align-items: center;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.hero-inner {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
|
||
align-items: start;
|
||
}
|
||
|
||
.hero-left { padding-top: 20px; }
|
||
|
||
.hero-label {
|
||
font-size: 0.6875rem; text-transform: uppercase;
|
||
letter-spacing: 0.2em; color: var(--accent);
|
||
margin-bottom: 24px; font-family: var(--mono);
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.hero-label::before {
|
||
content: ''; width: 16px; height: 1px; background: var(--accent);
|
||
}
|
||
|
||
h1 {
|
||
font-size: clamp(3rem, 6vw, 5rem); font-weight: 800;
|
||
letter-spacing: -0.04em; line-height: 0.95; margin-bottom: 24px;
|
||
}
|
||
h1 .accent { color: var(--accent); }
|
||
|
||
.hero-sub {
|
||
font-size: 1.125rem; color: var(--text-sec);
|
||
margin-bottom: 40px; max-width: 440px; line-height: 1.65;
|
||
}
|
||
|
||
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
|
||
|
||
.hero-meta {
|
||
margin-top: 48px; padding-top: 32px;
|
||
border-top: 1px solid var(--border);
|
||
display: flex; gap: 48px;
|
||
}
|
||
.hero-meta-item {
|
||
display: flex; flex-direction: column; gap: 4px;
|
||
}
|
||
.hero-meta-value {
|
||
font-size: 1.75rem; font-weight: 800; font-family: var(--mono);
|
||
letter-spacing: -0.03em;
|
||
}
|
||
.hero-meta-label {
|
||
font-size: 0.75rem; color: var(--text-dim);
|
||
text-transform: uppercase; letter-spacing: 0.08em;
|
||
}
|
||
|
||
/* ============================================================
|
||
RIGHT PANEL — IBM Grid Dashboard
|
||
Asymmetric bento with visible borders
|
||
============================================================ */
|
||
.hero-right {
|
||
border: 1px solid var(--border);
|
||
background: var(--surface);
|
||
}
|
||
.dash-header {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 16px 24px; border-bottom: 1px solid var(--border);
|
||
}
|
||
.dash-brand {
|
||
font-size: 0.75rem; font-weight: 600; font-family: var(--mono);
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.dash-status {
|
||
display: flex; align-items: center; gap: 6px;
|
||
font-size: 0.6875rem; color: var(--accent); font-family: var(--mono);
|
||
}
|
||
.dash-dot {
|
||
width: 6px; height: 6px; background: var(--accent);
|
||
border-radius: 50%;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
|
||
|
||
.dash-body { display: grid; }
|
||
|
||
/* Row 1: Big number spanning full width */
|
||
.dash-big {
|
||
grid-column: 1 / -1; padding: 40px 24px;
|
||
border-bottom: 1px solid var(--border);
|
||
text-align: right;
|
||
}
|
||
.dash-big-label {
|
||
font-size: 0.6875rem; color: var(--text-dim);
|
||
text-transform: uppercase; letter-spacing: 0.12em;
|
||
margin-bottom: 8px; font-family: var(--mono);
|
||
}
|
||
.dash-big-value {
|
||
font-size: clamp(3rem, 5vw, 5rem); font-weight: 800;
|
||
font-family: var(--mono); letter-spacing: -0.04em;
|
||
line-height: 1;
|
||
}
|
||
.dash-big-value .accent { color: var(--accent); }
|
||
.dash-big-trend {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
margin-left: 16px; font-size: 0.875rem; color: var(--accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Row 2: Two columns */
|
||
.dash-cell {
|
||
padding: 24px; border-bottom: 1px solid var(--border);
|
||
border-right: 1px solid var(--border);
|
||
}
|
||
.dash-cell:nth-child(2n) { border-right: none; }
|
||
.dash-cell-label {
|
||
font-size: 0.6875rem; color: var(--text-dim);
|
||
text-transform: uppercase; letter-spacing: 0.1em;
|
||
margin-bottom: 8px; font-family: var(--mono);
|
||
}
|
||
.dash-cell-value {
|
||
font-size: 1.5rem; font-weight: 700; font-family: var(--mono);
|
||
letter-spacing: -0.02em; margin-bottom: 4px;
|
||
}
|
||
.dash-cell-sub {
|
||
font-size: 0.75rem; color: var(--text-sec);
|
||
}
|
||
|
||
/* Row 3: Three mini cards */
|
||
.dash-tri {
|
||
display: grid; grid-template-columns: 1fr 1fr 1fr;
|
||
}
|
||
.dash-mini {
|
||
padding: 20px; border-right: 1px solid var(--border);
|
||
text-align: center;
|
||
}
|
||
.dash-mini:last-child { border-right: none; }
|
||
.dash-mini-label {
|
||
font-size: 0.625rem; color: var(--text-dim);
|
||
text-transform: uppercase; letter-spacing: 0.1em;
|
||
margin-bottom: 8px; font-family: var(--mono);
|
||
}
|
||
.dash-mini-value {
|
||
font-size: 1.25rem; font-weight: 700; font-family: var(--mono);
|
||
margin-bottom: 4px;
|
||
}
|
||
.dash-mini-bar {
|
||
height: 3px; border-radius: 2px;
|
||
background: var(--border); overflow: hidden; margin-top: 8px;
|
||
}
|
||
.dash-mini-fill {
|
||
height: 100%; border-radius: 2px;
|
||
background: var(--accent);
|
||
transition: width 1s ease;
|
||
}
|
||
|
||
/* Segment toggle */
|
||
.dash-toggle {
|
||
display: flex; border-top: 1px solid var(--border);
|
||
}
|
||
.dash-toggle-btn {
|
||
flex: 1; padding: 10px; border: none; background: transparent;
|
||
font-size: 0.6875rem; color: var(--text-dim); cursor: pointer;
|
||
font-family: var(--mono); text-transform: uppercase;
|
||
letter-spacing: 0.08em; transition: all 0.2s;
|
||
border-right: 1px solid var(--border);
|
||
}
|
||
.dash-toggle-btn:last-child { border-right: none; }
|
||
.dash-toggle-btn.active, .dash-toggle-btn:hover {
|
||
background: var(--accent-dim); color: var(--accent);
|
||
}
|
||
|
||
/* ============================================================
|
||
SECTION: GRID MANIFESTO
|
||
Bold statement section
|
||
============================================================ */
|
||
.manifesto {
|
||
padding: 160px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.manifesto-inner {
|
||
max-width: 1280px; margin: 0 auto; padding: 0 32px;
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
|
||
align-items: center;
|
||
}
|
||
.manifesto-number {
|
||
font-size: 8rem; font-weight: 800; font-family: var(--mono);
|
||
letter-spacing: -0.05em; line-height: 0.9;
|
||
color: var(--text-dim);
|
||
}
|
||
.manifesto-number .accent { color: var(--accent); }
|
||
.manifesto-content h2 {
|
||
font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 800;
|
||
letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 24px;
|
||
}
|
||
.manifesto-content p {
|
||
font-size: 1rem; color: var(--text-sec); line-height: 1.7;
|
||
margin-bottom: 16px; max-width: 480px;
|
||
}
|
||
|
||
/* ============================================================
|
||
SECTION: PROBLEMS — IBM card list
|
||
============================================================ */
|
||
.problems-grid {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
|
||
border: 1px solid var(--border);
|
||
}
|
||
.problem-card {
|
||
padding: 40px 32px; border-right: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
transition: all 0.3s; position: relative;
|
||
}
|
||
.problem-card:nth-child(3n) { border-right: none; }
|
||
.problem-card:nth-last-child(-n+3) { border-bottom: none; }
|
||
.problem-card:hover {
|
||
background: var(--accent-dim);
|
||
}
|
||
.problem-num {
|
||
font-size: 0.6875rem; color: var(--text-dim);
|
||
font-family: var(--mono); margin-bottom: 20px;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.problem-card h3 {
|
||
font-size: 1.25rem; font-weight: 700; margin-bottom: 12px;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.problem-card p {
|
||
font-size: 0.875rem; color: var(--text-sec); line-height: 1.6;
|
||
}
|
||
|
||
/* ============================================================
|
||
SECTION: SOLUTION — Big feature
|
||
============================================================ */
|
||
.solution-section { border-bottom: 1px solid var(--border); }
|
||
.solution-grid {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
|
||
border: 1px solid var(--border);
|
||
}
|
||
.sol-card {
|
||
padding: 48px 32px; border-right: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
transition: all 0.3s;
|
||
}
|
||
.sol-card:nth-child(3n) { border-right: none; }
|
||
.sol-card:nth-last-child(-n+3) { border-bottom: none; }
|
||
.sol-card:hover { background: var(--accent-dim); }
|
||
.sol-icon {
|
||
width: 40px; height: 40px; border: 1px solid var(--accent);
|
||
border-radius: 8px; display: flex; align-items: center;
|
||
justify-content: center; margin-bottom: 24px;
|
||
font-size: 1.25rem;
|
||
}
|
||
.sol-card h3 {
|
||
font-size: 1.125rem; font-weight: 700; margin-bottom: 10px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.sol-card p {
|
||
font-size: 0.875rem; color: var(--text-sec); line-height: 1.6;
|
||
}
|
||
|
||
/* ============================================================
|
||
SECTION: COMPARISON — IBM table
|
||
============================================================ */
|
||
.comparison { background: var(--surface); border-bottom: 1px solid var(--border); }
|
||
.comp-table {
|
||
width: 100%; border-collapse: collapse; font-size: 0.875rem;
|
||
}
|
||
.comp-table thead th {
|
||
text-align: left; padding: 20px 24px;
|
||
font-weight: 600; font-size: 0.6875rem;
|
||
color: var(--text-dim); text-transform: uppercase;
|
||
letter-spacing: 0.12em; border-bottom: 1px solid var(--border-strong);
|
||
}
|
||
.comp-table thead th:last-child { color: var(--accent); }
|
||
.comp-table tbody td {
|
||
padding: 18px 24px; border-bottom: 1px solid var(--border);
|
||
color: var(--text-sec);
|
||
}
|
||
.comp-table tbody tr:hover td { background: rgba(255,255,255,0.01); }
|
||
.comp-yes { color: var(--accent); font-weight: 600; }
|
||
.comp-no { color: var(--text-dim); }
|
||
|
||
/* ============================================================
|
||
SECTION: HOW IT WORKS — IBM Steps
|
||
============================================================ */
|
||
.steps { border-bottom: 1px solid var(--border); }
|
||
.steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
|
||
.step {
|
||
padding: 32px 24px; border-right: 1px solid var(--border);
|
||
position: relative;
|
||
}
|
||
.step:last-child { border-right: none; }
|
||
.step-num {
|
||
font-size: 2.5rem; font-weight: 800; font-family: var(--mono);
|
||
color: var(--accent); letter-spacing: -0.03em;
|
||
margin-bottom: 16px; line-height: 1;
|
||
}
|
||
.step h3 {
|
||
font-size: 1rem; font-weight: 700; margin-bottom: 6px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.step p {
|
||
font-size: 0.8125rem; color: var(--text-sec); line-height: 1.6;
|
||
}
|
||
.step-time {
|
||
font-size: 0.6875rem; color: var(--text-dim); font-family: var(--mono);
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* ============================================================
|
||
SECTION: PRICING — IBM: stark, bold
|
||
============================================================ */
|
||
.pricing { border-bottom: 1px solid var(--border); }
|
||
.price-card {
|
||
max-width: 560px; margin: 0 auto;
|
||
border: 1px solid var(--border-strong); padding: 64px 48px;
|
||
text-align: center; position: relative;
|
||
}
|
||
.price-card::before {
|
||
content: ''; position: absolute; top: 0; left: 0; right: 0;
|
||
height: 2px; background: var(--accent);
|
||
}
|
||
.price-name {
|
||
font-size: 0.75rem; text-transform: uppercase;
|
||
letter-spacing: 0.15em; color: var(--text-dim);
|
||
font-family: var(--mono); margin-bottom: 24px;
|
||
}
|
||
.price-amount {
|
||
font-size: 4rem; font-weight: 800; font-family: var(--mono);
|
||
letter-spacing: -0.04em; margin-bottom: 8px;
|
||
}
|
||
.price-amount .unit {
|
||
font-size: 0.25em; color: var(--text-sec); font-weight: 400;
|
||
}
|
||
.price-sub {
|
||
font-size: 0.875rem; color: var(--text-sec); margin-bottom: 40px;
|
||
}
|
||
.price-features {
|
||
text-align: left; margin-bottom: 40px;
|
||
}
|
||
.price-features li {
|
||
padding: 12px 0; border-bottom: 1px solid var(--border);
|
||
font-size: 0.875rem; color: var(--text-sec);
|
||
display: flex; align-items: flex-start; gap: 12px;
|
||
}
|
||
.price-features li::before {
|
||
content: '→'; color: var(--accent); font-weight: 600; flex-shrink: 0;
|
||
}
|
||
.price-cta { margin-top: 8px; }
|
||
.price-guarantee {
|
||
margin-top: 24px; font-size: 0.75rem; color: var(--text-dim);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ============================================================
|
||
SECTION: FAQ — IBM accordion
|
||
============================================================ */
|
||
.faq-list { max-width: 800px; margin: 0 auto; }
|
||
.faq-item {
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.faq-q {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 24px 0; cursor: pointer; font-size: 1rem;
|
||
font-weight: 600; letter-spacing: -0.01em;
|
||
transition: color 0.2s;
|
||
}
|
||
.faq-q:hover { color: var(--accent); }
|
||
.faq-q::after {
|
||
content: '+'; font-family: var(--mono); font-size: 1.25rem;
|
||
color: var(--text-dim); transition: transform 0.3s; flex-shrink: 0;
|
||
margin-left: 16px;
|
||
}
|
||
.faq-item.open .faq-q::after { transform: rotate(45deg); }
|
||
.faq-a {
|
||
max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
|
||
}
|
||
.faq-item.open .faq-a { max-height: 400px; }
|
||
.faq-a-inner {
|
||
padding: 0 0 24px; font-size: 0.875rem; color: var(--text-sec);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* ============================================================
|
||
FOOTER
|
||
============================================================ */
|
||
.footer {
|
||
padding: 64px 0; border-top: 1px solid var(--border);
|
||
font-size: 0.75rem; color: var(--text-dim);
|
||
}
|
||
.footer-inner {
|
||
display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
|
||
gap: 40px;
|
||
}
|
||
.footer-col h4 {
|
||
font-size: 0.6875rem; text-transform: uppercase;
|
||
letter-spacing: 0.12em; color: var(--text-sec);
|
||
margin-bottom: 16px; font-family: var(--mono);
|
||
}
|
||
.footer-col a, .footer-col p {
|
||
display: block; color: var(--text-dim);
|
||
margin-bottom: 8px; transition: color 0.2s;
|
||
}
|
||
.footer-col a:hover { color: var(--text); }
|
||
.footer-bottom {
|
||
margin-top: 48px; padding-top: 24px;
|
||
border-top: 1px solid var(--border);
|
||
display: flex; justify-content: space-between;
|
||
}
|
||
|
||
/* ============================================================
|
||
REVEAL ANIMATION
|
||
============================================================ */
|
||
.reveal {
|
||
opacity: 0; transform: translateY(24px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||
|
||
/* ============================================================
|
||
RESPONSIVE
|
||
============================================================ */
|
||
@media (max-width: 1024px) {
|
||
.hero-inner { grid-template-columns: 1fr; gap: 48px; }
|
||
.hero-right { max-width: 600px; }
|
||
.manifesto-inner { grid-template-columns: 1fr; gap: 32px; }
|
||
.manifesto-number { font-size: 4rem; }
|
||
.problems-grid, .solution-grid { grid-template-columns: 1fr; }
|
||
.problem-card, .sol-card { border-right: none; }
|
||
.steps-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.step:nth-child(2) { border-right: none; }
|
||
.step:nth-child(n+3) { border-top: 1px solid var(--border); }
|
||
.footer-inner { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
@media (max-width: 640px) {
|
||
.wrap { padding: 0 16px; }
|
||
section { padding: 80px 0; }
|
||
.hero { padding-top: 120px; }
|
||
h1 { font-size: clamp(2.25rem, 8vw, 3.5rem); }
|
||
.hero-meta { gap: 24px; flex-wrap: wrap; }
|
||
.dash-tri { grid-template-columns: 1fr; }
|
||
.dash-cell { border-right: none; }
|
||
.steps-grid { grid-template-columns: 1fr; }
|
||
.step { border-right: none; border-bottom: 1px solid var(--border); }
|
||
.step:last-child { border-bottom: none; }
|
||
.footer-inner { grid-template-columns: 1fr; }
|
||
.footer-bottom { flex-direction: column; gap: 12px; }
|
||
.nav { display: none; }
|
||
.price-card { padding: 40px 24px; }
|
||
.price-amount { font-size: 3rem; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============================================================
|
||
HEADER
|
||
============================================================ -->
|
||
<header class="header">
|
||
<div class="wrap">
|
||
<div class="logo">
|
||
<div class="logo-mark">R</div>
|
||
ROI24
|
||
</div>
|
||
<nav class="nav">
|
||
<a href="#solution">Решение</a>
|
||
<a href="#how">Как работает</a>
|
||
<a href="#compare">Сравнение</a>
|
||
<a href="#pricing">Тариф</a>
|
||
<a href="#faq">FAQ</a>
|
||
</nav>
|
||
<div class="header-actions">
|
||
<span class="header-phone">+7 (999) 123-45-67</span>
|
||
<a href="#cta" class="btn btn-accent">Обсудить проект</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============================================================
|
||
HERO
|
||
============================================================ -->
|
||
<section class="hero">
|
||
<div class="wrap">
|
||
<div class="hero-inner">
|
||
<!-- LEFT -->
|
||
<div class="hero-left">
|
||
<div class="hero-label">ДАННЫЕ. БЕЗ ШУМА.</div>
|
||
<h1>Вы теряете<br>деньги, <span class="accent">не зная</span><br>почему</h1>
|
||
<p class="hero-sub">
|
||
Один дашборд с 10 ключевыми метриками вашего бизнеса.
|
||
Обновляется автоматически из 1С, CRM и банков.
|
||
Смотрится с телефона каждое утро.
|
||
</p>
|
||
<div class="hero-actions">
|
||
<a href="#cta" class="btn btn-accent btn-lg">Получить демо за 3 дня</a>
|
||
<a href="#compare" class="btn btn-outline btn-lg">Сравнить</a>
|
||
</div>
|
||
<div class="hero-meta">
|
||
<div class="hero-meta-item">
|
||
<span class="hero-meta-value">3 дня</span>
|
||
<span class="hero-meta-label">Срок настройки</span>
|
||
</div>
|
||
<div class="hero-meta-item">
|
||
<span class="hero-meta-value">10</span>
|
||
<span class="hero-meta-label">Ключевых метрик</span>
|
||
</div>
|
||
<div class="hero-meta-item">
|
||
<span class="hero-meta-value">5+</span>
|
||
<span class="hero-meta-label">Источников данных</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT — Dashboard Panel -->
|
||
<div class="hero-right">
|
||
<div class="dash-header">
|
||
<span class="dash-brand">ROI24 / DASHBOARD</span>
|
||
<span class="dash-status"><span class="dash-dot"></span> LIVE</span>
|
||
</div>
|
||
<div class="dash-body">
|
||
<!-- Big number row -->
|
||
<div class="dash-big">
|
||
<div class="dash-big-label">Выручка за 30 дней</div>
|
||
<div class="dash-big-value">
|
||
12.4М <span class="accent">₽</span><span class="dash-big-trend">↑ 12%</span>
|
||
</div>
|
||
</div>
|
||
<!-- Two columns -->
|
||
<div class="dash-cell">
|
||
<div class="dash-cell-label">Маржа</div>
|
||
<div class="dash-cell-value" style="color: var(--accent);">23.4%</div>
|
||
<div class="dash-cell-sub">↑ 2.1% к прошлому месяцу</div>
|
||
</div>
|
||
<div class="dash-cell">
|
||
<div class="dash-cell-label">Касса</div>
|
||
<div class="dash-cell-value">4.8М ₽</div>
|
||
<div class="dash-cell-sub">Дебиторка: 1.2М</div>
|
||
</div>
|
||
<!-- Tri row -->
|
||
<div class="dash-tri">
|
||
<div class="dash-mini">
|
||
<div class="dash-mini-label">Конверсия</div>
|
||
<div class="dash-mini-value" style="color: var(--blue);">2.8%</div>
|
||
<div class="dash-mini-bar"><div class="dash-mini-fill" style="width: 28%;"></div></div>
|
||
</div>
|
||
<div class="dash-mini">
|
||
<div class="dash-mini-label">CAC</div>
|
||
<div class="dash-mini-value" style="color: var(--amber);">890₽</div>
|
||
<div class="dash-mini-bar"><div class="dash-mini-fill" style="width: 45%; background: var(--amber);"></div></div>
|
||
</div>
|
||
<div class="dash-mini">
|
||
<div class="dash-mini-label">ROI рекл.</div>
|
||
<div class="dash-mini-value" style="color: var(--accent);">91%</div>
|
||
<div class="dash-mini-bar"><div class="dash-mini-fill" style="width: 91%;"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Toggle -->
|
||
<div class="dash-toggle">
|
||
<button class="dash-toggle-btn active">E-com</button>
|
||
<button class="dash-toggle-btn">Услуги</button>
|
||
<button class="dash-toggle-btn">Производство</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
MANIFESTO
|
||
============================================================ -->
|
||
<section class="manifesto">
|
||
<div class="manifesto-inner">
|
||
<div class="manifesto-number">
|
||
70<span class="accent">%</span>
|
||
</div>
|
||
<div class="manifesto-content">
|
||
<div class="section-label">Проблема</div>
|
||
<h2>Компаний не видят<br>деньги в кассе<br>до конца месяца</h2>
|
||
<p>
|
||
Данные разбросаны по 1С, CRM, банкам, рекламным кабинетам.
|
||
Каждый отчёт — ручная сводка за неделю. Когда увидели проблему —
|
||
деньги уже потеряны.
|
||
</p>
|
||
<p>
|
||
<strong style="color: var(--text);">ROI24 собирает всё в один дашборд.</strong>
|
||
Обновляется автоматически. Вы видите цифры как в банковском приложении.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
PROBLEMS — 3-column grid
|
||
============================================================ -->
|
||
<section>
|
||
<div class="wrap">
|
||
<div class="section-label">Три боли</div>
|
||
<h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
|
||
Почему вы принимаете решения в темноте
|
||
</h2>
|
||
<div class="problems-grid">
|
||
<div class="problem-card reveal">
|
||
<div class="problem-num">01</div>
|
||
<h3>Данные разбросаны</h3>
|
||
<p>Пять источников данных — 1С, CRM, онлайн-банки, рекламные кабинеты, кассы. Каждый раз — ручная сводка. Нет единой картины.</p>
|
||
</div>
|
||
<div class="problem-card reveal">
|
||
<div class="problem-num">02</div>
|
||
<h3>Не видно, где теряете</h3>
|
||
<p>Знаете, что выручка есть. Но не видите: какая реклама работает, какой менеджер теряет клиентов, какие точки убыточны.</p>
|
||
</div>
|
||
<div class="problem-card reveal">
|
||
<div class="problem-num">03</div>
|
||
<h3>Отчёты приходят поздно</h3>
|
||
<p>В понедельник смотрите отчёт за прошлую неделю. Когда увидели проблему — деньги уже потеряны. Решение на основе вчерашних новостей.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
SOLUTION
|
||
============================================================ -->
|
||
<section id="solution" class="solution-section">
|
||
<div class="wrap">
|
||
<div class="section-label">Решение</div>
|
||
<h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
|
||
Один дашборд. Все ключевые цифры.
|
||
</h2>
|
||
<div class="solution-grid">
|
||
<div class="sol-card reveal">
|
||
<div class="sol-icon">⚡</div>
|
||
<h3>Живые данные</h3>
|
||
<p>Обновляются автоматически — 1С, CRM, банки, реклама. Вы не делаете ничего. Данные сами приходят в дашборд каждый час.</p>
|
||
</div>
|
||
<div class="sol-card reveal">
|
||
<div class="sol-icon">👁</div>
|
||
<h3>Видно где теряете</h3>
|
||
<p>Цветовые индикаторы: зелёный, жёлтый, красный. Три секунды — и вы видите, какая метрика вышла за пределы нормы.</p>
|
||
</div>
|
||
<div class="sol-card reveal">
|
||
<div class="sol-icon">📱</div>
|
||
<h3>С телефона</h3>
|
||
<p>Собственник смотрит дашборд за завтраком. Не нужно открывать ноутбук, логиниться в 1С, качать Excel.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
HOW IT WORKS — 5 steps
|
||
============================================================ -->
|
||
<section id="how" class="steps">
|
||
<div class="wrap">
|
||
<div class="section-label">Процесс</div>
|
||
<h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
|
||
От звонка до дашборда — 3 дня
|
||
</h2>
|
||
<div class="steps-grid">
|
||
<div class="step reveal">
|
||
<div class="step-num">01</div>
|
||
<h3>Брифинг</h3>
|
||
<p>30 минут. Звоним, узнаём бизнес. Никаких форм — просто разговор.</p>
|
||
<div class="step-time">30 мин</div>
|
||
</div>
|
||
<div class="step reveal">
|
||
<div class="step-num">02</div>
|
||
<h3>Подключение</h3>
|
||
<p>1С, CRM, онлайн-банки, реклама. Вы не участвуете.</p>
|
||
<div class="step-time">1–2 дня</div>
|
||
</div>
|
||
<div class="step reveal">
|
||
<div class="step-num">03</div>
|
||
<h3>Настройка</h3>
|
||
<p>Дашборд под ваши 10 метрик. Не 50 — только реальное.</p>
|
||
<div class="step-time">1–2 дня</div>
|
||
</div>
|
||
<div class="step reveal">
|
||
<div class="step-num">04</div>
|
||
<h3>Демо</h3>
|
||
<p>Показываем результат. Вносим правки. Вы видите, что работает.</p>
|
||
<div class="step-time">30 мин</div>
|
||
</div>
|
||
<div class="step reveal">
|
||
<div class="step-num">05</div>
|
||
<h3>Запуск</h3>
|
||
<p>Даём доступ, обучаем. Автоматическое обновление включено.</p>
|
||
<div class="step-time">День запуска</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
COMPARISON
|
||
============================================================ -->
|
||
<section id="compare" class="comparison">
|
||
<div class="wrap">
|
||
<div class="section-label">Сравнение</div>
|
||
<h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
|
||
Без ROI24 / С ROI24
|
||
</h2>
|
||
<table class="comp-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Параметр</th>
|
||
<th>Без ROI24</th>
|
||
<th>С ROI24</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Данные</td>
|
||
<td class="comp-no">5+ источников</td>
|
||
<td class="comp-yes">1 дашборд</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Обновление</td>
|
||
<td class="comp-no">Ручной ввод</td>
|
||
<td class="comp-yes">Авто, каждый час</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Время на отчёты</td>
|
||
<td class="comp-no">3+ часа / неделя</td>
|
||
<td class="comp-yes">0 мин</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Актуальность</td>
|
||
<td class="comp-no">30 дней</td>
|
||
<td class="comp-yes">Живые данные</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Видно, где теряете</td>
|
||
<td class="comp-no">✕</td>
|
||
<td class="comp-yes">✓</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Мобильный доступ</td>
|
||
<td class="comp-no">Нет</td>
|
||
<td class="comp-yes">Да, телефон</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Стоимость (год)</td>
|
||
<td class="comp-no">100К + 40К зарплат</td>
|
||
<td class="comp-yes">100К + 20К поддержка</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Окупаемость</td>
|
||
<td class="comp-no">Не видно</td>
|
||
<td class="comp-yes">3–8 месяцев</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
PRICING
|
||
============================================================ -->
|
||
<section id="pricing" class="pricing">
|
||
<div class="wrap">
|
||
<div class="text-center" style="margin-bottom: 48px;">
|
||
<div class="section-label">Тариф</div>
|
||
<h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em;">
|
||
Один тариф. Всё включено.
|
||
</h2>
|
||
</div>
|
||
<div class="price-card reveal">
|
||
<div class="price-name">Настройка под ключ</div>
|
||
<div class="price-amount">100 000 <span class="unit">₽</span></div>
|
||
<div class="price-sub">Единоразово. Поддержка 20 000 ₽/мес после 30 дней.</div>
|
||
<ul class="price-features">
|
||
<li>Подключение 1С / CRM / банки / реклама</li>
|
||
<li>Настройка 10 ключевых метрик</li>
|
||
<li>Дашборд, заточенный под ваш бизнес</li>
|
||
<li>Обучение команды работе с дашбордом</li>
|
||
<li>30 дней поддержки и донастройки</li>
|
||
<li>Автоматическое обновление источников</li>
|
||
</ul>
|
||
<a href="#cta" class="btn btn-accent btn-lg price-cta">Обсудить проект</a>
|
||
<div class="price-guarantee">
|
||
30-дневная гарантия. Если дашборд не устроит — вернём деньги. Работаем по этапам, вы видите результат после каждого.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
FAQ
|
||
============================================================ -->
|
||
<section id="faq">
|
||
<div class="wrap">
|
||
<div class="section-label">Вопросы</div>
|
||
<h2 style="font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 48px;">
|
||
Возражения
|
||
</h2>
|
||
<div class="faq-list">
|
||
<div class="faq-item">
|
||
<div class="faq-q">Почему 100К? Это же дорого.</div>
|
||
<div class="faq-a"><div class="faq-a-inner">Это не шаблон. Это настройка под ваш бизнес: ваши 10 метрик, ваши 5 источников данных, ваше обучение команды. Шаблоны от 20К, но они бесполезны — не адаптированы под ваш бизнес.</div></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q">А если не подойдёт?</div>
|
||
<div class="faq-a"><div class="faq-a-inner">30-дневная гарантия. Работаем по этапам — вы видите результат после каждого. Если на каком-то этапе поймёте, что не то — останавливаемся и возвращаем деньги за неработающую часть.</div></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q">Сколько времени займёт настройка?</div>
|
||
<div class="faq-a"><div class="faq-a-inner">3–5 дней. Первый дашборд — за 72 часа. Потом донастраиваем под ваши пожелания.</div></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q">А какие данные можно подключить?</div>
|
||
<div class="faq-a"><div class="faq-a-inner">1С (любая конфигурация), amoCRM, Битрикс24, Яндекс.Директ, VK Ads, онлайн-банки (Сбер, Тинькофф, Альфа), кассы (1С-Рарус, iiko, r_keeper). Если не знаете — напишите, скажем.</div></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q">Можно проще? Дешевле?</div>
|
||
<div class="faq-a"><div class="faq-a-inner">Нет. Потому что "проще" = "не работает". 50+ проектов показали: меньше 10 метрик — не видно картину. Больше 10 — шум. Наш баланс — максимум пользы.</div></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q">Поддержка после запуска?</div>
|
||
<div class="faq-a"><div class="faq-a-inner">30 дней включено — правки, донастройка, ответы. Далее 20 000 ₽/мес: мониторинг источников, техподдержка, мелкие обновления. Или отключаете — дашборт продолжает работать.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
FOOTER
|
||
============================================================ -->
|
||
<footer class="footer">
|
||
<div class="wrap">
|
||
<div class="footer-inner">
|
||
<div class="footer-col">
|
||
<h4>ROI24</h4>
|
||
<p>Живые цифры бизнеса за 3 дня.</p>
|
||
<p>Автоматизированные дашборды для собственников.</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Контакты</h4>
|
||
<a href="tel:+79991234567">+7 (999) 123-45-67</a>
|
||
<a href="#">Telegram</a>
|
||
<a href="#">hello@roi24.ru</a>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Решение</h4>
|
||
<a href="#solution">О решении</a>
|
||
<a href="#compare">Сравнение</a>
|
||
<a href="#pricing">Тариф</a>
|
||
<a href="#faq">FAQ</a>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Юридическое</h4>
|
||
<p>ИНН: 7712345678</p>
|
||
<p>ОГРН: 1237700123456</p>
|
||
<a href="#">Политика конфиденциальности</a>
|
||
<a href="#">152-ФЗ</a>
|
||
<a href="#">Оферта</a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<span>© 2026 ROI24. Все права защищены.</span>
|
||
<span>Данные на серверах в Москве. SSL.</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
/* ============================================================
|
||
INTERSECTION OBSERVER — reveal on scroll
|
||
============================================================ */
|
||
const reveals = document.querySelectorAll('.reveal');
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach((entry, i) => {
|
||
if (entry.isIntersecting) {
|
||
setTimeout(() => {
|
||
entry.target.classList.add('visible');
|
||
}, i * 60);
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
|
||
reveals.forEach(el => observer.observe(el));
|
||
|
||
/* ============================================================
|
||
FAQ ACCORDION
|
||
============================================================ */
|
||
document.querySelectorAll('.faq-q').forEach(q => {
|
||
q.addEventListener('click', () => {
|
||
const item = q.parentElement;
|
||
const wasOpen = item.classList.contains('open');
|
||
// Close all
|
||
document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
|
||
// Toggle current
|
||
if (!wasOpen) item.classList.add('open');
|
||
});
|
||
});
|
||
|
||
/* ============================================================
|
||
DASHBOARD SEGMENT TOGGLE
|
||
============================================================ */
|
||
const SEGMENTS = {
|
||
ecom: {
|
||
revenue: '12.4М', revenueTrend: '+12%', revenueAccent: true,
|
||
margin: '23.4%', marginNote: '↑ 2.1%',
|
||
cash: '4.8М ₽', cashNote: 'Дебиторка: 1.2М',
|
||
mini: [
|
||
{ label: 'Конверсия', value: '2.8%', pct: 28, color: 'var(--blue)' },
|
||
{ label: 'CAC', value: '890₽', pct: 45, color: 'var(--amber)' },
|
||
{ label: 'ROI рекл.', value: '91%', pct: 91, color: 'var(--accent)' }
|
||
]
|
||
},
|
||
services: {
|
||
revenue: '3.8М', revenueTrend: '+8%', revenueAccent: true,
|
||
margin: '31.2%', marginNote: '↑ 1.4%',
|
||
cash: '2.1М ₽', cashNote: 'Пайплайн: 8.5М',
|
||
mini: [
|
||
{ label: 'Загрузка', value: '78%', pct: 78, color: 'var(--blue)' },
|
||
{ label: 'Марж. проект', value: '34%', pct: 68, color: 'var(--amber)' },
|
||
{ label: 'LTV', value: '185К', pct: 82, color: 'var(--accent)' }
|
||
]
|
||
},
|
||
production: {
|
||
revenue: '28.7М', revenueTrend: '+5%', revenueAccent: true,
|
||
margin: '18.7%', marginNote: '↓ 0.8%',
|
||
cash: '6.2М ₽', cashNote: 'OEE: 72%',
|
||
mini: [
|
||
{ label: 'План/факт', value: '94%', pct: 94, color: 'var(--blue)' },
|
||
{ label: 'OEE', value: '72%', pct: 72, color: 'var(--amber)' },
|
||
{ label: 'Качество', value: '99.1%', pct: 99, color: 'var(--accent)' }
|
||
]
|
||
}
|
||
};
|
||
|
||
const toggleBtns = document.querySelectorAll('.dash-toggle-btn');
|
||
toggleBtns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const key = btn.textContent.toLowerCase().includes('e-com') ? 'ecom' :
|
||
btn.textContent.toLowerCase().includes('услуг') ? 'services' :
|
||
'production';
|
||
const seg = SEGMENTS[key];
|
||
|
||
// Update active button
|
||
toggleBtns.forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
|
||
// Update big number
|
||
const bigValue = document.querySelector('.dash-big-value');
|
||
bigValue.innerHTML = `${seg.revenue} <span class="accent">₽</span><span class="dash-big-trend">${seg.revenueTrend}</span>`;
|
||
|
||
// Update cells
|
||
document.querySelectorAll('.dash-cell-value')[0].textContent = seg.margin;
|
||
document.querySelectorAll('.dash-cell-value')[0].style.color = 'var(--accent)';
|
||
document.querySelectorAll('.dash-cell-sub')[0].textContent = seg.marginNote;
|
||
document.querySelectorAll('.dash-cell-value')[1].textContent = seg.cash;
|
||
document.querySelectorAll('.dash-cell-sub')[1].textContent = seg.cashNote;
|
||
|
||
// Update mini cards
|
||
const minis = document.querySelectorAll('.dash-mini');
|
||
seg.mini.forEach((m, i) => {
|
||
minis[i].querySelector('.dash-mini-label').textContent = m.label;
|
||
minis[i].querySelector('.dash-mini-value').textContent = m.value;
|
||
minis[i].querySelector('.dash-mini-value').style.color = m.color;
|
||
minis[i].querySelector('.dash-mini-fill').style.width = m.pct + '%';
|
||
minis[i].querySelector('.dash-mini-fill').style.background = m.color;
|
||
});
|
||
});
|
||
});
|
||
|
||
/* ============================================================
|
||
HEADER SCROLL STATE
|
||
============================================================ */
|
||
const header = document.querySelector('.header');
|
||
window.addEventListener('scroll', () => {
|
||
header.classList.toggle('scrolled', window.scrollY > 20);
|
||
}, { passive: true });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|