[hideprofile] [html]
<style>
html:has(> body > .fp-promo), body:has(> .fp-promo) {
margin: 0 !important; padding: 0 !important; background: transparent !important;
}
.fp-promo, .fp-promo * { box-sizing: border-box; }
.fp-promo {
max-width: 780px; margin: 0 auto; padding: 36px 28px 26px;
color: var(--color-text, #3c3c3c); background: var(--color-surface, #dedad6); border: 1px solid var(--color-border-soft, #ccc6c0);
font: 14px/1.65 Georgia, serif; text-align: center;
border-radius: 18px;
}
.fp-promo .fp-kicker { margin: 0 0 12px; color: var(--color-accent, #83463c); font: 10px/1.5 Arial, sans-serif; letter-spacing: 4px; text-transform: uppercase; }
.fp-promo .fp-title { margin: 0; color: var(--color-accent, #83463c); font: 22px/1.2 Lighthaus, Georgia, serif; letter-spacing: 2px; }
.fp-promo .fp-intro { max-width: 550px; margin: 18px auto 24px; }
.fp-promo .fp-reward { margin-top: 24px; border-radius: 10px; background: var(--color-surface-soft, #e8e3df); padding: 15px 18px; border-top: 1px solid var(--color-border-soft, #ccc6c0); border-bottom: 1px solid var(--color-border-soft, #ccc6c0); color: var(--color-text, #3c3c3c); }
.fp-promo .fp-reward strong { color: var(--color-accent, #83463c); font-weight: normal; }
.fp-promo .fp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 230px)); justify-content: center; gap: 24px 16px; margin-top: 28px; }
.fp-promo .fp-card { min-width: 0; }
.fp-promo .fp-portrait { position: relative; display: block; overflow: hidden; border-radius: 10px; width: 100%; max-width: 230px; aspect-ratio: 23 / 15; border: 1px solid var(--color-border-soft, #ccc6c0); background: var(--color-surface-soft, #e8e3df); color: var(--color-text, #3c3c3c); text-decoration: none; }
.fp-promo .fp-static, .fp-promo .fp-motion { position: absolute; inset: 0; background-size: cover; background-position: center; }
.fp-promo .fp-static { background-color: var(--color-surface-soft, #e8e3df); }
.fp-promo .fp-motion { opacity: 0; transition: opacity .3s ease; }
.fp-promo .fp-portrait:hover .fp-motion, .fp-promo .fp-portrait:focus .fp-motion { opacity: 1; }
.fp-promo .fp-portrait:focus-visible { outline: 2px solid var(--color-accent, #83463c); outline-offset: 4px; }
.fp-promo .fp-number { position: absolute; left: 10px; bottom: 9px; z-index: 2; padding: 2px 6px; border-radius: 4px; background: var(--color-surface, #dedad6); color: var(--color-accent, #83463c); font: 10px/1.5 Arial, sans-serif; letter-spacing: 2px; }
.fp-promo .fp-fc { display: block; margin: 10px 0 4px; color: var(--color-text-muted, #717171); font-size: 10px; font-style: italic; }
.fp-promo .fp-name { display: inline; margin: 0; color: var(--color-text, #3c3c3c); font: bold 14px/1.5 Lighthaus, Georgia, serif; overflow-wrap: anywhere; }
.fp-promo .fp-details { display: block; width: fit-content; margin: 5px auto 0; color: var(--color-accent, #83463c); font: italic 11px/1.5 Georgia, serif; text-decoration: none; border-bottom: 0; }
.fp-promo .fp-details:hover { opacity: .75; }
.fp-promo .fp-details:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.fp-promo .fp-footer { margin: 28px 0 0; color: var(--color-text-muted, #717171); font-size: 10px; font-style: italic; }
@media (max-width: 520px) {
.fp-promo { padding: 20px 12px; }
.fp-promo .fp-title { font-size: 24px; }
.fp-promo .fp-grid { gap: 12px 8px; }
.fp-promo .fp-name { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.fp-promo .fp-motion { display: none; transition: none; }
}
</style>
<!-- По умолчанию плашки без ссылок.
Чтобы сделать отдельную плашку ссылкой, замените только её открывающий тег
<div class="fp-portrait" tabindex="0" aria-label="...">
на <a class="fp-portrait" href="ССЫЛКА" aria-label="...">,
а соответствующий закрывающий </div> сразу после fp-number — на </a>.
Внутренние span и подпись оставьте как есть. -->
<section class="fp-promo" aria-label="Акция «Особые приметы»">
<p class="fp-kicker">девять лиц • девять канонов • девять возможных историй</p>
<h2 class="fp-title">— АКЦИЯ#2: КАНОНЫ —</h2>
<div class="fp-reward">* беря персонажа по акции, вы получаете <strong> индивидуальную рамку в профиль и аватар от амс</strong>.</div>
<div class="fp-grid">
<!-- Персонаж 01: замените STATIC_01_URL, GIF_01_URL и подпись. -->
<article class="fp-card">
<div class="fp-portrait" tabindex="0" aria-label="Подробнее о персонаже ИМЯ ПЕРСОНАЖА">
<span class="fp-static" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/62510.jpg');" aria-hidden="true"></span>
<span class="fp-motion" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/449456.gif');" aria-hidden="true"></span>
<span class="fp-number" aria-hidden="true">OP</span>
</div>
<span class="fp-fc">fc: John David Washington</span>
<h3 class="fp-name">Kingsley Shacklebolt</h3>
</article>
<!-- Персонаж 02: замените STATIC_02_URL, GIF_02_URL и подпись. -->
<article class="fp-card">
<div class="fp-portrait" tabindex="2">
<span class="fp-static" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/711573.jpg');" aria-hidden="true"></span>
<span class="fp-motion" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/52637.gif');" aria-hidden="true"></span>
<span class="fp-number" aria-hidden="true">OP</span>
</div>
<span class="fp-fc">fc: Quintessa Swindell</span>
<h3 class="fp-name">Dorcas Meadowes</h3>
</article>
<!-- Персонаж 03: замените STATIC_03_URL, GIF_03_URL и подпись. -->
<article class="fp-card">
<a class="fp-portrait" tabindex="1">
<span class="fp-static" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/880195.jpg');" aria-hidden="true"></span>
<span class="fp-motion" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/545127.gif');" aria-hidden="true"></span>
<span class="fp-number" aria-hidden="true">OP</span>
</a>
<span class="fp-fc">fc: James Norton</span>
<h3 class="fp-name">Arthur Weasley
</h3>
</article>
<!-- Персонаж 04: замените STATIC_04_URL, GIF_04_URL и подпись. -->
<article class="fp-card">
<div class="fp-portrait" tabindex="0" aria-label="Подробнее о персонаже ИМЯ ПЕРСОНАЖА">
<span class="fp-static" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/115216.jpg');" aria-hidden="true"></span>
<span class="fp-motion" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/551036.gif');" aria-hidden="true"></span>
<span class="fp-number" aria-hidden="true">NEU</span>
</div>
<span class="fp-fc">fc: Lily Collins</span>
<h3 class="fp-name">Andromeda Tonks</h3>
</article>
<!-- Персонаж 05: замените STATIC_05_URL, GIF_05_URL и подпись. -->
<article class="fp-card">
<div class="fp-portrait" tabindex="0" aria-label="Подробнее о персонаже ИМЯ ПЕРСОНАЖА">
<span class="fp-static" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/742259.jpg');" aria-hidden="true"></span>
<span class="fp-motion" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/514292.gif');" aria-hidden="true"></span>
<span class="fp-number" aria-hidden="true">PL</span>
</div>
<span class="fp-fc">fc: George MacKay</span>
<h3 class="fp-name">Remus Lupin</h3>
</article>
<!-- Персонаж 06: замените STATIC_06_URL, GIF_06_URL и подпись. -->
<article class="fp-card">
<div class="fp-portrait" tabindex="0" aria-label="Подробнее о персонаже ИМЯ ПЕРСОНАЖА">
<span class="fp-static" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/233279.jpg');" aria-hidden="true"></span>
<span class="fp-motion" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/625627.gif');" aria-hidden="true"></span>
<span class="fp-number" aria-hidden="true">PL</span>
</div>
<span class="fp-fc">fc: Abigail Cowen</span>
<h3 class="fp-name">Lily Evans</h3>
</article>
<!-- Персонаж 07: замените STATIC_07_URL, GIF_07_URL и подпись. -->
<article class="fp-card">
<div class="fp-portrait" tabindex="0" aria-label="Подробнее о персонаже ИМЯ ПЕРСОНАЖА">
<span class="fp-static" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/467688.jpg');" aria-hidden="true"></span>
<span class="fp-motion" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/428274.gif');" aria-hidden="true"></span>
<span class="fp-number" aria-hidden="true">DE</span>
</div>
<span class="fp-fc">fc: Aidan Turner</span>
<h3 class="fp-name">Rodolphus Lestrange</h3>
</article>
<!-- Персонаж 08: замените STATIC_08_URL, GIF_08_URL и подпись. -->
<article class="fp-card">
<div class="fp-portrait" tabindex="0" aria-label="Подробнее о персонаже ИМЯ ПЕРСОНАЖА">
<span class="fp-static" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/481981.jpg');" aria-hidden="true"></span>
<span class="fp-motion" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/138549.gif');" aria-hidden="true"></span>
<span class="fp-number" aria-hidden="true">DE</span>
</div>
<span class="fp-fc">fc: Mia Goth</span>
<h3 class="fp-name">Alecto Carrow</h3>
</article>
<!-- Персонаж 09: замените STATIC_09_URL, GIF_09_URL и подпись. -->
<article class="fp-card">
<div class="fp-portrait" tabindex="0" aria-label="Подробнее о персонаже ИМЯ ПЕРСОНАЖА">
<span class="fp-static" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/762471.jpg');" aria-hidden="true"></span>
<span class="fp-motion" style="background-image: url('https://upforme.ru/uploads/001c/c4/9a/4/533820.gif');" aria-hidden="true"></span>
<span class="fp-number" aria-hidden="true">DE</span>
</div>
<span class="fp-fc">fc: Adam Driver</span>
<h3 class="fp-name">Severus Snape</h3>
</article>
</div>
</section>
<script>
(function () {
'use strict';
var block = document.querySelector('.fp-promo');
if (!block || window.parent === window) return;
var forumOrigin = 'https://doomsday.artbb.me';
var palettes = {
light: {
'--color-text': '#3c3c3c', '--color-text-muted': '#717171',
'--color-surface': '#dedad6', '--color-surface-soft': '#e8e3df',
'--color-border-soft': '#ccc6c0', '--color-accent': '#83463c'
},
dark: {
'--color-text': '#a1a1a1', '--color-text-muted': '#aaa9b0',
'--color-surface': '#313445', '--color-surface-soft': '#3d4050',
'--color-border-soft': '#454858', '--color-accent': '#819ad9'
}
};
function applyTheme(theme) {
if (theme !== 'light' && theme !== 'dark') return;
Object.keys(palettes[theme]).forEach(function (key) {
block.style.setProperty(key, palettes[theme][key]);
});
block.setAttribute('data-fp-theme', theme);
/* Красим весь документ iframe: CSS-переменные самого блока
не меняют белую подложку вокруг него. */
[document.documentElement, document.body].forEach(function (element) {
if (!element) return;
element.style.setProperty('background', palettes[theme]['--color-surface'], 'important');
element.style.setProperty('margin', '0', 'important');
element.style.setProperty('padding', '0', 'important');
element.style.setProperty('border', '0', 'important');
element.style.setProperty('box-shadow', 'none', 'important');
});
}
/* Сначала подписываемся на ответ, затем запрашиваем текущую тему.
Форум зарегистрирует iframe и будет сообщать о каждом переключении. */
window.addEventListener('message', function (event) {
if (event.source !== window.parent || event.origin !== forumOrigin) return;
if (!event.data || event.data.type !== 'doomsday:html-theme') return;
applyTheme(event.data.theme);
});
function requestTheme() {
window.parent.postMessage({ type: 'doomsday:request-html-theme' }, forumOrigin);
}
requestTheme();
window.addEventListener('load', requestTheme, { once: true });
})();
</script>
[/html]
