/* ============================================
COMPONENTS - Cards
============================================ */
.med-card {
background: var(--med-bg);
border-radius: var(--med-radius);
padding: 2rem;
box-shadow: var(--med-shadow);
border: 1px solid var(--med-border);
transition: var(--med-transition);
height: 100%;
}
.med-card-icon {
width: 64px;
height: 64px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 1.5rem;
color: var(--med-primary);
background: var(--med-bg-light);
}
/* WCAG: Hover-эффекты только для устройств с курсором */
@media (hover: hover) and (pointer: fine) {
.med-hover-lift:hover {
transform: translateY(-4px);
box-shadow: var(--med-shadow-hover);
}
.med-hover-scale:hover img {
transform: scale(1.05);
}
}
/* WCAG: Визуальный отклик на тач-устройствах вместо hover */
@media (hover: none) and (pointer: coarse) {
.med-hover-lift:active,
.service-item:active {
background: var(--med-bg-light);
transform: translateY(-1px);
}
}
/* Glassmorphism with Fallback */
.glass-panel {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--med-radius);
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
.glass-panel {
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
}
/* Buttons - WCAG AA Focus & Contrast */
.med-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 48px;
padding: 0.875rem 1.5rem;
border-radius: var(--med-radius-sm);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
border: none;
cursor: pointer;
transition: all 0.2s ease;
color: #ffffff;
background: var(--med-primary);
}
.med-btn:hover {
filter: brightness(1.05);
transform: translateY(-1px);
}
.med-btn:focus-visible {
outline: 3px solid var(--med-focus);
outline-offset: 2px;
box-shadow: 0 0 0 6px var(--med-focus-ring);
}
.med-btn:active {
transform: translateY(0);
}
.med-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Messengers Scroll Container */
.messengers-scroll {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 1.5rem 0;
position: relative;
z-index: 5;
}
@media (max-width: 480px) {
.messengers-scroll {
justify-content: center;
}
}
/* Messenger Buttons */
.med-messenger-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 50px;
color: #ffffff;
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.2s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border: none;
cursor: pointer;
min-height: var(--touch-target-min);
min-width: var(--touch-target-min);
position: relative;
z-index: 5;
pointer-events: auto;
}
.med-messenger-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
color: #ffffff;
text-decoration: none;
}
.med-messenger-btn:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--med-focus-ring);
}
.med-messenger-btn.max { background: #5a4a78; }
.med-messenger-btn.telegram { background: #0077b5; }
.med-messenger-btn.whatsapp { background: #128c7e; }
.med-messenger-btn.phone { background: var(--med-info); }
@media (max-width: 768px) {
.med-messenger-btn span.text {
display: none;
}
.med-messenger-btn {
padding: 0.75rem;
font-size: 1.2rem;
width: var(--touch-target-min);
height: var(--touch-target-min);
}
}