[html]
<style>
#dune-ep {
--ep-bg: rgba(40, 35, 28, 0.95);
--ep-border: var(--bronze-dark, #5c4a32);
--ep-accent: var(--spice-glow, #ff9730);
--ep-bronze: var(--bronze-main, #a67c52);
--ep-text: var(--parchment, #e3d8c7);
--ep-sand: var(--sand-light, #bcb1a2);
}
#dune-ep {
position: relative;
max-width: 900px;
margin: 10px auto;
padding: 30px;
background-image:
linear-gradient(180deg, rgba(30, 26, 20, 0.4) 0%, rgba(30, 26, 20, 0.85) 100%),
url(https://i.pinimg.com/1200x/07/03/55/070 … ee2e6f.jpg);
background-size: auto, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
border: 1px solid var(--ep-border);
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
font-family: var(--main-font);
color: var(--ep-text);
overflow: hidden;
box-sizing: border-box;
}
#dune-ep::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--ep-accent), transparent);
}
#dune-ep, #dune-ep * { box-sizing: border-box; }
#dune-ep .ep-header {
text-align: center;
padding-bottom: 20px;
margin-bottom: 25px;
border-bottom: 1px solid rgba(166, 124, 82, 0.3);
}
#dune-ep .ep-period {
display: inline-block;
padding: 4px 14px;
background: rgb(45 37 27 / 97%);
border: 1px solid var(--ep-accent);
border-radius: 20px;
font-size: 11px;
color: var(--ep-accent);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 12px;
}
#dune-ep .ep-title {
font-size: 26px;
font-weight: 700;
color: var(--ep-accent);
text-transform: uppercase;
letter-spacing: 4px;
margin: 0;
text-shadow: 0 0 20px rgba(255, 151, 48, 0.3);
line-height: 1.3;
}
#dune-ep .ep-body {
display: flex;
gap: 25px;
align-items: center;
margin-bottom: 25px;
}
#dune-ep .ep-char {
flex: 0 0 160px;
text-align: center;
}
#dune-ep .ep-medal {
position: relative;
width: 130px;
height: 170px;
margin: 0 auto 10px auto;
display: flex;
align-items: center;
justify-content: center;
}
#dune-ep .ep-medal::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px dashed var(--ep-bronze);
opacity: 0.5;
transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}
#dune-ep .ep-medal::after {
content: '';
position: absolute;
inset: 10px;
border-radius: 50%;
border: 1px solid var(--ep-accent);
opacity: 0.3;
transition: opacity 0.3s ease, inset 0.3s ease;
}
#dune-ep .ep-medal:hover::before {
transform: rotate(180deg);
opacity: 0.9;
}
#dune-ep .ep-medal:hover::after {
opacity: 0.7;
inset: 6px;
}
#dune-ep .ep-avatar {
width: 100px;
height: 140px;
object-fit: cover;
border: 2px solid var(--ep-bronze);
border-radius: 50%;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 151, 48, 0.15);
transition: all 0.3s ease;
display: block;
position: relative;
z-index: 1;
}
#dune-ep .ep-medal:hover .ep-avatar {
transform: scale(1.03);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 151, 48, 0.3);
border-color: var(--ep-accent);
}
#dune-ep .ep-name {
font-size: 13px;
color: var(--ep-sand);
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 600;
padding: 6px 10px;
background: rgb(45 37 27 / 97%);
border-radius: 4px;
border-left: 2px solid var(--ep-bronze);
}
#dune-ep .ep-content {
flex: 1;
padding: 20px 25px;
background: rgb(45 37 27 / 97%);
border: 1px solid rgba(166, 124, 82, 0.2);
border-radius: 8px;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
position: relative;
min-height: 180px;
}
#dune-ep .ep-content::before,
#dune-ep .ep-content::after {
content: '❖';
position: absolute;
color: var(--ep-bronze);
font-size: 14px;
opacity: 0.5;
}
#dune-ep .ep-content::before { top: 8px; left: 10px; }
#dune-ep .ep-content::after { bottom: 8px; right: 10px; }
#dune-ep .ep-text {
font-size: 14px;
line-height: 1.7;
color: var(--ep-sand);
text-align: justify;
font-style: italic;
padding: 0 15px;
margin: 0;
}
#dune-ep .ep-footer {
display: flex;
justify-content: space-between;
gap: 20px;
padding-top: 15px;
border-top: 1px solid rgba(166, 124, 82, 0.3);
font-size: 12px;
color: var(--ep-bronze);
letter-spacing: 1px;
flex-wrap: wrap;
}
#dune-ep .ep-meta {
padding: 4px 12px;
background: rgb(45 37 27);
border-radius: 4px;
}
</style>
<div id="dune-ep">
<div class="ep-header">
<div class="ep-period">I: Восстание Титанов</div>
<h2 class="ep-title">Лишь утратив всё до конца, мы обретаем свободу // Сюжет</h2>
</div>
<div class="ep-body">
<div class="ep-char">
<div class="ep-medal">
<img src="https://i.pinimg.com/1200x/39/b3/17/39b31767ef9a619a19513c83576ebb3b.jpg" class="ep-avatar" alt="">
</div>
<div class="ep-name">Джейк</div>
</div>
<div class="ep-content">
<p class="ep-text">Знакомство с теми, кто изменит судьбы человечества. Никто и не подозревал, чем это может обернуться. Или же кто-то всё тщательно спланировал.</p>
</div>
<div class="ep-char">
<div class="ep-medal">
<img src="https://upforme.ru/uploads/001c/b3/2a/2/t922860.png" class="ep-avatar" alt="">
</div>
<div class="ep-name">Маркус Вэйл</div>
</div>
</div>
<div class="ep-footer">
<span class="ep-meta">Место: Старая Земля</span>
<span class="ep-meta">Год: ~ 1283 Б.Г. - 1200 Б.Г.</span>
</div>
</div>
[/html]