/* Макет maketsaita.ru, «Комната» 2.0. Весь сайт под пиксель: сцена на весь первый экран, текст лежит на полу, заголовки пиксельным шрифтом, рамки и тени ступенчатые без скруглений. Цвета взяты из scene.png. */ :root{ --wall:#303b48; --wall-2:#26303b; --floor:#4f2d1d; --wood:#422211; --night:#1a1410; --amber:#e0a04a; --amber-2:#f0b660; --text:#f2ede4; --muted:rgba(242,237,228,.72); --ink:#1a1410; --btn-text:#1a1410; --field:#1a1410; --field-text:#fff; --shade:rgba(26,20,16,.75); --say-ink:#1a1410; /* текст в облачке */ --head:var(--text); /* заголовки: ночью светлые, днём тёплый тёмно-коричневый вместо чёрного */ --note:url(img/ask-note.png); --note-ink:#3a2a10; --note-cap:#6b4a12; --note-line:rgba(58,42,16,.45); --note-hint:#8a7134; /* стикер: картинка и чернила; hint сплошной: у полупрозрачного пиксельный шрифт терял верхний ряд цифр (2026-09-06, пользователь) */ /* экран смартфона на телефоне (2026-09-07, пользователь): ночью тёмный мессенджер, днём светлый */ --chat-body:#0f0d0b; --chat-bar:#2a2521; --chat-screen:#161310; --chat-ink:#f2ede4; --chat-live:#8fd6a0; --chat-in:#34505f; --chat-in-ink:#f2ede4; --chat-out:#3f6b46; --chat-out-ink:#f2ede4; --font:"Golos Text","Segoe UI",Roboto,sans-serif; --pixel:"Press Start 2P",monospace; --wrap:1120px; } /* день (2026-09-06, пользователь): та же комната при солнце, цвета из scene-day.png: стена в солнце, пол в пятне света, дерево двери. Акцент днём не янтарь (на светлой стене его не видно), а дерево двери со светлым текстом; переменная та же, чтобы кнопки и фокус не переписывать. Режим ставит theme.js атрибутом data-mode на : по умолчанию как в системе, кнопка .mode переключает. */ :root[data-mode=day]{ --wall:#f4b473; --wall-2:#e6a462; --floor:#e17a2b; --wood:#954518; --amber:#954518; --amber-2:#b0561e; --text:#1a1410; --muted:rgba(26,20,16,.7); --btn-text:#f2ede4; --field:#fff6e6; --field-text:#1a1410; --shade:rgba(26,20,16,.15); --say-ink:#3a2618; /* днём чёрный текст в облачке резковат (2026-09-06, пользователь): тёмно-коричневый */ --head:#4a2711; /* не акцентный #954518: рыжий заголовок спорил бы с кнопками, этот темнее и держит контраст на оранжевом полу */ --note:url(img/ask-note-day.png); --note-ink:#12303d; --note-cap:#2c5566; --note-line:rgba(18,48,61,.45); --note-hint:#3f7387; /* днём жёлтый стикер сливался со стеной и доской (2026-09-06, пользователь): голубой */ --chat-body:#c9bda6; --chat-bar:#efe6d4; --chat-screen:#fff6e6; --chat-ink:#1a1410; --chat-live:#2c7a4b; --chat-in:#e2d8c4; --chat-in-ink:#1a1410; --chat-out:#7bc7e0; --chat-out-ink:#12303d; } body,.hero,.contact,.duo__frame,.btn,.field input,.field textarea,.mode{transition:background-color .6s steps(6),color .6s steps(6)} /* смена режима ступенями, как рассвет в игре */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font:400 17px/1.55 var(--font);color:var(--text);background:var(--wall)} h1,h2,h3,p,ol{margin:0} h1{font:400 clamp(18px,2.1vw,30px)/1.4 var(--pixel);text-wrap:balance;text-shadow:3px 3px 0 var(--night);color:var(--head)} h2{font:400 clamp(15px,1.5vw,20px)/1.5 var(--pixel);margin-bottom:24px;color:var(--head)} h3{font-weight:600;font-size:19px;line-height:1.3;margin-bottom:8px;color:var(--head)} p{max-width:60ch} p+p{margin-top:14px} .lead{font-size:clamp(16px,1.2vw,19px);line-height:1.45;max-width:34em;margin-top:16px;color:var(--text);text-shadow:1px 1px 0 var(--night)} .actions{margin-top:26px} .wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto} .mark{font:400 11px/1 var(--pixel);text-decoration:none;color:inherit} /* пиксельная кнопка: без скруглений, жёсткая тень-ступенька, при нажатии проваливается */ .btn{display:inline-block;padding:14px 22px;background:var(--amber);color:var(--btn-text);font:400 12px/1.4 var(--pixel);text-decoration:none;border:0;cursor:pointer;box-shadow:4px 4px 0 var(--night)} .btn:hover{background:var(--amber-2)} .btn:active{transform:translate(4px,4px);box-shadow:none} :focus-visible{outline:3px solid var(--amber);outline-offset:3px} /* hero: сцена на весь экран, шапка и текст лежат поверх. Текст внизу слева, на тёмном полу, где в кадре пусто; снизу лёгкая шторка для контраста. Canvas cover: на 16:10 режутся края, на 16:9 кадр целиком. */ .hero{position:relative;height:min(100svh,62.5vw);min-height:520px;display:flex;flex-direction:column;justify-content:space-between;background:var(--wall)} .scene-slot{position:absolute;inset:0;overflow:hidden} canvas.scene{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%;image-rendering:pixelated;image-rendering:crisp-edges} .say{position:absolute;left:0;top:0;font:400 14px/1.6 var(--pixel);color:var(--say-ink);white-space:pre;pointer-events:none;z-index:1} .say--measure{visibility:hidden} @media(min-width:721px){.hero .say{font-size:16px}} /* облачка Олега, разработчика и реплик на смену света крупнее на десктопе (2026-09-06, пользователь) */ .say--small{font-size:14px} /* был 11px: с крупными облачками (2026-09-06, пользователь) мелкий текст терялся, теперь как у Олега; класс оставлен, вызовы не трогали */ .say__cur{display:inline-block;width:.6em;height:1em;vertical-align:-.15em;background:var(--say-ink);animation:blink 1s steps(1) infinite} .say__cur[hidden]{display:none} @keyframes blink{50%{opacity:0}} .scene-slot::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;pointer-events:none;background:linear-gradient(to top,var(--shade),rgba(26,20,16,0))} /* pointer-events: шторка перехватывала клики по стопке стикеров на столике */ /* переключатель день/ночь: пиксельная кнопка в углу первого экрана, показывает то, что включит (ночью солнце, днём луну) */ .mode{position:absolute;top:18px;right:18px;z-index:2;width:38px;height:38px;padding:0;display:grid;place-items:center;border:3px solid var(--wood);background:var(--field);color:var(--amber);cursor:pointer;box-shadow:4px 4px 0 rgba(26,20,16,.45)} .mode:hover{color:var(--amber-2)} .mode:active{transform:translate(4px,4px);box-shadow:none} :root[data-mode=day] .mode__sun{display:none} :root:not([data-mode=day]) .mode__moon{display:none} .hero__text{position:relative} .hero__text{margin-top:auto;padding:0 0 clamp(28px,5vh,56px)} /* прижато к низу: в колонке hero теперь один видимый блок — плашка ответа (2026-09-06) */ /* фразу говорит персонаж в пузыре на сцене; h1 остаётся в разметке для скринридеров, лид скрыт. На телефоне текстовый блок под сценой тоже убран (2026-09-06, пользователь), секции идут сразу за сценой */ .hero__h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .hero__text .lead{display:none} .hero__text .actions{margin-top:0} /* заявка как диалог (2026-09-06, пользователь): вопрос в облачке у Олега, ответ в пиксельном окне рядом с ним. Форма внизу страницы остаётся как есть. Телефон: блок под сценой в потоке. Десктоп: окно ставит script.js по координатам сцены, справа от Олега */ .ask{display:flex;gap:12px;flex-wrap:wrap;align-items:center;max-width:520px;margin:0 auto;padding:18px 20px} .ask__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .ask__field{flex:1 1 200px;min-width:0;display:flex;flex-direction:column} /* два поля на стикере: телефон и почта (2026-09-06, пользователь); на «адрес сайта» второе прячется */ /* ответ принят: на стикере рисуется галочка и держится, пока Олег не задаст следующий вопрос (2026-09-06, пользователь) */ .ask__tick{display:block;margin:auto;color:#2f7d32;shape-rendering:crispEdges} .ask__tick path{fill:none;stroke:currentColor;stroke-width:3;stroke-dasharray:27;stroke-dashoffset:27;animation:tick .45s steps(9) forwards} /* 27 = длина пути: с запасом штрих полсекунды шёл вхолостую */ @keyframes tick{to{stroke-dashoffset:0}} .ask__read{display:flex;flex-direction:column;gap:14px} /* стикер отклеился: открывается только на чтение — что записано (2026-09-06, пользователь) */ .ask__read div{display:flex;flex-direction:column;gap:3px} .ask__close{font:400 14px/1 var(--pixel);background:none;border:0;color:inherit;cursor:pointer;padding:6px} /* крестик: отмена, стикер возвращается на столик */ .ask__input{width:100%;font:400 12px/1.5 var(--pixel);padding:15px 14px;border:3px solid var(--wood);background:var(--field);color:var(--field-text);box-shadow:4px 4px 0 var(--night)} .ask__input::placeholder{color:var(--muted)} .ask__choice{display:flex;flex-wrap:wrap;gap:12px} .ask__choice .ask__label{flex:1 0 100%;text-align:center} /* вопрос по центру стикера (2026-09-06, пользователь) */ .ask__choice .btn{flex:1;text-align:center} .bot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} /* honeypot: с display:none роботы его пропускают, поэтому просто уводим за край */ .ask__bar,.ask__log,.push{display:none} /* экран смартфона и уведомление: только на телефоне */ .ask[hidden],.ask [hidden]{display:none} /* у .ask и .ask__choice свой display, атрибут hidden его не перебивает: окно торчало в углу с первой реплики */ @media(min-width:721px){ /* окно: жёлтый стикер img/ask-note.png на булавке (78×78 точек), показывается втрое крупнее и висит на пробковой доске справа от Олега. Тень и загнутый уголок нарисованы в картинке, своих рамок нет; вопрос подписан прямо на стикере, ответ пишется по линейке */ .ask{position:absolute;left:0;top:0;z-index:2;width:273px;height:273px;max-width:none;margin:0;padding:52px 22px 56px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:12px; background:var(--note) 0 0/100% 100% no-repeat;image-rendering:pixelated;border:0;box-shadow:none} .ask__label{position:static;width:auto;height:auto;clip:auto;font:400 10px/1.5 var(--pixel);color:var(--note-cap)} /* на стикере подпись видима: она и есть вопрос */ .ask__field{gap:7px} /* подпись наезжала на строку поля: у пиксельного шрифта высокие буквы (2026-09-06, пользователь) */ .ask__read b{font:400 9px/1.4 var(--pixel);font-weight:400;color:var(--note-cap)} .ask__read span{font:400 11px/1.4 var(--pixel);color:var(--note-ink);border-bottom:2px solid var(--note-line);padding-bottom:3px;overflow-wrap:anywhere} /* длинный адрес переносится, а не вылезает за стикер */ .ask__close{position:absolute;top:14px;right:14px;font-size:16px;color:var(--note-cap)} /* в самый угол стикера (2026-09-06, пользователь) */ .ask__close:hover{color:#3a2a10} .ask__input{flex:0 0 auto;padding:6px 2px;font-size:10px;line-height:2;background:none;color:var(--note-ink);border:0;border-bottom:2px solid var(--note-line);box-shadow:none} /* line-height от 12 px оставался 18 px: у Press Start 2P высокий ascent, верхушки цифр срезало */ .ask__input::placeholder{color:var(--note-hint)} .ask .btn{padding:9px 10px;font-size:10px;box-shadow:2px 2px 0 rgba(26,20,16,.45)} .ask__choice{gap:8px;flex:1 1 auto;align-content:space-between;padding:12px 0 8px} /* вопрос к верху, кнопки к низу: центрированным блоком низ стикера пустовал (2026-09-06, пользователь) */ } @media(max-width:720px){ .say{font-size:12px} /* на телефоне страница это один экран: сцена во всю высоту окна, секций и подвала нет (2026-09-07, пользователь) */ .hero{display:block;height:100svh;min-height:0} .scene-slot::after{height:30%} .hero__text{padding:0} /* заявка на телефоне (2026-09-06, пользователь): вместо стикера — смартфон со стола. Под сценой открывается его экран: реплики приходят сообщениями слева, ответы уходят справа, внизу строка ввода. Корпус тёмный в обоих режимах: это экран телефона */ .ask{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:8px;align-items:center; width:min(320px,100% - 36px);height:min(68%,470px);max-width:none;margin:0;padding:8px;background:var(--chat-body);border:3px solid var(--chat-bar); box-shadow:8px 8px 0 rgba(26,20,16,.55);animation:phone-up .3s steps(5)} /* окно лежит поверх сцены на уровне Олега и закрывает его (2026-09-07, пользователь) */ .ask__bar{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:9px 30px 9px 10px;background:var(--chat-bar);color:var(--chat-ink);font:400 9px/1.4 var(--pixel)} .ask__bar b{font-weight:400} .ask__status{margin-left:auto;font-size:8px;color:var(--chat-live)} .ask__log{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:7px;min-height:0;height:100%;overflow-y:auto;padding:10px;background:var(--chat-screen)} /* лента во всю высоту окна: сообщения копятся снизу, как в мессенджере */ .msg{max-width:86%;padding:7px 8px;background:var(--chat-in);color:var(--chat-in-ink);font:400 10px/1.7 var(--pixel);box-shadow:2px 2px 0 rgba(26,20,16,.35)} .msg--mine{align-self:flex-end;background:var(--chat-out);color:var(--chat-out-ink);overflow-wrap:anywhere} /* длинная почта переносится, а не растягивает пузырь */ .msg--typing{display:flex;gap:5px;align-items:flex-end;height:29px;padding:0 10px} /* пузырь «печатает»: три точки прыгают ступенями, без плавности — как весь макет */ .msg--typing i{width:4px;height:4px;margin-bottom:11px;background:var(--chat-in-ink);opacity:.35;animation:chat-dot .9s steps(1,end) infinite} .msg--typing i:nth-child(2){animation-delay:.15s} .msg--typing i:nth-child(3){animation-delay:.3s} .ask__field{grid-column:1;flex:0 1 auto} .ask__input{padding:10px 8px;font-size:9px;border-width:2px;box-shadow:none} /* строка ввода узкая: рядом кнопка, а пример номера должен влезать целиком */ .ask .btn{padding:10px 12px;font-size:9px;box-shadow:none} .ask__choice{grid-column:1/-1} .ask__choice .ask__label{display:none} /* вопрос уже пришёл сообщением в ленте */ .ask__close{position:absolute;top:11px;right:11px;padding:0;font-size:14px;color:var(--chat-ink);z-index:1} /* уведомление заказчика (2026-09-07, пользователь): его телефон не в комнате, поэтому сообщение приходит плашкой поверх сцены, как настоящий пуш. Мигает и подпрыгивает, пока не открыли; после отправки заявки остаётся спокойной ссылкой на переписку */ .push{position:absolute;top:18px;left:12px;right:66px;z-index:3;display:flex;align-items:center;gap:10px;padding:9px 10px;text-align:left;cursor:pointer; background:var(--chat-bar);color:var(--chat-ink);border:3px solid var(--chat-body);box-shadow:5px 5px 0 rgba(26,20,16,.5)} .push[hidden]{display:none} .push__icon{flex:0 0 auto;width:24px;height:24px;background:var(--chat-out);color:var(--chat-out-ink);position:relative;display:grid;place-items:center;font:400 10px/1 var(--pixel)} .push__icon::before{content:"M"} /* аватар студии: буква вместо картинки */ .push--live .push__icon::after{content:"";position:absolute;top:-4px;right:-4px;width:7px;height:7px;background:#c0392b} /* красная точка: только пока сообщение не прочитано */ .push__body{display:flex;flex-direction:column;gap:3px;min-width:0} .push__body b{font:400 9px/1.3 var(--pixel);font-weight:400} .push__text{font:400 8px/1.3 var(--pixel);opacity:.75} .push__go{margin-left:auto;font:400 14px/1 var(--pixel)} .push--live{animation:push-nudge 2.2s steps(1) infinite} /* подпрыгивает, чтобы заметили */ .push--live .push__icon::after{animation:push-blink .8s steps(1) infinite} .push--live .push__go{animation:push-blink .8s steps(1) infinite} } @keyframes phone-up{from{transform:translate(-50%,calc(-50% + 24px));opacity:0}} /* полный transform: без сдвига на -50% окно на время анимации уезжало вправо-вниз */ @keyframes push-nudge{0%,86%{transform:translateY(0)}90%{transform:translateY(-4px)}94%{transform:translateY(0)}97%{transform:translateY(-2px)}} @keyframes push-blink{50%{opacity:0}} @keyframes chat-dot{0%{opacity:.35;transform:translateY(0)}25%{opacity:1;transform:translateY(-4px)}50%{opacity:.35;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.ask{animation:none}.msg--typing i{animation:none}.push--live,.push--live .push__icon::after,.push--live .push__go{animation:none}} /* секции-сценки («Оставьте заявку», «Разбираем ваш сайт»): текст слева, пиксельная сценка справа в деревянной рамке. Сцена 300×200 показывается в 2× (600 px + рамка), до 1100 px колонка одна и сцена на всю ширину под текстом. Облачко .say лежит в рамке поверх холста. */ .duo{display:grid;gap:40px;align-items:center} @media(min-width:1100px){.duo{grid-template-columns:minmax(0,1fr) 606px} .duo--flip{grid-template-columns:606px minmax(0,1fr)} .duo--flip .duo__frame{order:-1}} /* --flip: сценка слева, текст справа; на узких экранах порядок прежний, текст первым */ .duo__frame{position:relative;width:100%;max-width:606px;justify-self:start;border:3px solid var(--wood);box-shadow:6px 6px 0 var(--wall-2);overflow:hidden;background:var(--wall-2)} .duo__scene{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges} /* пропорция из атрибутов width/height холста */ .duo__frame:has(#devs-scene) .say{font-size:10px} /* сцена разработчика вдвое мельче прочих: тем же кеглем облачко закрывало полкадра и лезло на голову */ @media(max-width:720px){.duo__frame .say{font-size:10px}} /* на телефоне сцена в ~1,1×: мельче, чтобы облачко не закрывало полкадра; 8px с крупными буграми не читались */ .section{padding:72px 0} .section+.section{border-top:4px solid var(--wood)} .two{display:grid;gap:40px} @media(min-width:880px){.two{grid-template-columns:1fr 1fr}} /* панели и шаги: рамка в одну «точку» и ступенчатая тень, как окно в старой игре */ /* форма */ .form{display:grid;gap:22px;max-width:440px} .field{display:grid;gap:6px} .field label{font-weight:500} .field small{color:var(--muted);font-size:14px} .field input,.field textarea{font:400 16px/1.3 var(--font);padding:12px 14px;border:3px solid var(--wood);background:var(--field);color:var(--field-text);width:100%;resize:vertical} .field input:focus,.field textarea:focus{border-color:var(--amber);outline:none} .form .btn{justify-self:start} .form__done{font-weight:500} /* контакты на полу, подвал в темноте */ .contact{padding:72px 0;background:var(--floor);border-top:4px solid var(--wood)} .foot{padding:26px 0;font-size:14px;color:rgba(242,237,228,.72);background:var(--night)} /* подвал тёмный в оба режима, текст свой, не --muted */ .foot .wrap{display:flex;justify-content:space-between;align-items:center} /* телефон: страница это один экран (2026-09-07, пользователь). Блок стоит последним: .duo{display:grid} ниже по файлу перебивал бы display:none */ @media(max-width:720px){.section,.contact,.foot{display:none}}