-
.rc-dock-wrapper {
/* Изоляция стилей */
font-family: system-ui, -apple-system, sans-serif;
width: 100%;
display: flex;
justify-content: flex-start; /* Или center, если нужно по центру */
margin: 20px 0;
box-sizing: border-box;
}
/* Контейнер-капсула */
.rc-dock-container {
display: inline-flex;
align-items: center;
gap: 8px;
background: #FFFFFF;
padding: 6px;
border-radius: 60px; /* Сильное скругление */
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
max-width: 500px; /* Ограничение ширины по вашему ТЗ */
width: auto;
}
/* Общий стиль кнопок */
.rc-dock-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px; /* Компактная высота */
padding: 0 16px;
border-radius: 40px;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
white-space: nowrap;
border: none;
cursor: pointer;
line-height: 1;
}
.rc-dock-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.rc-dock-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 1. Стиль кнопки Телефона (Gradient Orange) */
.rc-dock-phone {
background: linear-gradient(135deg, #E04F38, #FF7E5F);
color: #FFFFFF !important;
}
.rc-dock-phone svg { fill: #FFFFFF !important; }
/* 2. Стиль кнопки Telegram (Brand Blue) */
.rc-dock-tg {
background: #229ED9;
color: #FFFFFF !important;
}
.rc-dock-tg svg { fill: #FFFFFF !important; }
/* 3. Стиль кнопки Email (Dark Navy) */
.rc-dock-mail {
background: #1e293b;
color: #FFFFFF !important;
}
.rc-dock-mail svg { fill: #FFFFFF !important; }
/* Адаптив */
@media (max-width: 600px) {
.rc-dock-wrapper {
justify-content: center; /* На мобильном по центру */
}
.rc-dock-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Три равные колонки */
padding: 8px;
border-radius: 16px; /* Менее круглые углы на мобильном */
gap: 8px;
}
.rc-dock-btn {
padding: 0 8px;
font-size: 12px; /* Чуть меньше текст */
flex-direction: column; /* Иконка над текстом для экономии места */
height: 56px; /* Чуть выше, чтобы пальцем попасть */
gap: 4px;
border-radius: 12px;
}
.rc-dock-btn svg {
width: 20px;
height: 20px;
}
}
-
.rc-dock-wrapper {
/* Изоляция стилей */
font-family: system-ui, -apple-system, sans-serif;
width: 100%;
display: flex;
justify-content: flex-start; /* Или center, если нужно по центру */
margin: 20px 0;
box-sizing: border-box;
}
/* Контейнер-капсула */
.rc-dock-container {
display: inline-flex;
align-items: center;
gap: 8px;
background: #FFFFFF;
padding: 6px;
border-radius: 60px; /* Сильное скругление */
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
max-width: 500px; /* Ограничение ширины по вашему ТЗ */
width: auto;
}
/* Общий стиль кнопок */
.rc-dock-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px; /* Компактная высота */
padding: 0 16px;
border-radius: 40px;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
white-space: nowrap;
border: none;
cursor: pointer;
line-height: 1;
}
.rc-dock-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.rc-dock-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 1. Стиль кнопки Телефона (Gradient Orange) */
.rc-dock-phone {
background: linear-gradient(135deg, #E04F38, #FF7E5F);
color: #FFFFFF !important;
}
.rc-dock-phone svg { fill: #FFFFFF !important; }
/* 2. Стиль кнопки Telegram (Brand Blue) */
.rc-dock-tg {
background: #229ED9;
color: #FFFFFF !important;
}
.rc-dock-tg svg { fill: #FFFFFF !important; }
/* 3. Стиль кнопки Email (Dark Navy) */
.rc-dock-mail {
background: #1e293b;
color: #FFFFFF !important;
}
.rc-dock-mail svg { fill: #FFFFFF !important; }
/* Адаптив */
@media (max-width: 600px) {
.rc-dock-wrapper {
justify-content: center; /* На мобильном по центру */
}
.rc-dock-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Три равные колонки */
padding: 8px;
border-radius: 16px; /* Менее круглые углы на мобильном */
gap: 8px;
}
.rc-dock-btn {
padding: 0 8px;
font-size: 12px; /* Чуть меньше текст */
flex-direction: column; /* Иконка над текстом для экономии места */
height: 56px; /* Чуть выше, чтобы пальцем попасть */
gap: 4px;
border-radius: 12px;
}
.rc-dock-btn svg {
width: 20px;
height: 20px;
}
}
-
.rc-dock-wrapper {
/* Изоляция стилей */
font-family: system-ui, -apple-system, sans-serif;
width: 100%;
display: flex;
justify-content: flex-start; /* Или center, если нужно по центру */
margin: 20px 0;
box-sizing: border-box;
}
/* Контейнер-капсула */
.rc-dock-container {
display: inline-flex;
align-items: center;
gap: 8px;
background: #FFFFFF;
padding: 6px;
border-radius: 60px; /* Сильное скругление */
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
max-width: 500px; /* Ограничение ширины по вашему ТЗ */
width: auto;
}
/* Общий стиль кнопок */
.rc-dock-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px; /* Компактная высота */
padding: 0 16px;
border-radius: 40px;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
white-space: nowrap;
border: none;
cursor: pointer;
line-height: 1;
}
.rc-dock-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.rc-dock-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 1. Стиль кнопки Телефона (Gradient Orange) */
.rc-dock-phone {
background: linear-gradient(135deg, #E04F38, #FF7E5F);
color: #FFFFFF !important;
}
.rc-dock-phone svg { fill: #FFFFFF !important; }
/* 2. Стиль кнопки Telegram (Brand Blue) */
.rc-dock-tg {
background: #229ED9;
color: #FFFFFF !important;
}
.rc-dock-tg svg { fill: #FFFFFF !important; }
/* 3. Стиль кнопки Email (Dark Navy) */
.rc-dock-mail {
background: #1e293b;
color: #FFFFFF !important;
}
.rc-dock-mail svg { fill: #FFFFFF !important; }
/* Адаптив */
@media (max-width: 600px) {
.rc-dock-wrapper {
justify-content: center; /* На мобильном по центру */
}
.rc-dock-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Три равные колонки */
padding: 8px;
border-radius: 16px; /* Менее круглые углы на мобильном */
gap: 8px;
}
.rc-dock-btn {
padding: 0 8px;
font-size: 12px; /* Чуть меньше текст */
flex-direction: column; /* Иконка над текстом для экономии места */
height: 56px; /* Чуть выше, чтобы пальцем попасть */
gap: 4px;
border-radius: 12px;
}
.rc-dock-btn svg {
width: 20px;
height: 20px;
}
}
-
.rc-dock-wrapper {
/* Изоляция стилей */
font-family: system-ui, -apple-system, sans-serif;
width: 100%;
display: flex;
justify-content: flex-start; /* Или center, если нужно по центру */
margin: 20px 0;
box-sizing: border-box;
}
/* Контейнер-капсула */
.rc-dock-container {
display: inline-flex;
align-items: center;
gap: 8px;
background: #FFFFFF;
padding: 6px;
border-radius: 60px; /* Сильное скругление */
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
max-width: 500px; /* Ограничение ширины по вашему ТЗ */
width: auto;
}
/* Общий стиль кнопок */
.rc-dock-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px; /* Компактная высота */
padding: 0 16px;
border-radius: 40px;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
white-space: nowrap;
border: none;
cursor: pointer;
line-height: 1;
}
.rc-dock-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.rc-dock-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 1. Стиль кнопки Телефона (Gradient Orange) */
.rc-dock-phone {
background: linear-gradient(135deg, #E04F38, #FF7E5F);
color: #FFFFFF !important;
}
.rc-dock-phone svg { fill: #FFFFFF !important; }
/* 2. Стиль кнопки Telegram (Brand Blue) */
.rc-dock-tg {
background: #229ED9;
color: #FFFFFF !important;
}
.rc-dock-tg svg { fill: #FFFFFF !important; }
/* 3. Стиль кнопки Email (Dark Navy) */
.rc-dock-mail {
background: #1e293b;
color: #FFFFFF !important;
}
.rc-dock-mail svg { fill: #FFFFFF !important; }
/* Адаптив */
@media (max-width: 600px) {
.rc-dock-wrapper {
justify-content: center; /* На мобильном по центру */
}
.rc-dock-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Три равные колонки */
padding: 8px;
border-radius: 16px; /* Менее круглые углы на мобильном */
gap: 8px;
}
.rc-dock-btn {
padding: 0 8px;
font-size: 12px; /* Чуть меньше текст */
flex-direction: column; /* Иконка над текстом для экономии места */
height: 56px; /* Чуть выше, чтобы пальцем попасть */
gap: 4px;
border-radius: 12px;
}
.rc-dock-btn svg {
width: 20px;
height: 20px;
}
}
-
.rc-dock-wrapper {
/* Изоляция стилей */
font-family: system-ui, -apple-system, sans-serif;
width: 100%;
display: flex;
justify-content: flex-start; /* Или center, если нужно по центру */
margin: 20px 0;
box-sizing: border-box;
}
/* Контейнер-капсула */
.rc-dock-container {
display: inline-flex;
align-items: center;
gap: 8px;
background: #FFFFFF;
padding: 6px;
border-radius: 60px; /* Сильное скругление */
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
max-width: 500px; /* Ограничение ширины по вашему ТЗ */
width: auto;
}
/* Общий стиль кнопок */
.rc-dock-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px; /* Компактная высота */
padding: 0 16px;
border-radius: 40px;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
white-space: nowrap;
border: none;
cursor: pointer;
line-height: 1;
}
.rc-dock-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.rc-dock-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 1. Стиль кнопки Телефона (Gradient Orange) */
.rc-dock-phone {
background: linear-gradient(135deg, #E04F38, #FF7E5F);
color: #FFFFFF !important;
}
.rc-dock-phone svg { fill: #FFFFFF !important; }
/* 2. Стиль кнопки Telegram (Brand Blue) */
.rc-dock-tg {
background: #229ED9;
color: #FFFFFF !important;
}
.rc-dock-tg svg { fill: #FFFFFF !important; }
/* 3. Стиль кнопки Email (Dark Navy) */
.rc-dock-mail {
background: #1e293b;
color: #FFFFFF !important;
}
.rc-dock-mail svg { fill: #FFFFFF !important; }
/* Адаптив */
@media (max-width: 600px) {
.rc-dock-wrapper {
justify-content: center; /* На мобильном по центру */
}
.rc-dock-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Три равные колонки */
padding: 8px;
border-radius: 16px; /* Менее круглые углы на мобильном */
gap: 8px;
}
.rc-dock-btn {
padding: 0 8px;
font-size: 12px; /* Чуть меньше текст */
flex-direction: column; /* Иконка над текстом для экономии места */
height: 56px; /* Чуть выше, чтобы пальцем попасть */
gap: 4px;
border-radius: 12px;
}
.rc-dock-btn svg {
width: 20px;
height: 20px;
}
}
-
.rc-dock-wrapper {
/* Изоляция стилей */
font-family: system-ui, -apple-system, sans-serif;
width: 100%;
display: flex;
justify-content: flex-start; /* Или center, если нужно по центру */
margin: 20px 0;
box-sizing: border-box;
}
/* Контейнер-капсула */
.rc-dock-container {
display: inline-flex;
align-items: center;
gap: 8px;
background: #FFFFFF;
padding: 6px;
border-radius: 60px; /* Сильное скругление */
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
max-width: 500px; /* Ограничение ширины по вашему ТЗ */
width: auto;
}
/* Общий стиль кнопок */
.rc-dock-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px; /* Компактная высота */
padding: 0 16px;
border-radius: 40px;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
white-space: nowrap;
border: none;
cursor: pointer;
line-height: 1;
}
.rc-dock-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.rc-dock-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 1. Стиль кнопки Телефона (Gradient Orange) */
.rc-dock-phone {
background: linear-gradient(135deg, #E04F38, #FF7E5F);
color: #FFFFFF !important;
}
.rc-dock-phone svg { fill: #FFFFFF !important; }
/* 2. Стиль кнопки Telegram (Brand Blue) */
.rc-dock-tg {
background: #229ED9;
color: #FFFFFF !important;
}
.rc-dock-tg svg { fill: #FFFFFF !important; }
/* 3. Стиль кнопки Email (Dark Navy) */
.rc-dock-mail {
background: #1e293b;
color: #FFFFFF !important;
}
.rc-dock-mail svg { fill: #FFFFFF !important; }
/* Адаптив */
@media (max-width: 600px) {
.rc-dock-wrapper {
justify-content: center; /* На мобильном по центру */
}
.rc-dock-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Три равные колонки */
padding: 8px;
border-radius: 16px; /* Менее круглые углы на мобильном */
gap: 8px;
}
.rc-dock-btn {
padding: 0 8px;
font-size: 12px; /* Чуть меньше текст */
flex-direction: column; /* Иконка над текстом для экономии места */
height: 56px; /* Чуть выше, чтобы пальцем попасть */
gap: 4px;
border-radius: 12px;
}
.rc-dock-btn svg {
width: 20px;
height: 20px;
}
}
-
.rc-dock-wrapper {
/* Изоляция стилей */
font-family: system-ui, -apple-system, sans-serif;
width: 100%;
display: flex;
justify-content: flex-start; /* Или center, если нужно по центру */
margin: 20px 0;
box-sizing: border-box;
}
/* Контейнер-капсула */
.rc-dock-container {
display: inline-flex;
align-items: center;
gap: 8px;
background: #FFFFFF;
padding: 6px;
border-radius: 60px; /* Сильное скругление */
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
max-width: 500px; /* Ограничение ширины по вашему ТЗ */
width: auto;
}
/* Общий стиль кнопок */
.rc-dock-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px; /* Компактная высота */
padding: 0 16px;
border-radius: 40px;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
white-space: nowrap;
border: none;
cursor: pointer;
line-height: 1;
}
.rc-dock-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.rc-dock-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 1. Стиль кнопки Телефона (Gradient Orange) */
.rc-dock-phone {
background: linear-gradient(135deg, #E04F38, #FF7E5F);
color: #FFFFFF !important;
}
.rc-dock-phone svg { fill: #FFFFFF !important; }
/* 2. Стиль кнопки Telegram (Brand Blue) */
.rc-dock-tg {
background: #229ED9;
color: #FFFFFF !important;
}
.rc-dock-tg svg { fill: #FFFFFF !important; }
/* 3. Стиль кнопки Email (Dark Navy) */
.rc-dock-mail {
background: #1e293b;
color: #FFFFFF !important;
}
.rc-dock-mail svg { fill: #FFFFFF !important; }
/* Адаптив */
@media (max-width: 600px) {
.rc-dock-wrapper {
justify-content: center; /* На мобильном по центру */
}
.rc-dock-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Три равные колонки */
padding: 8px;
border-radius: 16px; /* Менее круглые углы на мобильном */
gap: 8px;
}
.rc-dock-btn {
padding: 0 8px;
font-size: 12px; /* Чуть меньше текст */
flex-direction: column; /* Иконка над текстом для экономии места */
height: 56px; /* Чуть выше, чтобы пальцем попасть */
gap: 4px;
border-radius: 12px;
}
.rc-dock-btn svg {
width: 20px;
height: 20px;
}
}
-
.rc-dock-wrapper {
/* Изоляция стилей */
font-family: system-ui, -apple-system, sans-serif;
width: 100%;
display: flex;
justify-content: flex-start; /* Или center, если нужно по центру */
margin: 20px 0;
box-sizing: border-box;
}
/* Контейнер-капсула */
.rc-dock-container {
display: inline-flex;
align-items: center;
gap: 8px;
background: #FFFFFF;
padding: 6px;
border-radius: 60px; /* Сильное скругление */
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
max-width: 500px; /* Ограничение ширины по вашему ТЗ */
width: auto;
}
/* Общий стиль кнопок */
.rc-dock-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px; /* Компактная высота */
padding: 0 16px;
border-radius: 40px;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
white-space: nowrap;
border: none;
cursor: pointer;
line-height: 1;
}
.rc-dock-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.rc-dock-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 1. Стиль кнопки Телефона (Gradient Orange) */
.rc-dock-phone {
background: linear-gradient(135deg, #E04F38, #FF7E5F);
color: #FFFFFF !important;
}
.rc-dock-phone svg { fill: #FFFFFF !important; }
/* 2. Стиль кнопки Telegram (Brand Blue) */
.rc-dock-tg {
background: #229ED9;
color: #FFFFFF !important;
}
.rc-dock-tg svg { fill: #FFFFFF !important; }
/* 3. Стиль кнопки Email (Dark Navy) */
.rc-dock-mail {
background: #1e293b;
color: #FFFFFF !important;
}
.rc-dock-mail svg { fill: #FFFFFF !important; }
/* Адаптив */
@media (max-width: 600px) {
.rc-dock-wrapper {
justify-content: center; /* На мобильном по центру */
}
.rc-dock-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Три равные колонки */
padding: 8px;
border-radius: 16px; /* Менее круглые углы на мобильном */
gap: 8px;
}
.rc-dock-btn {
padding: 0 8px;
font-size: 12px; /* Чуть меньше текст */
flex-direction: column; /* Иконка над текстом для экономии места */
height: 56px; /* Чуть выше, чтобы пальцем попасть */
gap: 4px;
border-radius: 12px;
}
.rc-dock-btn svg {
width: 20px;
height: 20px;
}
}
-
.rc-dock-wrapper {
/* Изоляция стилей */
font-family: system-ui, -apple-system, sans-serif;
width: 100%;
display: flex;
justify-content: flex-start; /* Или center, если нужно по центру */
margin: 20px 0;
box-sizing: border-box;
}
/* Контейнер-капсула */
.rc-dock-container {
display: inline-flex;
align-items: center;
gap: 8px;
background: #FFFFFF;
padding: 6px;
border-radius: 60px; /* Сильное скругление */
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
max-width: 500px; /* Ограничение ширины по вашему ТЗ */
width: auto;
}
/* Общий стиль кнопок */
.rc-dock-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px; /* Компактная высота */
padding: 0 16px;
border-radius: 40px;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
white-space: nowrap;
border: none;
cursor: pointer;
line-height: 1;
}
.rc-dock-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.rc-dock-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 1. Стиль кнопки Телефона (Gradient Orange) */
.rc-dock-phone {
background: linear-gradient(135deg, #E04F38, #FF7E5F);
color: #FFFFFF !important;
}
.rc-dock-phone svg { fill: #FFFFFF !important; }
/* 2. Стиль кнопки Telegram (Brand Blue) */
.rc-dock-tg {
background: #229ED9;
color: #FFFFFF !important;
}
.rc-dock-tg svg { fill: #FFFFFF !important; }
/* 3. Стиль кнопки Email (Dark Navy) */
.rc-dock-mail {
background: #1e293b;
color: #FFFFFF !important;
}
.rc-dock-mail svg { fill: #FFFFFF !important; }
/* Адаптив */
@media (max-width: 600px) {
.rc-dock-wrapper {
justify-content: center; /* На мобильном по центру */
}
.rc-dock-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Три равные колонки */
padding: 8px;
border-radius: 16px; /* Менее круглые углы на мобильном */
gap: 8px;
}
.rc-dock-btn {
padding: 0 8px;
font-size: 12px; /* Чуть меньше текст */
flex-direction: column; /* Иконка над текстом для экономии места */
height: 56px; /* Чуть выше, чтобы пальцем попасть */
gap: 4px;
border-radius: 12px;
}
.rc-dock-btn svg {
width: 20px;
height: 20px;
}
}
-
.rc-dock-wrapper {
/* Изоляция стилей */
font-family: system-ui, -apple-system, sans-serif;
width: 100%;
display: flex;
justify-content: flex-start; /* Или center, если нужно по центру */
margin: 20px 0;
box-sizing: border-box;
}
/* Контейнер-капсула */
.rc-dock-container {
display: inline-flex;
align-items: center;
gap: 8px;
background: #FFFFFF;
padding: 6px;
border-radius: 60px; /* Сильное скругление */
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
max-width: 500px; /* Ограничение ширины по вашему ТЗ */
width: auto;
}
/* Общий стиль кнопок */
.rc-dock-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px; /* Компактная высота */
padding: 0 16px;
border-radius: 40px;
text-decoration: none !important;
font-size: 14px;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
white-space: nowrap;
border: none;
cursor: pointer;
line-height: 1;
}
.rc-dock-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.rc-dock-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 1. Стиль кнопки Телефона (Gradient Orange) */
.rc-dock-phone {
background: linear-gradient(135deg, #E04F38, #FF7E5F);
color: #FFFFFF !important;
}
.rc-dock-phone svg { fill: #FFFFFF !important; }
/* 2. Стиль кнопки Telegram (Brand Blue) */
.rc-dock-tg {
background: #229ED9;
color: #FFFFFF !important;
}
.rc-dock-tg svg { fill: #FFFFFF !important; }
/* 3. Стиль кнопки Email (Dark Navy) */
.rc-dock-mail {
background: #1e293b;
color: #FFFFFF !important;
}
.rc-dock-mail svg { fill: #FFFFFF !important; }
/* Адаптив */
@media (max-width: 600px) {
.rc-dock-wrapper {
justify-content: center; /* На мобильном по центру */
}
.rc-dock-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Три равные колонки */
padding: 8px;
border-radius: 16px; /* Менее круглые углы на мобильном */
gap: 8px;
}
.rc-dock-btn {
padding: 0 8px;
font-size: 12px; /* Чуть меньше текст */
flex-direction: column; /* Иконка над текстом для экономии места */
height: 56px; /* Чуть выше, чтобы пальцем попасть */
gap: 4px;
border-radius: 12px;
}
.rc-dock-btn svg {
width: 20px;
height: 20px;
}
}
