/* Gatherwell Press — оформление сайта. СТРУКТУРА (не ломать порядок секций): 1. токены 2. светлая/тёмная схема 3. скины (ТОЛЬКО токены) 4. структурные отличия скинов (потолок ~8 правил на скин) 5. общая раскладка Скин = вариант оформления (data-skin на , ставится на сборке). Схема = светлая/тёмная (prefers-color-scheme / data-theme). Это РАЗНЫЕ оси: у каждого скина есть обе схемы. */ /* Шрифт заголовков. Сабсет Playfair Display (SIL OFL 1.1, см. fonts/OFL.txt). 🔴 Семейство ПЕРЕИМЕНОВАНО: лицензия с Reserved Font Name запрещает сохранять исходное имя у модифицированных версий, а сабсеттинг — это модификация. */ @font-face { font-family: "Gatherwell Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/gatherwell-display-400.woff2) format("woff2"); } @font-face { font-family: "Gatherwell Display"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/gatherwell-display-600.woff2) format("woff2"); } /* --- 1. ТОКЕНЫ (значения по умолчанию = скин lamplight, светлая схема) --- */ :root { --ground: #FBF8F3; /* тёплый почти-белый, светлее AI-cream */ --surface: #F3EDE2; /* карточки */ --ink: #241E1A; /* тёплый near-black (поднят контраст) */ --ink-soft: #4C4239; /* вторичный текст (был #5B5148 — ~5.9:1, тонко для 19px) */ --muted: #8A7E72; /* подписи */ --brass: #A67C3D; /* акцент — латунь (тон бронзы логотипа) */ --brass-deep: #855F27; /* латунь на hover */ --euc: #234B44; /* глубокий teal под тон логотипа #063f3b */ --line: #E2D8C8; /* линии */ --radius: 6px; --maxprose: 65ch; --grid-gap: 1.1rem; --display: "Gatherwell Display", "Iowan Old Style", Palatino, Georgia, serif; --display-tracking: -0.01em; --cover-shadow: 0 10px 30px -14px rgba(36, 30, 26, .45); } /* --- 2. СХЕМА: тёмная. Исключены ДВА скина: night тёмный by design, а ink — «бумажный» и остаётся светлым всегда (решение пользователя 2026-07-27: выбор делался по светлому макету, и сайт не должен темнеть только потому, что у посетителя тёмная тема в системе). --- */ @media (prefers-color-scheme: dark) { html:not([data-skin="night"]):not([data-skin="ink"]) { --ground: #1A1613; --surface: #221D18; --ink: #EDE6DC; --ink-soft: #C3B8A9; --muted: #9A8E7F; --brass: #C9A25E; --brass-deep: #DDB877; --euc: #6E9488; --line: #33291F; --cover-shadow: 0 12px 34px -16px rgba(0, 0, 0, .7); } } :root[data-theme="dark"] { --ground: #1A1613; --surface: #221D18; --ink: #EDE6DC; --ink-soft: #C3B8A9; --muted: #9A8E7F; --brass: #C9A25E; --brass-deep: #DDB877; --euc: #6E9488; --line: #33291F; } :root[data-theme="light"] { --ground: #FBF8F3; --surface: #F3EDE2; --ink: #241E1A; --ink-soft: #4C4239; --muted: #8A7E72; --brass: #A67C3D; --brass-deep: #855F27; --euc: #234B44; --line: #E2D8C8; } /* --- 3. СКИНЫ: только переопределение токенов --- */ /* INK — почти монохром, единственный акцент teal логотипа, нулевые скругления, волосяные линейки. Тон небольшого серьёзного издательства. */ html[data-skin="ink"] { --ground: #FAF9F6; --surface: #FFFFFF; --ink: #111111; --ink-soft: #3A3A38; --muted: #6E6E6A; --brass: #063F3B; --brass-deep: #0A5A54; --euc: #063F3B; --line: #DCDAD3; --radius: 0px; --grid-gap: 1px; --display-tracking: -0.02em; --cover-shadow: 0 1px 0 rgba(17, 17, 17, .08); } /* Тёмного варианта у ink НЕТ намеренно: скин задуман как бумажный, и обложки книг на светлом читаются так, как их печатали. Кому нужен тёмный сайт — это скин night. color-scheme: only light не даёт браузеру инвертировать поля формы под тёмную тему. */ html[data-skin="ink"] { color-scheme: only light; } /* NIGHT — тёмный по умолчанию, обложки светятся как на витрине. */ html[data-skin="night"] { color-scheme: dark; --ground: #0E0D0C; --surface: #151311; --ink: #EFE9DF; --ink-soft: #BDB3A5; --muted: #8C8377; --brass: #C9A25E; --brass-deep: #E0BC7E; --euc: #7FA79B; --line: #262220; --radius: 3px; --cover-shadow: 0 24px 60px -22px rgba(0, 0, 0, .9); } /* --- 4. СТРУКТУРНЫЕ ОТЛИЧИЯ СКИНОВ (держать в пределах ~8 правил на скин) --- */ /* ink: сетка карточек как разграфлённая таблица — hairline-разделители получаются из gap:1px поверх фона контейнера, без единой лишней рамки */ /* Линии рисуем ТЕНЬЮ на карточках, а не фоном контейнера: фон проступал бы в пустых ячейках последнего ряда серым прямоугольником (поймано на рендере — пять книг в сетке из четырёх колонок оставляют три пустых места). */ html[data-skin="ink"] .cards { gap: 1px; } html[data-skin="ink"] .card { border: 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line); } html[data-skin="ink"] .card:hover { transform: none; background: #fff; } html[data-skin="ink"] header.site { border-bottom-width: 2px; } /* night: обложка отделяется от фона свечением, а не рамкой */ html[data-skin="night"] .cover { border-color: transparent; box-shadow: var(--cover-shadow); } html[data-skin="night"] .card { background: var(--surface); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-size: 19px; line-height: 1.65; text-rendering: optimizeLegibility; } .label { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 600; color: var(--muted); } /* Header */ header.site { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: saturate(1.1) blur(6px); z-index: 10; } header.site .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; max-width: 1080px; margin: 0 auto; padding: 0.9rem 1.4rem; } header.site a.brand { font-size: 1.25rem; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; display: inline-flex; align-items: center; } header.site a.brand .logo { height: 44px; width: 44px; margin-right: 0.6rem; } header.site a.brand .amp { color: var(--brass); } header.site nav { display: flex; gap: 1.4rem; } header.site nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; } header.site nav a:hover { color: var(--brass-deep); } main { max-width: 1080px; margin: 0 auto; padding: 3rem 1.4rem 4rem; } .prose { max-width: var(--maxprose); } .prose p, main > article p { color: var(--ink-soft); } h1, h2, h3 { font-family: var(--display); letter-spacing: var(--display-tracking); color: var(--ink); text-wrap: balance; line-height: 1.2; font-weight: 600; } h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 1rem; } h2 { font-size: 1.6rem; margin: 2.5rem 0 0.8rem; } h3 { font-size: 1.2rem; } a { color: var(--brass-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--brass); } /* Hero (home) */ .hero { border-bottom: 1px solid var(--line); padding-bottom: 2.5rem; margin-bottom: 2.5rem; } .hero .tag { color: var(--euc); font-style: italic; font-size: 1.15rem; } /* Book cards grid */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--grid-gap); margin: 1.5rem 0; } .card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; } .card:hover { border-color: var(--brass); transform: translateY(-2px); } .card h3 { margin: 0 0 0.4rem; } .card p { margin: 0; color: var(--muted); font-size: 0.92rem; } /* Обложки. Контейнер держит пропорцию 5:8 (1600×2560 — реальный формат всех наших обложек, НЕ 2:3) и рисует штриховку: если файла нет, карточка не схлопывается и сетка не разъезжается. */ .cover { aspect-ratio: 5 / 8; box-shadow: var(--cover-shadow); overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--radius) / 2); margin-bottom: 0.9rem; background: repeating-linear-gradient(135deg, var(--surface) 0 12px, var(--ground) 12px 24px); } .cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .card { padding: 0.9rem; } .card .cover { margin-bottom: 0.8rem; } .card__text { padding: 0 0.4rem 0.4rem; } /* Страница книги: обложка слева, текст справа; на телефоне — в одну колонку. Без медиа-запроса: auto-fit сам решает по доступной ширине. */ .book { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1.4rem, 4vw, 2.8rem); align-items: start; margin: 1.5rem 0 2.5rem; } .book .cover { max-width: 380px; margin: 0; } .book__meta { max-width: var(--maxprose); } .book__blurb { font-size: 1.05rem; } .book__by { color: var(--muted); } .book__buy { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.4rem 0 0.5rem; } .book__facts { list-style: none; padding: 0; margin: 1.6rem 0 0; border-top: 1px solid var(--line); } .book__facts li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 0.94rem; } /* «Inside the book» — плитки страниц. Высоту задаёт ряд, картинка вписывается целиком: книги разного формата (6×9 и 8.5×11) стоят в одной сетке и не должны обрезаться. */ .inside { margin: 3rem 0 1rem; } .inside__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 0.8rem 0 0.6rem; align-items: start; } .inside__page { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) / 2); padding: 0.5rem; } .inside__page img { width: 100%; height: auto; display: block; } .inside__page:hover { border-color: var(--brass); } .postlist { list-style: none; padding: 0; } .postlist li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); } .postlist .meta { color: var(--muted); font-size: 0.85rem; } /* Buttons */ .btn { display: inline-block; background: var(--brass); color: #fff; padding: 0.6rem 1.2rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: 0.98rem; border: 1px solid var(--brass-deep); } .btn:hover { background: var(--brass-deep); color: #fff; } /* Author */ .portrait { border-radius: 50%; border: 3px solid var(--line); float: left; margin: 0 1.5rem 0.5rem 0; } .author-books { clear: both; } /* Signup form (hyperlink-gate: бонус выше, форма опциональна ниже) */ .signup { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; margin: 2.5rem 0; max-width: var(--maxprose); } .signup form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem; } .signup input[type=email] { flex: 1 1 220px; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); color: var(--ink); font-size: 1rem; } .signup .fineprint { color: var(--muted); font-size: 0.82rem; margin-top: 0.7rem; } /* honeypot Brevo (email_address_check). Уводим за экран, а НЕ display:none — скрытые поля боты пропускают, а нам нужно, чтобы бот его увидел и заполнил (заполненное = отказ у Brevo). */ .signup .input--hidden { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Bonus page — прямое скачивание ПЕРЕД формой */ .bonus-download { text-align: center; padding: 2rem 0; } .bonus-download .btn { font-size: 1.1rem; padding: 0.8rem 1.8rem; } footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; margin-top: 3rem; } footer.site .wrap { max-width: 1080px; margin: 0 auto; padding: 1.6rem 1.4rem; display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: space-between; } footer.site a { color: var(--ink-soft); } :focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } @media (max-width: 560px) { body { font-size: 18px; } .portrait { float: none; display: block; margin: 0 auto 1rem; } header.site nav { gap: 1rem; } }