/* GREY'S — мобильная версия по референсу ref.png (макет 440pt, снят с кропов 1:1.94).
Тёмный панк-лендинг: граффити-заголовки (Rubik Wet Paint / Spray Paint),
кислотный #c6f21e, горизонтальные ленты работ и услуг.
Герой-фото и стикер-сердце вырезаны из самого референса:
- hero_face.png кладётся на почти совпадающий CSS-фон и растворяется
mask-градиентами по краям (жёсткий край чужого чёрного нельзя);
- sticker_heart.png несёт чёрную подложку — гасится mix-blend-mode: screen,
поэтому между ним и не должно появиться stacking context
(filter/transform/opacity на предках). */
/* шрифт владельца для заголовков (кириллический граффити-тег, ofont.ru) */
@font-face {
font-family: 'TagType';
src: url('../mobile_assets/ofont.ru_TagType.ttf') format('truetype');
font-display: swap;
}
:root {
--bg: #0c0d0c;
--bg-card: #1b1b1d;
--acid: #c6f21e;
--ink: #f5f5f2;
--muted: #9c9c9e;
--font-marker: 'TagType', 'Rubik Spray Paint', cursive; /* заголовки секций, карточки */
--font-body: 'Manrope', 'Segoe UI', sans-serif;
--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { overscroll-behavior-y: none; }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
html, body { overflow-x: hidden; overflow-x: clip; }
body {
/* фон почти плоский тёмный; лёгкое высветление к верхнему правому — там, где
кроп героя несёт свой свет, шов маскируется совпадением тонов */
background-color: var(--bg);
background-image:
radial-gradient(90% 400px at 88% 50px, #1c1d1c 0%, #121312 45%, transparent 75%);
background-repeat: no-repeat;
color: var(--ink);
font: 400 16px/1.5 var(--font-body);
max-width: 440px;
margin-inline: auto;
padding-bottom: env(safe-area-inset-bottom);
}
a, button { touch-action: manipulation; }
/* картинки по умолчанию перетаскиваемы: «схватиться» за фото в ленте начинало
нативный drag и жест уходил ему, а не скроллу. Гасим drag/callout, чтобы палец
всегда скроллил (у всех ![]()
в разметке ещё и draggable="false"). */
img { user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
ul, ol { list-style: none; }
.sr-only {
position: absolute; width: 1px; height: 1px;
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* ---------- шапка ---------- */
.topbar {
position: relative; z-index: 5;
display: flex; align-items: center;
padding: 10px 24px 0 27px;
}
.topbar__home, .footer__home { display: inline-flex; }
.topbar__logo { width: 84px; height: auto; }
.topbar__tag {
display: flex; align-items: center; gap: 10px;
margin-left: 74px;
font: 400 12.5px/1.4 var(--font-body);
letter-spacing: 0.02em;
}
.spark { color: var(--acid); flex: none; }
.spark--tag { width: 20px; height: 20px; transform: rotate(-12deg); }
.topbar__burger {
width: 46px; height: 46px; margin-left: auto;
border-radius: 50%;
border: 1.5px solid rgba(198, 242, 30, 0.85);
background: transparent; color: #f0f0ee;
display: grid; place-items: center; cursor: pointer;
}
.topbar__burger:active { background: rgba(198, 242, 30, 0.12); }
/* ---------- бургер-оверлей ---------- */
.menu {
position: fixed; inset: 0; z-index: 30;
background: rgba(7, 7, 8, 0.97);
display: grid; place-items: center;
opacity: 0; visibility: hidden;
transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.menu.open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.menu__list { display: grid; gap: 26px; text-align: center; }
.menu__list a {
font: 400 24px var(--font-marker);
letter-spacing: 0.05em; color: var(--ink); text-decoration: none;
text-transform: uppercase;
}
.menu__list a:active { color: var(--acid); }
.menu__tel { font-family: var(--font-body); font-size: 17px; color: var(--muted); text-transform: none; }
/* ---------- герой ----------
Вертикали (CSS px от верха, из референса /1.94): фото 103…, КРЕЙЗИ ~150,
МАНИКЮР ~235, подзаголовок ~310, CTA 374–441. */
.hero { position: relative; }
.hero__photo {
/* верх фото в макете — 59px от верха страницы; .hero начинается после шапки (~77px) */
position: absolute; z-index: 0;
top: -18px; right: 0;
width: 218px; height: auto;
pointer-events: none;
/* растворение краёв: слева/сверху тонкая кромка, снизу шире — запястье уходит в фон */
-webkit-mask-image:
linear-gradient(to right, transparent 0, #000 16px),
linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 30px), transparent);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, transparent 0, #000 16px),
linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 30px), transparent);
mask-composite: intersect;
}
.doodle { position: absolute; pointer-events: none; }
.doodle--star-left { left: 14px; top: 173px; width: 26px; color: #e8e8e4; }
.doodle--circle { left: 148px; top: 161px; width: 112px; color: rgba(200, 200, 195, 0.75); z-index: 2; }
.doodle--star-cta { right: -16px; bottom: 16px; width: 15px; color: var(--acid); }
.hero__title {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: flex-start;
padding: 24px 0 0 27px;
}
.hero__wordmark {
width: 212px; height: auto;
pointer-events: none;
}
.hero__sub {
position: relative; z-index: 1;
margin: 34px 0 0 46px;
font-size: 17px; line-height: 1.22;
letter-spacing: 0.22em;
color: #d6d6d4;
}
/* CTA: кислотная пилюля внутри рваной белой рамки-обводки (SVG) */
.cta-wrap {
position: relative; z-index: 1;
width: 186px; height: 70px;
margin: 29px 0 0 24px;
}
/* краска овала в Book_stroke.png смещена от центра холста (центр ≈ 93.5,36.5 из 200×68) —
ширина и сдвиги подобраны так, чтобы центр овала совпал с центром пилюли (93,35) */
.cta-frame { position: absolute; left: 0; top: -1px; width: 198px; height: auto; transform: rotate(-0.6deg); }
.cta {
position: absolute; left: 12px; top: 13px;
width: 162px; height: 44px;
display: inline-flex; align-items: center; justify-content: space-between;
padding: 0 20px;
background: var(--acid);
border-radius: 22px;
color: #101110; text-decoration: none;
font: 600 15.5px var(--font-body);
letter-spacing: 0.09em; text-transform: uppercase;
}
.cta:active { filter: brightness(0.92); }
.cta__arrow { width: 17px; height: 17px; }
/* ---------- секции: шапка-строка + пилюля ---------- */
.sec { margin-top: 40px; }
#services { margin-top: 30px; }
.sec__head {
display: flex; align-items: center; justify-content: space-between;
padding: 0 22px 0 28px;
}
.sec__head h2, .steps__head h2 {
display: flex; align-items: center; gap: 12px;
font: 400 22px var(--font-marker);
letter-spacing: 0.03em; text-transform: uppercase;
color: var(--ink);
white-space: nowrap;
}
.sec__head .spark, .steps__head .spark { width: 28px; height: 28px; transform: rotate(-8deg); }
.pill {
display: inline-flex; align-items: center; gap: 10px; flex: none;
height: 33px; padding: 0 17px;
border: 1px solid rgba(198, 242, 30, 0.8);
border-radius: 999px;
color: var(--ink); text-decoration: none;
font: 400 14px var(--font-body);
}
.pill svg { width: 14px; height: 14px; color: var(--acid); }
.pill:active { background: rgba(198, 242, 30, 0.1); }
/* ---------- ленты (нативный горизонтальный скролл) ---------- */
.rail {
display: flex; gap: 9px;
overflow-x: auto;
/* overflow-x:auto заставляет overflow-y вычислиться в auto — лента становилась
вертикально прокручиваемым контейнером (хватало 1px переполнения от обрывков
.scard::before), и вертикальный свайп по «пустому» месту карточки тянул саму
ленту вместо страницы. overflow-y:hidden убирает вертикальный ход ленты
структурно: вертикальный жест уходит цепочкой на страницу, горизонтальный
по-прежнему листает ленту. Обрывки .scard::before помещаются в паддинг (18/10px).
touch-action НЕ ограничиваем: pan-x запрещает вертикальный пан для касаний,
начатых на ленте (палец на фото работ глушил вертикальный скролл страницы) —
нативному горизонтальному скроллеру нужен обычный auto. */
overflow-y: hidden;
padding: 16px 10px 4px;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > li { flex: none; scroll-snap-align: start; }
.rail--works { padding-bottom: 0; }
.rail--works img {
width: 114px; height: 118px;
object-fit: cover; border-radius: 5px; display: block;
}
/* ---------- карточки услуг ---------- */
.rail--cards { gap: 20px; padding: 18px 20px 10px 23px; }
/* рваный контур: клип на внутреннем слое, обрывок «бумаги» — на под ним
(clip-path режет и ::before, поэтому обрывок живёт на непорезанном родителе) */
.scard { position: relative; width: 178px; }
.scard::before {
content: '';
position: absolute; z-index: 0;
left: -5px; bottom: -7px; width: 64px; height: 24px;
background: #d9d6cf;
clip-path: polygon(0 45%, 14% 0, 38% 28%, 62% 6%, 100% 40%, 82% 100%, 18% 88%);
transform: rotate(-7deg);
}
/* Четыре формы обрывка по кругу (4n+1 — базовое правило выше). Раньше это
были nth-child(2|3|4): карточки редактируются из админки, и на пятой все
следующие получали бы форму первой, то есть один и тот же обрывок подряд. */
.scard:nth-child(4n + 2)::before { left: auto; right: -4px; bottom: -6px; width: 48px; height: 18px; transform: rotate(5deg); }
.scard:nth-child(4n + 3)::before { left: 30%; bottom: auto; top: -6px; width: 52px; height: 18px; transform: rotate(3deg); }
.scard:nth-child(4n)::before { left: -4px; bottom: auto; top: 30%; width: 20px; height: 44px; transform: rotate(2deg); }
.scard__in {
position: relative; z-index: 1;
display: flex; flex-direction: column;
min-height: 122px; height: 100%;
padding: 13px 14px 13px 18px;
background-color: var(--bg-card);
background-image: radial-gradient(120% 90% at 30% 0%, #232325 0%, transparent 55%), var(--noise);
clip-path: polygon(
2.5% 3%, 9% 0.5%, 28% 1.8%, 47% 0%, 68% 1.5%, 88% 0.5%, 97% 2.5%,
99.5% 8%, 98.6% 26%, 100% 47%, 98.8% 68%, 99.6% 88%, 97% 97%,
88% 99.4%, 66% 98.2%, 45% 100%, 24% 98.4%, 8% 99.6%, 2% 96.5%,
0.4% 86%, 1.4% 64%, 0% 44%, 1.2% 22%, 0.6% 9%);
}
.scard__in h3 {
display: flex; align-items: center; gap: 8px;
font: 400 17px var(--font-marker);
letter-spacing: 0.02em; text-transform: uppercase;
color: var(--ink);
white-space: nowrap;
}
.scard__in h3 .spark { width: 17px; height: 17px; }
.scard__in p {
margin-top: 8px;
font-size: 12.5px; line-height: 1.38;
color: #c7c7c9;
}
.scard__foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: auto; padding-top: 12px;
}
.scard__price {
font: 600 16px var(--font-body);
letter-spacing: 0.02em;
color: var(--acid);
}
.scard__plus {
position: relative;
width: 27px; height: 27px;
border: 1.5px solid var(--acid); border-radius: 50%;
color: var(--acid);
display: grid; place-items: center;
}
.scard__plus svg { width: 12px; height: 12px; }
.scard__plus::after { content: ''; position: absolute; inset: -9px; } /* зона тапа */
.scard__plus:active { background: rgba(198, 242, 30, 0.14); }
/* ---------- как проходит запись ---------- */
.steps { position: relative; margin-top: 8px; padding: 0 27px; }
.steps__head { position: relative; }
.steps__head h2 { display: block; line-height: 1.3; font-size: 24px; max-width: 230px; white-space: normal; }
.steps__head .spark { display: inline-block; margin-left: 10px; vertical-align: -3px; }
.steps__sticker {
/* heart.png — вырезанный кластер с прозрачным фоном, бленды не нужны */
position: absolute; right: 10px; top: -10px;
width: 195px; height: auto;
pointer-events: none;
}
.steps__list { margin-top: 30px; }
.steps__list li {
display: flex; gap: 18px; align-items: baseline;
padding: 15px 2px;
}
.steps__list li + li { border-top: 1px dashed rgba(255, 255, 255, 0.16); }
.steps__num {
flex: none; width: 44px;
font: 400 21px var(--font-marker);
color: var(--acid);
}
.steps__list h3 { font: 600 15px var(--font-body); letter-spacing: 0.02em; }
.steps__list p { margin-top: 3px; font-size: 13px; color: var(--muted); }
.cta-wrap--center { margin: 26px auto 0; }
/* ---------- футер ---------- */
.footer {
margin-top: 52px;
padding: 24px 27px calc(30px + env(safe-area-inset-bottom));
display: grid; justify-items: start; gap: 9px;
}
.footer__tear { width: calc(100% + 54px); margin: 0 -27px 10px; height: 12px; }
.footer__logo { width: 58px; }
.footer__addr { font-size: 13px; color: var(--muted); }
.footer__hours { font-size: 13px; color: var(--muted); }
.footer__tel { font: 600 15px var(--font-body); color: var(--ink); text-decoration: none; }
.footer__soc { display: flex; gap: 20px; margin-top: 4px; }
.footer__soc a { font-size: 13px; color: var(--acid); text-decoration: none; }
.footer__req { margin-top: 6px; font-size: 11px; line-height: 1.5; color: #737375; }
.footer__copy { margin-top: 10px; font-size: 11.5px; color: #737375; }
/* ---------- узкие экраны (iPhone SE и близкие) ---------- */
@media (max-width: 385px) {
.topbar { padding-inline: 20px; }
.topbar__tag { margin-left: 34px; }
.hero__title { padding-left: 20px; }
.hero__wordmark { width: 182px; }
.hero__photo { width: 176px; }
.hero__sub { margin-left: 34px; font-size: 15px; }
.doodle--star-left { top: 178px; width: 22px; }
.doodle--circle { left: 118px; top: 168px; width: 100px; }
.cta-wrap { margin-left: 16px; }
.sec__head { padding: 0 14px 0 20px; }
.sec__head h2 { font-size: 21px; }
.pill { height: 30px; padding: 0 13px; font-size: 13px; }
.steps { padding-inline: 20px; }
.steps__head h2 { font-size: 23px; max-width: 200px; }
.steps__sticker { width: 146px; right: 0; top: -8px; }
.footer { padding-inline: 20px; }
.footer__tear { width: calc(100% + 40px); margin-inline: -20px; }
}
/* ---------- плашка о cookie ----------
Намеренно на body-шрифте (Manrope), без граффити-начертания: это служебный
текст, и «крейзи»-подача в юридической плашке читается как несерьёзность.
z-index ниже меню (30), чтобы открытый бургер её перекрывал.
Появления НЕТ намеренно. Сначала оно было переходом по классу из
requestAnimationFrame, потом CSS-анимацией с fill-mode: both — и оба раза
в фоновой вкладке плашка застревала на первом кадре, то есть висела
невидимой, но продолжала ловить клики внизу экрана. Никакая плавность
этого не стоит: базовое состояние теперь просто «видима». */
.cookiebar {
position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 25;
display: flex; flex-direction: column; gap: 12px;
padding: 15px 16px 16px;
font-family: var(--font-body);
background: #17181a;
border: 1px solid rgba(245, 245, 242, 0.16);
border-radius: 14px;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
.cookiebar[hidden] { display: none; }
.cookiebar__text {
margin: 0; font-size: 13px; line-height: 1.5; color: #cfcfcd;
}
.cookiebar__text a { color: var(--acid); text-decoration: none; white-space: nowrap; }
.cookiebar__text a:hover { text-decoration: underline; }
.cookiebar__row { display: flex; align-items: center; gap: 12px; }
.cookiebar__btn {
flex: none;
min-height: 40px; padding: 0 22px;
font: 600 14px/1 var(--font-body); letter-spacing: 0.01em;
color: #10110f; background: var(--acid);
border: 0; border-radius: 999px; cursor: pointer;
}
.cookiebar__btn:active { transform: translateY(1px); }
/* Уход: только прозрачность, без transform — на широких экранах transform
занят центрированием, и его перебивка сдвинула бы плашку вбок. */
.cookiebar.is-out { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.cookiebar.is-out { transition: opacity 0.2s ease; }
}
@media (min-width: 560px) {
.cookiebar {
left: 50%; right: auto; transform: translateX(-50%);
width: min(520px, calc(100vw - 24px));
flex-direction: row; align-items: center; gap: 16px;
}
}