diff --git a/src/pages/index.astro b/src/pages/index.astro index 2270a7a..31d161f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,6 +1,6 @@ --- import Base from '../layouts/Base.astro'; -import { SITE_TITLE, SITE_TAGLINE, ADDRESS, PHONES, GEO } from '../consts'; +import { SITE_TAGLINE, ADDRESS, PHONES, GEO } from '../consts'; const mapSrc = `https://yandex.ru/map-widget/v1/?ll=${GEO.lon}%2C${GEO.lat}&z=${GEO.zoom}&pt=${GEO.lon}%2C${GEO.lat}%2Cpm2rdm`; --- @@ -20,43 +20,46 @@ const mapSrc = `https://yandex.ru/map-widget/v1/?ll=${GEO.lon}%2C${GEO.lat}&z=${

Мы переехали

-

- {ADDRESS.postal}
- г. {ADDRESS.region}, {ADDRESS.street}
- {ADDRESS.building} -

-
-
+
+
+
+

Адрес

+

+ {ADDRESS.postal}
+ г. {ADDRESS.region}, {ADDRESS.street}
+ {ADDRESS.building} +

+
-
-
-

Телефоны

- -
-
+
+

Телефоны

+ +
+
-
-
-

Как нас найти

-
- +
+

Как нас найти

+
+ +
+
diff --git a/src/styles/global.css b/src/styles/global.css index 9878c18..feb3ed0 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -8,7 +8,7 @@ --accent: #f5b400; /* янтарный — отсылка к авто-тематике */ --accent-soft: #d99a00; --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; - --reading-max: 64rem; + --reading-max: 76rem; } * { box-sizing: border-box; } @@ -91,11 +91,31 @@ section h2::before { background: var(--accent); } +/* ── Контактный блок (2 колонки на desktop) ─────────────────────── */ +.contact-grid { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; + align-items: stretch; +} +@media (min-width: 880px) { + .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; } +} +.contact-left { display: flex; flex-direction: column; gap: 1.75rem; } +.contact-subhead { + font-size: 0.78rem; + font-weight: 500; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--ink-soft); + margin: 0 0 0.35rem; +} + /* ── Адрес ──────────────────────────────────────────────────────── */ .address-block { - font-size: clamp(1.1rem, 1.6vw, 1.35rem); - line-height: 1.6; - max-width: 40rem; + font-size: clamp(1.15rem, 1.5vw, 1.4rem); + line-height: 1.55; + margin: 0; } .address-block strong { font-weight: 700; } .address-postal { color: var(--ink-soft); font-size: 0.92rem; letter-spacing: 0.05em; } @@ -103,12 +123,13 @@ section h2::before { /* ── Телефоны ───────────────────────────────────────────────────── */ .phones { display: grid; - grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); - gap: 0.75rem; - margin: 1.5rem 0 0; + grid-template-columns: 1fr 1fr; + gap: 0.6rem; + margin: 0; padding: 0; list-style: none; } +@media (max-width: 480px) { .phones { grid-template-columns: 1fr; } } .phones a { display: flex; align-items: center; @@ -132,13 +153,14 @@ section h2::before { .map-wrap { position: relative; width: 100%; - aspect-ratio: 16 / 9; + min-height: 22rem; + height: 100%; border: 1px solid var(--rule-strong); overflow: hidden; background: var(--paper-soft); } -.map-wrap iframe { width: 100%; height: 100%; border: 0; } -@media (max-width: 640px) { .map-wrap { aspect-ratio: 4 / 3; } } +.map-wrap iframe { width: 100%; height: 100%; min-height: 22rem; border: 0; display: block; } +@media (max-width: 879px) { .map-wrap { aspect-ratio: 4 / 3; min-height: 0; height: auto; } } /* ── Footer ─────────────────────────────────────────────────────── */ .site-footer {