/* Сайт-визитка. Мобайл-фёрст, палитра вертикали, фирменный шрифт. * * Цветов здесь нет — только токены из `/theme.css`, как в админке и на * странице записи. Hex в этом файле такая же ошибка: сайт обязан выглядеть * студией, а не кодом, который однажды покрасили. * * Фотографий студии в материалах бренда нет, поэтому вся выразительность * держится на трёх вещах: логотипе, палитре и воздухе. Сгенерированных * фонов нет сознательно — подделка фотографии заметна и дешевит. */ /* №478: @font-face здесь больше нет — Inter приезжает из /theme.css, той же строкой, что палитра (site.html подключает /theme.css первым). Сайт перестал быть шрифтовым исключением: стек один на весь продукт. */ *, *::before, *::after { box-sizing: border-box; } /* Резерв под полосу прокрутки на корне — тот же приём и тот же текст, что в `admin/static/css/just.css` (№373): без него страница дёргается при появлении настоящей полосы. №374. */ html { scrollbar-gutter: stable; } @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--page); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } p { margin: 0; } a { color: inherit; } .muted { color: var(--ink-soft); } /* ------------------------------------------------------------ шапка */ .bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: rgba(var(--paper-rgb), .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .bar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: var(--text-body); } .bar-brand img { border-radius: 10px; } .bar-nav { display: flex; align-items: center; gap: 8px; } .bar-book { text-decoration: none; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 9px 16px; font-size: var(--text-ui); font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; } .bar-lang { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; font-size: var(--text-caption); color: var(--ink-soft); min-height: 40px; display: inline-flex; align-items: center; } /* ------------------------------------------------------------ хиро */ /* Фотография студии пришла от владельцев (кабинет: кушетка, штора, тёплый свет). Кадр вертикальный, поэтому их два: горизонтальный кроп для десктопа и вертикальный для телефона — один и тот же снимок, но composed под свой экран, а не растянутый. Поверх — затемнение цветом теней вертикали: без него светлый текст на светлом мраморе не читается вовсе. Наложение двойное (сверху плотнее), чтобы шапка не сливалась с потолком в кадре. */ .hero { background-image: linear-gradient(rgba(var(--shadow-rgb), .70), rgba(var(--shadow-rgb), .55)), url('/static/img/hero-mobile.jpg'); background-size: cover; background-position: center; color: var(--paper); padding: 48px 20px 56px; text-align: center; } .hero .hero-kind, .hero .hero-lead { color: rgba(var(--paper-rgb), .82); } .hero .hero-address { color: rgba(var(--paper-rgb), .92); } .hero-inner { max-width: 720px; margin: 0 auto; } .hero-logo { border-radius: 24px; margin-bottom: 20px; } .hero h1 { font-size: 44px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; } .hero-kind { color: var(--ink-soft); text-transform: lowercase; letter-spacing: .04em; margin-bottom: 18px; } /* №478: акценты — тем же единым стеком (--font-accent теперь и есть он); история с ₾: у Inter глиф U+20BE ЕСТЬ, у Golos и Cormorant не было. */ .hero-tagline { font-weight: 500; font-size: var(--text-title); letter-spacing: .01em; /* На фото акцент светлый: терракота из палитры читается только на кремовом фоне, а здесь под текстом снимок. */ color: var(--tint); margin-bottom: 14px; } .hero-lead { font-size: var(--text-h); color: var(--ink-soft); margin-bottom: 18px; } .hero-address { font-size: var(--text-body); margin-bottom: 26px; } .hero-actions { display: grid; gap: 10px; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 15px 22px; border-radius: 14px; text-decoration: none; font-weight: 600; font-size: var(--text-body); } .btn-main { background: var(--paper); color: var(--ink); } .btn-main:active { background: var(--tint); } /* Вторая кнопка на фото — стеклянная: сплошная заливка спорила бы с первой, а прозрачная рамка оставляет снимок видимым. */ .btn-quiet { background: rgba(var(--shadow-rgb), .28); border: 1px solid rgba(var(--paper-rgb), .55); color: var(--paper); backdrop-filter: blur(3px); } /* ------------------------------------------------------------ секции */ .section { max-width: 1040px; margin: 0 auto; padding: 44px 16px; } .section.tinted { max-width: none; background: var(--surface-sunken); border-block: 1px solid var(--line); } .section.tinted > * { max-width: 1040px; margin-inline: auto; } .section h2 { font-size: var(--text-title); margin-bottom: 22px; letter-spacing: .02em; } .note { margin-top: 16px; font-size: var(--text-ui); } .grid { display: grid; gap: 12px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; } .card h3 { font-size: var(--text-h); margin-bottom: 6px; } .card .muted { font-size: var(--text-ui); line-height: 1.45; } .card .price { margin-top: 10px; font-weight: 600; font-size: var(--text-h); color: var(--terra-text); } /* Фотополоса внутри секции. Исходники маленькие (626–652 px по ширине), поэтому полоса невысокая — растягивать снимок до полноэкранного значит показать его мылом. */ .shot { margin: 0 0 22px; } .shot img { width: 100%; height: 200px; object-fit: cover; border-radius: 18px; display: block; background: var(--tint); } /* ------------------------------------------------------------ мастера */ .people { gap: 18px; } .person { text-align: center; } .person img { width: 100%; max-width: 320px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; display: block; margin: 0 auto 12px; background: var(--tint); } /* Мастер без фото не оставляет дыру: тот же приём, что в записи (`/book`, `.ava.blank` в book.css — встречный указатель стоит там) — заглушка с первой буквой имени. От переноса из /book три отличия, все три — чтобы карточки с фото и без стояли в ряду одинаково: - бокс не 56px, а бокс фото витрины (100% / max 320, квадрат, отступ); - форма не круг, а скругление фото — 18px, ровно как у `.person img` выше (решено по скриншотам обоих вариантов: круг рядом со скруглёнными квадратами читался как чужеродный элемент); - шрифт наследный: стек один на весь продукт (№478). */ .person .ava.blank { width: 100%; max-width: 320px; aspect-ratio: 1 / 1; border-radius: 18px; margin: 0 auto 12px; background: var(--tint); display: grid; place-items: center; font-weight: 700; font-size: 96px; color: var(--ink-soft); } .person h3 { font-size: var(--text-h); } .person .muted { font-size: var(--text-ui); } .person .bio { font-size: var(--text-ui); color: var(--ink-soft); line-height: 1.45; max-width: 340px; margin: 6px auto 0; } /* ------------------------------------------------------------ отзывы */ /* Карусель без библиотеки: горизонтальная прокрутка с примагничиванием. На телефоне это привычный жест, на десктопе — ряд карточек со скроллом. */ .quotes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 86%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; } .quote { scroll-snap-align: start; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; } .quote blockquote { margin: 0 0 14px; font-size: var(--text-body); line-height: 1.55; } .quote figcaption { color: var(--ink-soft); font-size: var(--text-ui); } .links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 16px; } .links a { color: var(--terra-text); font-size: var(--text-body); } .address { font-size: var(--text-h); margin-bottom: 6px; } .directions { font-size: var(--text-body); line-height: 1.55; color: var(--ink-soft); margin-bottom: 10px; white-space: pre-line; } /* Видео вертикальное — на телефоне оно во всю ширину, на десктопе стоит колонкой рядом с текстом: растянутый на всю ширину экрана вертикальный ролик выглядит случайным, а не снятым для этой страницы. */ .where { display: grid; gap: 20px; } .route { margin: 0; } /* `aspect-ratio` вместо высоты в пикселях: место под вертикальный ролик резервируется до его загрузки, и текст рядом не прыгает, когда плеер встанет на место. У прежнего