DIRCODE — премиум-титул (fullscreen, без подписей) Презентация для партнёров
Технологии DIRCODE:
как увеличить маржинальность
дверного бизнеса
с помощью умных решений
Демонстрация
Вершина технической мысли
Наглядно о возможностях умных замков
Бесконтактное открытие Высокая безопасность Интеграция с умным домом
html, body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
background: #0b1a22;
}
.slide {
width: 100vw;
height: 100vh;
background: radial-gradient(ellipse at 30% 40%, #2F87A8 0%, #1a4d5e 80%, #0f2d38 100%);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px 60px;
}
/* ===== АБСТРАКТНЫЙ ФОН (SVG) ===== */
.abstract-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.5;
}
.abstract-bg svg {
width: 100%;
height: 100%;
display: block;
}
/* ===== СВЕТОВЫЕ ПЯТНА ===== */
.glow {
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
z-index: 0;
}
.glow-1 {
width: 60vw;
height: 60vw;
top: -20vh;
right: -10vw;
background: radial-gradient(circle, #FF6B00, transparent 70%);
opacity: 0.3;
}
.glow-2 {
width: 50vw;
height: 50vw;
bottom: -15vh;
left: -10vw;
background: radial-gradient(circle, #FFB800, transparent 70%);
opacity: 0.2;
}
.glow-3 {
width: 30vw;
height: 30vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, #ffffff, transparent 70%);
opacity: 0.06;
}
/* ===== ПАРЯЩИЕ ЧАСТИЦЫ ===== */
.particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.particle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
animation: float linear infinite;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
.particle:nth-child(1) { left: 10%; top: 20%; animation-duration: 18s; animation-delay: 0s; width: 6px; height: 6px; }
.particle:nth-child(2) { left: 25%; top: 70%; animation-duration: 22s; animation-delay: 2s; width: 4px; height: 4px; }
.particle:nth-child(3) { left: 45%; top: 15%; animation-duration: 20s; animation-delay: 4s; width: 8px; height: 8px; opacity: 0.3; }
.particle:nth-child(4) { left: 65%; top: 80%; animation-duration: 25s; animation-delay: 1s; width: 4px; height: 4px; }
.particle:nth-child(5) { left: 80%; top: 30%; animation-duration: 19s; animation-delay: 3s; width: 5px; height: 5px; }
.particle:nth-child(6) { left: 90%; top: 60%; animation-duration: 23s; animation-delay: 5s; width: 4px; height: 4px; }
.particle:nth-child(7) { left: 5%; top: 90%; animation-duration: 21s; animation-delay: 0.5s; width: 7px; height: 7px; opacity: 0.2; }
@keyframes float {
0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.6; }
25% { transform: translateY(-30px) translateX(20px) scale(1.2); opacity: 1; }
50% { transform: translateY(-10px) translateX(-10px) scale(0.8); opacity: 0.4; }
75% { transform: translateY(20px) translateX(15px) scale(1.1); opacity: 0.8; }
100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.6; }
}
/* ===== КОНТЕНТ ===== */
.content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 1000px;
width: 100%;
}
/* Логотип */
.logo-wrap {
margin-bottom: 24px;
max-width: 180px;
width: 100%;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
}
.logo-wrap img {
width: 100%;
height: auto;
display: block;
filter: brightness(0) invert(1);
}
/* Лейбл */
.label {
display: inline-block;
padding: 6px 24px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(4px);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 100px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
/* Заголовок */
h1 {
font-size: clamp(2.6rem, 7vw, 5.2rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
color: #ffffff;
margin-bottom: 16px;
text-shadow: 0 4px 40px rgba(0,0,0,0.3);
}
.accent-text {
color: #FFB800;
position: relative;
display: inline-block;
}
.accent-text::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #FFB800, transparent);
opacity: 0.3;
border-radius: 2px;
}
/* Подзаголовок */
.subtitle {
font-size: clamp(1rem, 2vw, 1.6rem);
color: rgba(255, 255, 255, 0.85);
font-weight: 400;
max-width: 600px;
margin: 0 auto;
letter-spacing: 0.02em;
text-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
/* ===== АНИМАЦИЯ ПОЯВЛЕНИЯ ===== */
.content > * {
opacity: 0;
animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.logo-wrap { animation-delay: 0.1s; }
.label { animation-delay: 0.2s; }
h1 { animation-delay: 0.3s; }
.subtitle { animation-delay: 0.5s; }
@keyframes fadeUp {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ===== АДАПТИВ ===== */
@media (max-width: 768px) {
.slide { padding: 30px 20px; }
.logo-wrap { max-width: 140px; }
h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
.glow-1, .glow-2 { opacity: 0.15; }
.particles { display: none; }
}
@media (max-height: 600px) {
.logo-wrap { max-width: 120px; margin-bottom: 16px; }
.label { font-size: 0.6rem; padding: 4px 16px; margin-bottom: 16px; }
h1 { font-size: clamp(1.8rem, 5vh, 2.8rem); margin-bottom: 8px; }
.subtitle { font-size: clamp(0.9rem, 1.8vh, 1.2rem); }
}
Презентация для партнёров
Технологии DIRCODE:
как увеличить маржинальность
дверного бизнеса
с помощью умных решений
