Шаблон темы эпизода

Шаблон №1[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/3c/de/2f/3cd … 89e66b.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;
}

/* Hover-эффекты на медальон */
#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">II: Расцвет Империи</div>
<h2 class="ep-title">Название эпизода</h2>
</div>


<div class="ep-body">

<div class="ep-char">
<div class="ep-medal">
<img src="https://forumstatic.ru/files/001c/b3/2a/66068.png" class="ep-avatar" alt="">
</div>
<div class="ep-name">Имя Персонажа 1</div>
</div>


<div class="ep-content">
<p class="ep-text">
Здесь идёт описание эпизода. Можно написать предысторию, атмосферу, ключевые события или диалоги.
</p>
</div>


<div class="ep-char">
<div class="ep-medal">
<img src="https://forumstatic.ru/files/001c/b3/2a/66068.png" class="ep-avatar" alt="">
</div>
<div class="ep-name">Имя Персонажа 2</div>
</div>
</div>


<div class="ep-footer">
<span class="ep-meta"> Место: Арракис, Сиетч Табр</span>
<span class="ep-meta"> Год: 10193 AG</span>
</div>
</div>
[/html]

Шаблон №2[html]
<style>
/* === ПЕРЕМЕННЫЕ (можно менять под себя) === */
#dune-ep3 {
--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-ep3 {
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/3c/de/2f/3cd … 89e66b.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-ep3::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--ep-accent), transparent);
}
#dune-ep3, #dune-ep3 * { box-sizing: border-box; }

/* === ШАПКА === */
#dune-ep3 .ep-header {
text-align: center;
padding-bottom: 20px;
margin-bottom: 25px;
border-bottom: 1px solid rgba(166, 124, 82, 0.3);
}
#dune-ep3 .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-ep3 .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-ep3 .ep-characters {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
}
#dune-ep3 .ep-char {
flex: 0 0 160px;
text-align: center;
}

/* === МЕДАЛЬОН С ДЕКОРАТИВНЫМИ КОЛЬЦАМИ === */
#dune-ep3 .ep-medal {
position: relative;
width: 130px;
height: 170px;
margin: 0 auto 10px auto;
display: flex;
align-items: center;
justify-content: center;
}

/* Внешнее пунктирное кольцо */
#dune-ep3 .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-ep3 .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;
}

/* Hover-эффекты на медальон */
#dune-ep3 .ep-medal:hover::before {
transform: rotate(180deg);
opacity: 0.9;
}
#dune-ep3 .ep-medal:hover::after {
opacity: 0.7;
inset: 6px;
}

#dune-ep3 .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-ep3 .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-ep3 .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-ep3 .ep-divider {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: var(--ep-bronze);
font-size: 18px;
padding: 0 5px;
opacity: 0.6;
align-self: center;
margin-top: -30px;
}

/* === ОПИСАНИЕ В ПОЛНУЮ ШИРИНУ === */
#dune-ep3 .ep-content {
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;
margin-bottom: 25px;
}
#dune-ep3 .ep-content::before,
#dune-ep3 .ep-content::after {
content: '❖';
position: absolute;
color: var(--ep-bronze);
font-size: 14px;
opacity: 0.5;
}
#dune-ep3 .ep-content::before { top: 8px; left: 10px; }
#dune-ep3 .ep-content::after { bottom: 8px; right: 10px; }
#dune-ep3 .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-ep3 .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-ep3 .ep-meta {
padding: 4px 12px;
background: rgb(45 37 27);
border-radius: 4px;
}

</style>

<div id="dune-ep3">

<div class="ep-header">
<div class="ep-period">II: Расцвет Империи</div>
<h2 class="ep-title">Название эпизода</h2>
</div>


<div class="ep-characters">

<div class="ep-char">
<div class="ep-medal">
<img src="https://forumstatic.ru/files/001c/b3/2a/66068.png" class="ep-avatar" alt="">
</div>
<div class="ep-name">Персонаж 1</div>
</div>


<div class="ep-divider">❖</div>


<div class="ep-char">
<div class="ep-medal">
<img src="https://forumstatic.ru/files/001c/b3/2a/66068.png" class="ep-avatar" alt="">
</div>
<div class="ep-name">Персонаж 2</div>
</div>


<div class="ep-divider">❖</div>


<div class="ep-char">
<div class="ep-medal">
<img src="https://forumstatic.ru/files/001c/b3/2a/66068.png" class="ep-avatar" alt="">
</div>
<div class="ep-name">Персонаж 3</div>
</div>
</div>


<div class="ep-content">
<p class="ep-text">
Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода.
</p>
</div>


<div class="ep-footer">
<span class="ep-meta">Место: Арракис, Сиетч Табр</span>
<span class="ep-meta">Год: 10193 AG</span>
</div>
</div>
[/html]

Шаблон №3[html]
<style>
/* === ПЕРЕМЕННЫЕ === */
#dune-ep2-orig {
--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-ep2-orig {
position: relative;
max-width: 900px;
margin: 10px auto;
padding: 0;
background-image:
linear-gradient(180deg, rgba(30, 26, 20, 0.5) 0%, rgba(30, 26, 20, 0.9) 100%),
url(https://i.pinimg.com/1200x/3c/de/2f/3cd … 89e66b.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-ep2-orig::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--ep-accent), transparent);
z-index: 2;
}
#dune-ep2-orig, #dune-ep2-orig * { box-sizing: border-box; }

/* === ВНУТРЕННИЙ КОНТЕЙНЕР: ДВЕ КОЛОНКИ === */
#dune-ep2-orig .ep-wrap {
display: flex;
min-height: 400px;
}

/* === ЛЕВАЯ КОЛОНКА: ТОЛЬКО КАРТИНКА === */
#dune-ep2-orig .ep-left {
flex: 0 0 280px;
position: relative;
background: linear-gradient(180deg, rgba(30, 26, 20, 0.3) 0%, rgba(30, 26, 20, 0.8) 100%);
border-right: 1px solid rgba(166, 124, 82, 0.3);
padding: 25px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

/* Угловые орнаменты левой колонки */
#dune-ep2-orig .ep-left::before,
#dune-ep2-orig .ep-left::after {
content: '✦';
position: absolute;
color: var(--ep-bronze);
font-size: 14px;
opacity: 0.5;
}
#dune-ep2-orig .ep-left::before { top: 12px; left: 12px; }
#dune-ep2-orig .ep-left::after { bottom: 12px; right: 12px; }

/* === МЕДАЛЬОН С ДЕКОРАТИВНЫМИ КОЛЬЦАМИ === */
#dune-ep2-orig .ep-medal {
position: relative;
width: 220px;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
}

/* Внешнее пунктирное кольцо */
#dune-ep2-orig .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-ep2-orig .ep-medal::after {
content: '';
position: absolute;
inset: 12px;
border-radius: 50%;
border: 1px solid var(--ep-accent);
opacity: 0.3;
transition: opacity 0.3s ease, inset 0.3s ease;
}

/* Hover-эффекты на медальон */
#dune-ep2-orig .ep-medal:hover::before {
transform: rotate(180deg);
opacity: 0.9;
}
#dune-ep2-orig .ep-medal:hover::after {
opacity: 0.7;
inset: 8px;
}

#dune-ep2-orig .ep-main-avatar {
width: 180px;
height: 220px;
object-fit: cover;
border: 2px solid var(--ep-bronze);
border-radius: 50%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 151, 48, 0.15);
transition: all 0.4s ease;
position: relative;
z-index: 1;
}
#dune-ep2-orig .ep-medal:hover .ep-main-avatar {
transform: scale(1.03);
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 151, 48, 0.3);
border-color: var(--ep-accent);
}

/* === ПРАВАЯ КОЛОНКА: КОНТЕНТ === */
#dune-ep2-orig .ep-right {
flex: 1;
padding: 25px 30px;
display: flex;
flex-direction: column;
position: relative;
}

/* Шапка */
#dune-ep2-orig .ep-header {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(166, 124, 82, 0.3);
}
#dune-ep2-orig .ep-period {
display: inline-block;
padding: 3px 12px;
background: rgb(45 37 27 / 95%);
border: 1px solid var(--ep-accent);
border-radius: 20px;
font-size: 10px;
color: var(--ep-accent);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}
#dune-ep2-orig .ep-title {
font-size: 22px;
font-weight: 700;
color: var(--ep-accent);
text-transform: uppercase;
letter-spacing: 3px;
margin: 0;
text-shadow: 0 0 15px rgba(255, 151, 48, 0.3);
line-height: 1.3;
}

/* Описание */
#dune-ep2-orig .ep-content {
flex: 1;
padding: 15px 20px;
background: rgb(45 37 27 / 85%);
border: 1px solid rgba(166, 124, 82, 0.2);
border-radius: 8px;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
position: relative;
margin-bottom: 20px;
}
#dune-ep2-orig .ep-content::before {
content: '❖';
position: absolute;
top: 8px; left: 10px;
color: var(--ep-bronze);
font-size: 12px;
opacity: 0.5;
}
#dune-ep2-orig .ep-text {
font-size: 13px;
line-height: 1.7;
color: var(--ep-sand);
text-align: justify;
font-style: italic;
padding: 0 10px;
margin: 0;
}

/* === НИЖНИЙ БЛОК: ДАТА + ПЕРСОНАЖИ === */
#dune-ep2-orig .ep-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}

/* Дата (вместо места) */
#dune-ep2-orig .ep-date {
padding: 6px 14px;
background: rgb(45 37 27 / 90%);
border: 1px solid rgba(166, 124, 82, 0.3);
border-radius: 6px;
border-left: 3px solid var(--ep-bronze);
font-size: 12px;
color: var(--ep-sand);
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 8px;
}
#dune-ep2-orig .ep-date::before {
content: '';
font-size: 14px;
}

/* Список персонажей в строчку */
#dune-ep2-orig .ep-cast {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: var(--ep-bronze);
letter-spacing: 1px;
}
#dune-ep2-orig .ep-cast::before {
content: '';
font-size: 14px;
margin-right: 4px;
}
#dune-ep2-orig .ep-cast-name {
padding: 4px 10px;
background: rgb(45 37 27 / 80%);
border-radius: 4px;
color: var(--ep-sand);
font-style: italic;
transition: all 0.3s ease;
}
#dune-ep2-orig .ep-cast-name:hover {
background: rgb(45 37 27);
color: var(--ep-accent);
transform: translateY(-1px);
}
#dune-ep2-orig .ep-cast-sep {
color: var(--ep-bronze);
opacity: 0.5;
font-size: 10px;
}

</style>

<div id="dune-ep2-orig">
<div class="ep-wrap">

<div class="ep-left">
<div class="ep-medal">
<img src="https://forumstatic.ru/files/001c/b3/2a/66068.png" class="ep-main-avatar" alt="">
</div>
</div>


<div class="ep-right">

<div class="ep-header">
<div class="ep-period">II: Расцвет Империи</div>
<h2 class="ep-title">Название эпизода</h2>
</div>


<div class="ep-content">
<p class="ep-text">
Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода.
</p>
</div>


<div class="ep-bottom">

<div class="ep-date">Место: Планета, локация // Год: 10193 AG</div>


<div class="ep-cast">
<span class="ep-cast-name">Имя Персонажа 1</span>
<span class="ep-cast-sep">•</span>
<span class="ep-cast-name">Имя Персонажа 2</span>
</div>
</div>
</div>
</div>
</div>
[/html]

Шаблон №4[html]
<style>
/* === ПЕРЕМЕННЫЕ === */
#dune-ep-glass {
--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-glass {
position: relative;
max-width: 850px;
margin: 20px auto;
padding: 35px 40px;
background-image: linear-gradient(180deg, rgba(30, 26, 20, 0.65) 0%, rgba(30, 26, 20, 0.9) 100%), url(https://i.pinimg.com/1200x/3c/de/2f/3cd … 89e66b.jpg);
background-size: auto, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgb(47 38 28);
border-radius: 4px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2);
font-family: var(--main-font);
color: var(--ep-text);
overflow: hidden;
box-sizing: border-box;
}
#dune-ep-glass, #dune-ep-glass * { box-sizing: border-box; }

/* === ТЕХНИЧЕСКИЕ УГОЛКИ === */
#dune-ep-glass .tech-corner {
position: absolute;
width: 14px;
height: 14px;
border: 2px solid var(--ep-accent);
opacity: 0.5;
z-index: 2;
}
#dune-ep-glass .tech-corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
#dune-ep-glass .tech-corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
#dune-ep-glass .tech-corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
#dune-ep-glass .tech-corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }

/* === ШАПКА: МЕТА-ДАННЫЕ === */
#dune-ep-glass .ep-glass-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
flex-wrap: wrap;
gap: 15px;
}
#dune-ep-glass .meta-block {
display: flex;
flex-direction: column;
gap: 4px;
}
#dune-ep-glass .meta-label {
font-size: 9px;
color: var(--ep-bronze);
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 700;
opacity: 0.8;
}
#dune-ep-glass .meta-value {
font-size: 14px;
color: var(--ep-text);
letter-spacing: 1px;
font-weight: 500;
font-family: 'Courier New', Courier, monospace;
}

/* === ЗАГОЛОВОК === */
#dune-ep-glass .ep-glass-title {
font-size: 28px;
font-weight: 800;
color: var(--ep-accent);
text-transform: uppercase;
letter-spacing: 6px;
margin: 0 0 20px 0;
line-height: 1.1;
text-shadow: 0 0 15px rgba(255, 151, 48, 0.2);
}

/* === ПЕРСОНАЖИ С ЭФФЕКТОМ ПЕРЕЛИВА === */
#dune-ep-glass .ep-glass-cast {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
}
#dune-ep-glass .cast-name {
position: relative;
overflow: hidden;
font-size: 13px;
color: var(--ep-sand);
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
padding: 6px 14px;
background: rgb(47 38 28 / 90%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 5px;
transition: color 0.3s ease, border-color 0.3s ease;
cursor: default;
}

/* Основной зеркальный блик */
#dune-ep-glass .cast-name::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 80%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 30%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.1) 70%,
transparent 100%
);
transform: skewX(-20deg);
transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
pointer-events: none;
}

/* Дополнительный тонкий блик для эффекта двойного отражения */
#dune-ep-glass .cast-name::before {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 30%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transform: skewX(-20deg);
transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
pointer-events: none;
}

/* Ховер на имя */
#dune-ep-glass .cast-name:hover {
color: var(--ep-accent);
border-color: var(--ep-accent);
background: rgba(255, 151, 48, 0.05);
}
#dune-ep-glass .cast-name:hover::after {
left: 150%;
}
#dune-ep-glass .cast-name:hover::before {
left: 170%;
}

#dune-ep-glass .cast-divider {
width: 4px;
height: 4px;
background: var(--ep-bronze);
transform: rotate(45deg);
opacity: 0.6;
}

/* === ОПИСАНИЕ === */
#dune-ep-glass .ep-glass-desc {
position: relative;
padding: 20px 25px;
background: rgb(47 38 28 / 95%);
border-left: 2px solid var(--ep-bronze);
border-radius: 0 4px 4px 0;
}
#dune-ep-glass .ep-glass-desc p {
font-size: 14px;
line-height: 1.8;
color: var(--ep-sand);
margin: 0;
text-align: justify;
font-style: italic;
}

</style>

<div class="ep-glass-header">
<div class="meta-block">
<span class="meta-label">Location</span>
<span class="meta-value">ARRAKIS, SIETCH TABR</span>
</div>
<div class="meta-block">
<span class="meta-label">Year</span>
<span class="meta-value">10193 AG</span>
</div>
</div>


<h2 class="ep-glass-title">Название Эпизода</h2>


<div class="ep-glass-cast">
<span class="cast-name">Имя Персонажа 1</span>
<div class="cast-divider"></div>
<span class="cast-name">Имя Персонажа 2</span>
<div class="cast-divider"></div>
<span class="cast-name">Имя Персонажа 3</span>
</div>


<div class="ep-glass-desc">
<p>
Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода. Здесь идёт описание эпизода.
</p>
</div>
</div>
[/html]

Duna: Revolution

Меню навигации

Пользовательские ссылки

Информация о пользователе

Шаблон темы эпизода

Сообщений 1 страница 1 из 1

Поделиться128.04.26 20:16