[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Catskill Grunge — сотрудники парка | шрифт имён Garamond + GIF-слоты</title>
<!-- Подключаем шрифт Garamond из Google Fonts (элегантный, но с характером, отлично контрастирует с гранжем) -->
<link href="https://fonts.googleapis.com/css2?family=Garamond&display=swap" rel="stylesheet">
<style>
/* Полная изоляция стилей — только для grunge-блока */
.grunge-hiring * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grunge-hiring {
max-width: 1300px;
margin: 30px auto;
background: transparent;
/* Основной текст — грубый моноширинный с гранж-характером */
font-family: 'Courier Prime', 'Courier New', 'Roboto Mono', 'Fira Code', monospace;
font-weight: 500;
}
/* сетка сотрудников */
.team-grid {
display: flex;
flex-wrap: wrap;
gap: 28px;
justify-content: center;
}
/* карточка-заявка — гранж-стиль */
.grunge-job-card {
flex: 1;
min-width: 300px;
max-width: 380px;
background: #1b2617;
background-image: repeating-linear-gradient(45deg, rgba(45, 60, 35, 0.55) 0px, rgba(45, 60, 35, 0.55) 2px, rgba(20, 28, 12, 0.4) 2px, rgba(20, 28, 12, 0.4) 8px);
border: 2px solid #5b7536;
border-radius: 42px 14px 42px 14px;
padding: 22px 18px 26px 18px;
box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(160, 130, 70, 0.5);
position: relative;
transition: all 0.2s ease;
}
/* гранж-эффект (царапины, потёртости) */
.grunge-job-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" opacity="0.13"><path d="M20 35 L45 28 L70 42 L92 30 L118 44 L135 28 L158 48 L178 62 L165 85 L185 102 L160 118 L172 140 L150 152 L165 172 L130 180 L108 190 L80 178 L55 188 L30 170 L15 148 L5 120 L22 100 L8 75 L25 55 L12 35 L20 35Z" fill="none" stroke="%2381a553" stroke-width="2"/><circle cx="60" cy="110" r="7" fill="%233d5e1e" opacity="0.6"/><circle cx="140" cy="55" r="8" fill="%232a4716" opacity="0.5"/><path d="M100 150 L125 135 L140 155 L115 165 Z" fill="%233a5720" opacity="0.45"/></svg>') repeat;
background-size: 70px;
pointer-events: none;
border-radius: inherit;
mix-blend-mode: overlay;
}
.grunge-job-card::after {
content: "";
position: absolute;
bottom: 15px;
right: 12px;
width: 65px;
height: 65px;
background: radial-gradient(ellipse at 70% 40%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);
filter: blur(5px);
pointer-events: none;
}
.card-content {
position: relative;
z-index: 3;
}
/* БЛОК ДЛЯ GIF / ФОТО персонажа */
.character-gif {
width: 100%;
background: #0f170c;
border: 2px solid #6e8f42;
border-radius: 28px 8px 28px 8px;
margin-bottom: 20px;
padding: 8px;
box-shadow: inset 0 0 0 2px #2c3a1d, 3px 3px 0 #0b1307;
text-align: center;
transition: all 0.2s;
}
.gif-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #121d0c;
background-image: radial-gradient(circle at 20% 35%, #2c4520 1.2px, transparent 1px);
background-size: 18px 18px;
border-radius: 22px 5px 22px 5px;
font-family: monospace;
color: #9bb86b;
font-size: 0.75rem;
text-align: center;
gap: 8px;
padding: 12px;
}
.gif-placeholder span {
background: #1e2c14;
padding: 5px 12px;
border-radius: 60px;
display: inline-block;
font-weight: bold;
letter-spacing: 1px;
border: 1px solid #6e9144;
}
.gif-placeholder i {
font-size: 0.7rem;
opacity: 0.8;
}
/* =============================================== */
/* ГЛАВНОЕ ПРАВИЛО: ВСЕ GIF КАРТИНКИ ОДИНАКОВОЙ ВЫСОТЫ 150px */
/* =============================================== */
.character-gif img {
width: 100%; /* Растягиваем на всю ширину родителя */
height: 150px; /* ФИКСИРОВАННАЯ ВЫСОТА 150px для ВСЕХ изображений */
object-fit: cover; /* Обрезаем края, сохраняя пропорции, заполняя всю область */
border-radius: 22px 5px 22px 5px;
display: block;
margin: 0 auto;
border: 1px solid #8cad5a;
box-shadow: 2px 2px 0 #0e1f06;
background-color: #0a1007; /* Цвет фона на время загрузки */
}
/* Альтернативный вариант БЕЗ обрезки (если нужно вписать целиком) — раскомментируйте, а верхний закомментируйте */
/*
.character-gif img {
width: 100%;
height: 150px;
object-fit: contain;
background-color: #0a1007;
border-radius: 22px 5px 22px 5px;
display: block;
margin: 0 auto;
border: 1px solid #8cad5a;
}
*/
/* Блок аватар + ИМЯ: ШРИФТ GARAMOND (элегантный, но с гранжевым обрамлением) */
.grunge-avatar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
border-bottom: 2px dotted #7c9e48;
padding-bottom: 10px;
}
.avatar-icon {
font-size: 54px;
filter: drop-shadow(2px 2px 0 #0e1a08);
}
/* 🔥 ИМЕНА — ТОЛЬКО GARAMOND, с грубой обработкой для гранж-эстетики */
.job-title {
font-family: 'Garamond', 'Georgia', 'Times New Roman', serif;
font-size: 1.85rem;
font-weight: 400;
letter-spacing: 0.5px;
color: #ebdfa5;
text-shadow: 3px 3px 0 #1f2e12, 1px 1px 0 #5d793a;
line-height: 1.2;
background: linear-gradient(135deg, #f5edc4, #cfbc7a);
background-clip: text;
-webkit-background-clip: text;
color: #efe3aa;
text-shadow: 2px 2px 0 #1f2c12;
transform: rotate(-0.3deg);
display: inline-block;
border-left: 2px solid #8aaE5a;
padding-left: 12px;
}
.role-tag {
background: #2d3b22;
border-left: 5px solid #96b35c;
padding: 5px 12px;
font-size: 0.73rem;
font-weight: bold;
color: #e7f0bd;
margin: 12px 0 12px 0;
display: inline-block;
border-radius: 0 20px 20px 0;
letter-spacing: 0.3px;
font-family: monospace;
}
.fact-list {
list-style: none;
margin: 18px 0 14px 0;
}
.fact-list li {
margin-bottom: 12px;
padding-left: 28px;
position: relative;
color: #cfdd9a;
font-size: 0.82rem;
line-height: 1.45;
font-weight: 500;
}
.fact-list li::before {
content: "⛰️";
position: absolute;
left: 0;
top: -1px;
font-size: 1rem;
filter: drop-shadow(0 0 1px #7d9f42);
}
.fact-list.alt1 li::before { content: "🪓"; }
.fact-list.alt2 li::before { content: "🌲"; }
.fact-list.alt3 li::before { content: "🐻"; }
.fact-list.alt4 li::before { content: "🔥"; }
.fact-list.alt5 li::before { content: "🍂"; }
.fact-list.ranger3 li::before { content: "🏔️"; }
.apply-badge {
margin-top: 22px;
background: #2f4020;
border: 1px solid #839f4c;
padding: 5px 14px;
text-align: center;
border-radius: 40px;
font-size: 0.7rem;
font-weight: bold;
color: #f2eac2;
display: inline-block;
box-shadow: inset 0 1px 0 #5c7c38, 2px 2px 0 #0e1a0b;
font-family: monospace;
text-transform: uppercase;
}
.quote {
margin-top: 18px;
font-size: 0.68rem;
color: #8fa068;
border-top: 1px dashed #596f34;
padding-top: 12px;
text-align: right;
font-style: italic;
font-family: monospace;
}
@media (max-width: 800px) {
.grunge-job-card { min-width: 280px; }
.job-title { font-size: 1.55rem; letter-spacing: 0px; padding-left: 8px; }
}
</style>
</head>
<body>
<div class="grunge-hiring">
<div class="team-grid">
<!-- 1. СИЛЬВИЯ "МХОВАЯ КОСА" — GIF слот, ИМЯ GARAMOND -->
<div class="grunge-job-card">
<div class="card-content">
<div class="character-gif">
<div class="gif-placeholder">
🎞️ <img src="https://66.media.tumblr.com/159d591bc24498e7ee2cc7e32de4300f/38afa952ce532c8b-2b/s400x600/ac90757805b7fe1868dbc2683045c7180c6ced18.gif" alt="Сильвия в лесу">
fc: Кери Рассел
</div>
</div>
<div class="grunge-avatar">
<span class="job-title">SILVIA MOSS</span>
</div>
<div class="role-tag">🔹 СТАРШИЙ РЕЙНДЖЕР DEC | 12 лет в Catskill</div>
<ul class="fact-list alt1">
<li>Сильвия родилась в маленьком трейлере прямо на территории парка. Её отец работал лесорубом.</li>
<li>Знает каждую тропу в Devil's Path — может пройти её вслепую за 9 часов.</li>
<li>Однажды отбила медвежонка от стаи койотов голыми руками (шрам на левом предплечье).</li>
<li>Носит с собой самодельный нож, подаренный отцом.</li>
<li>Не пользуется GPS - только карты и природные ориентиры.</li>
<li>Обучает молодняк патрулированию: минимум техники, максимум интуиции.</li>
<li>Может приготовить на костре любое блюдо.</li>
<li>Умеет имитировать крики различных животных и птиц.</li>
<li>Её позывной - «Mossback», слышен по рации на частоте 151.4.</li>
</ul>
<div class="apply-badge">🌲 РЕЙНДЖЕР • ВЫЕЗДНАЯ ГРУППА</div>
</div>
</div>
<!-- 2. ДЖЕК "РЖАВЫЙ ТОПОР" — Garamond имя -->
<div class="grunge-job-card">
<div class="card-content">
<div class="character-gif">
<div class="gif-placeholder">
🎞️ <img src="https://64.media.tumblr.com/934f7f14cd76b86eb04a019fe2a89c07/b24188559691ab5e-a5/s400x600/ffa8607ad2a93d0d1648e63933e0fe35e441da22.gif" alt="Джек">
fc: Макс Айронс
</div>
</div>
<div class="grunge-avatar">
<span class="job-title">JACK RUSTY</span>
</div>
<div class="role-tag">🔹 МАСТЕР ТРОП | Catskill Trail Crew | 8 сезонов</div>
<ul class="fact-list alt2">
<li>В молодости (в 22 года) Джек отсидел два года за драку в баре - защищал друга.</li>
<li>Единственный в парке, кто чинит брёвна старинным способом «паз-шип» без гвоздей.</li>
<li>В его рюкзаке всегда 2 килограмма ручного инструмента: кирка, тесло, скребок.</li>
<li>Женат, есть дочь - Дженни (10 лет).</li>
<li>Не переносит бензопилы — только лучковая пила и топор.</li>
<li>Знает 14 видов съедобных грибов и устраивает "лесные ужины" для бригады.</li>
<li>Единственный, с кем Джек может болтать часами — это старый рейнджер Вернон.</li>
<li>Он живёт в доме на отшибе, который сам построил из бревна, оставшегося после расчистки троп.</li>
</ul>
<div class="apply-badge">🪵 ТРОПЫ • ИНФРАСТРУКТУРА</div>
</div>
</div>
<!-- 3. СОЛ "ВЕТЕР" — Garamond имя -->
<div class="grunge-job-card">
<div class="card-content">
<div class="character-gif">
<div class="gif-placeholder">
🎞️ <img src="https://64.media.tumblr.com/afa4fcaba8c0de3c622e6d1319495881/dc43ce941a822cf0-ea/s250x400/fe805ed208f0504c3ee16bd177c9f25adc379a0b.gif" alt="Сол">
fc: Джо Кири
</div>
</div>
<div class="grunge-avatar">
<span class="job-title">SOL RILEY</span>
</div>
<div class="role-tag">🔹 ПОЖАРНЫЙ НАБЛЮДАТЕЛЬ | вышка Hunter Mountain</div>
<ul class="fact-list alt4">
<li>Юморист, оптимист, и охочий до болтовни парень.</li>
<li>Девушка бросила его через два месяца после переезда в вышку - сказала: «Ты больше любишь деревья, чем меня».</li>
<li>На вышке живёт ручной ворон по кличке Пепел (Эш). Сол подобрал его птенцом после бури.</li>
<li>В непогоду живет в будке без электричества, готовит на буржуйке.</li>
<li>Мечтает о собаке. Очень хочет хаски, но понимает, что на вышке собаке будет тесно. Поэтому раз в месяц спускается в приют для животных и просто гуляет с тамошними псами.</li>
<li>Там он познакомился с милой сотрудницей по имени Бонни.</li>
<li>Его дед был лесником в Catskill в 1960-х, передал винтажный компас.</li>
<li>Сломан нос, когда разнимал драку в баре. Говорит, что нос кривой, но «Хоть лицо не скучное».</li>
</ul>
<div class="apply-badge">🏔️ ПОЖАРНАЯ БЕЗОПАСНОСТЬ</div>
</div>
</div>
<!-- 4. БОННИ "РЖАВАЯ ШИНА" — Garamond имя -->
<div class="grunge-job-card">
<div class="card-content">
<div class="character-gif">
<div class="gif-placeholder">
🎞️
<img src="https://64.media.tumblr.com/e53fcdd5439d2383f263e2f9ea689ab7/4b61dcdda07a9ae4-70/s400x600/fe120399f202627e706f730b4a19bcc09430a214.gif" alt="Bonnie GIF">
fc: Фрейя Мейвор
</div>
</div>
<div class="grunge-avatar">
<span class="job-title">BONNIE OLSEN</span>
</div>
<div class="role-tag">🔹 СОТРУДНИК ПРИЮТА ДЛЯ ЖИВОТНЫХ | "Charley's Strays"</div>
<ul class="fact-list alt1">
<li>В 11 лет Бонни спасла свою первую птицу, которая выпала из гнезда.</li>
<li>Бонни обожает «челленджи» с лохматыми, запущенными собаками. Она их вычёсывает, стрижёт и возвращает им не только красивый вид, но и хорошее самочувствие.</li>
<li>Её суперсила - сбор помощи. Бонни использует свои навыки для сбора пожертвований, ведения соцсетей приюта и профессиональной фотосъёмки животных, чтобы помочь им найти дом.</li>
<li>В приюте есть пожилая собака, которая живёт там уже девять лет — никто не захотел её забрать, но для сотрудников она стала частью коллектива.</li>
<li>У неё есть татуировка в виде маленькой птички на левом запястье, которую она сделала в 19 лет.</li>
<li>У Бонни есть старший брат, который работает звукорежиссёром на рок-концертах в НЙ и уже два года не может дослушать её голосовое сообщение до конца.</li>
</ul>
<div class="apply-badge">🐻 ЛЮБОВЬ К ЖИВОТНЫМ</div>
</div>
</div>
<!-- 5. МЭГАН "СОВА" — Garamond имя -->
<div class="grunge-job-card">
<div class="card-content">
<div class="character-gif">
<div class="gif-placeholder">
🎞️ <img src="https://64.media.tumblr.com/9ddf1e79ce60e3bbfe91bc3e299decf6/7b16d18dcf144463-a0/s400x600/1ff8e1e707b0431ebfd2dd46994d7ac5dfd6f024.gif" alt="Меган">
fc: Эмма Маки
</div>
</div>
<div class="grunge-avatar">
<span class="job-title">MEGAN HARTMANN</span>
</div>
<div class="role-tag">🔹 Catskill Steward | координатор волонтёров</div>
<ul class="fact-list alt3">
<li>Меган стала координатором волонтёров в 23 года - никто другой не согласился на эту зарплату, а она просто не умеет говорить «нет».</li>
<li>Каждый год организует «посвящение в волонтёры» - ночь в лесу с проверкой навыков, страшилками у костра и обязательной клятвой, которую она сама придумала.</li>
<li>Она помнит дни рождения всех рейнджеров и волонтёров - и каждому готовит маленький подарок.</li>
<li>Разработала буклет «Как не засрать лес» в комикс-стиле.</li>
<li>Меган тайком подкармливает Бо Марлоу домашними пирогами - оставляет их на крыльце его сторожки.</li>
<li>Очень миролюбивая, улыбчивая и никогда не повышает голос.</li>
<li>Мечтает открыть мастерскую по переработке найденного мусора в арт-объекты.</li>
</ul>
<div class="apply-badge">🌿 ЭКОПРОСВЕТ • ВОЛОНТЁРСТВО</div>
</div>
</div>
<!-- 6. МАРЛОУ "ТИХИЙ ЭХ" — рейнджер-отшельник, живёт в глубине парка -->
<div class="grunge-job-card">
<div class="card-content">
<div class="character-gif">
<div class="gif-placeholder">
🎞️ <img src="https://66.media.tumblr.com/4d704ad0775fb2a6547a191826d17655/05404def4c1353ab-97/s400x600/402d4af0b8b8af713de4883eaa0c52b236bb72b6.gif" alt="Бо Марлоу">
fc: Джейсон Момоа
</div>
</div>
<div class="grunge-avatar">
<span class="job-title">BEAU MARLOW</span>
</div>
<div class="role-tag">🔹 РЕЙНДЖЕР-ОТШЕЛЬНИК | живёт на кордоне | 15 лет</div>
<ul class="fact-list ranger3">
<li>После смерти жены продал квартиру и ушел в лес. Сейчас у него нет телефона, только радиостанция.</li>
<li>Живёт в бревенчатой хижине без электричества, за едой ездит раз в две недели.</li>
<li>Знает всех медведей парка в лицо и дал им имена: «Панчо», «Желудь» и «Генерал».</li>
<li>Он не произносил имя жены вслух уже два года.</li>
<li>Однажды задержал браконьера, устроив засаду.</li>
<li>Умеет и пользуется огнестрельным оружием, хотя в его арсенале так же есть перцовый баллончик и топор.</li>
<li>Бо носит обручальное кольцо на цепочке под рубашкой.</li>
<li>Уже трижды находил туристов, которые заблудились в том же районе, где стоит его хижина.</li>
</ul>
<div class="apply-badge">🏔️ ГЛУШЬ • ФИЛОСОФИЯ ЛЕСА</div>
</div>
</div>
</div>
</div>
</body>
</html>[/html]
[html]<!-- КОЛОНКА ДОПОЛНИТЕЛЬНОЙ ИНФОРМАЦИИ — ОТДЕЛЬНЫЙ БЛОК -->
<div class="grunge-info-sidebar">
<div class="info-card">
<div class="info-header">
<span class="info-icon">📜</span>
<span class="info-title">ВАЖНО ДЛЯ ИГРОКОВ</span>
</div>
<div class="info-content">
<p><strong>🎭 Внешности:</strong> Все предложенные внешности (fc / faceclaim) — <strong>примерные и не обязательные</strong>. Вы можете выбрать любой внешний вид для своего персонажа, который считаете подходящим.</p>
<p><strong>✏️ Имена:</strong> Указанные имена персонажей — <strong>рабочий вариант</strong>. Игроки могут изменить имя, фамилию или добавить прозвище на своё усмотрение.</p>
<p><strong>🔄 Некоторые факты:</strong> Часть фактов о персонажах <strong>можно менять, адаптировать или заменять</strong> под свою историю. Основная суть (профессия, место работы, ключевая черта) сохраняется, но детали — в вашей власти.</p>
<p><strong>✅ Берите то, что нравится, меняйте то, что не подходит, и создавайте уникального персонажа под себя!</p>
</div>
<div class="info-footer">
</div>
</div>
</div>
<style>
/* Стили для отдельной колонки с информацией */
.grunge-info-sidebar {
max-width: 1300px;
margin: 0 auto 30px auto;
padding: 0 10px;
}
.info-card {
background: #1b2617;
background-image: repeating-linear-gradient(45deg, rgba(45, 60, 35, 0.55) 0px, rgba(45, 60, 35, 0.55) 2px, rgba(20, 28, 12, 0.4) 2px, rgba(20, 28, 12, 0.4) 8px);
border: 2px solid #5b7536;
border-radius: 28px 12px 28px 12px;
padding: 20px 24px;
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(160, 130, 70, 0.4);
position: relative;
}
.info-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" opacity="0.1"><path d="M20 35 L45 28 L70 42 L92 30 L118 44 L135 28 L158 48 L178 62 L165 85 L185 102 L160 118 L172 140 L150 152 L165 172 L130 180 L108 190 L80 178 L55 188 L30 170 L15 148 L5 120 L22 100 L8 75 L25 55 L12 35 L20 35Z" fill="none" stroke="%2381a553" stroke-width="2"/></svg>') repeat;
background-size: 60px;
pointer-events: none;
border-radius: inherit;
mix-blend-mode: overlay;
}
.info-header {
display: flex;
align-items: center;
gap: 12px;
border-bottom: 2px dotted #7c9e48;
padding-bottom: 12px;
margin-bottom: 18px;
position: relative;
z-index: 2;
}
.info-icon {
font-size: 32px;
filter: drop-shadow(2px 2px 0 #0e1a08);
}
.info-title {
font-family: 'Garamond', 'Georgia', 'Times New Roman', serif;
font-size: 1.6rem;
font-weight: 600;
color: #ebdfa5;
text-shadow: 2px 2px 0 #1f2e12;
letter-spacing: 1px;
}
.info-content {
position: relative;
z-index: 2;
}
.info-content p {
color: #cfdd9a;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 14px;
padding-left: 8px;
border-left: 3px solid #8aaE5a;
}
.info-content p:last-of-type {
margin-bottom: 0;
}
.info-content strong {
color: #f2e6b0;
font-family: monospace;
}
.info-footer {
margin-top: 18px;
padding-top: 12px;
border-top: 1px dashed #596f34;
text-align: center;
position: relative;
z-index: 2;
}
.info-footer span {
font-size: 0.7rem;
color: #8fa068;
font-style: italic;
font-family: monospace;
}
@media (max-width: 800px) {
.info-title { font-size: 1.3rem; }
.info-content p { font-size: 0.8rem; }
.info-card { padding: 16px 18px; }
}
</style>[/html]
