/* Literata, cyrillic-ext — SIL Open Font License 1.1 */
@font-face {
font-family: 'Literata';
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url(/assets/pencil/fonts/literata-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Literata, cyrillic — SIL Open Font License 1.1 */
@font-face {
font-family: 'Literata';
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url(/assets/pencil/fonts/literata-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Literata, latin-ext — SIL Open Font License 1.1 */
@font-face {
font-family: 'Literata';
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url(/assets/pencil/fonts/literata-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Literata, latin — SIL Open Font License 1.1 */
@font-face {
font-family: 'Literata';
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url(/assets/pencil/fonts/literata-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Onest, cyrillic-ext — SIL Open Font License 1.1 */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/assets/pencil/fonts/onest-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Onest, cyrillic — SIL Open Font License 1.1 */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/assets/pencil/fonts/onest-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Onest, latin-ext — SIL Open Font License 1.1 */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/assets/pencil/fonts/onest-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Onest, latin — SIL Open Font License 1.1 */
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/assets/pencil/fonts/onest-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Caveat, cyrillic, урезан до букв заметок — SIL Open Font License 1.1 */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/pencil/fonts/caveat-notes-cyrillic.woff2) format('woff2');
unicode-range: U+0412, U+041D, U+0430-0432, U+0434-0443, U+0445-0446, U+0449, U+044B-044C, U+0451, U+0456-0457;
}
/* Caveat, latin-ext, урезан до букв заметок — SIL Open Font License 1.1 */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/pencil/fonts/caveat-notes-latin-ext.woff2) format('woff2');
unicode-range: U+0142;
}
/* Caveat, latin, урезан до букв заметок — SIL Open Font License 1.1 */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/pencil/fonts/caveat-notes-latin.woff2) format('woff2');
unicode-range: U+0020-0021, U+0028-0029, U+002C-002E, U+0030-003B, U+003F, U+0043, U+004B, U+0057, U+0061-0065, U+0069-0070, U+0072, U+0074-0075, U+0077, U+0079-007A, U+00AB, U+00BB, U+00F3, U+2013-2014, U+2019, U+201C-201E;
}
/* ROOMPLACE — карандашный слой поверх утверждённого дизайна (владелец, 2026-10-06).
Ничего из существующих стилей не убирает: меняет шрифты (кириллица и польский
одним семейством вместо Work Sans без кириллицы) и добавляет графитные иллюстрации
и рукописные заметки. Разметку вставляет scripts/pencil_layer.py.
@font-face для Literata, Onest и Caveat добавляет сборка из concept-v2/pencil/fonts/fonts.css. */
:root {
--sk-ink: #2a2826;
--sk-paper-card: #faf4e6;
--sk-gold-line: rgba(240, 176, 78, 0.55);
--sk-font-display: "Literata", Georgia, "Times New Roman", serif;
--sk-font-body: "Onest", "Roomplace Sans", Arial, sans-serif;
--sk-font-hand: "Caveat", "Segoe Print", cursive;
--sk-grain: url("data:image/svg+xml;utf8,");
}
/* ---------- шрифты ---------- */
body, button, input, select, textarea { font-family: var(--sk-font-body); }
h1, h2, h3 { font-family: var(--sk-font-display); font-weight: 600; letter-spacing: -0.015em; }
h3 { letter-spacing: -0.005em; }
.hero h1 { letter-spacing: -0.028em; line-height: 1.03; font-weight: 600; }
h1, h2, .v13-hero p, .catalog-hero > p { text-wrap: pretty; }
/* окно согласия на cookies — прежним шрифтом: его размеры и переносы проверены
на всех экранах (scripts/check_live.mjs), слой их не меняет */
.rp-consent { font-family: "Roomplace Sans", Arial, sans-serif; }
/* лёгкое бумажное зерно на светлых блоках */
body, .section--paper { background-image: var(--sk-grain); }
/* ---------- рукописные заметки ---------- */
.sk-note { font-family: var(--sk-font-hand); font-weight: 600; font-size: 27px; line-height: 1.1; color: var(--sk-ink); }
/* надпись под «Знайти кімнату»: призыв и обещание, от призыва — стрелка к кнопке
(владелец, 2026-10-06: стрелка не между кнопками, а вокруг, крупная и чёткая).
Компьютер и планшет: одна строка под кнопками, крюк заходит слева вокруг её начала к
левому краю кнопки. Телефон — ниже. Начало надписи и стрелка стоят на месте, пока
грузится шрифт: хвост стрелки ставится по ширине призыва в em (--sk-l1), а не по
настоящей ширине текста. */
.sk-find-wrap { position: relative; display: flex; }
.sk-find-wrap > .btn { flex: 1; }
.sk-hero-note {
position: absolute;
top: calc(100% + 6px);
left: 34px;
margin: 0;
color: #f5eddd;
font-size: 30px;
white-space: nowrap;
transform: rotate(-1.5deg);
transform-origin: left top;
}
.sk-arrow { position: absolute; inset: 0; pointer-events: none; }
.sk-arrow svg { position: absolute; overflow: visible; }
.sk-arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sk-arrow__tail path { vector-effect: non-scaling-stroke; }
/* наконечник — одна «галочка» ручкой, толще линии. Под линией и наконечником тёмная
кайма: у самой кнопки золотое свечение, и без неё светлый росчерк на нём теряется */
.sk-arrow path.sk-arrow__head { stroke-width: 3.6; }
.sk-arrow path.sk-arrow__halo { stroke: #0b1520; stroke-width: 7; opacity: 0.5; }
.sk-arrow .sk-arrow__tail, .sk-arrow .sk-arrow__hook { display: none; }
.sk-arrow__wrap { left: -60px; top: -42px; width: 56px; height: 66px; }
/* ---------- золотые кнопки — как чемодан на рисунке ----------
Владелец, 2026-10-06: «Знайти кімнату», «Зателефонувати», «Надіслати» и другие золотые
кнопки — той же расцветки, что чемодан у девушки: ровное золото #F0B04E, небрежный
карандашный контур и штрихи-рёбра. Свечение по контуру («дыхание») остаётся как было.
Последний слой фона — линейный градиент золота: проверка в браузере читает по нему
цвет кнопки при наведении. */
.btn--primary,
.btn--arrival-cta,
.room-mobile-contact a:first-child {
color: #2a2826;
border-color: transparent;
background:
url("data:image/svg+xml;utf8,") -3px -3px / calc(100% + 6px) calc(100% + 6px) no-repeat,
url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat,
radial-gradient(ellipse at 90% 105%, rgba(42, 40, 38, .16), transparent 55%),
var(--sk-grain),
linear-gradient(#f0b04e, #f0b04e);
box-shadow: 0 12px 30px rgba(108, 70, 24, .26);
text-shadow: none;
}
.btn--primary:hover,
.btn--arrival-cta:hover,
.room-mobile-contact a:first-child:hover {
background:
url("data:image/svg+xml;utf8,") -3px -3px / calc(100% + 6px) calc(100% + 6px) no-repeat,
url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat,
radial-gradient(ellipse at 90% 105%, rgba(42, 40, 38, .12), transparent 55%),
var(--sk-grain),
linear-gradient(#f4bb62, #f4bb62);
}
/* прежняя текстура «потёртого золота» под карандашным золотом не нужна */
.btn--arrival-cta::after { display: none; }
/* ---------- живые сцены (concept-v2/pencil/motion, движок motion.js) ----------
Поверх картинки сцены движок кладёт её же рисунок по частям и двигает их. Части,
которые закрывают то, что за ними (рубашка, рука), подложены цветом фона сцены. */
.sk-scene, .sk-art { --sk-under: #f7f2e9; }
.sk-hero-card, .sk-scene--card { --sk-under: #faf4e6; }
.callback-panel .sk-scene { --sk-under: #fffcf5; }
.sk-motion { z-index: 0; contain: layout style; }
.sk-art figcaption { z-index: 1; }
/* ---------- главная, блок комнат: заголовок и девушка с чемоданом ---------- */
.sk-heading-art { grid-template-columns: minmax(0, 1fr) minmax(300px, 520px); align-items: end; gap: 48px; margin-bottom: 18px; }
.sk-heading-art__copy h2 { margin-bottom: 22px; }
.sk-heading-art__copy p { max-width: 560px; }
.sk-art { position: relative; margin: 0; }
.sk-art img { display: block; width: 100%; height: auto; }
.sk-art figcaption { position: absolute; left: 2%; top: 6%; max-width: 46%; transform: rotate(-4deg); }
/* ---------- сцены: жёсткая рамка, картинка вписывается и стоит «на земле» ---------- */
.sk-scene { display: block; margin: 0 0 26px; aspect-ratio: 16 / 10; }
.sk-scene img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
/* шаги на главной: рукописные номера в золотом кружке */
.step-card__number {
width: 54px;
height: 54px;
color: var(--sk-ink);
background: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
font: 700 30px/1 var(--sk-font-hand);
}
/* «для фирм»: бригада */
.v13-intro-grid .sk-scene { max-width: 560px; margin-top: 30px; aspect-ratio: 4 / 3; }
.sk-team-row { grid-column: 1 / -1; justify-self: center; width: min(620px, 100%); }
/* вопросы на главной: картинка справа */
.sk-faq { display: grid; grid-template-columns: minmax(0, 800px) minmax(340px, 1fr); column-gap: 64px; align-items: start; }
.sk-faq > * { grid-column: 1; }
.sk-faq > .sk-scene { grid-column: 2; grid-row: 1 / span 3; margin-top: 40px; aspect-ratio: 4 / 3; }
/* тёмный блок «Не знаєте, що обрати?»: звонок на светлой карточке, как на референсе */
.sk-scene--card {
width: min(360px, 100%);
margin: 26px 0 0;
padding: 16px 18px 10px;
aspect-ratio: 1 / 1;
box-sizing: border-box;
border: 1px solid var(--sk-gold-line);
border-radius: 18px;
background: var(--sk-paper-card);
}
/* форма: небольшая сцена, прижата к тексту */
.callback-panel__intro .sk-scene { width: min(300px, 100%); aspect-ratio: 3 / 4; margin-top: 22px; }
.callback-panel__intro .sk-scene img { object-position: 0% 100%; }
/* финал главной: пара у двери перед подвалом */
.sk-closing { display: grid; justify-items: center; padding: 40px clamp(24px, 5vw, 80px) 0; }
.sk-closing .sk-scene { width: min(520px, 100%); margin-bottom: 0; aspect-ratio: 5 / 4; }
/* ---------- внутренние страницы ---------- */
/* тёмные шапки: сцена на светлой карточке */
.sk-hero-card {
width: min(340px, 100%);
justify-self: end;
margin: 0;
padding: 14px 16px 8px;
aspect-ratio: 4 / 3;
box-sizing: border-box;
border: 1px solid var(--sk-gold-line);
border-radius: 22px;
background: var(--sk-paper-card);
}
.sk-hero-card img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.v13-hero.sk-has-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); align-items: center; gap: 48px; }
.catalog-hero.sk-has-card { grid-template-columns: minmax(0, 1.2fr) minmax(220px, .55fr) minmax(220px, 320px); }
.catalog-hero.sk-has-card > .sk-hero-card { grid-column: 3; grid-row: 1 / span 2; align-self: end; width: min(280px, 100%); }
/* «Як заселитися»: сцена у каждого шага */
.v13-step.sk-has-scene { grid-template-columns: 90px minmax(0, 1fr) minmax(200px, 280px); align-items: center; }
.v13-step .sk-scene { margin: 0; aspect-ratio: 4 / 3; }
/* «Для фірм»: бригада под кнопками */
.sk-team .sk-scene { max-width: 560px; margin-top: 30px; aspect-ratio: 4 / 3; }
/* страница адреса: сцена с ключом в карточке «Запитайте про житло», по левому краю */
.room-contact-card .sk-scene { max-width: 380px; margin: 0 0 18px; aspect-ratio: 16 / 10; }
.room-contact-card .sk-scene img { object-position: 0% 100%; }
/* ---------- планшет ---------- */
@media (max-width: 900px) {
.sk-hero-note { font-size: 26px; }
.sk-arrow__wrap { top: -40px; }
.sk-find-wrap { flex: 1.18; }
.sk-heading-art { grid-template-columns: 1fr; gap: 8px; }
.sk-art { max-width: 460px; margin: 0 auto; }
.sk-art figcaption { font-size: 23px; top: 2%; }
.sk-faq { grid-template-columns: 1fr; }
.sk-faq > .sk-scene { grid-column: 1; grid-row: auto; margin-top: 24px; }
.v13-hero.sk-has-card,
.catalog-hero.sk-has-card { grid-template-columns: 1fr; gap: 26px; }
.catalog-hero.sk-has-card > .sk-hero-card { grid-column: 1; grid-row: auto; }
.sk-hero-card { width: min(240px, 70%); justify-self: start; aspect-ratio: 1 / 1; padding: 10px 12px 6px; }
.v13-step.sk-has-scene { grid-template-columns: 45px minmax(0, 1fr); }
.v13-step.sk-has-scene .sk-scene { grid-column: 2; max-width: 320px; }
}
/* ---------- телефон ---------- */
@media (max-width: 760px) {
.hero__content { padding-bottom: 46px; }
.step-card .sk-scene { aspect-ratio: 1 / 1; margin-bottom: 18px; }
.v13-intro-grid .sk-scene,
.sk-team .sk-scene { aspect-ratio: auto; margin-top: 18px; }
.v13-intro-grid .sk-scene img,
.sk-team .sk-scene img { height: auto; }
.sk-faq > .sk-scene { aspect-ratio: 1 / 1; }
.sk-scene--card { width: min(260px, 100%); margin: 20px auto 0; }
.contact-panel:has(.sk-scene--card) .contact-panel__actions { margin-top: 18px; }
.callback-panel__intro .sk-scene { width: 170px; margin: 14px 0 6px; }
.sk-closing { padding-top: 24px; }
.sk-closing .sk-scene { width: 100%; aspect-ratio: 1 / 1; }
/* в каталоге, на карте и в контактах на телефоне сначала дело: фильтр, карта, кнопки */
.catalog-hero.sk-has-card > .sk-hero-card,
.sk-hero-card--functional { display: none; }
/* владелец, 2026-10-06: на телефоне все нарисованные люди на 20% меньше */
.sk-art { max-width: min(368px, 80%); }
.step-card .sk-scene,
.v13-intro-grid .sk-scene,
.sk-team .sk-scene,
.sk-faq > .sk-scene,
.sk-closing .sk-scene { width: 80%; margin-left: auto; margin-right: auto; }
.sk-scene--card { width: min(208px, 80%); }
.callback-panel__intro .sk-scene { width: 136px; }
.sk-hero-card { width: min(192px, 56%); }
.v13-step.sk-has-scene .sk-scene { max-width: 256px; }
.room-contact-card .sk-scene { width: 80%; max-width: 304px; }
}
/* телефон: «Знайти кімнату» во всю ширину, под ней «Для фірм» и «Подзвонити».
Заметка под обеими, стрелка поднимается через щель между ними к кнопке. */
@media (max-width: 600px) {
/* телефон: «Знайти кімнату» во всю ширину, под ней «Для фірм» и «Подзвонити».
Призыв — первая строка надписи; от её конца хвост стрелки идёт вправо, крюк огибает
«Подзвонити» снаружи и поднимается к правому краю золотой кнопки. Обещание — второй
строкой. Крюк постоянного размера и не выходит за экран: до края 7 px. */
.hero__actions { position: relative; }
.hero__content { padding-bottom: 66px; }
.sk-find-wrap { flex-basis: 100%; position: static; }
.sk-hero-note {
top: calc(100% + 8px);
left: 4px;
right: 4px;
font-size: clamp(21px, 6.15vw, 24px);
white-space: normal;
transform: rotate(-1deg);
}
.sk-hero-note__call, .sk-hero-note__promise { display: block; }
.sk-arrow .sk-arrow__wrap { display: none; }
.sk-arrow .sk-arrow__tail, .sk-arrow .sk-arrow__hook { display: block; }
.sk-arrow__tail { left: calc(var(--sk-l1) + 0.35em); width: calc(100% - var(--sk-l1) - 0.35em - 26px); top: calc(0.55em - 5px); height: 10px; }
.sk-arrow__hook { right: -22px; top: -108px; width: 50px; height: 127px; }
}
/* компьютер и планшет: пока открыто окно cookies, текст героя поднимается ещё на
высоту заметки под «Знайти кімнату», чтобы окно её не закрывало. Телефон лёжа
(ниже 501px) не трогаем — как и design.css: герой там выше экрана */
@media (min-width: 761px) and (min-height: 501px) {
html:is(.rp-consent-pending, .rp-consent-open) .hero__content { padding-bottom: 46px; }
}
@media (min-width: 901px) {
.v13-intro-grid > .sk-scene,
.v13-intro-grid div > .sk-scene { margin-top: 30px; }
}