/* stores.css — список /contacts/stores/ и страницы площадок /contacts/stores// в стиле /contacts/ (27.09.2026). Разметку собирает local/php_interface/hc_stores_page.php внутри того же корня #hc-contacts, что и /contacts/, поэтому сюда уже приходят: токены и классы contacts.css (--ink/--muted/--paper/--line/--red, .eyebrow, .crumb, .intro, .location-panel, .button, .contact-strip, .mobile-actions…), светлая поверхность в тёмной теме (site-consistency.css), кегль ≥ 12 px и подъём плашки города над .mobile-actions на телефоне (hc-w5-mobile.css/js). Здесь — только то, чего на /contacts/ нет. Цвета — ТОЛЬКО переменные contacts.css: --red (фон, точки, рамки), --red-ink (красный текст; до её появления — --red). Правишь — поднимай ?v= (его считает hc_stores_page.php по md5). */ #hc-contacts.hc-st :where(h1,h2,h3,address){color:var(--ink)} #hc-contacts.hc-st address{font-style:normal} #hc-contacts.hc-st .hc-st-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ——— крошки: четыре уровня, на телефоне переносятся ——— */ #hc-contacts .hc-st-crumb{flex-wrap:wrap;row-gap:4px;align-items:baseline} #hc-contacts .hc-st-crumb span[aria-current]{color:var(--ink)} /* ——— вводный блок ——— */ #hc-contacts .hc-st-intro{padding:36px 0 38px} #hc-contacts .hc-st-intro h1{font-size:clamp(30px,2.9vw,44px);max-width:820px} #hc-contacts .hc-st-intro .intro-copy{max-width:360px} /* ——— карточка площадки (панель как на /contacts/) ——— */ #hc-contacts .hc-st-panel h2{margin-top:18px} #hc-contacts .hc-st-panel .detail p.hc-st-addr{font-weight:650} #hc-contacts .hc-st-phone{font-weight:650;font-size:14px} #hc-contacts .hc-st-panel .detail > div > span{display:block} #hc-contacts .hc-st-panel .notice{margin:0 0 4px} #hc-contacts .hc-st-panel .photo-button img{object-position:50% 50%} #hc-contacts .hc-st-panel--nophoto{grid-template-columns:1fr} /* ——— как добраться + карта ——— */ #hc-contacts .hc-st-route{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-areas:"head map" "text map";column-gap:56px;align-items:start;padding:50px 0 54px;border-bottom:1px solid var(--line)} #hc-contacts .hc-st-route__head{grid-area:head} #hc-contacts .hc-st-route__head h2{font-size:29px;margin:0 0 10px} #hc-contacts .hc-st-route__text{grid-area:text;max-width:620px} #hc-contacts .hc-st-route__text h3{font-size:15px;font-weight:600;letter-spacing:-.2px;margin:24px 0 8px} #hc-contacts .hc-st-route__text h3:first-child{margin-top:8px} #hc-contacts .hc-st-route__text p{font-size:13.5px;line-height:1.8;margin:0 0 12px;overflow-wrap:break-word;hyphens:manual} #hc-contacts .hc-st-route__text b{font-weight:650} #hc-contacts .hc-st-route--nomap{grid-template-columns:1fr;grid-template-areas:"head" "text"} #hc-contacts .hc-st-route--notext{grid-template-columns:1fr;grid-template-areas:"head" "map"} /* высота карты задана заранее — заглушка и карта одного размера, сдвига вёрстки нет */ #hc-contacts .hc-st-map{grid-area:map;position:relative;height:480px;border:1px solid var(--line);border-radius:8px;overflow:hidden; background-color:var(--paper); background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:48px 48px;background-position:-1px -1px} @media (min-width:761px){#hc-contacts .hc-st-map{position:sticky;top:96px}} #hc-contacts .hc-st-map__canvas{position:absolute;inset:0} #hc-contacts .hc-st-map__stub{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;padding:24px;text-align:center} #hc-contacts .hc-st-map__stub > svg{width:34px;height:34px;color:var(--red);background:var(--white);border-radius:50%;padding:6px;box-sizing:content-box; border:1px solid var(--line)} #hc-contacts .hc-st-map__addr{margin:0;max-width:420px;font-size:13px;font-weight:650;background:var(--white);padding:8px 14px;border-radius:4px; border:1px solid var(--line)} /* строка состояния — поверх нижнего края заглушки, чтобы её появление ничего не сдвигало */ #hc-contacts .hc-st-map__state{position:absolute;left:16px;right:16px;bottom:14px;margin:0;font-size:12px;color:var(--muted)} #hc-contacts .hc-st-map__acts{display:flex;flex-wrap:wrap;gap:9px;justify-content:center} #hc-contacts .hc-st-map__acts .button{background:var(--white)!important} #hc-contacts .hc-st-map.is-ready .hc-st-map__stub{display:none} #hc-contacts .hc-st-map.is-loading .hc-st-map__load{opacity:.6;pointer-events:none} /* ——— карточки площадок (список и «Другие площадки») ——— */ #hc-contacts .hc-st-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} #hc-contacts .hc-st-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))} #hc-contacts .hc-st-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden;min-width:0} #hc-contacts .hc-st-card__photo{display:block;aspect-ratio:2/1;background:var(--line);overflow:hidden} #hc-contacts .hc-st-cards--3 .hc-st-card__photo{aspect-ratio:3/2} #hc-contacts .hc-st-card__photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s} #hc-contacts .hc-st-card:hover .hc-st-card__photo img{transform:scale(1.02)} #hc-contacts .hc-st-card__body{display:flex;flex-direction:column;flex:1;padding:22px 26px 24px} #hc-contacts .hc-st-card__kind{margin:0 0 8px;font-size:10px;letter-spacing:1.3px;font-weight:700;color:var(--muted)} #hc-contacts .hc-st-card__name{margin:0 0 10px;font-size:19px;font-weight:600;letter-spacing:-.4px;line-height:1.3} #hc-contacts .hc-st-card__name a:hover{color:var(--red-ink,var(--red))} #hc-contacts .hc-st-card address{font-weight:650;font-size:13px;line-height:1.55;margin:0 0 8px} #hc-contacts .hc-st-card__hours{margin:0 0 18px;font-size:12.5px;line-height:1.7;color:var(--muted)} #hc-contacts .hc-st-card__acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto} #hc-contacts .hc-st-card__acts .button{flex:1 1 auto} /* ——— список: города ——— */ #hc-contacts .hc-st-city{padding:6px 0 40px} #hc-contacts .hc-st-city + .hc-st-city{border-top:1px solid var(--line);padding-top:36px} #hc-contacts .hc-st-city__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin:0 0 20px} #hc-contacts .hc-st-city__head h2{font-size:29px;margin:0} #hc-contacts .hc-st-city__phone{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.3px;white-space:nowrap} #hc-contacts .hc-st-city__phone svg{width:18px;height:18px;color:var(--red)} #hc-contacts .hc-st-about{padding:44px 0 46px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} #hc-contacts .hc-st-about__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px} #hc-contacts .hc-st-about__kind{margin:0 0 8px;font-size:10px;letter-spacing:1.3px;font-weight:700;color:var(--muted)} #hc-contacts .hc-st-about p{font-size:13.5px;line-height:1.8;margin:0} #hc-contacts .hc-st-about p.hc-st-about__kind{font-size:10px;line-height:1.5;margin-bottom:8px} #hc-contacts .hc-st-about b,#hc-contacts .hc-st-about strong{font-weight:650} #hc-contacts .hc-st-about__spb{margin-top:34px;max-width:900px} #hc-contacts .hc-st-about__spb h2{font-size:22px;letter-spacing:-.6px;margin:0 0 10px} /* ——— другие площадки ——— */ #hc-contacts .hc-st-others{padding:48px 0 50px;border-bottom:1px solid var(--line)} #hc-contacts .hc-st-others__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 24px} #hc-contacts .hc-st-others__head h2{font-size:29px;margin:0} #hc-contacts .hc-st-all{font-size:12px;font-weight:700;white-space:nowrap;padding:6px 0} #hc-contacts .hc-st-all span{margin-left:10px;color:var(--red-ink,var(--red))} /* ——— планшет ——— */ @media (max-width:1100px){ #hc-contacts .hc-st-route{column-gap:32px} #hc-contacts .hc-st-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))} #hc-contacts .hc-st-card__body{padding:20px 22px 22px} } @media (max-width:900px){ #hc-contacts .hc-st-route{grid-template-columns:1fr;grid-template-areas:"head" "map" "text"} #hc-contacts .hc-st-map{position:relative;top:auto;height:400px;margin:6px 0 18px} #hc-contacts .hc-st-route--nomap{grid-template-areas:"head" "text"} } /* ——— телефон ——— */ @media (max-width:760px){ #hc-contacts .hc-st-intro{padding:22px 0 22px} #hc-contacts .hc-st-intro h1{font-size:28px;letter-spacing:-1px;line-height:1.22} /* H1 не короче двух строк: Montserrat 500 приходит позже запасного шрифта, и «Складской комплекс СПб» из одной строки становился двумя — карточка ниже прыгала на 34 px (CLS 0,025 на 390). Все четыре H1 площадок в Montserrat — 2–3 строки. */ #hc-contacts .hc-st-intro h1{min-height:2.44em} #hc-contacts .hc-st-intro .intro-copy{max-width:none;margin-top:14px;font-size:13px} #hc-contacts .hc-st-panel .location-info h2{font-size:27px} #hc-contacts .hc-st-route{padding:34px 0 36px} #hc-contacts .hc-st-route__head h2,#hc-contacts .hc-st-others__head h2,#hc-contacts .hc-st-city__head h2{font-size:24px} #hc-contacts .hc-st-map{height:320px} #hc-contacts .hc-st-route__text p{font-size:14px;line-height:1.7} #hc-contacts .hc-st-cards,#hc-contacts .hc-st-cards--3{grid-template-columns:1fr;gap:14px} #hc-contacts .hc-st-card__photo,#hc-contacts .hc-st-cards--3 .hc-st-card__photo{aspect-ratio:3/2} #hc-contacts .hc-st-card__body{padding:18px 18px 20px} #hc-contacts .hc-st-card__kind,#hc-contacts .hc-st-about__kind,#hc-contacts .hc-st-about p.hc-st-about__kind{font-size:12px;letter-spacing:1px} #hc-contacts .hc-st-card__hours{font-size:13px} #hc-contacts .hc-st-card address{font-size:14px} #hc-contacts .hc-st-about{padding:32px 0 34px} #hc-contacts .hc-st-about__grid{grid-template-columns:1fr;gap:22px} #hc-contacts .hc-st-about p{font-size:14px;line-height:1.7} #hc-contacts .hc-st-about__spb h2{font-size:20px} #hc-contacts .hc-st-others{padding:34px 0 36px} #hc-contacts .hc-st-others__head{flex-direction:column;align-items:flex-start;gap:6px} #hc-contacts .hc-st-city__phone{font-size:16px} #hc-contacts .hc-st-map__addr{font-size:13px} #hc-contacts .hc-st-map__state{font-size:13px} #hc-contacts .hc-st-crumb{gap:4px 10px;padding-top:10px} /* тап-цели ≥ 44 px (u1_mobile_a11y, W5): ссылки крошек, «Скопировать адрес», телефон, ссылки-действия */ #hc-contacts .hc-st-crumb a,#hc-contacts .hc-st-crumb span[aria-current]{display:inline-flex;align-items:center;min-height:44px} #hc-contacts.hc-st .text-button,#hc-contacts .hc-st-phone,#hc-contacts.hc-st .visit-guide a,#hc-contacts .hc-st-all, #hc-contacts .hc-st-city__phone{display:inline-flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0} #hc-contacts .hc-st-card__acts .button,#hc-contacts .hc-st-map__acts .button,#hc-contacts.hc-st .location-actions .button{min-height:44px} /* название площадки в карточке — ссылка ростом в строку; зону нажатия добираем полями, не сдвигая вёрстку */ #hc-contacts .hc-st-card__name a{display:block;padding:10px 0;margin:-10px 0} } @media (prefers-reduced-motion:reduce){#hc-contacts .hc-st-card__photo img{transition:none}}