

/* Start:/upload/project/css/project-main.css?178515858620470*/
/* ============================================================
   Проектные решения 1200x600.ru — главная страница раздела
   Классы с префиксами ps- и ac-, конфликтов с шаблоном нет.

   Если шаблон сайта оборачивает контент в узкий контейнер,
   раскомментируйте строку ниже — блок выйдет на всю ширину:
   .ps-root{width:100vw;margin-left:calc(50% - 50vw)}
   ============================================================ */

/* Шрифты подключены локально из /upload/project/fonts/.
   Google Fonts больше не используется — внешних зависимостей нет.
   Prata, Inter, IBM Plex Mono — SIL Open Font License 1.1. */
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url('/upload/project/fonts/prata-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/upload/project/fonts/inter-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/upload/project/fonts/plexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/upload/project/fonts/plexmono-500.woff2') format('woff2')}

 /* ---------- ТОКЕНЫ ---------- */ /* СМЕНА ФОНА: достаточно поменять --ink, --ink-2, --ink-3. Готовые варианты: Графит (сейчас): #14181b / #1c2126 / #262d34 Чернильный синий: #10151f / #171e2b / #212a3a Тёмный хвойный: #111814 / #18211c / #222d26 Тёплый коричневый: #17130f / #201a15 / #2a231c (первая версия) */ .ps-root{ --ink:#14181b; --ink-2:#1c2126; --ink-3:#262d34; --cream:#eef0f1; --sand:#d8c39c; --sand-d:#b09a72; --mut:#8d959c; --line:rgba(238,240,241,.13); --paper:#e9e7e2; --paper-ink:#15191c; --paper-line:rgba(21,25,28,.14); --disp:'Prata',Georgia,serif; --body:'Inter',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --pad:clamp(20px,5vw,72px); --max:1400px; font-family:var(--body); background:var(--ink); color:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; }

/* --------------------------------------------------------------
   Совместимость с шаблоном сайта.

   Шаблон задаёт цвет прямо тегам — h1{color:#222}, .container p{...}.
   Правило на тег перебивает цвет, унаследованный от .ps-root, и текст
   раздела уходит в тёмный. Ниже наследование возвращается, а всем
   собственным цветовым правилам раздела поднята специфичность —
   в селекторе минимум два класса.

   Первым делом усилен сам контейнер: .ps-root — это div, и правило
   шаблона вида .container div{color:#555} его перебивает. Пока цвет
   сбит на контейнере, всё содержимое наследует уже испорченный.

   Возвращается именно наследование (color:inherit), а не конкретный
   цвет: тогда заголовки и текст на светлых секциях (.ps-zones, .ps-tech,
   .ps-spec, .ps-pal) остаются тёмными, как и задумано.

   :where() специфичности не добавляет, поэтому все наши правила ниже
   по файлу продолжают работать как раньше.
   -------------------------------------------------------------- */
.ps-root.ps-root{color:var(--cream);background-color:var(--ink)}
.ps-root.ps-root :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,blockquote,
  table,thead,tbody,tfoot,tr,th,td,caption,figure,figcaption,form,label,legend,
  fieldset,span,div,a,em,i,b,strong,small,address,time,mark,input,textarea,
  button){color:inherit}

.ps-root *,.ps-root *::before,.ps-root *::after{box-sizing:border-box}
.ps-root p,.ps-root h1,.ps-root h2,.ps-root h3,.ps-root h4,.ps-root ul,.ps-root figure{margin:0;padding:0}
.ps-root ul{list-style:none}
.ps-root img{max-width:100%;display:block}
.ps-root.ps-root a{color:inherit;text-decoration:none}
.ps-root a:focus-visible,.ps-root button:focus-visible,.ps-root input:focus-visible,.ps-root textarea:focus-visible{ outline:2px solid var(--sand);outline-offset:3px; }
.ps-wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.ps-sec{padding:clamp(60px,9vw,124px) 0;position:relative}
/* ---------- ТИПОГРАФИКА ---------- */ .ps-root .ps-eyebrow{ font-family:var(--mono);font-size:11px;font-weight:400; letter-spacing:.34em;text-transform:uppercase;color:var(--sand-d); }
.ps-h2{ font-family:var(--disp);font-weight:400; font-size:clamp(30px,4.4vw,62px);line-height:1.08;letter-spacing:-.01em; margin-top:26px;max-width:20ch; }
.ps-root .ps-h2 em{font-style:normal;color:var(--sand)}
.ps-root .ps-lead{margin-top:22px;max-width:58ch;color:#b6bcc1;font-size:clamp(15px,1.15vw,17px)}
.ps-root .ps-mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.ps-btn{ display:inline-flex;align-items:center;gap:10px;padding:16px 30px;cursor:pointer; border:1px solid transparent;font-family:var(--mono);font-size:11px; letter-spacing:.2em;text-transform:uppercase; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.ps-root.ps-root .ps-btn--fill{background:var(--sand);color:#14181b;font-weight:500}
.ps-root.ps-root .ps-btn--fill:hover{background:#e9d8b6;color:#14181b}
.ps-root.ps-root .ps-btn--line{border-color:rgba(238,240,241,.34);color:var(--cream)}
.ps-root.ps-root .ps-btn--line:hover{border-color:var(--sand);color:var(--sand)}
/* ============ HERO ============ */ .ps-hero{ min-height:min(90vh,760px);display:flex;flex-direction:column;justify-content:flex-end; position:relative;overflow:hidden;padding-top:80px; /* ФОТО 01 · горизонтальное, от 2000 px по ширине. Подставить: url('/upload/project/hero.jpg') первым слоем после градиента. */ background-image: linear-gradient(100deg,rgba(20,24,27,.97) 0%,rgba(20,24,27,.9) 38%,rgba(20,24,27,.62) 68%,rgba(20,24,27,.5) 100%), url(/upload/project/photo-01.jpg); background-size:cover,cover; background-position:center,right center; background-color:var(--ink); }
.ps-hero__top{position:absolute;top:34px;left:0;right:0;display:flex;justify-content:space-between;gap:20px}
.ps-hero__body{padding-bottom:clamp(40px,6vw,72px)}
.ps-hero__title{ font-family:var(--disp);font-weight:400; font-size:clamp(34px,6.6vw,86px);line-height:1.03;letter-spacing:-.015em;margin-top:24px; }
.ps-root .ps-hero__title em{font-style:normal;color:var(--sand)}
.ps-hero__foot{ display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-end; margin-top:clamp(32px,4vw,52px); }
.ps-root .ps-hero__note{max-width:46ch;color:#bcc2c7;font-size:15px}
.ps-root .ps-hero__stats{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mut);text-align:left}
.ps-root .ps-hero__stats b{color:var(--cream);font-weight:500}
.ps-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* ============ ПРОБЛЕМА ============ */ .ps-prob{background:var(--ink-2)}
.ps-prob__grid{display:grid;gap:clamp(30px,4vw,64px);grid-template-columns:1fr;align-items:center}
.ps-prob__list{margin-top:34px;border-top:1px solid var(--line)}
.ps-prob__item{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.ps-root .ps-prob__n{font-family:var(--mono);font-size:11px;color:var(--sand-d);padding-top:4px}
.ps-prob__t{font-size:17px;font-weight:500}
.ps-root .ps-prob__d{font-size:14px;color:#9aa2a9;margin-top:5px}
.ps-ph{ aspect-ratio:1/1;background:linear-gradient(150deg,#434c54,#1e2429 65%); display:flex;align-items:flex-end;padding:22px;position:relative; }
.ps-root .ps-ph::after{ content:attr(data-cap);font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:rgba(238,240,241,.5); }
.ps-ph--wide{aspect-ratio:16/10}
/* ФОТО 03 — вшито для превью. На сайте заменить на: background-image:url('/upload/project/photo-03.jpg'); */ /* ФОТО 02 — вшито для превью. На сайте заменить на: background-image:url('/upload/project/photo-02.jpg'); */ .ps-ph--p02{background-image:url(/upload/project/photo-02.jpg);background-size:cover;background-position:center}
.ps-ph--p02::after{content:none}
.ps-root .ps-ph__cap{ position:relative;z-index:1;font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--cream);background:rgba(20,24,27,.72); padding:9px 14px;backdrop-filter:blur(2px); }
.ps-ph--p03{background-image:url(/upload/project/photo-03.jpg);background-size:cover;background-position:center}
.ps-ph--p03::after{content:none}
/* ============ АНАЛОГ / ЦЕНА ============ */ .ps-swap__grid{display:grid;gap:clamp(30px,4vw,64px);grid-template-columns:1fr;align-items:center}
.ps-price{display:grid;gap:16px;margin-top:36px;grid-template-columns:1fr}
.ps-price__card{border:1px solid var(--line);padding:24px}
.ps-price__card--now{border-color:var(--sand-d);background:rgba(220,198,160,.06)}
.ps-root .ps-price__lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.ps-price__val{font-family:var(--disp);font-size:clamp(28px,3.4vw,42px);margin-top:14px;line-height:1}
.ps-root .ps-price__val--old{color:var(--mut);text-decoration:line-through;text-decoration-thickness:1px}
.ps-root .ps-price__sub{font-size:13px;color:#9aa2a9;margin-top:10px}
.ps-root .ps-price__note{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--sand)}
/* ============ НАПРАВЛЕНИЯ ============ */ .ps-group{margin-top:clamp(40px,5vw,68px)}
.ps-group__head{display:flex;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ps-group__ttl{font-family:var(--disp);font-size:clamp(20px,2.2vw,28px)}
.ps-root .ps-group__cnt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--mut)}
.ps-dirs{display:grid;gap:1px;background-color:var(--ink);grid-template-columns:1fr;margin-top:1px}
.ps-dir{box-shadow:0 0 0 1px var(--line)}
.ps-dir{background-color:var(--ink);padding:30px 26px 28px;display:flex;flex-direction:column;min-height:250px;transition:background .22s ease}
.ps-dir:hover{background-color:var(--ink-3)}
/* Карточка направления с фотографией. ФОТО 04 — вшито для превью. На сайте: background-image:url('/upload/project/photo-04-paneli.jpg'); */ .ps-dir--photo{background-size:cover;background-position:center;position:relative;overflow:hidden}
.ps-dir--photo::before{ content:"";position:absolute;inset:0;transition:opacity .22s ease; background:linear-gradient(180deg,rgba(20,24,27,.42) 0%,rgba(20,24,27,.84) 48%,rgba(20,24,27,.95) 100%); }
.ps-dir--photo:hover::before{opacity:.86}
.ps-dir--photo > *{position:relative;z-index:1}
.ps-dir--photo:hover{background-color:var(--ink)}
.ps-dir--paneli{background-image:url(/upload/project/work-paneli.jpg)}
.ps-dir--terrazzo{background-image:url(/upload/project/work-terrazzo.jpg)}
.ps-dir--santehnika{background-image:url(/upload/project/work-mozaika.jpg)}
.ps-dir--street{background-image:url(/upload/project/cer-street.jpg)}
.ps-dir--montazh{background-image:url(/upload/project/work-montazh.jpg)}
.ps-dir--slabs{background-image:url(/upload/project/cer-slabs.jpg)}
.ps-dir--mop{background-image:url(/upload/project/cer-mop.jpg)}
.ps-dir--obrabotka{background-image:url(/upload/project/cer-obrab.jpg)}
/* Фото карточек напольных покрытий — вшиты для превью. На сайте заменить на: background-image:url('/upload/project/<имя>.jpg'); */ .ps-dir--lvt{background-image:url(/upload/project/floor-lmf.jpg)}
.ps-dir--laminat{background-image:url(/upload/project/floor-laminat.jpg)}
.ps-dir--proline{background-image:url(/upload/project/floor-proline.jpg)}
.ps-dir--spc{background-image:url(/upload/project/floor-spc.jpg)}
.ps-dir--kover{background-image:url(/upload/project/floor-kover.jpg)}
.ps-dir--rulon{background-image:url(/upload/project/floor-rulon.jpg)}
.ps-dir--parket{background-image:url(/upload/project/floor-parket.jpg)}
.ps-dir--parketnayadoska{background-image:url(/upload/project/floor-doska.jpg)}
.ps-root .ps-dir__tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand-d)}
.ps-dir__ttl{font-family:var(--disp);font-size:clamp(19px,1.7vw,23px);line-height:1.2;margin-top:18px}
.ps-root .ps-dir__txt{font-size:14px;color:#9aa2a9;margin-top:12px}
.ps-dir__specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.ps-root .ps-dir__spec{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#a7aeb4;border:1px solid var(--line);padding:6px 10px}
.ps-root .ps-dir__go{margin-top:auto;padding-top:24px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
.ps-dir__go span{display:inline-block;transition:transform .22s ease}
.ps-dir:hover .ps-dir__go span{transform:translateX(6px)}
/* ============ ЗОНЫ ============ */ .ps-root .ps-zones{background:var(--paper);color:var(--paper-ink)}
.ps-root .ps-zones .ps-eyebrow{color:#87775a}
.ps-root .ps-zones .ps-h2{color:var(--paper-ink)}
.ps-root .ps-zones .ps-lead{color:#454c51}
.ps-tbl{width:100%;border-collapse:collapse;margin-top:44px;font-size:14px}
.ps-root .ps-tbl th{ text-align:left;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.18em; text-transform:uppercase;color:#6f767b;padding:0 18px 14px 0;border-bottom:1px solid var(--paper-ink); }
.ps-tbl td{padding:20px 18px 20px 0;border-bottom:1px solid var(--paper-line);vertical-align:top}
.ps-tbl__obj{font-family:var(--disp);font-size:16px;white-space:nowrap}
.ps-root .ps-tbl__mat{color:#454c51}
.ps-root .ps-tbl__floor{color:#7a6540;font-weight:500}
/* ============ ТЕХЛИСТ ============ */ .ps-root .ps-spec{background:var(--paper);color:var(--paper-ink);padding-top:0}
.ps-spec__grid{display:grid;gap:0 clamp(30px,5vw,80px);grid-template-columns:1fr;margin-top:40px}
.ps-spec__row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--paper-line)}
.ps-root .ps-spec__k{font-size:14px;color:#454c51}
.ps-root .ps-spec__v{font-family:var(--mono);font-size:14px;letter-spacing:.03em;text-align:right;color:var(--paper-ink)}
/* ============ ПРОИЗВОДСТВО ============ */ .ps-fact{display:grid;gap:1px;background-color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:44px;grid-template-columns:1fr}
.ps-fact__c{background:var(--ink);box-shadow:0 0 0 1px var(--line);padding:30px 26px}
.ps-root .ps-fact__n{font-family:var(--disp);font-size:clamp(26px,2.8vw,36px);color:var(--sand)}
.ps-root .ps-fact__l{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-top:12px}
.ps-root .ps-fact__d{font-size:14px;color:#9aa2a9;margin-top:12px}
/* ============ УСЛОВИЯ ============ */ .ps-terms{display:grid;gap:1px;background-color:var(--ink);margin-top:48px;grid-template-columns:1fr;border-top:1px solid var(--line)}
.ps-term{background:var(--ink-2);box-shadow:0 0 0 1px var(--line);padding:32px 28px}
.ps-root .ps-term__n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--sand-d)}
.ps-term__t{font-size:18px;font-weight:500;margin-top:18px}
.ps-root .ps-term__d{font-size:14px;color:#9aa2a9;margin-top:10px}
/* ============ ЦИТАТА ============ */ .ps-claim{background:var(--ink-2);text-align:left}
.ps-claim__rule{width:64px;height:1px;background:var(--sand-d)}
.ps-claim__t{font-family:var(--disp);font-size:clamp(28px,4.6vw,60px);line-height:1.1;margin-top:32px;max-width:18ch}
.ps-root .ps-claim__t em{font-style:normal;color:var(--sand)}
/* ============ ШАГИ ============ */ .ps-steps{display:grid;gap:1px;background-color:var(--ink);margin-top:48px;grid-template-columns:1fr;border-top:1px solid var(--line)}
.ps-step{background:var(--ink);box-shadow:0 0 0 1px var(--line);padding:30px 26px}
.ps-root .ps-step__n{font-family:var(--disp);font-size:38px;color:var(--sand)}
.ps-step__t{font-size:16px;font-weight:500;margin-top:20px}
.ps-root .ps-step__d{font-size:13.5px;color:#9aa2a9;margin-top:8px}
/* ============ ЗАЯВКА ============ */ .ps-cta{background:var(--ink-2)}
.ps-cta__grid{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:1fr}
.ps-form{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
.ps-fld{background:var(--ink-2);padding:16px 20px}
.ps-root .ps-fld label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.ps-root .ps-fld input,
.ps-root .ps-fld textarea{ width:100%;background:transparent;border:0;color:var(--cream); font-family:var(--body);font-size:15px;padding:9px 0 2px; }
.ps-fld textarea{resize:vertical;min-height:66px}
.ps-root .ps-fld input::placeholder,
.ps-root .ps-fld textarea::placeholder{color:#606870}
.ps-form__go{padding:0}
.ps-form__go .ps-btn{width:100%;justify-content:center;padding:20px}
.ps-contacts{margin-top:34px;display:grid;gap:18px}
.ps-contacts__row{display:flex;gap:18px;align-items:baseline}
.ps-contacts__row .ps-mono{min-width:92px}
.ps-contacts__row a{font-family:var(--disp);font-size:19px}
.ps-root .ps-contacts__row a:hover{color:var(--sand)}
.ps-root .ps-legal{font-size:12px;color:#727a80;margin-top:18px}
.ps-legal a{text-decoration:underline}
/* ---------- АДАПТИВ ---------- */ @media (min-width:680px){ .ps-hero__stats{text-align:right} .ps-price{grid-template-columns:1fr 1fr} .ps-dirs{grid-template-columns:repeat(2,1fr)} .ps-fact{grid-template-columns:repeat(2,1fr)} .ps-terms{grid-template-columns:repeat(2,1fr)} .ps-steps{grid-template-columns:repeat(2,1fr)} .ps-spec__grid{grid-template-columns:1fr 1fr} .ps-form{grid-template-columns:1fr 1fr} .ps-fld--full,.ps-form__go{grid-column:span 2} }
@media (min-width:1024px){ .ps-prob__grid,.ps-swap__grid{grid-template-columns:1.1fr .9fr} .ps-dirs{grid-template-columns:repeat(4,1fr)} .ps-fact{grid-template-columns:repeat(4,1fr)} .ps-steps{grid-template-columns:repeat(4,1fr)} .ps-cta__grid{grid-template-columns:.9fr 1.1fr} }
/* ---- баннер каталога Ancient Ceramic ---- */ .ps-acb{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px; margin-top:1px;padding:26px;background-color:var(--ink);box-shadow:0 0 0 1px var(--line);transition:background .22s ease}
.ps-acb:hover{background-color:var(--ink-3)}
.ps-root .ps-acb__e{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand-d)}
.ps-acb__t{display:block;font-family:var(--disp);font-size:clamp(18px,2vw,25px);margin-top:11px;max-width:30ch}
.ps-acb__strip{display:flex;gap:5px}
.ps-acb__strip img{display:block;width:46px;height:74px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.ps-root .ps-acb__go{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);white-space:nowrap}

/* Таблица «Что кладём и где» шире экрана телефона. Без обёртки она
   тянула горизонтальный скролл всей страницы — страница ездила вбок.
   Прокручивается внутри себя. Разметка: <div class="ps-tblwrap"> вокруг
   <table class="ps-tbl"> в project/index.php. */
.ps-root .ps-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:34px}
.ps-root .ps-tblwrap .ps-tbl{margin-top:0}
@media (max-width:679px){ .ps-root .ps-tblwrap .ps-tbl{min-width:600px} }

/* End */
/* /upload/project/css/project-main.css?178515858620470 */
