/* Страница отдельного приложения — та же пиксельная витрина, что и главная. Грузится ПОСЛЕ style.css и правит только то, чего на главной нет. */ /* Цвет приложения. Порядок тот же, что у карточек на главной. ⚠️ Именно классом, а не style="--c: …" в теге : на сервере стоит политика style-src 'self', инлайновые стили она молча выбрасывает — страница уезжала бесцветной (поймано tools/csp.mjs после выкладки). */ .app-astra { --c: #ff2fd0; } .app-dyshi { --c: #00f0ff; } .app-femcycle { --c: #b6ff2f; } .app-tzolkin { --c: #ff8a00; } .app-medici { --c: #a45bff; } .app-page .wrap { max-width: 780px; } .app-page header { align-items: center; } /* имя сайта в шапке — ссылка домой, ростом поменьше заголовка страницы */ .app-page .home { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; text-shadow: 2px 2px 0 var(--magenta), 4px 4px 0 #00000060; } .app-page .home b { color: var(--cyan); } .app-page .home:hover, .app-page .home:focus-visible { color: var(--cyan); outline: none; } /* обложка: планета слева, имя и кнопки справа */ .hero { margin-top: 28px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; padding: 18px; background: #1d0540e0; border: 3px solid var(--c); box-shadow: 8px 8px 0 var(--c); } .hero .planet { width: 128px; height: 128px; margin: 0; flex: 0 0 auto; } .hero .ht { flex: 1 1 260px; min-width: 0; } .app-page h1 { font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--ink); text-shadow: 4px 4px 0 var(--c), 8px 8px 0 #00000060; } .hero .lead { color: var(--dim); margin: 12px 0 0; font-size: 0.98rem; } .hero .ad { margin: 16px 0 0; border-top: 2px solid var(--c); color: var(--cyan); } .acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; } .btn { font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-decoration: none; color: #12002b; background: var(--c); border: 3px solid var(--c); padding: 8px 14px; box-shadow: 5px 5px 0 #00000070; transition: transform .12s steps(2); } .btn.dl { color: var(--c); background: #1d0540e0; } .btn:hover, .btn:focus-visible { transform: translate(-2px, -2px); outline: none; } .btn.dl:hover, .btn.dl:focus-visible { color: #12002b; background: var(--c); } .btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #00000070; } /* Блоки текста — на плашке. Прямо на звёздном поле длинные абзацы читаются плохо: фон местами светлее букв. */ .blk { margin-top: 16px; padding: 15px 18px; background: #1d0540e0; border-left: 6px solid var(--c); box-shadow: 6px 6px 0 #00000070; } .blk h2 { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); margin: 0 0 10px; } .blk p { margin: 0 0 10px; max-width: 64ch; } .blk p:last-child { margin-bottom: 0; } .blk ul { list-style: none; margin: 0; padding: 0; max-width: 64ch; } .blk li { position: relative; padding-left: 22px; margin-bottom: 9px; } .blk li::before { content: "▪"; position: absolute; left: 3px; color: var(--c); } .app-page footer { margin-top: 34px; } .app-page .back { font-family: var(--mono); font-size: 0.76rem; color: var(--cyan); text-decoration: none; } .app-page .back:hover, .app-page .back:focus-visible { color: var(--amber); outline: none; } @media (max-width: 460px) { .hero { padding: 14px; gap: 14px; } .hero .planet { width: 84px; height: 84px; } .app-page .home { font-size: 0.92rem; } /* тень сдвинута под мелкий кегль: на телефоне 4+8 пикселей съедали буквы */ .app-page h1 { text-shadow: 3px 3px 0 var(--c), 5px 5px 0 #00000060; } .blk { padding: 13px 15px; } }