/* Страница «Контакты» — экран макета «Контакты». Размеры шрифтов только в rem: режим для слабовидящих растит кегль от . */ .contacts__h1 { margin-top: 20px; } /* 1.35fr / 1fr из макета; align-items:start — тёмная панель не тянется вниз */ .contacts { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; } /* Соцсетей нет — панели нет, текст занимает всю ширину */ .contacts--single { grid-template-columns: 1fr; } .contacts__main { display: flex; flex-direction: column; gap: clamp(26px, 3.5vw, 36px); } /* Значение под надзаголовком-ромбом */ .contacts__value { margin-top: 10px; text-wrap: pretty; } .contacts__value--address { font-size: 1.375rem; line-height: 1.45; max-width: 23.5em; } .contacts__value--phone { font-size: 1.625rem; font-weight: 600; line-height: 1.25; } .contacts__value--mail { font-size: 1.375rem; line-height: 1.35; word-break: break-word; } .contacts__value--way { font-size: 1.1875rem; line-height: 1.6; max-width: 29.5em; } /* Телефон читается как текст, а не как ссылка: подчёркивание только при наведении */ .contacts__tel { color: var(--c-text); text-decoration: none; } .contacts__tel:hover { color: var(--c-accent); } .contacts__note { margin-top: 8px; font-size: .9375rem; color: var(--c-muted); line-height: 1.5; } /* ---------- тёмная панель «Палата в соцсетях» ---------- */ .soc-panel { background: var(--c-dark); color: #FFFFFF; padding: clamp(24px, 3vw, 36px); } .soc-panel__text { margin-top: 18px; font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, .88); } .soc-panel__rows { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } /* Кнопка-ссылка во всю ширину: золотой квадратный значок слева + название */ .soc-panel__row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r-ctl); color: #FFFFFF; font-size: 1.0625rem; font-weight: 500; text-decoration: none; } .soc-panel__row:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .08); color: #FFFFFF; } .soc-panel__row:focus-visible { outline: 2px solid var(--c-gold-light); outline-offset: 2px; } .soc-panel__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 36px; padding: 0 6px; border-radius: var(--r-ctl); background: var(--c-gold); color: var(--c-text); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; } /* Примечание об отсутствии счётчиков — через светлый разделитель */ .soc-panel__note { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .9375rem; line-height: 1.6; color: rgba(255, 255, 255, .68); } @media (max-width: 900px) { /* На телефоне панель уходит под контакты и растягивается на всю ширину */ .contacts { grid-template-columns: 1fr; } }