/* Стили страницы raboty/ayat-river/index.html.
Скелет кейса общий и отлажен — берём его целиком (raboty-milery.css),
меняем только характер.
У AYAT River характер задан самим проектом: тайга, Катунь, тёплое дерево
и фирменный нефрит заказчицы #58A090. Чистый нефрит на светлом фоне даёт
контраст 2.77 — ровно та проблема, о которой кейс и рассказывает. Поэтому
здесь он живёт только заливкой, а для текста и акцентов взят затемнённый
оттенок того же цвета: #2F7A66 на бумаге даёт 4.9.
«Бордо» базового файла переопределяем, но имена переменных не трогаем —
иначе пришлось бы переписывать весь импортированный файл. */
@import url('/css/pages/raboty-milery.css?v=20260731b');
:root{
--paper:#F4F2ED;--paper2:#ECE9E2;--paper3:#DEDBD2;--white:#FCFBF8;
--ink:#17211E;--ink64:#55635E;--ink32:#8B9992;--hair:#DBD7CE;
/* «Бордо» становится глубоким нефритом, «палевое» — затемнённым нефритом. */
--bordo:#12332C;--bordo-deep:#0B2520;--bordo-pale:#2F7A66;--on-bordo:#DCE9E3;
/* Те же шрифты, что на самом сайте AYAT River: антиква в заголовках,
нейтральный гротеск в тексте. Моноширинного в проекте нет — метки
набираем разрядкой, а не другой гарнитурой. */
--display:'Prata',Georgia,'Times New Roman',serif;
--sans:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
--mono:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* Метки и номера — разрядкой и весом: на сайте отеля так же. */
.lbl,.ctop .tag,.vs-minibar__tag,.kicker,.spec .sh,.shead .meta,
.browser__url,.shot__txt .num,.it .ix{
font-family:var(--sans);letter-spacing:.11em;
}
.fact__n{font-family:var(--display);letter-spacing:0}
/* Prata существует только в одном начертании, курсива у неё нет —
выделяем цветом, а не наклоном. */
.title em{color:var(--bordo-pale);font-style:normal}
h2 em,.shot__txt h3 em{color:var(--bordo-pale);font-style:normal}
/* На тёмных секциях затемнённый нефрит уходит в фон — там берём светлый
оттенок того же цвета: 2.4 против 10 по контрасту. */
.why h2 em,.vs-cta h2 em{color:#8FC7B6}
/* Чистый нефрит — только заливкой, под тёмным текстом. Это ровно тот приём,
который описан в кейсе, и страница показывает его на себе. */
.jade{
background:#58A090;color:#0B2520;
border-radius:0;padding:20px 24px;max-width:760px;margin-top:26px;
}
.jade b{display:block;margin-bottom:4px}
.jade p{margin:0;font-size:15px;line-height:1.55;color:#0B2520}
/* ── Две колонки в смысловых разделах ────────────────────────────────────
Базовый файл описывает .duo только внутри .thread-sec и .why, поэтому в
разделах «Задача» и «Что сделали» текст ложился одной колонкой во всю
ширину и без отбивок между абзацами. Здесь это дополняется. */
.section .duo{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-top:34px;align-items:start}
.section .duo p{margin:0 0 14px;color:var(--ink64);max-width:62ch}
.section .duo p:last-child{margin-bottom:0}
.section .duo b{color:var(--ink);font-weight:600}
.section .duo .pull{
font-family:var(--display);font-size:19px;line-height:1.5;color:var(--bordo);
border-left:2px solid var(--bordo-pale);padding-left:18px;margin-top:20px;
}
@media(max-width:860px){
.section .duo{grid-template-columns:1fr;gap:24px;margin-top:26px}
.section .duo .pull{font-size:17px}
}
/* ── Обложка на всю высоту, в характере сайта отеля ──────────────────────
Первый экран кейса работает как первый экран самого AYAT River: полный
видпорт, воздух, антиква и нефрит. Фонового фото нет намеренно — кейс
про решения, и фотографии здесь живут в «браузерных» кадрах ниже. */
.cover{
min-height:100svh;display:flex;flex-direction:column;
padding:20px 0 28px;border-top:3px solid #58A090;
background:
radial-gradient(1100px 640px at 88% -12%, rgba(88,160,144,.14), transparent 62%),
radial-gradient(900px 520px at -10% 110%, rgba(18,51,44,.06), transparent 58%),
var(--paper);
}
.cover>.wrap{flex:1;display:flex;flex-direction:column;width:100%}
.cover .ctop{padding-bottom:22px}
.cover .cmain{flex:1;align-items:center}
.cover .spec{border-top:3px solid #58A090}
.cover .cbottom{margin-top:30px}
.cover .status{margin-top:20px}
/* Заголовок и подводка компактнее, чтобы обложка целиком помещалась
в высоту экрана вместе с плашкой статуса. */
.cover .title{font-size:clamp(38px,4.6vw,62px);line-height:1.02}
.cover .kicker{margin-bottom:16px}
.cover .lead{margin-top:18px;font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.62}
.cover .status{padding:14px 20px}
.cover .status p{font-size:14px}
/* Невысокие экраны (ноутбуки): ещё компактнее, но всё в одном экране. */
@media(min-width:921px) and (max-height:820px){
.cover{padding:14px 0 20px}
.cover .ctop{padding-bottom:12px}
.cover .title{font-size:clamp(30px,3.6vw,44px)}
.cover .kicker{margin-bottom:10px;font-size:11px}
.cover .lead{margin-top:12px;font-size:14px;line-height:1.55}
.cover .spec{padding:16px 18px}
.cover .spec .row{padding:8px 0}
.cover .cbottom{margin-top:18px}
.cover .demo{padding:13px 24px}
.cover .status{margin-top:14px;padding:10px 16px}
.cover .status p{font-size:13px}
}
@media(max-width:920px){
.cover{min-height:0;display:block;border-top-width:2px}
}
/* Плашка статуса: сайт запускается, цифр по броням нет, и об этом
должно быть сказано на самой странице. */
.status{
margin-top:26px;display:flex;gap:14px;align-items:flex-start;
background:var(--white);border:1px solid var(--hair);
border-left:3px solid var(--bordo-pale);
padding:18px 22px;max-width:760px;
}
.status b{color:var(--ink);display:block;margin-bottom:4px}
.status p{margin:0;color:var(--ink64);font-size:15px;line-height:1.55}
@media(max-width:720px){
.status,.jade{padding:16px 18px;margin-top:20px}
.status p,.jade p{font-size:14px}
}
/* ── Разбор фирменного цвета ──────────────────────────────────────────────
Единственная схема на странице. Показывает то, что словами объяснять
долго: где нефрит работает, а где нет. */
.swx{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:820px}
.sw{border:1px solid var(--hair);background:var(--white)}
.sw__box{height:96px;display:flex;align-items:flex-end;padding:12px 14px;font-size:15px}
.sw__box--fill{background:#58A090;color:#0B2520}
.sw__box--bad{background:var(--white);color:#58A090}
.sw__box--good{background:var(--white);color:#2F7A66}
.sw__t{padding:12px 14px;border-top:1px solid var(--hair);font-size:13.5px;color:var(--ink64);line-height:1.45}
.sw__t b{display:block;color:var(--ink);font-weight:600;letter-spacing:.04em;font-size:12px;text-transform:uppercase;margin-bottom:4px}
@media(max-width:720px){
.swx{grid-template-columns:1fr;gap:10px}
.sw__box{height:72px}
}
/* ── Мобильная версия: три телефона вместо одного длинного скриншота ─────
Полностраничный снимок мобильной версии в рамке браузера читается как
обрывок обоев. Показываем три коротких кадра телефонного формата. */
.mob{margin-top:64px}
.mob__txt{max-width:640px}
.mob__txt .num{font-size:12px;color:var(--ink32);letter-spacing:.08em}
.mob__txt .lbl{margin-top:6px}
.mob__txt h3{margin:10px 0 14px;font-family:var(--display);font-size:clamp(22px,2.4vw,30px);line-height:1.2}
.mob__txt p{margin:0 0 10px;color:var(--ink64)}
.mob__txt p.small{font-size:14px;color:var(--ink32)}
.mob__row{
margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);
gap:34px;align-items:start;max-width:900px;
}
.mob__row--6{row-gap:44px}
.phone{margin:0}
.phone__scr{
background:var(--ink);border-radius:26px;padding:8px;
box-shadow:0 26px 54px -30px rgba(11,37,32,.55);
transition:transform .25s ease;
}
.phone:hover .phone__scr{transform:translateY(-4px)}
.phone__scr img{
display:block;width:100%;height:auto;border-radius:19px;
background:var(--white);cursor:zoom-in;
}
.phone figcaption{
margin-top:12px;font-size:11px;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink32);text-align:center;
}
@media(max-width:900px){
.mob__row{grid-template-columns:repeat(3,1fr);gap:16px}
.phone__scr{border-radius:18px;padding:5px}
.phone__scr img{border-radius:14px}
.phone figcaption{font-size:10px;letter-spacing:.04em}
}
@media(max-width:560px){
.mob__row{grid-template-columns:1fr 1fr;gap:18px;max-width:none}
.mob__row .phone:last-child{grid-column:1 / -1;max-width:52%;margin:0 auto}
.mob__row--6 .phone:last-child{grid-column:auto;max-width:none;margin:0}
}