[html]
<div class="lgen4" data-lgen3-root="1">
<!-- HERO (как на скрине) -->
<div class="lgen4__hero" lang="ru">
<div class="lgen4__heroGrid">
<div class="lgen4__heroLeft">
<div class="lgen4__heroTitle" aria-label="welcome home">
<!-- Welcome: 40 / hairline; italic only W, e, e -->
<div class="lgen4__welcome">
<span class="lgen4__it">We</span>lcom<span class="lgen4__it">e</span>
</div>
<!-- home: 90 / bold; italic only h and m -->
<div class="lgen4__home">
<span class="lgen4__it">h</span>o<span class="lgen4__it">m</span>e
</div>
</div>
<!-- pill under title: Helvetica Neue Medium 10/10 lowercase -->
<div class="lgen4__heroLead">
вот ты и перешагнул за порог эврика-спрингс, мы рады приветствовать тебя.
</div>
</div>
<!-- right column: Helvetica Neue Regular 10/13 lowercase -->
<div class="lgen4__heroRight">
этот <a href="https://thehaze.rusff.me/viewtopic.php?id=3020#p412349">город</a> и правда манит, не так ли? но уверен ли ты, что готов погрузиться во
<a href="https://thehaze.rusff.me/viewtopic.php?id=3381#p460431">тьму</a>
этого места, столкнуться лицом к лицу с
<a href="https://thehaze.rusff.me/viewforum.php?id=10">демонами</a>,
скрывающимися в тенях его зданий? не боишься потерять себя в погоне за
<a href="https://thehaze.rusff.me/viewforum.php?id=26">правдой</a>?
а она откроется тебе, если вдруг не сойдешь со своего
<a href="https://rehaze.ru/viewtopic.php?id=3381#p460442">пути</a>,
и только ты волен решать, какой
<a href="https://thehaze.rusff.me/viewtopic.php?id=1913">исход</a>
примет твоя дальнейшая судьба в этом таинственном городе.
</div>
</div>
</div>
<!-- NOTE between hero and form -->
<div class="lgen4__sec lgen4__sec--note">
<div class="lgen4__noteLine">
<span class="lgen4__sumNote lgen4__sumNote--center">
<!-- ТУТ ТВОЙ ТЕКСТ -->
заполняем поля формы, нажимаем «сгенерировать», копируем готовый код и публикуем его новым сообщением в теме с вашей анкетой.
</span>
</div>
</div>
<!-- СТАТУСЫ -->
<div class="lgen4__msg lgen4__msg--err" data-lgen3-err="1" style="display:none"></div>
<div class="lgen4__msg lgen4__msg--ok" data-lgen3-ok="1" style="display:none"></div>
<!-- ДАЛЬШЕ У ТЕБЯ ФОРМА (оставляю как было) -->
<!-- ОСНОВНАЯ ИНФОРМАЦИЯ -->
<div class="lgen4__sec lgen4__sec--first">
<div class="lgen4__sum">основная информация</div>
<div class="lgen4__grid">
<label class="lgen4__field">
<div class="lgen4__lbl">Имя (англ.)</div>
<input type="text" data-lgen3-first-en="1" placeholder="name">
</label>
<label class="lgen4__field">
<div class="lgen4__lbl">Фамилия (англ.)</div>
<input type="text" data-lgen3-last-en="1" placeholder="surname">
</label>
<label class="lgen4__field">
<div class="lgen4__lbl">Имя (рус.)</div>
<input type="text" data-lgen3-first-ru="1" placeholder="имя">
</label>
<label class="lgen4__field">
<div class="lgen4__lbl">Фамилия (рус.)</div>
<input type="text" data-lgen3-last-ru="1" placeholder="фамилия">
</label>
<label class="lgen4__field">
<div class="lgen4__lbl">Возраст</div>
<input type="number" data-lgen3-age="1" min="0" placeholder="только цифрами, например: 25">
</label>
<label class="lgen4__field">
<div class="lgen4__lbl">Внешность (англ.)</div>
<input type="text" data-lgen3-face="1" placeholder="name surname, например: brad pitt">
</label>
<label class="lgen4__field lgen4__span2">
<div class="lgen4__lbl">Ссылка на профиль</div>
<input type="url" data-lgen3-profile="1" placeholder="https://rehaze.ru/profile.php?id=...">
</label>
<label class="lgen4__field lgen4__span2">
<div class="lgen4__lbl">Ссылка на анкету</div>
<input type="url" data-lgen3-anketa="1" placeholder="https://rehaze.ru/viewtopic.php?id=...">
</label>
</div>
</div>
<!-- ЛИЧНОЕ ЗВАНИЕ -->
<div class="lgen4__sec">
<div class="lgen4__sum">личное звание</div>
<div class="lgen4__grid">
<label class="lgen4__field lgen4__span2">
<div class="lgen4__lbl">Текст личного звания</div>
<textarea data-lgen3-lz="1" rows="2" placeholder="HTML, но просьба не увлекаться тэгами"></textarea>
</label>
<div class="lgen4__field lgen4__span2">
<div class="lgen4__lbl">Упоминание пары</div>
<div class="lgen4__mention">
<input type="text" data-lgen3-men-word="1" placeholder="слово или фраза">
<input type="url" data-lgen3-men-url="1" placeholder="ссылка на профиль пары">
<button type="button" class="lgen4__btn lgen4__btn--mini" data-lgen3-men-insert="1">Вставить</button>
</div>
</div>
</div>
</div>
<!-- БИРЖА ТРУДА -->
<div class="lgen4__sec">
<div class="lgen4__sum">биржа труда</div>
<div class="lgen4__grid">
<label class="lgen4__field">
<div class="lgen4__lbl">Место работы (опционально)</div>
<input type="text" data-lgen3-work="1" placeholder="место работы (полиция, мэрия, ...)">
</label>
<label class="lgen4__field">
<div class="lgen4__lbl">Должность</div>
<input type="text" data-lgen3-pos="1" placeholder="должность (официант, пожарный, ...)">
</label>
</div>
</div>
<!-- ЛИЧНАЯ СТРАНИЦА -->
<div class="lgen4__sec">
<div class="lgen4__sum">личная страница</div>
<div class="lgen4__grid">
<label class="lgen4__field">
<div class="lgen4__lbl">Ссылка на GIF</div>
<input type="url" data-lgen3-gif="1" placeholder="GIF размером 100px x 100px с персонажем; используйте форумный загрузчик!">
</label>
<label class="lgen4__field">
<div class="lgen4__lbl">Цитата или песня</div>
<input type="text" data-lgen3-quote="1" placeholder="цитата или песня">
</label>
</div>
</div>
<!-- ДОМ -->
<div class="lgen4__sec">
<div class="lgen4__sum">дом <span class="lgen4__sumNote">можно заполнить позже в теме <a class="lgen4__lblLink" href="https://rehaze.ru/viewtopic.php?id=3999&p=5#p564027" target="_blank" rel="noopener">диалога с амс</a> </div>
<div class="lgen4__grid">
<label class="lgen4__field">
<div class="lgen4__lbl">Название</div>
<input type="text" data-lgen3-homeobj="1" placeholder="название дома, места работы, др., пример: «Дом Джона Смита»">
</label>
<label class="lgen4__field">
<div class="lgen4__lbl lgen4__lbl--map">
Адрес
<a class="lgen4__lblLink" href="https://rehaze.ru/viewtopic.php?id=3020#p412351" target="_blank" rel="noopener">карта</a>
</div>
<input type="text" data-lgen3-homeaddr="1" placeholder="выбираете на карте">
</label>
<label class="lgen4__field lgen4__span2">
<div class="lgen4__lbl">Визуализация</div>
<input type="url" data-lgen3-homevis="1" placeholder="URL изображения дома: https://upforme.ru/uploads/...">
</label>
<label class="lgen4__field lgen4__span2">
<div class="lgen4__lbl">Описание (опционально)</div>
<textarea data-lgen3-homedesc="1" rows="2" placeholder="развернутое описание истории и внешнего вида дома"></textarea>
</label> </div>
</div>
<div class="lgen4__actions">
<button type="button" class="lgen4__btn lgen4__btn--pri" data-lgen3-gen="1">Сгенерировать</button>
<button type="button" class="lgen4__btn" data-lgen3-copy="1" disabled>Копировать</button>
</div>
<textarea class="lgen4__out" data-lgen3-out="1" rows="6" spellcheck="false"
placeholder="здесь появится итоговый код для вставки."></textarea>
<div class="lgen4__notes">
<div class="lgen4__notesGrid">
<div class="lgen4__note">
<i>для задействованных в криминале:</i> криминал на форуме курируется, настоятельно рекомендуем ознакомиться с
<a href="https://rehaze.ru/viewtopic.php?id=3894#p537394" target="_blank" rel="noopener">темой</a>.
</div>
<div class="lgen4__note">
<i>при наличии твинков</i> вы должны обязательно отметиться в
<a href="https://rehaze.ru/viewtopic.php?id=2662#p361268" target="_blank" rel="noopener">теме учета</a>.
список можно вести под хайдом, но вести для ведома амс.
</div>
</div>
</div>
</div>
<style>
/* ===== Fonts: Editor's Note Display (forumstatic) ===== */
@font-face{ font-family:"EditorsNoteDisplay"; src:url("https://forumstatic.ru/files/001b/d4/18/34918.woff2") format("woff2"); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:"EditorsNoteDisplay"; src:url("https://forumstatic.ru/files/001b/d4/18/41986.woff2") format("woff2"); font-weight:100; font-style:italic; font-display:swap; }
@font-face{ font-family:"EditorsNoteDisplay"; src:url("https://forumstatic.ru/files/001b/d4/18/13370.woff2") format("woff2"); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:"EditorsNoteDisplay"; src:url("https://forumstatic.ru/files/001b/d4/18/12801.woff2") format("woff2"); font-weight:200; font-style:italic; font-display:swap; }
@font-face{ font-family:"EditorsNoteDisplay"; src:url("https://forumstatic.ru/files/001b/d4/18/20499.woff2") format("woff2"); font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:"EditorsNoteDisplay"; src:url("https://forumstatic.ru/files/001b/d4/18/58201.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"EditorsNoteDisplay"; src:url("https://forumstatic.ru/files/001b/d4/18/41059.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"EditorsNoteDisplay"; src:url("https://forumstatic.ru/files/001b/d4/18/89091.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"EditorsNoteDisplay"; src:url("https://forumstatic.ru/files/001b/d4/18/88859.woff2") format("woff2"); font-weight:500; font-style:italic; font-display:swap; }
@font-face{ font-family:"EditorsNoteDisplay"; src:url("https://forumstatic.ru/files/001b/d4/18/33832.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"EditorsNoteDisplay"; src:url("https://forumstatic.ru/files/001b/d4/18/73154.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"EditorsNoteDisplay"; src:url("https://forumstatic.ru/files/001b/d4/18/20404.woff2") format("woff2"); font-weight:700; font-style:italic; font-display:swap; }
/* =========================================================
LGEN4 BASE
========================================================= */
.lgen4{
/* palette */
--bg: var(--beg300, #ECE7E4);
--field: var(--beg500, #F2EEEC);
--brd: var(--border600, rgba(0,0,0,.18));
--txt: var(--text1, var(--text, #111));
--muted: var(--text2, rgba(0,0,0,.68));
--accent: var(--accent, #4f8cff);
/* ===== HERO TUNING (меняй только это) ===== */
--welcome-left: 70px; /* 1) Welcome вправо/влево */
--welcome-top: 20px; /* 2) Welcome вверх/вниз */
--home-top: 60px; /* 3) home вверх/вниз */
--pill-top: 10px; /* 4) плашка вверх/вниз (от низа title) */
--home-shift: 20px; /* 5) home чуть вправо/влево (если надо) */
/* ========================================= */
width: min(100%, 920px);
margin: 12px auto;
padding: 20px;
border-radius: 24px;
border: 1px solid var(--brd);
background: var(--bg);
color: var(--txt);
font: 14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
-webkit-tap-highlight-color: transparent;
color-scheme: light dark;
}
.lgen4, .lgen4 *{ box-sizing:border-box; }
/* =========================================================
HERO (единственный, без дублей)
========================================================= */
.lgen4__hero{
margin: -20px -20px 14px;
padding: 20px;
border-bottom: 1px solid var(--brd);
background: var(--bg);
border-top-left-radius: 24px;
border-top-right-radius: 24px;
}
.lgen4__heroGrid{
display:grid;
grid-template-columns: 480px 1fr;
column-gap: 20px;
align-items: start;
}
@media (max-width: 760px){
.lgen4__heroGrid{ grid-template-columns: 1fr; row-gap: 14px; }
}
/* левый столбец */
.lgen4__heroLeft{ width: 480px; }
/* title stack (Welcome + home) */
.lgen4__heroTitle{
position: relative;
height: 190px; /* полка под композицию (влезают 40/90 + наложение) */
font-family:"EditorsNoteDisplay", serif;
}
/* Welcome 40/40 hairline, курсив только на .lgen4__it */
.lgen4__welcome{
position:absolute;
left: var(--welcome-left);
top: var(--welcome-top);
font-size: 80px;
line-height: 40px;
font-weight: 100;
font-style: normal;
text-align: left;
margin: 0;
}
/* home 90/90 bold, курсив только на .lgen4__it */
.lgen4__home{
position:absolute;
left: calc(var(--home-shift));
top: var(--home-top);
font-size: 180px;
line-height: 90px;
font-weight: 700;
font-style: normal;
margin: 0;
}
.lgen4__it{ font-style: italic; }
/* плашка под заголовком — Helvetica Neue Medium 10/10 lowercase */
.lgen4__heroLead{
margin-top: var(--pill-top);
padding: 10px 12px;
border-radius: 6px;
background: var(--field);
border: 0;
max-width: 460px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 11px;
line-height: 10px;
text-transform: lowercase;
}
/* правый столбец — Helvetica Neue Regular 10/13 lowercase */
.lgen4__heroRight{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 12.5px;
line-height: 20px;
text-transform: lowercase;
text-align: justify;
text-align-last: left;
text-justify: inter-word;
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: anywhere;
margin: 30px 0 0;
}
/* ссылки справа — condensed black 12 uppercase */
.lgen4__heroRight a{
font-family: "Helvetica Neue Condensed Black",
"HelveticaNeue-CondensedBlack",
"Helvetica Neue",
Helvetica, Arial, sans-serif;
font-weight: 900;
font-size: 18px;
line-height: 21px;
text-transform: uppercase;
letter-spacing: .02em;
color: inherit;
text-decoration: none;
}
/* =========================================================
MESSAGES
========================================================= */
.lgen4__msg{
margin: 10px 0 0;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--brd);
background: rgba(127,127,127,.08);
white-space: pre-line;
font-size: 13px;
}
.lgen4__msg--err{ border-color: rgba(220,53,69,.55); background: rgba(220,53,69,.12); }
.lgen4__msg--ok{ border-color: rgba(40,167,69,.55); background: rgba(40,167,69,.12); }
/* =========================================================
SECTIONS / GRID
========================================================= */
.lgen4__sec{ margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--brd); }
.lgen4__sec--first{ margin-top: 0; padding-top: 0; border-top: 0; }
.lgen4__sum{
font-weight: 900;
font-size: 18px;
letter-spacing: .12em;
text-transform: uppercase;
opacity: .95;
}
.lgen4__grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
margin-top: 10px;
}
.lgen4__span2{ grid-column: 1/3; }
@media (max-width: 700px){
.lgen4__grid{ grid-template-columns: 1fr; }
.lgen4__span2{ grid-column: 1/2; }
}
/* labels */
.lgen4__lbl{
font-weight: 800;
font-size: 11px;
color: var(--muted);
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 6px;
opacity: .95;
display:flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.lgen4__lblLink{
font-size: 10px;
letter-spacing: .09em;
text-transform: uppercase;
font-weight: 700;
opacity: .78;
text-decoration: underline;
text-underline-offset: 2px;
color: inherit;
white-space: nowrap;
}
/* =========================================================
INPUTS / TEXTAREAS / OUTPUT (unified)
========================================================= */
.lgen4 input,
.lgen4 textarea,
.lgen4__out{
width:100%;
border: 1px solid var(--brd);
background: var(--field);
color: var(--txt);
outline: none;
font: inherit;
font-size: 13px;
line-height: 1.35;
-webkit-appearance: none;
appearance: none;
}
.lgen4 input{ border-radius: 999px; padding: 10px 14px; }
.lgen4 textarea{
border-radius: 18px;
padding: 10px 14px;
resize: vertical;
min-height: 72px;
}
.lgen4 input::placeholder,
.lgen4 textarea::placeholder,
.lgen4__out::placeholder{
color: var(--muted);
opacity: .55;
}
.lgen4 input:focus,
.lgen4 textarea:focus,
.lgen4__out:focus{
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(79,140,255,.14);
}
/* mention row */
.lgen4__mention{
display:grid;
grid-template-columns: 1fr 1fr auto;
gap: 10px;
align-items: center;
}
@media (max-width: 700px){
.lgen4__mention{ grid-template-columns: 1fr; }
}
/* buttons */
.lgen4__actions{
display:flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
align-items:center;
}
.lgen4__btn{
border: 1px solid var(--brd);
background: transparent;
color: var(--txt);
border-radius: 999px;
padding: 10px 16px;
cursor:pointer;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
font-size: 12px;
}
.lgen4__btn--pri{
border: 0;
background: var(--accent);
color: var(--text1, #fff);
}
.lgen4__btn[disabled]{ opacity:.55; cursor:not-allowed; }
.lgen4__btn--mini{ padding: 10px 14px; }
/* output */
.lgen4__out{
margin-top: 12px;
border-radius: 18px;
padding: 12px;
min-height: 120px;
font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
font-size: 12px;
line-height: 1.35;
}
/* =========================================================
FIX: одинаковая подложка у ВСЕХ полей + кнопка generate как anketaGen
Вставь в конец <style>
========================================================= */
/* 1) Единая подложка для всех полей */
.lgen4{
/* один-единственный цвет/токен для полей */
--field: var(--beg500, rgba(127,127,127,.10));
--brd: var(--border600, rgba(127,127,127,.35));
--txt: var(--text1, inherit);
--muted: var(--text2, rgba(127,127,127,.85));
--accent: var(--accent, #4f8cff);
}
/* все input/textarea/output строго одинаковые по фону */
.lgen4 input,
.lgen4 textarea,
.lgen4__out{
background: var(--field) !important;
border: 1px solid var(--brd) !important;
color: var(--txt) !important;
}
/* placeholder одинаковый */
.lgen4 input::placeholder,
.lgen4 textarea::placeholder,
.lgen4__out::placeholder{
color: var(--muted) !important;
opacity: .55 !important;
}
/* убираем жёлтый autofill, чтобы цвет не “отличался” */
.lgen4 input:-webkit-autofill,
.lgen4 textarea:-webkit-autofill{
-webkit-text-fill-color: var(--txt) !important;
box-shadow: 0 0 0 1000px var(--field) inset !important;
border: 1px solid var(--brd) !important;
}
/* 2) Кнопка “Сгенерировать” как anketaGen */
.lgen4__btn{
border-radius: 999px !important;
padding: 10px 16px !important;
font-weight: 900 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
font-size: 12px !important;
}
/* primary = акцентная, без рамки */
.lgen4__btn--pri{
border: 0 !important;
background: var(--accent) !important;
color: var(--text1, #fff) !important;
}
/* secondary/ghost оставляем как у anketaGen */
.lgen4__actions .lgen4__btn:not(.lgen4__btn--pri){
background: transparent !important;
border: 1px solid var(--brd) !important;
color: var(--txt) !important;
}
/* hover/active как у anketaGen (деликатно) */
.lgen4__btn:active{ transform: translateY(1px); }
.lgen4__btn[disabled]{ opacity:.55 !important; cursor:not-allowed !important; }
/* "карта" ближе к "адрес" */
.lgen4__lbl--map{
justify-content: flex-start !important;
gap: 12px !important; /* ← расстояние между "Адрес" и "Карта" */
}
.lgen4__lbl--map .lgen4__lblLink{
margin-left: 0 !important;
}
/* Кнопка "Сгенерировать" как на рефе */
.lgen4{
/* можешь руками задать конкретный оттенок как на скрине: */
--lg-btnpri-bg: #8c7b67; /* ← если хочешь теплее/темнее — меняй тут */
--lg-btnpri-txt: #fff;
}
/* если браузер умеет color-mix — подстроим тон под свет/тёмную тему */
@supports (background: color-mix(in srgb, black, white)){
.lgen4{
/* "тауп" из твоих --txt/--bg: в светлой будет тёплый, в тёмной — глубже */
--lg-btnpri-bg: color-mix(in srgb, var(--txt) 42%, var(--bg) 58%);
}
}
.lgen4__btn--pri{
background: var(--lg-btnpri-bg) !important;
color: var(--lg-btnpri-txt) !important;
border: 0 !important;
box-shadow: none !important;
/* чтобы было прям как на скрине */
letter-spacing: .10em !important;
padding: 10px 18px !important;
}
.lgen4__btn--pri:hover{
filter: brightness(0.98);
}
.lgen4__btn--pri:active{
transform: translateY(1px);
}
/* (опционально) "Копировать" как светлая ghost-пилюля */
.lgen4__actions .lgen4__btn:not(.lgen4__btn--pri){
background: rgba(127,127,127,.10) !important;
}
/* FIX: убираем циклический --accent, берём форумный как в anketaGen */
.lgen4{ --accent: inherit; }
/* Кнопка "Сгенерировать" — ровно от --accent */
.lgen4 .lgen4__btn--pri{
background: var(--accent, #8c7b67) !important; /* fallback на тауп, если вдруг у форума нет --accent */
color: #fff !important;
border: 0 !important;
}
.lgen4 input:focus,
.lgen4 textarea:focus,
.lgen4__out:focus{
border-color: var(--accent, #8c7b67) !important;
box-shadow: 0 0 0 3px rgba(140,123,103,.22) !important;
}
/* 1) Все поля гарантированно на 100% ширины ячейки */
.lgen4__field,
.lgen4__field > input,
.lgen4__field > textarea{
display: block;
width: 100% !important;
max-width: 100% !important;
}
/* 2) На мобиле "span2" не пытается жить в 2 колонки */
@media (max-width: 700px){
.lgen4__span2{ grid-column: 1 / -1 !important; }
}
/* 3) Текстовые поля/аутпут часто “режутся” глобальными стилями форума */
.lgen4 textarea,
.lgen4__out{
box-sizing: border-box !important;
min-width: 0 !important;
}
/* Кнопки: одинаковые и в сумме как "Название" */
.lgen4__actions{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
/* чтобы суммарно были как ширина поля "Название" */
max-width: 460px; /* ← если надо шире: 480px */
}
.lgen4__actions .lgen4__btn{
width: 100% !important;
justify-content: center;
text-align: center;
}
/* На мобиле — в столбик */
@media (max-width: 520px){
.lgen4__actions{
grid-template-columns: 1fr !important;
max-width: 480px;
}
}
/* 1) Центрируем блок кнопок и делаем ровно шириной как инпуты */
.lgen4__actions{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
/* ширина как у "инпутов" */
width: 100% !important;
max-width: 100% !important;
/* вот это и даёт “чуть отцентрировать” */
margin: 12px auto 0 !important;
justify-content: center !important;
}
/* чтобы обе кнопки занимали колонки полностью */
.lgen4__actions .lgen4__btn{
width: 100% !important;
text-align: center !important;
justify-content: center !important;
}
/* 2) Output (поле с генеренным) — той же ширины, что и инпуты, и по центру */
.lgen4__out{
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 3) Если у тебя где-то "output" или textarea случайно сжимается глобальными стилями форума */
.lgen4 textarea,
.lgen4__out{
min-width: 0 !important;
}
/* 4) На очень узких экранах кнопки в столбик */
@media (max-width: 520px){
.lgen4__actions{
grid-template-columns: 1fr !important;
}
}
/* подсветка ошибок */
.lgen4__input--err{
border-color: rgba(220,53,69,.95) !important;
box-shadow: 0 0 0 3px rgba(220,53,69,.16) !important;
}
.lgen4 .lgen4__input--err{
border-color: rgba(220,53,69,.95) !important;
background: rgba(220,53,69,.12) !important;
box-shadow: 0 0 0 3px rgba(220,53,69,.16) !important;
}
/* приписка к заголовку секции — меньше/бледнее/тоньше */
.lgen4__sumNote{
font-weight: 500; /* потоньше, чем 900 у заголовка */
font-size: .72em; /* поменьше */
letter-spacing: .05em; /* меньше трекинг */
opacity: .55; /* более блекло */
text-transform: none; /* чтобы не было ОРЛЯНКИ */
margin-left: .35em;
white-space: nowrap; /* чтобы не ломалось в 2 строки */
}
/* если на мобиле всё же надо переносить — можно так:
@media (max-width: 520px){
.lgen4__sumNote{ white-space: normal; display:inline-block; margin-left:.25em; }
}
*/
/* низ: заметки в 2 колонки + вертикальный разделитель */
.lgen4__notes{
margin-top: 14px; /* просто отступ от поля вывода */
padding-top: 0; /* без горизонтального разделителя */
border-top: 0;
}
.lgen4__notesGrid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0; /* разделение будет бордером */
}
.lgen4__note{
font-size: 12px;
line-height: 1.35;
color: rgba(0,0,0,.45); /* поблеклее */
text-align: center; /* центрируем в своем столбце */
padding: 0 16px; /* чтобы текст не лип к разделителю/краям */
}
/* вертикальный разделитель между колонками */
.lgen4__note + .lgen4__note{
border-left: 1px solid rgba(0,0,0,.12);
}
/* ссылки в заметках (тоже поблеклее) */
.lgen4__note a{
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
opacity: .9;
}
.lgen4__note a:hover{ opacity: 1; }
/* мобилка — в столбик, разделитель убираем */
@media (max-width: 700px){
.lgen4__notesGrid{ grid-template-columns: 1fr; gap: 10px; }
.lgen4__note{ padding: 0; }
.lgen4__note + .lgen4__note{ border-left: 0; }
}
.lgen4__sec--note{
margin-top: 0; /* чтобы не было лишнего воздуха от hero */
padding-top: 12px; /* как у секций, но можно меньше */
padding-bottom: 12px;
}
.lgen4__noteLine{
text-align: center;
}
.lgen4__sumNote--center{
display: inline-block;
white-space: normal; /* разрешаем перенос, если текст длинный */
max-width: 720px; /* чтобы выглядело аккуратно в одну-две строки */
}
/* NOTE: разделитель снизу, а не сверху */
.lgen4__sec--note{
border-top: 0 !important;
border-bottom: 1px solid var(--brd) !important;
margin-top: 0 !important;
padding-top: 2px;
padding-bottom: 16px;
}
.lgen4__sec--note + .lgen4__sec{
margin-top: 14px; /* ← расстояние от note до следующей секции */
}
/* NOTE between hero and form — увеличить текст */
.lgen4__sec--note .lgen4__sumNote{
font-size: 13px; /* подними как надо: 13/14/15 */
line-height: 1.35;
font-weight: 400;
letter-spacing: .02em;
}
</style>
<script src="https://forumstatic.ru/files/001b/d4/18/79657.js?v=14"></script>
[/html]