/* Стили страниц режимов. Дополняют app.css, не заменяют его. * Каждая страница красится в тон своего режима: класс m- стоит на , * поэтому var(--mode) по всей странице свой. */ /* ── шапка страницы ── */ .crumbs { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--dim); margin-bottom: clamp(22px, 3vw, 38px); } .crumbs a { transition: color 0.2s; } .crumbs a:hover { color: var(--paper); } .crumbs b { color: var(--mode); font-weight: 400; } .mode-hero { position: relative; padding-block: clamp(26px, 3.5vw, 44px) clamp(48px, 6vw, 84px); } .mode-hero::before { content: ''; position: absolute; inset: -10% 0 auto; height: 640px; z-index: -1; background: radial-gradient(56% 56% at 18% 24%, var(--mode-wash), transparent 70%), radial-gradient(48% 50% at 82% 12%, rgba(27, 210, 179, 0.10), transparent 72%); filter: blur(18px); } .mode-hero-grid { display: grid; gap: clamp(30px, 4.5vw, 58px); grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; } @media (max-width: 1000px) { .mode-hero-grid { grid-template-columns: 1fr; } } /* ⚠️ То же, что на главной: колонка сетки не уже содержимого, и макет окна браузера уводил вправо весь текст режима. Разрешаем колонке сжиматься. */ .mode-hero-grid > * { min-width: 0; } .mode-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; margin-bottom: 16px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mode); background: var(--mode-wash); border-radius: 12px; } .mode-badge svg { width: 14px; height: 14px; } .mode-hero h1 { max-width: 16ch; margin-bottom: 18px; } .mode-hero .lede { max-width: 50ch; } /* снимок режима: срез угла тот же, что у кнопок и карточек */ .mode-shot { position: relative; overflow: hidden; border-radius: 18px; outline: 1px solid var(--line); outline-offset: -1px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8); } .mode-shot img { width: 100%; height: auto; display: block; } /* ── крупная фраза о боли ── */ .mode-pain { padding-block: clamp(46px, 6vw, 84px); } .big-quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.1vw, 2.6rem); line-height: 1.12; letter-spacing: -0.035em; max-width: 22ch; text-wrap: balance; } .big-quote::before { content: ''; display: block; width: 46px; height: 2px; background: var(--mode); margin-bottom: 22px; } /* ── шаги ── */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } /* ⚠️ раньше это была сетка на разделителях (gap:1px + фон-подложка). На светлом фоне такой блок читался чёрным прямоугольником с острыми углами. Теперь отдельные карточки со скруглением — как везде на сайте. */ .step { padding: 24px 22px 26px; background: rgba(4, 8, 8, 0.62); border: 1px solid var(--line); border-radius: 18px; transition: border-color 0.3s, transform 0.35s var(--ease), background 0.3s; } .step:hover { border-color: color-mix(in oklch, var(--mode) 45%, transparent); transform: translateY(-3px); background: rgba(4, 8, 8, 0.72); } .step-n { display: block; font-size: 0.78rem; color: var(--mode); margin-bottom: 14px; } .step h3 { margin-bottom: 8px; } .step p { font-size: 0.88rem; color: var(--muted); } /* ── возможности ── */ .feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; } .feat { position: relative; padding: 22px 20px 24px; background: rgba(255, 255, 255, 0.025); outline: 1px solid var(--line); outline-offset: -1px; border-radius: 18px; transition: outline-color 0.3s, background 0.3s; } .feat:hover { outline-color: color-mix(in oklch, var(--mode) 45%, transparent); background: rgba(4, 8, 8, 0.74); transform: translateY(-3px); } .feat b { display: block; font-weight: 650; margin-bottom: 7px; } .feat p { font-size: 0.87rem; color: var(--muted); } .feat .pill { display: inline-block; margin-top: 12px; padding: 4px 9px; border-radius: 7px; font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mode); background: var(--mode-wash); } /* ── блок про данные ── */ .mode-privacy { padding-block: clamp(40px, 5vw, 70px); } .privacy-box { padding: clamp(26px, 3.5vw, 44px); background: linear-gradient(150deg, var(--mode-wash), transparent 65%); outline: 1px solid var(--line); outline-offset: -1px; border-radius: 18px; } .privacy-box h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 14px; } .privacy-box p { color: var(--muted); max-width: 80ch; } .go-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 0.88rem; color: var(--mode); } .go-link svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); } .go-link:hover svg { transform: translateX(4px); } /* ── остальные режимы ── */ .other-modes { padding-block: clamp(50px, 6vw, 90px); } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; font-size: 0.9rem; font-weight: 620; background: rgba(4, 8, 8, 0.58); outline: 1px solid var(--line); outline-offset: -1px; border-radius: 14px; transition: background 0.3s, outline-color 0.3s, color 0.3s; } .chip svg { width: 16px; height: 16px; color: var(--mode); } .chip:hover { background: var(--mode-wash); outline-color: color-mix(in oklch, var(--mode) 50%, transparent); color: var(--paper); } /* попап на странице одного режима: одна крупная ячейка вместо сетки девяти */ .popup-single { width: min(215px, 48%); } .modes-one { grid-template-columns: 1fr; } .modes-one .mode-cell { padding: 18px 10px 15px; font-size: .78rem; gap: 9px; } .modes-one .mode-cell svg { width: 24px; height: 24px; } /* окно на странице режима не должно быть шире колонки */ .mode-hero-grid .browser { max-width: 100%; } .mode-demo .br-note { justify-content: flex-start; } /* выключенный режим на его же странице — видно, чем страница была бы без него */ .popup-single .mode-cell[aria-pressed='false'] { opacity: .55; } /* ── частые сценарии: каждый заголовок закрывает свой поисковый запрос ── */ .cases { padding-block: clamp(46px, 6vw, 84px); } .case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .case { padding: 22px 22px 24px; background: rgba(4, 8, 8, 0.62); border: 1px solid var(--line); border-radius: 18px; transition: border-color .3s, background .3s, transform .35s var(--ease); } .case:hover { border-color: color-mix(in oklch, var(--mode) 45%, transparent); background: rgba(4, 8, 8, 0.72); transform: translateY(-3px); } .case h3 { font-size: clamp(1rem, 1.3vw, 1.12rem); margin-bottom: 9px; } .case p { font-size: .88rem; color: var(--muted); } /* пары со старого сайта — по одной на режим */ body.m-block { --bg-1: #442021; --bg-2: #824754; } body.m-focus { --bg-1: #263A38; --bg-2: #557875; } body.m-track { --bg-1: #2D3C42; --bg-2: #68767A; } body.m-dark { --bg-1: #1C2329; --bg-2: #3E4853; } body.m-sleep { --bg-1: #112939; --bg-2: #31546C; } body.m-zen { --bg-1: #23342B; --bg-2: #55785D; } body.m-eyes { --bg-1: #1B3036; --bg-2: #59737B; } body.m-tasks { --bg-1: #364731; --bg-2: #668261; } body.m-shift { --bg-1: #423339; --bg-2: #96778D; } body.m-pomodoro { --bg-1: #3A2A28; --bg-2: #7C5A52; } body.m-light { --bg-1: #3B3020; --bg-2: #8A7248; } body.m-breathing { --bg-1: #1E332F; --bg-2: #4C7A72; } /* ═══════════ отделка страниц режимов ═══════════ */ /* заголовок страницы — тем же голосом, что и на главной */ .mode-hero h1 { font-weight: 850; font-size: clamp(2.4rem, 4.3vw, 3.9rem); } /* цитата боли: крупнее, и за ней гигантская контурная кавычка */ .big-quote { font-size: clamp(1.8rem, 3.6vw, 3.1rem); font-weight: 850; line-height: 1.06; position: relative; z-index: 0; } .big-quote::after { content: '“'; position: absolute; top: -0.38em; left: -0.14em; z-index: -1; font-family: var(--font-display); font-weight: 870; line-height: 1; font-size: 3.2em; letter-spacing: 0; color: transparent; -webkit-text-stroke: 1px color-mix(in oklch, var(--mode) 45%, transparent); pointer-events: none; user-select: none; } /* шаги: призрачный номер вместо маленькой подписи */ .steps { counter-reset: stp; } .step { counter-increment: stp; overflow: hidden; } .step .step-n { display: none; } .step::before { content: counter(stp, decimal-leading-zero); position: absolute; top: -0.18em; right: 8px; font-family: var(--font-display); font-weight: 850; line-height: 1; font-size: 4.2rem; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12); pointer-events: none; user-select: none; } .step h3 { position: relative; }