/*
* МультфильмыСССР — стили темы (собрано из дизайн-прототипов)
* Не редактируется напрямую: компонуется из design/project/*.html
*/
/* ========================================================================
БАЗА + ОДИНОЧНЫЙ МУЛЬТИК (палитра, шрифты, шапка, подвал, модалки, плеер)
======================================================================== */
/* ---------- Палитра и шум ---------- */
:root{
--paper: #f4e6c4; /* основная тёплая бумага */
--paper-soft: #faf0d4; /* светлее */
--paper-deep: #ead09a; /* потемнее, для подложек */
--ink: #3a2418; /* основной текст — кофейно-коричневый */
--ink-soft: #6b4a36;
--brick: #c7563a; /* кирпично-красный (костёр) */
--moss: #7d8c46; /* мшистая зелень */
--plum: #7a3f55; /* сливовый */
--fog: #a9b9b9; /* туман */
--honey: #e0a83a; /* охра/мёд */
--sky: #6a8aa3; /* пыльно-синий */
--cream-card: #fff7e0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:'Alegreya', Georgia, serif;
font-size:18px;
line-height:1.55;
color:var(--ink);
background:
radial-gradient(1200px 800px at 12% 8%, #fdebbf 0%, transparent 60%),
radial-gradient(900px 900px at 95% 30%, #f0d99a 0%, transparent 55%),
radial-gradient(700px 700px at 50% 110%,#e9c98a 0%, transparent 60%),
var(--paper);
min-height:100vh;
overflow-x:hidden;
position:relative;
}
/* Бумажная шероховатость поверх всего */
body::before{
content:"";
position:fixed; inset:0;
pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
opacity:.22;
mix-blend-mode:multiply;
z-index:0;
}
/* Лёгкие "точки" дождя/тумана */
body::after{
content:"";
position:fixed; inset:0;
pointer-events:none;
background-image:
radial-gradient(circle at 10% 80%, #00000010 1px, transparent 2px),
radial-gradient(circle at 80% 20%, #00000010 1px, transparent 2px),
radial-gradient(circle at 60% 70%, #00000010 1px, transparent 2px);
background-size: 280px 280px, 320px 320px, 200px 200px;
z-index:0;
}
.wrap{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:28px 32px 80px; }
/* ---------- Шапка ---------- */
header.top{
display:flex; align-items:center; justify-content:space-between;
gap:28px;
padding:14px 22px;
background:var(--cream-card);
border-radius:34px;
box-shadow:
0 0 0 2px var(--ink),
6px 8px 0 0 var(--ink);
position:relative;
}
header.top::before, header.top::after{
content:""; position:absolute; width:64px; height:18px;
background:repeating-linear-gradient(135deg,#f0c97a 0 8px,#e6b85e 8px 16px);
border:1.5px solid #00000020;
transform:rotate(-6deg);
top:-10px; left:60px;
box-shadow:0 2px 2px #00000018;
}
header.top::after{ left:auto; right:80px; transform:rotate(7deg); background:repeating-linear-gradient(135deg,#cfdfa6 0 8px,#b9cd87 8px 16px) }
.logo{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); }
.logo .mark{
width:54px; height:54px; border-radius:50%;
background: radial-gradient(circle at 32% 30%, #fff5d4 0%, #e4b85a 60%, #b07a22 100%);
box-shadow: inset -4px -5px 0 #00000018, 2px 3px 0 var(--ink);
border:2px solid var(--ink);
position:relative;
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size:30px; color:var(--ink);
}
.logo .name{
font-family:'Yeseva One', serif;
font-size:26px;
line-height:1;
letter-spacing:.5px;
}
.logo .name small{
display:block;
font-family:'Caveat', cursive;
font-size:18px; color:var(--brick);
letter-spacing:0; margin-top:2px;
}
nav.main{ display:none; }
.search{
display:flex; align-items:center; gap:10px;
}
.icon-btn{
width:44px; height:44px; border-radius:50%;
background:#fff7d6;
border:2px solid var(--ink);
box-shadow:2px 3px 0 var(--ink);
display:grid; place-items:center;
cursor:pointer; text-decoration:none;
color:var(--ink);
transition: transform .12s ease, box-shadow .12s ease;
position:relative;
padding:0;
font-family:'Yeseva One', serif;
font-size:15px; line-height:1;
}
.icon-btn:hover{
transform: translate(-1px,-2px) rotate(-3deg);
box-shadow: 3px 5px 0 var(--ink);
}
.icon-btn.vk{ background:#cfe0a4; transform:rotate(-3deg); }
.icon-btn.ok{ background:#f3d27a; transform:rotate(2deg); }
.icon-btn.search-trigger{ background:#f4b8a4; transform:rotate(-2deg); }
.icon-btn.home{ background:#cdd9e3; transform:rotate(-3deg); }
.icon-btn .small-letters{
font-family:'Yeseva One', serif;
font-size:15px;
letter-spacing:-.5px;
}
.icon-btn .tip{
position:absolute;
top:-22px; left:50%;
transform:translateX(-50%) rotate(-3deg);
background:var(--ink); color:var(--paper-soft);
font-family:'Caveat', cursive; font-size:14px;
padding:2px 8px; border-radius:10px;
white-space:nowrap;
opacity:0; pointer-events:none;
transition: opacity .15s ease;
}
.icon-btn:hover .tip{ opacity:1; }
/* ---------- Сохранить — объединённая кнопка ---------- */
.save-group{ position:relative; }
.save-group .menu{
position:absolute;
top:calc(100% + 10px);
left:0;
min-width:220px;
background: var(--cream-card);
border:2.5px solid var(--ink);
border-radius:18px;
box-shadow: 5px 6px 0 var(--ink);
padding:8px;
display:none;
z-index:5;
transform: rotate(-1deg);
}
.save-group.open .menu, .save-group:hover .menu{ display:block; animation: dropIn .2s ease both; }
.save-group .menu a{
display:flex; align-items:center; gap:10px;
padding:8px 12px;
border-radius:12px;
font-family:'Alegreya', serif; font-size:16px;
text-decoration:none; color:var(--ink);
cursor:pointer;
}
.save-group .menu a:hover{ background:#f7e0a8; }
.save-group .menu a .ico{
width:24px; text-align:center;
font-family:'Yeseva One', serif; color:var(--brick);
}
.save-group .menu .hint{
margin: 4px 12px 6px;
font-family:'Caveat', cursive; font-size:18px;
color:var(--ink-soft);
}
.sticker .chev{
display:inline-block;
transform: translateY(2px);
font-size:12px;
}
/* Кнопка входа в шапке */
.login-btn{
display:inline-flex; align-items:center; gap:8px;
padding:8px 16px 9px;
border:2.5px solid var(--ink);
border-radius:24px;
background: var(--brick);
color:#fff7d6;
font-family:'Alegreya', serif; font-weight:700; font-size:16px;
text-decoration:none;
box-shadow:3px 4px 0 var(--ink);
transform: rotate(1.5deg);
cursor:pointer;
}
.login-btn:hover{ transform: rotate(-1deg) translateY(-1px); box-shadow:4px 5px 0 var(--ink); }
.login-btn .ico{ font-family:'Yeseva One', serif; font-size:15px; }
/* ---------- Профиль вошедшего зрителя ---------- */
.profile-wrap{ position: relative; display: none; }
body.is-logged-in .login-btn{ display: none; }
body.is-logged-in .profile-wrap{ display: inline-block; }
.profile-btn{
display:inline-flex; align-items:center; gap:10px;
padding: 4px 14px 4px 4px;
border:2.5px solid var(--ink); border-radius: 30px;
background: var(--cream-card);
color: var(--ink);
font-family:'Alegreya', serif; font-weight:700; font-size:16px;
text-decoration:none; cursor:pointer;
box-shadow:3px 4px 0 var(--ink);
transform: rotate(-1.5deg);
position: relative;
}
.profile-btn:hover{ transform: rotate(1deg) translateY(-1px); box-shadow:4px 5px 0 var(--ink); }
.profile-btn .ava{
width: 38px; height: 38px; border-radius: 50%;
background: var(--moss);
border:2px solid var(--ink);
color:#fff8db;
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size:18px;
position: relative;
}
.profile-btn .ava::after{
content:"";
position:absolute; right:-3px; bottom:-3px;
width:12px; height:12px; border-radius:50%;
background: var(--brick);
border:2px solid var(--ink);
}
.profile-btn .chev{ font-size: 11px; transform: translateY(2px); }
.profile-menu{
position: absolute;
right: 0; top: calc(100% + 10px);
min-width: 240px;
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 20px;
box-shadow: 6px 7px 0 var(--ink);
padding: 10px;
transform: rotate(-1deg);
display: none;
z-index: 12;
}
.profile-wrap.open .profile-menu{ display: block; animation: profileDropIn .2s ease both; }
.profile-menu .hi{
padding: 6px 12px 8px;
font-family:'Caveat', cursive;
font-size: 22px;
color: var(--brick);
border-bottom: 2px dotted var(--ink);
margin-bottom: 6px;
}
.profile-menu .hi b{ color: var(--ink); font-weight:600; }
.profile-menu a, .profile-menu button.menu-item{
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 8px 12px;
border-radius: 12px;
border: none; background: transparent;
text-align: left;
font-family:'Alegreya', serif; font-size: 16px; color: var(--ink);
text-decoration: none;
cursor: pointer;
}
.profile-menu a:hover, .profile-menu button.menu-item:hover{ background:#f7e0a8; }
.profile-menu .icoR{ width: 22px; text-align:center; font-family:'Yeseva One', serif; color: var(--brick); font-size: 17px; }
.profile-menu .count-r{ margin-left:auto; color: var(--ink-soft); font-family:'Caveat', cursive; }
.profile-menu .sep{
height: 2px;
background: transparent;
border-bottom: 2px dotted var(--ink);
margin: 6px 8px;
}
.profile-menu .logout{ color: var(--brick); font-weight: 700; }
@keyframes profileDropIn{ from{ transform: rotate(-1deg) translateY(-10px); opacity:0 } to{ transform: rotate(-1deg) translateY(0); opacity:1 } }
/* ---------- Окно авторизации ---------- */
.auth-panel{
position:fixed; inset:0; z-index:55; display:none;
overflow-y:auto; padding: 40px 20px;
background: radial-gradient(700px 500px at 50% 10%, #fff8dc 0%, #f3dfb088 60%, transparent 80%), #00000040;
backdrop-filter: blur(3px);
}
.auth-panel.open{ display:block; animation: fadeIn .25s ease both; }
.auth-sheet{
max-width: 480px;
margin: 0 auto;
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 24px;
box-shadow: 10px 12px 0 var(--ink);
padding: 30px 34px 34px;
position: relative;
transform: rotate(-.4deg);
animation: dropIn .35s cubic-bezier(.4,1.6,.4,1) both;
}
.auth-sheet .close{
position:absolute; right:-14px; top:-18px;
width:46px; height:46px; border-radius:50%;
background: var(--brick); color:#fff7d6;
border:2.5px solid var(--ink);
box-shadow:3px 4px 0 var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size:22px;
cursor:pointer; transform: rotate(8deg);
}
.auth-sheet .kicker{
font-family:'Caveat', cursive; font-size: 22px;
color: var(--brick);
transform: rotate(-1.5deg);
display: inline-block;
}
.auth-sheet h3{
font-family:'Yeseva One', serif;
font-size: 36px;
margin: 4px 0 6px;
line-height: 1;
}
.auth-sheet .hint{
margin: 0 0 18px;
font-family:'Alegreya', serif; font-size: 16px;
color: var(--ink-soft);
}
.auth-options{ display:grid; gap: 10px; }
.auth-option{
display:flex; align-items:center; gap:14px;
padding: 12px 16px 13px;
border:2.5px solid var(--ink); border-radius: 18px;
background: var(--cream-card);
box-shadow: 4px 5px 0 var(--ink);
font-family:'Alegreya', serif; font-weight:700; font-size:16px;
color: var(--ink); text-decoration:none; cursor:pointer;
transition: transform .12s ease;
}
.auth-option:hover{ transform: translate(-1px,-2px) rotate(-1.5deg); box-shadow:5px 6px 0 var(--ink); }
.auth-option .badge{
width: 40px; height: 40px; border-radius: 50%;
display:grid; place-items:center;
border:2px solid var(--ink);
font-family:'Yeseva One', serif; font-size: 19px;
flex: none;
}
.auth-option.ya{ background:#f7e0a8; transform: rotate(-1deg); }
.auth-option.ya .badge{ background: var(--brick); color: #fff7d6; }
.auth-option.gg{ background:#fff; transform: rotate(.8deg); }
.auth-option.gg .badge{ background:#fff7d6; color: var(--ink); }
.auth-option.em{ background:#dfe6c5; transform: rotate(-.6deg); }
.auth-option.em .badge{ background: var(--moss); color: #fff7d6; font-family:'Yeseva One', serif; font-size: 18px; }
.auth-option .arr{
margin-left:auto;
font-family:'Yeseva One', serif;
color: var(--brick);
font-size: 18px;
}
.auth-or{
display:flex; align-items:center; gap: 12px;
margin: 22px 4px 14px;
font-family:'Caveat', cursive; color: var(--ink-soft); font-size: 19px;
}
.auth-or::before, .auth-or::after{
content:""; flex:1; height: 0;
border-top: 2px dotted var(--ink);
opacity: .5;
}
.auth-email{
display: grid; gap: 10px;
}
.auth-email input{
border:2px solid var(--ink); border-radius: 16px;
padding: 11px 14px;
font-family:'Alegreya', serif; font-size: 16px;
background: var(--paper-soft);
outline: none; color: var(--ink);
box-shadow: inset 2px 2px 0 #00000010;
}
.auth-email input::placeholder{ color: var(--ink-soft); font-style: italic; }
.auth-email input:focus{ background: #fff; border-color: var(--brick); }
.auth-email .row{
display:flex; align-items:center; gap: 12px; flex-wrap: wrap;
margin-top: 4px;
}
.auth-email .submit{
background: var(--brick); color:#fff7d6; border:2.5px solid var(--ink);
border-radius: 22px; padding: 10px 20px 11px; cursor: pointer;
font-family:'Alegreya', serif; font-weight: 700; font-size: 16px;
box-shadow: 3px 4px 0 var(--ink);
transform: rotate(1deg);
}
.auth-email .reg-link{
font-family:'Caveat', cursive; color: var(--brick); font-size: 19px;
text-decoration: none;
}
.auth-email .reg-link:hover{ color: var(--plum); }
.auth-foot{
margin-top: 22px;
font-family:'Caveat', cursive; font-size: 17px;
color: var(--ink-soft); text-align: center;
}
.auth-foot a{ color: var(--ink); text-decoration: none; border-bottom: 1.5px dotted var(--ink); }
/* Заглушка-приглашение к авторизации на странице комментариев */
.auth-stub{
margin-top: 30px;
padding: 22px 24px 24px;
background: var(--cream-card);
border: 2.5px dashed var(--ink);
border-radius: 22px;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
position: relative;
}
.auth-stub::before{
content: "";
position: absolute;
top: -10px; left: 50%;
width: 90px; height: 18px;
transform: translateX(-50%) rotate(-2deg);
background: repeating-linear-gradient(135deg,#f0c97a 0 8px,#e6b85e 8px 16px);
border:1.5px solid #00000020;
box-shadow:0 2px 2px #00000018;
}
.auth-stub .quill{
width: 56px; height: 56px;
border-radius: 50%;
background: var(--honey);
border: 2px solid var(--ink);
box-shadow: 3px 3px 0 var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size: 26px;
color: var(--ink);
flex: none;
}
.auth-stub .body{ flex: 1; min-width: 220px; }
.auth-stub h4{
margin: 0 0 4px;
font-family:'Yeseva One', serif;
font-size: 22px;
color: var(--ink);
}
.auth-stub p{
margin: 0;
font-family:'Alegreya', serif; font-size: 16px;
color: var(--ink-soft);
}
.auth-stub .cta{
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px 11px;
border: 2.5px solid var(--ink); border-radius: 22px;
background: var(--brick); color: #fff7d6;
font-family: 'Alegreya', serif; font-weight: 700; font-size: 16px;
text-decoration: none; cursor: pointer;
box-shadow: 3px 4px 0 var(--ink);
transform: rotate(2deg);
}
.auth-stub .cta:hover{ transform: rotate(-1deg) translateY(-1px); }
/* Когда вошёл — заглушка прячется, форма комментария показывается */
body:not(.is-logged-in) .add-comment{ display: none; }
body.is-logged-in .auth-stub{ display: none; }
/* В нижней мобильной панели — вместо «войти» круглый аватарчик */
body.is-logged-in .bn-btn.login{
background: var(--moss);
}
body.is-logged-in .bn-btn.login .bn-ico{ position: relative; }
body.is-logged-in .bn-btn.login .bn-ico svg{ display: none; }
body.is-logged-in .bn-btn.login .bn-ico::before{
content: "А";
width: 28px; height: 28px; border-radius: 50%;
background: #fff7d6; border: 1.5px solid var(--ink);
display: grid; place-items: center;
font-family:'Yeseva One', serif; font-size: 16px; color: var(--ink);
}
body.is-logged-in .bn-btn.login .bn-label::after{ content: " · Аня"; }
.header-right{
display:flex; align-items:center; gap:12px;
}
/* ---------- Меню ---------- */
.nav-cluster{ display:flex; align-items:center; gap:10px; }
.menu-btn{
display:inline-flex; align-items:center; gap:10px;
padding:10px 18px 11px;
border:2.5px solid var(--ink);
border-radius:26px;
background: var(--cream-card);
font-family:'Alegreya', serif; font-weight:700; font-size:17px;
color:var(--ink);
box-shadow:3px 4px 0 var(--ink);
cursor:pointer;
transition: transform .12s ease, box-shadow .12s ease;
}
.menu-btn:hover{ transform: translate(-1px,-1px) rotate(-1.5deg); box-shadow:4px 5px 0 var(--ink); }
.menu-btn .hamb{
display:inline-flex; flex-direction:column; gap:3px;
}
.menu-btn .hamb span{
width:18px; height:2.5px; background:var(--ink); border-radius:2px;
}
.menu-btn .hamb span:nth-child(2){ width:14px; }
.menu-btn .hamb span:nth-child(3){ width:16px; }
/* ---------- Мега-меню ---------- */
.mega{
position:fixed; inset:0;
z-index:50;
display:none;
overflow-y:auto;
padding-bottom: 40px;
background: radial-gradient(900px 600px at 30% 0%, #fff8dc 0%, #f3dfb088 60%, transparent 80%), #00000040;
backdrop-filter: blur(3px);
}
.mega.open{ display:block; animation: fadeIn .25s ease both; }
.mega-sheet{
max-width: 1080px;
margin: 36px auto 0;
background: var(--cream-card);
border:2.5px solid var(--ink);
border-radius: 28px;
box-shadow: 10px 14px 0 var(--ink);
padding: 30px 40px 36px;
position:relative;
transform: rotate(-.3deg);
animation: dropIn .35s cubic-bezier(.4,1.6,.4,1) both;
}
.mega-sheet .close{
position:absolute; right:-14px; top:-18px;
width:46px; height:46px; border-radius:50%;
background: var(--brick); color:#fff7d6;
border:2.5px solid var(--ink);
box-shadow:3px 4px 0 var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size:22px;
cursor:pointer; transform: rotate(8deg);
}
.mega-sheet .close:hover{ transform: rotate(0deg) scale(1.05); }
.mega-sheet .top-line{
display:flex; align-items:baseline; gap:14px;
margin-bottom:18px;
border-bottom: 3px dotted var(--ink);
padding-bottom: 14px;
flex-wrap:wrap;
}
.mega-sheet .top-line h3{
font-family:'Yeseva One', serif;
font-size: 38px; margin:0; line-height:1;
}
.mega-sheet .top-line .sub{
font-family:'Caveat', cursive; font-size:22px;
color: var(--ink-soft);
transform: rotate(-1.5deg);
}
.mega-cols{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px 36px;
}
.mega-col h4{
font-family:'Caveat', cursive;
font-size: 24px;
color: var(--brick);
margin: 0 0 8px;
font-weight: 600;
}
.mega-col h4 .dot{
display:inline-block;
width: 8px; height: 8px;
background: var(--moss);
border:1.5px solid var(--ink);
border-radius: 50%;
margin-right: 6px;
transform: translateY(-2px);
}
.mega-col ul{
list-style:none; padding:0; margin:0;
font-family:'Alegreya', serif; font-size: 16px;
}
.mega-col li{ padding: 3px 0; }
.mega-col a{
color: var(--ink);
text-decoration: none;
border-bottom: 1.5px dotted transparent;
}
.mega-col a:hover{
color: var(--brick);
border-bottom-color: var(--brick);
}
.mega-col a .pill{
display:inline-block;
background: #f8e3a4;
border:1.5px solid var(--ink);
border-radius: 10px;
padding: 1px 6px;
font-size: 13px; font-family:'Alegreya', serif;
margin-left: 4px;
color: var(--ink-soft);
}
.mega-footer{
margin-top: 26px;
padding-top: 18px;
border-top: 3px dotted var(--ink);
display:flex; gap: 14px; flex-wrap:wrap; align-items:center;
}
.mega-footer .featured{
font-family:'Caveat', cursive;
font-size: 22px;
color: var(--ink-soft);
margin-right: 8px;
}
.mega-footer .chip{
display:inline-flex; align-items:center; gap:6px;
background: #dfe6c5;
border:2px solid var(--ink);
border-radius: 18px;
padding: 6px 12px 7px;
font-family:'Alegreya', serif; font-size: 15px;
color: var(--ink);
text-decoration: none;
box-shadow: 2px 2px 0 var(--ink);
}
.mega-footer .chip:nth-child(odd){ background: #f3dccf; transform: rotate(-1deg); }
.mega-footer .chip:nth-child(3n){ background: #fbe9b8; transform: rotate(1.2deg); }
.mega-footer .chip:hover{ transform: translateY(-1px) rotate(-2deg); }
/* ---------- Панель поиска ---------- */
.search-panel{
position: fixed;
inset: 0;
z-index: 50;
display:none;
overflow-y:auto;
padding-bottom: 40px;
background: radial-gradient(800px 500px at 50% 0%, #fff8dc 0%, #f3dfb088 60%, transparent 80%), #00000040;
backdrop-filter: blur(3px);
}
.search-panel.open{ display:block; animation: fadeIn .25s ease both; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.search-sheet{
max-width: 880px;
margin: 36px auto 0;
background: var(--cream-card);
border:2.5px solid var(--ink);
border-radius: 26px;
box-shadow: 10px 14px 0 var(--ink);
padding: 30px 36px 32px;
position:relative;
transform: rotate(-.4deg);
animation: dropIn .35s cubic-bezier(.4,1.6,.4,1) both;
}
@keyframes dropIn{ from{ transform: rotate(-.4deg) translateY(-30px); opacity:0 } to{ transform: rotate(-.4deg) translateY(0); opacity:1 } }
.search-sheet .close{
position:absolute; right:-14px; top:-18px;
width:46px; height:46px; border-radius:50%;
background: var(--brick); color:#fff7d6;
border:2.5px solid var(--ink);
box-shadow:3px 4px 0 var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size:22px;
cursor:pointer; transform: rotate(8deg);
}
.search-sheet .close:hover{ transform: rotate(0deg) scale(1.05); }
.search-sheet .lead{
font-family:'Caveat', cursive;
font-size:24px; color:var(--ink-soft);
transform:rotate(-1deg);
display:inline-block;
margin-bottom:6px;
}
.search-sheet .lead .star{ color:var(--brick); }
.search-field{
display:flex; align-items:center; gap:14px;
border-bottom: 3px dotted var(--ink);
padding: 10px 6px 16px;
}
.search-field .glass{
width:50px; height:50px;
flex:none;
display:grid; place-items:center;
}
.search-field input{
flex:1;
border:none; outline:none; background:transparent;
font-family:'Marck Script', cursive;
font-size:38px;
color:var(--ink);
padding: 0;
}
.search-field input::placeholder{ color:#a07a4f; }
.search-field .go{
background: var(--moss); color:#fff8db;
border:2.5px solid var(--ink);
box-shadow:3px 4px 0 var(--ink);
padding: 10px 20px;
border-radius:24px;
font-family:'Alegreya', serif; font-weight:700; font-size:16px;
cursor:pointer;
transform: rotate(2deg);
}
.search-field .go:hover{ transform: rotate(-1deg) translateY(-1px); }
.search-hints{
margin-top: 22px;
display:grid;
grid-template-columns: 1fr 1fr;
gap: 22px 30px;
}
.search-hints h5{
margin:0 0 10px;
font-family:'Caveat', cursive;
font-size: 22px;
color: var(--brick);
font-weight: 600;
}
.search-hints .chips{
display:flex; flex-wrap:wrap; gap:8px;
}
.search-hints .chip{
border:2px solid var(--ink);
border-radius:18px;
padding:5px 12px 6px;
background:#fbe9b8;
box-shadow:2px 2px 0 var(--ink);
font-family:'Alegreya', serif; font-size:15px;
text-decoration:none; color:var(--ink);
cursor:pointer;
}
.search-hints .chip:nth-child(3n+2){ background:#dfe6c5; transform:rotate(-1deg); }
.search-hints .chip:nth-child(3n+3){ background:#f3dccf; transform:rotate(1.2deg); }
.search-hints .chip:hover{ transform: translateY(-1px) rotate(-1.5deg); box-shadow:3px 3px 0 var(--ink); }
.search-hints .recent{
display:flex; flex-direction:column; gap:6px;
font-family:'Alegreya', serif; font-size:16px;
}
.search-hints .recent a{
color:var(--ink); text-decoration:none;
display:flex; align-items:center; gap:8px;
padding:3px 0;
}
.search-hints .recent a::before{
content:"↻"; color:var(--ink-soft); font-size:18px;
}
.search-hints .recent a:hover{ color:var(--brick); }
/* ---------- Хлебные крошки = тропинка ---------- */
.crumbs{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin:26px 6px 8px;
font-family:'Caveat', cursive;
font-size:22px;
color:var(--ink-soft);
}
.crumbs a{ color:var(--ink-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--brick); }
.crumbs .dot{
width:8px; height:8px; border-radius:50%; background:var(--ink-soft);
display:inline-block; opacity:.5;
}
.crumbs .leaf{ color:var(--moss); font-size:22px; }
.crumbs .here{ color:var(--brick); font-weight:700; }
/* ---------- Hero ---------- */
.hero{
display:block;
margin-top:18px;
}
.title-row{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:32px;
flex-wrap:wrap;
}
.title-row .subline{ margin-top:0; padding-bottom:12px; }
.title-block{ position:relative; padding:6px 0 14px; }
.kicker{
display:inline-block;
font-family:'Caveat', cursive;
font-size:24px;
color:var(--brick);
transform:rotate(-2.5deg);
margin-bottom:6px;
}
.kicker .star{ color:var(--honey); }
h1{
font-family:'Yeseva One', serif;
font-size: clamp(32px, 5.2vw, 80px);
line-height: 1;
margin:0;
color:var(--ink);
letter-spacing:-.5px;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
text-wrap: balance;
max-width: 100%;
}
h1 .swash{
color: inherit;
font-style: normal;
display: inline;
transform: none;
}
h1 .swash{
color:var(--brick);
font-style:italic;
display:inline-block; transform:rotate(-2deg) translateY(-4px);
}
h1 .squiggle{
display:block;
margin:10px 0 0 4px;
}
/* ---------- Рекламные блоки ---------- */
.ad{
position:relative;
margin: 22px 4px 0;
background: #fff7d6;
border: 2.5px solid var(--ink);
border-radius: 22px;
padding: 18px 22px;
box-shadow: 6px 7px 0 var(--ink);
display:grid;
grid-template-columns: 130px 1fr auto;
gap: 22px;
align-items:center;
transform: rotate(-.3deg);
}
.ad::after{
content:"реклама";
position:absolute;
top:-14px; right: 22px;
background: var(--paper-deep);
border:2px solid var(--ink);
border-radius: 14px;
padding: 3px 12px 4px;
font-family:'Caveat', cursive;
font-size: 16px;
color: var(--ink-soft);
transform: rotate(-3deg);
box-shadow: 2px 2px 0 var(--ink);
}
.ad .ad-pic{
height: 110px;
border-radius: 14px;
border: 2px solid var(--ink);
box-shadow: 3px 3px 0 var(--ink);
position:relative;
overflow:hidden;
}
.ad .ad-pic .label{
position:absolute; left: 50%; bottom: 8px;
transform: translateX(-50%) rotate(-2deg);
font-family:'Caveat', cursive; color:#fff;
font-size:16px; text-shadow:1px 1px 0 #00000060;
white-space:nowrap;
}
.ad .ad-body h4{
margin: 0 0 4px;
font-family:'Yeseva One', serif;
font-size: 24px;
color: var(--ink);
line-height: 1.05;
}
.ad .ad-body p{
margin: 0;
font-family:'Alegreya', serif;
font-size: 16px;
color: var(--ink);
}
.ad .ad-body .partner{
font-family:'Caveat', cursive;
font-size: 17px;
color: var(--brick);
margin-bottom: 2px;
display: block;
}
.ad .ad-cta{
display:inline-flex; align-items:center; gap:8px;
padding: 10px 18px 11px;
border:2.5px solid var(--ink);
border-radius: 24px;
background: var(--moss);
color: #fff8db;
font-family:'Alegreya', serif; font-weight:700; font-size:16px;
text-decoration:none;
box-shadow: 3px 4px 0 var(--ink);
transform: rotate(1.5deg);
white-space: nowrap;
}
.ad .ad-cta:hover{ transform: rotate(-1deg) translateY(-1px); box-shadow:4px 5px 0 var(--ink); }
/* вариант «открытка» — второй блок, рядом с метками */
.ad.postcard{
background:#f8e3a4;
transform: rotate(.5deg);
grid-template-columns: 150px 1fr auto;
margin-top: 36px;
}
.ad.postcard .ad-pic{ height: 130px; }
.ad.postcard .ad-cta{ background: var(--brick); color:#fff7d6; }
/* «Картинка» в рекламе — плечики из градиентов в духе палитры */
.ad-pic.scene-books{
background:
linear-gradient(180deg, #f3dccf 0%, #c7563a 100%),
radial-gradient(circle at 50% 60%, #fff7d6 0%, transparent 60%);
background-blend-mode: multiply;
}
.ad-pic.scene-theatre{
background:
radial-gradient(circle at 50% 60%, #e0a83a 0%, #7a3f55 70%, #3a2418 100%);
}
.ad-pic::before{
content:"";
position:absolute; inset:0;
background:
radial-gradient(circle at 30% 40%, #ffffff22 0%, transparent 30%),
radial-gradient(circle at 70% 30%, #ffffff20 0%, transparent 30%);
}
@media (max-width: 820px){
.ad{ grid-template-columns: 1fr; padding: 16px; }
.ad .ad-pic{ height: 90px; }
}
.subline{
margin-top:14px;
display:flex; gap:14px; flex-wrap:wrap;
font-family:'Alegreya', serif; font-size:20px; color:var(--ink-soft);
font-style:italic;
}
.subline b{ color:var(--ink); font-weight:700; font-style:normal; }
/* ---------- Видео ---------- */
.player-wrap{
position:relative;
margin-top:28px;
padding:18px 18px 22px;
background:var(--cream-card);
border-radius:22px;
border:2.5px solid var(--ink);
box-shadow:
10px 12px 0 var(--ink),
inset 0 0 0 6px #fff7d6;
transform:rotate(-.4deg);
}
.player{
position:relative;
aspect-ratio: 16 / 8.5;
border-radius:14px;
overflow:hidden;
border:2px solid var(--ink);
background:
radial-gradient(ellipse 90% 60% at 50% 80%, #d9c187 0%, #c2a877 35%, #a99262 70%, #7d6841 100%),
linear-gradient(180deg, #d9d1bd 0%, #c7c4af 60%, #97a59b 100%);
box-shadow: inset 0 0 80px #00000022;
}
/* Туманный пейзаж в плеере — мягкие радиальные пятна, без сложной графики */
.player::before{
content:"";
position:absolute; inset:0;
background:
radial-gradient(ellipse 60% 18% at 30% 70%, #5b4a2a55 0%, transparent 70%),
radial-gradient(ellipse 70% 12% at 70% 78%, #3a2e1a55 0%, transparent 70%),
radial-gradient(circle at 80% 35%, #f6e6b855 0%, transparent 45%),
radial-gradient(ellipse 80% 40% at 50% 100%, #20140888 0%, transparent 60%);
filter:blur(2px);
}
.player::after{
content:""; position:absolute; inset:0;
background:
linear-gradient(180deg, #f7eccc00 30%, #f4e3b988 70%, #efd49444 100%),
repeating-linear-gradient(180deg, transparent 0 2px, #ffffff04 2px 4px);
pointer-events:none;
}
.play{
position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%);
width:104px; height:104px;
border-radius:50%;
background:var(--brick);
border:3px solid var(--ink);
box-shadow: 4px 6px 0 #00000050;
display:grid; place-items:center;
cursor:pointer;
}
.play:hover{ transform:translate(-50%,-50%) scale(1.04) }
.play .tri{
width:0; height:0;
border-left:30px solid var(--paper-soft);
border-top:20px solid transparent;
border-bottom:20px solid transparent;
margin-left:8px;
filter: drop-shadow(0 1px 0 #00000035);
}
.player-label{
position:absolute; left:18px; bottom:14px;
font-family:'Caveat', cursive; color:#fff;
font-size:22px; text-shadow:1px 2px 0 #00000080;
transform:rotate(-3deg);
}
.time-pill{
position:absolute; right:14px; bottom:14px;
padding:4px 12px; border-radius:20px;
background:#fff7d6; border:2px solid var(--ink);
font-family:'Alegreya', serif; font-weight:700; font-size:16px;
color:var(--ink);
transform:rotate(2deg);
box-shadow:2px 2px 0 var(--ink);
}
/* Скотч-полоски по углам плеера */
.tape{
position:absolute; width:96px; height:26px;
background:linear-gradient(180deg,#f3d27aee, #e0b85faa);
box-shadow: inset 0 0 0 1px #00000018, 2px 3px 4px #00000022;
}
.tape.tl{ top:-12px; left:-18px; transform:rotate(-22deg); }
.tape.tr{ top:-8px; right:-22px; transform:rotate(18deg); background:linear-gradient(180deg,#c9d99fee,#aac282aa); }
.tape.bl{ bottom:-10px; left:30%; transform:rotate(-8deg); background:linear-gradient(180deg,#e89e8aee,#cf7a64aa); }
/* ---------- Карточка с данными ---------- */
.meta-card{
position:relative;
background:var(--cream-card);
border:2.5px solid var(--ink);
border-radius:24px;
padding:22px 24px 24px;
box-shadow: 7px 9px 0 var(--ink);
transform:rotate(1.2deg);
}
.meta-card h3{
margin:0 0 12px;
font-family:'Yeseva One', serif;
font-size:24px;
display:flex; align-items:center; gap:10px;
}
.meta-card h3 .dot-dec{
width:14px; height:14px; border-radius:50%;
background:var(--brick); border:2px solid var(--ink);
display:inline-block;
}
.meta-row{
display:flex; align-items:baseline; justify-content:space-between;
gap:14px; padding:9px 0;
border-bottom:1.5px dotted #00000040;
}
.meta-row:last-child{ border-bottom:none; }
.meta-row .k{
font-family:'Caveat', cursive; font-size:22px; color:var(--ink-soft);
}
.meta-row .v{
font-family:'Alegreya', serif; font-weight:700; font-size:18px; color:var(--ink);
text-align:right; max-width:62%;
}
.meta-row .v small{ display:block; font-weight:400; font-style:italic; color:var(--ink-soft); font-size:15px; }
/* Бирочка "Любимое для семьи" */
.badge-sticker{
position:absolute; right:-12px; top:-44px;
width:96px; height:96px;
background:var(--moss);
color:#fff8db;
border:2.5px solid var(--ink);
border-radius:50%;
display:grid; place-items:center; text-align:center;
font-family:'Caveat', cursive; font-size:17px; line-height:1.05;
transform:rotate(14deg);
box-shadow: 3px 4px 0 var(--ink);
padding:8px;
}
.badge-sticker::after{
content:""; position:absolute; inset:6px;
border:2px dashed #ffffff80; border-radius:50%;
}
/* ---------- Действия: наклейки ---------- */
.actions{
display:flex; flex-wrap:wrap; gap:14px;
margin: 36px 4px 0;
align-items:center;
}
.sticker{
display:inline-flex; align-items:center; gap:10px;
padding:10px 18px 11px;
border:2.5px solid var(--ink);
border-radius:30px;
background:var(--paper-soft);
font-family:'Alegreya', serif; font-weight:700; font-size:17px;
color:var(--ink);
box-shadow:3px 4px 0 var(--ink);
text-decoration:none;
cursor:pointer;
transition: transform .12s ease;
}
.sticker:hover{ transform:translate(-1px,-1px) rotate(-1deg); box-shadow:5px 6px 0 var(--ink); }
.sticker.heart{ background:#f4b8a4; transform:rotate(-2deg); }
.sticker.save{ background:#f3d27a; transform:rotate(1.5deg); }
.sticker.share{ background:#cfe0a4; transform:rotate(-1deg); }
.sticker.print{ background:#cdd9e3; transform:rotate(2deg); }
.sticker .ico{ font-family:'Yeseva One', serif; font-size:18px; }
.counts{
margin-left:auto;
display:flex; align-items:center; gap:18px;
font-family:'Caveat', cursive; font-size:22px;
color:var(--ink-soft);
}
.counts b{ color:var(--ink); font-weight:700; }
/* ---------- О мультфильме ---------- */
.about{
margin-top:54px;
display:grid;
grid-template-columns: 1.45fr 1fr;
gap:40px;
align-items:start;
}
.about .meta-card{ margin-top: 8px; }
.about h2, .similar h2, .comments h2{
font-family:'Yeseva One', serif;
font-size:46px;
margin:0 0 16px;
position:relative;
display:inline-block;
}
.about h2::after, .similar h2::after, .comments h2::after{
content:"";
position:absolute; left:6px; right:-6px; bottom:-2px;
height:14px;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size:100% 100%;
}
.about p{ font-size:19px; margin:0 0 14px; }
.about .lead{
font-size:22px;
line-height:1.5;
font-family:'Alegreya', serif;
color:var(--ink);
}
.about .lead::first-letter{
font-family:'Yeseva One', serif;
font-size: 72px;
float:left;
line-height:.8;
padding:6px 10px 0 0;
color:var(--brick);
}
/* ---------- Полоса с цитатой ---------- */
.quote-banner{
margin: 64px auto 0;
max-width: 880px;
position:relative;
}
.pullquote{
position:relative;
padding:38px 56px 32px;
background:#f8e3a4;
border:2.5px solid var(--ink);
border-radius:26px;
box-shadow:8px 10px 0 var(--ink);
transform:rotate(-.7deg);
font-family:'Marck Script', cursive;
font-size:30px;
line-height:1.4;
color:var(--ink);
text-align:center;
}
.pullquote::before{
content:"„";
font-family:'Yeseva One', serif;
position:absolute; left:14px; top:-30px;
font-size:90px; color:var(--brick); line-height:1;
}
.pullquote cite{
display:block; margin-top:14px;
font-family:'Caveat', cursive;
font-style:normal;
font-size:20px;
color:var(--ink-soft);
}
.pullquote::after{
content:""; position:absolute; right:-18px; top:-14px;
width:64px; height:22px;
background:linear-gradient(180deg,#e89e8aee,#cf7a64aa);
transform:rotate(20deg);
box-shadow: inset 0 0 0 1px #00000020;
}
.creators{
margin-top:30px;
display:grid;
grid-template-columns: repeat(4, 1fr);
gap:18px;
}
.creator{
background:var(--cream-card);
border:2.5px solid var(--ink);
border-radius:18px;
padding:16px 16px 18px;
box-shadow:4px 5px 0 var(--ink);
position:relative;
}
.creator:nth-child(1){ transform:rotate(-1.2deg); background:#fbe9b8 }
.creator:nth-child(2){ transform:rotate(.8deg); background:#e8d9b0 }
.creator:nth-child(3){ transform:rotate(-.6deg); background:#f3dccf }
.creator:nth-child(4){ transform:rotate(1.4deg); background:#dfe6c5 }
.creator .role{
font-family:'Caveat', cursive; font-size:20px; color:var(--brick);
margin-bottom:2px;
}
.creator .who{
font-family:'Yeseva One', serif; font-size:22px; line-height:1.1;
color:var(--ink);
}
.creator .role::before{
content:"✦ "; color:var(--honey);
}
/* ---------- Похожие — стикеры/альбом ---------- */
.similar{ margin-top:74px; position:relative; }
.similar .album{
display:grid; grid-template-columns: repeat(4, 1fr);
gap:28px 22px;
margin-top:14px;
}
.card{
position:relative;
background:var(--cream-card);
border:2.5px solid var(--ink);
border-radius:14px;
padding:10px 10px 18px;
box-shadow:5px 7px 0 var(--ink);
text-decoration:none; color:var(--ink);
display:block;
transition: transform .14s ease;
}
.card:hover{ transform:translate(-2px,-3px) rotate(-1deg); }
.card:nth-child(1){ transform:rotate(-1.6deg); }
.card:nth-child(2){ transform:rotate(1.2deg); }
.card:nth-child(3){ transform:rotate(-.6deg); }
.card:nth-child(4){ transform:rotate(1.8deg); }
.card .frame{
aspect-ratio: 4/3;
border-radius:8px;
border:2px solid var(--ink);
overflow:hidden;
position:relative;
}
.card .frame::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 65%, #00000028);
}
.card.c1 .frame{ background:
radial-gradient(circle at 30% 70%, #f6c785 0%, #b56e36 60%, #5a2f12 100%); }
.card.c2 .frame{ background:
radial-gradient(circle at 60% 40%, #a8c79c 0%, #4f7547 60%, #1f3621 100%); }
.card.c3 .frame{ background:
radial-gradient(circle at 40% 50%, #d4d2c4 0%, #8aa0a5 50%, #3c5566 100%); }
.card.c4 .frame{ background:
radial-gradient(circle at 50% 60%, #f2cb6a 0%, #c87a3b 55%, #6b3015 100%); }
.card .frame .silhouette{
position:absolute; left:50%; bottom:10%; transform:translateX(-50%);
width:46%; height:42%;
background: radial-gradient(ellipse at 50% 80%, #1d1208 0%, #1d1208 55%, transparent 60%);
filter:blur(1px);
}
.card .name{
font-family:'Yeseva One', serif;
font-size:22px; line-height:1.05;
margin:12px 4px 4px;
}
.card .meta-line{
font-family:'Caveat', cursive; font-size:19px;
color:var(--ink-soft);
padding:0 4px;
display:flex; justify-content:space-between;
}
.card .meta-line .year{ color:var(--brick); font-weight:700 }
.card .corner-tape{
position:absolute; top:-10px; left:18px;
width:60px; height:18px;
background:linear-gradient(180deg,#f3d27aee,#e0b85faa);
transform:rotate(-12deg);
box-shadow: inset 0 0 0 1px #00000020;
}
.card:nth-child(2) .corner-tape{ background:linear-gradient(180deg,#c9d99fee,#aac282aa); transform:rotate(10deg); left:auto; right:22px; }
.card:nth-child(3) .corner-tape{ background:linear-gradient(180deg,#e89e8aee,#cf7a64aa); transform:rotate(-7deg); }
.card:nth-child(4) .corner-tape{ background:linear-gradient(180deg,#cdd9e3ee,#9eb0c0aa); transform:rotate(14deg); left:auto; right:24px; }
.more-link{
display:inline-flex; align-items:center; gap:10px;
margin-top:26px;
font-family:'Caveat', cursive; font-size:24px; color:var(--brick);
text-decoration:none;
}
.more-link:hover{ color:var(--plum); }
.more-link .arrow{
display:inline-block; transform:translateY(1px);
font-family:'Yeseva One', serif;
}
/* ---------- Комментарии — записочки ---------- */
.comments{ margin-top:78px; }
.notes{
margin-top:24px;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:24px;
}
.note{
position:relative;
padding:22px 22px 22px;
border:2.5px solid var(--ink);
border-radius:18px;
box-shadow:5px 6px 0 var(--ink);
font-family:'Alegreya', serif; font-size:17px;
}
.note .who{
display:flex; align-items:center; gap:10px;
font-family:'Yeseva One', serif; font-size:18px;
margin-bottom:8px;
}
.note .who .ava{
width:42px; height:42px; border-radius:50%;
border:2px solid var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size:20px;
color:#fff;
}
.note .when{
margin-left:auto;
font-family:'Caveat', cursive; font-size:18px;
color:var(--ink-soft); font-weight:400;
}
.note p{ margin:0; }
.note .heart-row{
margin-top:14px;
font-family:'Caveat', cursive;
font-size:18px; color:var(--brick);
}
.note:nth-child(1){ background:#fbe9b8; transform:rotate(-1.3deg); }
.note:nth-child(1) .ava{ background:var(--brick) }
.note:nth-child(2){ background:#dfe6c5; transform:rotate(.9deg); }
.note:nth-child(2) .ava{ background:var(--moss) }
.note:nth-child(3){ background:#f3dccf; transform:rotate(-.5deg); }
.note:nth-child(3) .ava{ background:var(--plum) }
.note::before{
content:""; position:absolute;
width:42px; height:14px;
top:-7px; left:30%;
background:linear-gradient(180deg,#ffffffaa,#ffffff55);
border:1px solid #00000018;
transform:rotate(-6deg);
}
.add-comment{
margin-top:30px;
background:var(--cream-card);
border:2.5px dashed var(--ink);
border-radius:20px;
padding:20px 22px;
display:flex; gap:16px; align-items:center;
font-family:'Caveat', cursive; font-size:22px;
color:var(--ink-soft);
}
.add-comment .pencil{
width:46px; height:46px; border-radius:50%;
background:var(--honey); border:2px solid var(--ink);
display:grid; place-items:center; flex:none;
box-shadow:2px 2px 0 var(--ink);
font-family:'Yeseva One', serif; color:var(--ink); font-size:22px;
}
.add-comment input{
flex:1; border:none; outline:none; background:transparent;
font-family:'Caveat', cursive; font-size:22px; color:var(--ink);
}
.add-comment button{
border:2px solid var(--ink); background:var(--brick); color:#fff7d6;
font-family:'Alegreya', serif; font-weight:700; font-size:16px;
padding:8px 18px; border-radius:20px;
box-shadow:3px 3px 0 var(--ink);
cursor:pointer;
}
/* ---------- Подвал ---------- */
footer{
margin-top:80px;
padding:30px 26px 26px;
background:var(--cream-card);
border:2.5px solid var(--ink);
border-radius:28px;
box-shadow:6px 7px 0 var(--ink);
display:grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap:30px;
position:relative;
}
footer h4{
font-family:'Yeseva One', serif; font-size:22px; margin:0 0 10px;
}
footer ul{
list-style:none; padding:0; margin:0;
font-family:'Alegreya', serif; font-size:17px;
}
footer ul li{ padding:3px 0; }
footer ul a{ color:var(--ink); text-decoration:none; }
footer ul a:hover{ color:var(--brick); }
footer .signoff{
font-family:'Caveat', cursive; font-size:21px; color:var(--ink-soft);
margin-top:8px;
}
footer .stamp{
position:absolute; right:-12px; top:-22px;
width:84px; height:84px; border-radius:50%;
background:var(--brick); color:#fff7d6;
border:2.5px solid var(--ink);
display:grid; place-items:center; text-align:center;
font-family:'Yeseva One', serif; font-size:14px; line-height:1.05;
transform:rotate(-12deg);
box-shadow:4px 4px 0 var(--ink);
}
footer .stamp::after{
content:""; position:absolute; inset:5px;
border:2px dashed #ffffff80; border-radius:50%;
}
/* ---------- Декоративные звёздочки/листики ---------- */
.decor{ position:absolute; pointer-events:none; }
.decor.star{ width:24px; height:24px; }
/* SVG-волна разделитель */
.wave-divider{
height:18px; margin:48px auto 0;
background: url("data:image/svg+xml;utf8,") repeat-x;
background-size: 160px 18px;
opacity:.65;
}
/* ---------- Метки / ярлычки ---------- */
.tags-block{
margin: 44px 4px 0;
display:flex; align-items:flex-start; gap:18px;
flex-wrap:wrap;
}
.tags-title{
font-family:'Caveat', cursive;
font-size: 26px;
color: var(--ink-soft);
transform: rotate(-2deg);
padding-top: 4px;
white-space:nowrap;
}
.tags-title .arrow{
display:inline-block;
color: var(--brick);
transform: translateY(2px);
margin-right: 4px;
}
.tags{
display:flex; flex-wrap:wrap; gap:10px 10px;
flex:1; min-width: 280px;
}
.tag{
display:inline-flex; align-items:center; gap:6px;
padding: 7px 14px 8px;
font-family:'Alegreya', serif;
font-weight:500;
font-size:16px;
color:var(--ink);
text-decoration:none;
border:2px solid var(--ink);
border-radius: 22px;
background: var(--cream-card);
box-shadow: 2px 3px 0 var(--ink);
position:relative;
transition: transform .12s ease, box-shadow .12s ease;
}
.tag:hover{
transform: translate(-1px,-2px) rotate(-1.5deg);
box-shadow: 3px 5px 0 var(--ink);
}
.tag::before{
content:"#";
font-family:'Yeseva One', serif;
color: var(--brick);
font-size: 17px;
margin-right: 2px;
transform: translateY(-1px);
display:inline-block;
}
/* Небольшое чередование цветов и поворотов — рукописная неровность */
.tag:nth-child(7n+1){ background:#fbe9b8; transform:rotate(-1.2deg); }
.tag:nth-child(7n+2){ background:#dfe6c5; transform:rotate(.9deg); }
.tag:nth-child(7n+3){ background:#f3dccf; transform:rotate(-.6deg); }
.tag:nth-child(7n+4){ background:#cdd9e3; transform:rotate(1.4deg); }
.tag:nth-child(7n+5){ background:#f8e3a4; transform:rotate(-1.8deg); }
.tag:nth-child(7n+6){ background:#f4b8a4; transform:rotate(.7deg); }
.tag:nth-child(7n+7){ background:#e8d9b0; transform:rotate(-.9deg); }
.tag .count{
font-family:'Caveat', cursive;
font-size:17px;
color: var(--ink-soft);
margin-left: 4px;
font-weight: 400;
}
/* Маленькая «булавка» у меток-эпохи */
.tag.era::after{
content:"";
position:absolute;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--brick);
border: 1.5px solid var(--ink);
top: -4px;
right: 10px;
}
/* «ещё» — скрытие лишних меток */
.tags-block.collapsed .tags .tag:nth-child(n+8){ display: none; }
.tag-more{
display:inline-flex; align-items:center; gap:6px;
border:2px dashed var(--ink); border-radius: 22px;
padding: 6px 14px 7px;
background: transparent;
font-family:'Caveat', cursive; font-size:18px;
color: var(--ink);
cursor: pointer;
transition: transform .12s ease;
}
.tag-more:hover{ transform: translate(-1px,-2px) rotate(-2deg); background:#fff7d6; }
.tag-more .arr{ transition: transform .2s ease; }
.tags-block:not(.collapsed) .tag-more .arr{ transform: rotate(180deg); }
@media (max-width: 900px){
.about{ grid-template-columns:1fr; }
.title-row{ flex-direction:column; align-items:flex-start; gap:8px; }
.pullquote{ padding:28px 24px 24px; font-size:24px; }
.creators{ grid-template-columns: repeat(2, 1fr); }
.similar .album{ grid-template-columns: repeat(2, 1fr); }
.notes{ grid-template-columns: 1fr; }
footer{ grid-template-columns: 1fr; }
h1{ font-size: 64px; }
.about h2, .similar h2, .comments h2{ font-size:36px; }
}
/* ---------- Мобильная нижняя панель ---------- */
.bottom-nav{
display:none;
position:fixed;
bottom:0; left:0; right:0;
z-index:40;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: var(--cream-card);
border-top: 2.5px solid var(--ink);
box-shadow: 0 -6px 0 -1px #00000010;
justify-content: space-around;
align-items: center;
gap: 4px;
}
.bottom-nav::before{
content:""; position:absolute; top:-8px; left:30%;
width:80px; height:14px;
background: repeating-linear-gradient(135deg,#f0c97a 0 8px,#e6b85e 8px 16px);
border:1.5px solid #00000020; transform:rotate(-4deg);
box-shadow:0 2px 2px #00000018;
}
.bn-btn{
flex:1;
display:flex; flex-direction:column; align-items:center; gap:2px;
text-decoration:none; color: var(--ink);
padding: 6px 4px 4px;
border-radius: 14px;
background: transparent;
border: 2px solid transparent;
cursor:pointer;
font: inherit;
}
.bn-btn .bn-ico{
width:28px; height:28px;
display:grid; place-items:center;
}
.bn-btn .bn-label{
font-family:'Caveat', cursive;
font-size: 13px;
color: var(--ink-soft);
line-height: 1;
}
.bn-btn.active{
background: var(--moss);
border: 2px solid var(--ink);
transform: rotate(-2deg);
box-shadow: 2px 3px 0 var(--ink);
}
.bn-btn.active .bn-label,
.bn-btn.active .bn-ico svg{
color: #fff7d6;
stroke: #fff7d6;
}
.bn-btn.login{ background: var(--brick); border-color: var(--ink); box-shadow:2px 3px 0 var(--ink); transform: rotate(2deg); }
.bn-btn.login .bn-label{ color:#fff7d6; }
.bn-btn.login .bn-ico svg{ stroke:#fff7d6; }
/* ---------- Сворачиваемая карточка «Что это за мультик» ---------- */
.meta-toggle{
display: none;
margin: 0 0 6px;
width: 100%;
background: var(--paper-deep);
border: 2px solid var(--ink);
border-radius: 16px;
padding: 9px 14px 10px;
font-family:'Alegreya', serif; font-weight:700; font-size:15px;
color: var(--ink);
box-shadow: 2px 3px 0 var(--ink);
cursor: pointer;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.meta-toggle .arrow{
display:inline-block;
transition: transform .2s ease;
font-family:'Yeseva One', serif;
font-size: 14px;
}
.meta-card:not(.collapsed) .meta-toggle .arrow{ transform: rotate(180deg); }
/* ---------- Мобилка ---------- */
@media (max-width: 720px){
body{ padding-bottom: 80px; }
.wrap{ padding: 16px 14px 28px; }
/* Шапка — только лого и меню */
header.top{ padding: 10px 14px; gap: 10px; border-radius: 24px; }
header.top::before, header.top::after{ display:none; }
.logo .name{ font-size: 20px; }
.logo .name small{ font-size: 14px; }
.logo .mark{ width: 44px; height: 44px; font-size: 24px; }
.nav-cluster .icon-btn.home{ display: none; } /* домой — внизу */
.menu-btn{ padding: 8px 12px 9px; font-size: 15px; }
.header-right .icon-btn.vk,
.header-right .icon-btn.ok,
.header-right .login-btn{ display: none; } /* социальные и вход — внизу */
.header-right .icon-btn.search-trigger{ display: none; } /* поиск — внизу */
.header-right{ display: none; } /* совсем убираем правую часть */
/* Декор фоновый — поменьше */
.decor{ display:none; }
/* Заголовок и подпись */
.kicker{ font-size: 18px; margin-bottom: 4px; }
h1{ font-size: 44px !important; white-space: normal; line-height: 1; }
.subline{ font-size: 17px; padding-bottom: 4px; }
/* Крошки — поменьше */
.crumbs{ font-size: 18px; margin: 14px 4px 4px; gap: 6px; }
/* Плеер */
.player-wrap{ padding: 12px 12px 14px; margin-top: 18px; transform: none; box-shadow: 5px 6px 0 var(--ink); }
.player{ aspect-ratio: 16/9; }
.player .play{ width: 76px; height: 76px; }
.player .play .tri{
border-left:22px solid var(--paper-soft);
border-top:15px solid transparent;
border-bottom:15px solid transparent;
}
.player-label{ font-size: 18px; bottom: 10px; left: 12px; }
.time-pill{ font-size: 14px; padding: 2px 10px; bottom: 10px; right: 10px; }
.tape.tl{ width: 64px; top: -8px; left: -10px; }
.tape.tr{ width: 64px; top: -6px; right: -12px; }
.tape.bl{ display: none; }
/* Действия — компактнее, перенос */
.actions{ gap: 8px; margin-top: 22px; }
.sticker{ font-size: 14px; padding: 8px 12px 9px; }
.counts{ margin-left: 0; width: 100%; justify-content: flex-start; gap: 12px; font-size: 17px; margin-top: 4px; }
/* About — без сетки */
.about{ gap: 24px; margin-top: 36px; }
.about h2{ font-size: 30px !important; }
.about .lead{ font-size: 17px; }
.about .lead::first-letter{ font-size: 52px; }
.about p{ font-size: 16px; }
/* Карточка «Что это за мультик» — сворачиваемая */
.meta-card{ transform: none; padding: 16px 18px 18px; }
.meta-card h3{ font-size: 21px; }
.badge-sticker{ width: 76px; height: 76px; font-size: 14px; top: -36px; right: -4px; }
.meta-toggle{ display: flex; }
.meta-card.collapsed .meta-body{ display:none; }
.meta-card.collapsed{ padding-bottom: 16px; }
/* Цитата */
.quote-banner{ margin-top: 40px; }
.pullquote{ padding: 26px 18px 22px; font-size: 21px; transform: none; box-shadow: 6px 7px 0 var(--ink); }
.pullquote::before{ font-size: 64px; top: -22px; }
.pullquote::after{ display:none; }
/* Создатели */
.creators{ grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.creator{ padding: 12px 14px 14px; }
.creator .who{ font-size: 18px; }
/* Похожие — горизонтальная карусель */
.similar{ margin-top: 50px; }
.similar h2{ font-size: 28px !important; }
.similar .album{
display: flex;
grid-template-columns: none;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 6px 4px 16px;
margin: 14px -14px 0;
padding-left: 14px;
padding-right: 14px;
scrollbar-width: thin;
}
.similar .album .card{
flex: 0 0 70%;
max-width: 240px;
scroll-snap-align: start;
transform: none;
}
.similar .album .card .name{ font-size: 19px; }
.more-link{ font-size: 20px; margin-top: 14px; }
.tags-block{ margin-top: 28px; gap: 10px; }
.tags-title{ font-size: 20px; }
/* Реклама */
.ad{ grid-template-columns: 1fr; padding: 14px; gap: 12px; transform: none; }
.ad .ad-pic{ height: 90px; }
.ad .ad-body h4{ font-size: 20px; }
.ad .ad-cta{ width: 100%; justify-content: center; transform: none; }
/* Комментарии */
.comments{ margin-top: 50px; }
.comments h2{ font-size: 28px !important; }
.note{ transform: none !important; padding: 18px; box-shadow: 4px 5px 0 var(--ink); }
.note p{ font-size: 16px; }
.add-comment{ flex-wrap: wrap; padding: 14px 16px; font-size: 18px; }
.add-comment input{ font-size: 18px; width: 100%; flex-basis: 100%; }
.add-comment button{ width: 100%; }
/* Подвал */
footer{ padding: 24px 18px 20px; gap: 20px; }
footer .stamp{ width: 64px; height: 64px; font-size: 11px; top: -16px; right: -8px; }
/* Нижняя панель появляется */
.bottom-nav{ display: flex; }
}
@media (max-width: 380px){
.bn-btn .bn-label{ font-size: 11px; }
.bn-btn .bn-ico{ width:24px; height:24px; }
}
/* ========================================================================
ГЛАВНАЯ СТРАНИЦА (greet, today, shelves, moods, collections, fresh-row,
tag-cloud, letters, makers, onthisday)
======================================================================== */
.greet{
padding: 18px 4px 0;
}
.greet .kicker{
display:inline-block;
font-family:'Caveat', cursive; font-size:24px;
color:var(--brick);
transform:rotate(-2deg);
margin-bottom: 4px;
}
.greet .kicker .star{ color:var(--honey); margin-right:2px; }
.greet h1{
font-family:'Yeseva One', serif;
font-size: clamp(48px, 6.4vw, 86px);
line-height: .9;
margin: 0;
color: var(--ink);
letter-spacing: -1px;
}
.greet h1 .ribbon{
display:inline-block;
background: var(--moss);
color:#fff8db;
padding: 4px 16px 9px;
border-radius: 14px;
transform: rotate(-1.8deg);
margin-top: 6px;
box-shadow: 5px 6px 0 var(--ink);
border: 2.5px solid var(--ink);
font-size: .82em;
}
.greet h1 .swash{
color: var(--brick);
font-style: italic;
display: inline-block;
transform: rotate(-2deg) translateY(-4px);
}
.greet .lead{
font-family:'Alegreya', serif;
font-size: 20px;
line-height: 1.55;
color: var(--ink);
margin: 26px 0 22px;
max-width: 36ch;
}
.greet .lead em{ font-style: italic; color: var(--ink-soft); }
.greet .stats{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 6px;
}
.stat{
position:relative;
border:2.5px solid var(--ink);
border-radius: 16px;
padding: 12px 14px 14px;
background: var(--cream-card);
box-shadow: 4px 5px 0 var(--ink);
}
.stat:nth-child(1){ background:#fbe9b8; transform:rotate(-1.4deg); }
.stat:nth-child(2){ background:#dfe6c5; transform:rotate(.8deg); }
.stat:nth-child(3){ background:#f3dccf; transform:rotate(-.6deg); }
.stat .k{
font-family:'Caveat', cursive; font-size: 18px;
color: var(--brick);
}
.stat .v{
font-family:'Yeseva One', serif; font-size: 32px;
line-height: 1; color: var(--ink);
margin-top: 2px;
}
.stat .x{
font-family:'Caveat', cursive; font-size: 15px;
color: var(--ink-soft); margin-top: 4px;
}
/* «Сегодня смотрим» — большая карточка дня */
.today{
position:relative;
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 22px;
box-shadow: 10px 12px 0 var(--ink);
padding: 16px 16px 20px;
transform: rotate(.5deg);
}
.today .ribbon-top{
position:absolute; top:-18px; left:24px;
background: var(--brick); color: #fff7d6;
border: 2.5px solid var(--ink); border-radius: 16px;
padding: 4px 14px 5px;
font-family:'Caveat', cursive; font-size: 21px;
transform: rotate(-3deg);
box-shadow: 3px 3px 0 var(--ink);
z-index: 3;
}
.today .ribbon-top .star{ color: var(--honey); margin-right: 2px; }
.today .tape{
position:absolute; width:96px; height:24px;
background: linear-gradient(180deg,#f3d27aee,#e0b85faa);
box-shadow: inset 0 0 0 1px #00000018, 2px 3px 4px #00000022;
}
.today .tape.tr{ top:-10px; right:-22px; transform:rotate(16deg); background:linear-gradient(180deg,#c9d99fee,#aac282aa); }
.today .tape.bl{ bottom:-12px; left:18%; transform:rotate(-8deg); background:linear-gradient(180deg,#e89e8aee,#cf7a64aa); }
.today .pic{
position:relative;
aspect-ratio: 16/10;
border-radius: 14px;
overflow: hidden;
border: 2px solid var(--ink);
background:
radial-gradient(ellipse 90% 60% at 50% 80%, #d9c187 0%, #c2a877 35%, #a99262 70%, #7d6841 100%),
linear-gradient(180deg, #d9d1bd 0%, #c7c4af 60%, #97a59b 100%);
box-shadow: inset 0 0 80px #00000022;
}
.today .pic::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(ellipse 60% 18% at 30% 70%, #5b4a2a55 0%, transparent 70%),
radial-gradient(ellipse 70% 12% at 70% 78%, #3a2e1a55 0%, transparent 70%),
radial-gradient(circle at 80% 35%, #f6e6b855 0%, transparent 45%),
radial-gradient(ellipse 80% 40% at 50% 100%, #20140888 0%, transparent 60%);
filter:blur(2px);
}
.today .pic::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg,#00000000 60%, #00000045 100%);
}
.today .play{
position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%);
width:84px; height:84px;
border-radius:50%;
background: var(--brick);
border: 3px solid var(--ink);
box-shadow: 4px 6px 0 #00000055;
display:grid; place-items:center;
cursor:pointer; z-index: 2;
transition: transform .15s ease;
}
.today .play:hover{ transform: translate(-50%,-50%) scale(1.05); }
.today .play .tri{
width:0; height:0;
border-left: 24px solid var(--paper-soft);
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
margin-left: 6px;
filter: drop-shadow(0 1px 0 #00000035);
}
.today .pic .when{
position:absolute; left:14px; bottom:12px; z-index: 2;
font-family:'Caveat', cursive; color:#fff;
font-size:19px; text-shadow:1px 2px 0 #00000080;
transform:rotate(-3deg);
}
.today .pic .time-pill{
position:absolute; right:14px; bottom:12px; z-index: 2;
padding:3px 12px 4px; border-radius:18px;
background:#fff7d6; border:2px solid var(--ink);
font-family:'Alegreya', serif; font-weight:700; font-size:15px;
color:var(--ink);
transform:rotate(2deg);
box-shadow:2px 2px 0 var(--ink);
}
.today h3{
font-family:'Yeseva One', serif;
font-size: 34px;
line-height: 1;
margin: 16px 8px 6px;
}
.today h3 a{ color: var(--ink); text-decoration: none; }
.today h3 a:hover{ color: var(--brick); }
.today .by{
font-family:'Caveat', cursive; font-size: 20px;
color: var(--ink-soft);
margin: 0 8px 12px;
}
.today .by b{ color: var(--ink); font-weight: 600; }
.today .reason{
margin: 0 8px;
padding: 12px 14px;
background: #f8e3a4;
border: 2px dashed var(--ink);
border-radius: 14px;
font-family:'Alegreya', serif;
font-size: 16px;
color: var(--ink);
line-height: 1.45;
}
.today .reason b{ color: var(--brick); }
.today .reason::before{
content: "✦";
color: var(--brick);
margin-right: 6px;
font-family:'Yeseva One', serif;
}
/* ---------- Раздел: общая шапка ---------- */
.section-head{
margin: 78px 4px 0;
display:flex; align-items:baseline; justify-content:space-between;
gap: 20px; flex-wrap: wrap;
}
.section-head h2{
font-family:'Yeseva One', serif;
font-size: 46px;
margin: 0;
position: relative;
display: inline-block;
color: var(--ink);
line-height: 1;
}
.section-head h2::after{
content:""; position:absolute; left:6px; right:-6px; bottom:-2px; height:14px;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: 100% 100%;
}
.section-head .sub{
font-family:'Caveat', cursive; font-size: 22px;
color: var(--ink-soft);
transform: rotate(-1.5deg);
}
.section-head .sub a{ color: var(--brick); text-decoration: none; border-bottom: 1.5px dotted var(--brick); }
/* ---------- Полки по десятилетиям ---------- */
.shelves{
margin-top: 22px;
display:grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
.shelf{
position:relative;
aspect-ratio: 3/4;
border:2.5px solid var(--ink);
border-radius: 18px;
background: var(--cream-card);
box-shadow: 5px 6px 0 var(--ink);
text-decoration:none;
color: var(--ink);
overflow:hidden;
display:flex; flex-direction:column;
transition: transform .14s ease, box-shadow .14s ease;
}
.shelf:hover{ transform: translate(-2px,-3px) rotate(-1deg); box-shadow: 7px 9px 0 var(--ink); }
.shelf:nth-child(1){ transform: rotate(-1.6deg); }
.shelf:nth-child(2){ transform: rotate(.9deg); }
.shelf:nth-child(3){ transform: rotate(-.6deg); }
.shelf:nth-child(4){ transform: rotate(1.4deg); }
.shelf:nth-child(5){ transform: rotate(-1.2deg); }
.shelf .scene{
flex: 1;
position:relative;
border-bottom: 2.5px solid var(--ink);
}
.shelf .scene::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 55%, #00000035);
}
.shelf .scene .silhouette{
position:absolute; left:50%; bottom:8%; transform: translateX(-50%);
width:62%; height:48%;
background: radial-gradient(ellipse at 50% 80%, #1d1208 0%, #1d1208 55%, transparent 60%);
filter: blur(1.5px);
}
.shelf .scene .silhouette.two{
width: 72%; height: 46%;
background:
radial-gradient(ellipse 35% 80% at 30% 80%, #1d1208 0%, #1d1208 55%, transparent 60%),
radial-gradient(ellipse 30% 60% at 70% 85%, #1d1208 0%, #1d1208 55%, transparent 60%);
}
.shelf .label{
padding: 10px 8px 12px;
background: var(--cream-card);
text-align: center;
}
.shelf .label .era{
font-family:'Yeseva One', serif;
font-size: 21px;
line-height: 1;
color: var(--ink);
letter-spacing: -.3px;
white-space: nowrap;
}
.shelf .label .count{
font-family:'Caveat', cursive;
font-size: 16px;
color: var(--ink-soft);
margin-top: 4px;
line-height: 1.1;
}
.shelf .corner-tape{
position:absolute; top:-10px; left:18px; z-index: 3;
width:60px; height:18px;
background:linear-gradient(180deg,#f3d27aee,#e0b85faa);
transform:rotate(-12deg);
box-shadow: inset 0 0 0 1px #00000020;
}
.shelf:nth-child(2n) .corner-tape{ background:linear-gradient(180deg,#c9d99fee,#aac282aa); left:auto; right: 22px; transform:rotate(10deg); }
.shelf:nth-child(3n) .corner-tape{ background:linear-gradient(180deg,#e89e8aee,#cf7a64aa); }
/* Фоны "десятилетий" — мягкие тёплые градиенты */
.shelf.e50 .scene{ background: radial-gradient(circle at 50% 70%, #f0d99a 0%, #b88b3a 60%, #5e3e15 100%); }
.shelf.e60 .scene{ background: radial-gradient(circle at 50% 70%, #f1b6a0 0%, #b15a4d 55%, #4b1f1a 100%); }
.shelf.e70 .scene{ background: radial-gradient(circle at 50% 60%, #d4d2c4 0%, #8aa0a5 50%, #3c5566 100%); }
.shelf.e80 .scene{ background: radial-gradient(circle at 50% 60%, #dde0a4 0%, #6b8a4a 55%, #21331c 100%); }
.shelf.e90 .scene{ background: radial-gradient(circle at 50% 55%, #e2c2dc 0%, #876191 55%, #3a1f3f 100%); }
/* ---------- Категории-стикеры ---------- */
.moods{
margin-top: 22px;
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.mood{
position:relative;
border:2.5px solid var(--ink);
border-radius: 22px;
padding: 22px 22px 20px;
box-shadow: 5px 6px 0 var(--ink);
text-decoration:none;
color: var(--ink);
background: var(--cream-card);
transition: transform .14s ease, box-shadow .14s ease;
min-height: 158px;
display:flex; flex-direction: column;
justify-content: space-between;
}
.mood:hover{ transform: translate(-2px,-3px) rotate(-1.5deg); box-shadow: 7px 9px 0 var(--ink); }
.mood:nth-child(1){ background:#fbe9b8; transform: rotate(-1.4deg); }
.mood:nth-child(2){ background:#dfe6c5; transform: rotate(.8deg); }
.mood:nth-child(3){ background:#f3dccf; transform: rotate(-.6deg); }
.mood:nth-child(4){ background:#cdd9e3; transform: rotate(1.5deg); }
.mood:nth-child(5){ background:#f8e3a4; transform: rotate(1.1deg); }
.mood:nth-child(6){ background:#f4b8a4; transform: rotate(-1.2deg); }
.mood:nth-child(7){ background:#e8d9b0; transform: rotate(.6deg); }
.mood:nth-child(8){ background:#cfe0a4; transform: rotate(-1.8deg); }
.mood .glyph{
width: 60px; height: 60px;
border-radius: 50%;
background: var(--cream-card);
border: 2.5px solid var(--ink);
box-shadow: 3px 3px 0 var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size: 30px;
color: var(--brick);
margin-bottom: 10px;
}
.mood:nth-child(2) .glyph{ color: var(--moss); }
.mood:nth-child(3) .glyph{ color: var(--plum); }
.mood:nth-child(4) .glyph{ color: var(--sky); }
.mood:nth-child(5) .glyph{ color: var(--brick); }
.mood:nth-child(6) .glyph{ color: var(--ink); }
.mood:nth-child(7) .glyph{ color: var(--moss); }
.mood:nth-child(8) .glyph{ color: var(--plum); }
.mood .name{
font-family:'Yeseva One', serif;
font-size: 22px;
line-height: 1.05;
margin: 0 0 2px;
}
.mood .hint{
font-family:'Caveat', cursive;
font-size: 18px;
color: var(--ink-soft);
line-height: 1.2;
margin-top: 2px;
}
.mood .count{
margin-top: 14px;
font-family:'Caveat', cursive;
font-size: 17px;
color: var(--ink);
display:inline-flex; align-items:center; gap: 4px;
}
.mood .count b{
font-family:'Yeseva One', serif;
color: var(--brick);
font-size: 22px;
font-weight: normal;
margin-right: 4px;
}
/* ---------- Подборки ---------- */
.collections{
margin-top: 26px;
display:grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 20px;
}
.coll{
position:relative;
background:var(--cream-card);
border:2.5px solid var(--ink);
border-radius: 22px;
box-shadow: 7px 8px 0 var(--ink);
text-decoration: none;
color: var(--ink);
overflow: hidden;
display:flex; flex-direction: column;
transition: transform .14s ease, box-shadow .14s ease;
}
.coll:hover{ transform: translate(-2px,-3px) rotate(-.8deg); box-shadow: 9px 10px 0 var(--ink); }
.coll:nth-child(1){ transform: rotate(-1.2deg); background: #fbe9b8; }
.coll:nth-child(2){ transform: rotate(.8deg); background: #dfe6c5; }
.coll:nth-child(3){ transform: rotate(-.6deg); background: #f3dccf; }
.coll .cover{
aspect-ratio: 5/3;
border-bottom: 2.5px solid var(--ink);
position:relative;
overflow:hidden;
}
.coll .cover::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 50%, #00000048);
}
.coll:nth-child(1) .cover{ background:
radial-gradient(circle at 70% 65%, #ffd789 0%, #b67427 60%, #4d2810 100%); }
.coll:nth-child(2) .cover{ background:
radial-gradient(circle at 40% 60%, #3f5c66 0%, #1f3038 55%, #0e1819 100%); }
.coll:nth-child(3) .cover{ background:
radial-gradient(circle at 55% 60%, #dec0a8 0%, #a06441 55%, #4b231a 100%); }
.coll .cover .silhouette{
position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
width:50%; height:46%;
background: radial-gradient(ellipse at 50% 80%, #1d1208 0%, #1d1208 55%, transparent 60%);
filter:blur(1.2px);
}
.coll .cover .stars{
position:absolute; inset:0;
background:
radial-gradient(circle at 20% 20%, #fff8db 1.5px, transparent 2.5px),
radial-gradient(circle at 65% 18%, #fff8db 1.5px, transparent 2.5px),
radial-gradient(circle at 82% 33%, #fff8db 1.5px, transparent 2.5px),
radial-gradient(circle at 30% 35%, #fff8db 1.2px, transparent 2.2px),
radial-gradient(circle at 50% 12%, #fff8db 1.5px, transparent 2.5px);
opacity: .9;
}
.coll .cover .badge-coll{
position:absolute; top:10px; left:12px;
background: var(--cream-card);
border:2px solid var(--ink); border-radius: 14px;
padding: 3px 10px 4px;
font-family:'Caveat', cursive; font-size: 16px;
color: var(--ink);
transform: rotate(-3deg);
box-shadow: 2px 2px 0 var(--ink);
z-index: 2;
}
.coll .cover .cover-title{
position:absolute; left:18px; bottom:14px;
font-family:'Marck Script', cursive;
color: #fff8db;
font-size: 28px; line-height: 1.1;
text-shadow: 2px 2px 0 #00000060;
transform: rotate(-2deg);
z-index: 2;
max-width: 80%;
}
.coll .body{
padding: 16px 18px 18px;
}
.coll .body p{
margin: 0 0 12px;
font-family:'Alegreya', serif; font-size: 16px;
color: var(--ink);
line-height: 1.45;
}
.coll .meta-row{
display:flex; align-items:center; justify-content: space-between;
margin-top: 8px;
}
.coll .meta-row .count{
font-family:'Caveat', cursive;
font-size: 18px;
color: var(--ink-soft);
}
.coll .meta-row .count b{ color: var(--brick); font-weight: 700; }
.coll .meta-row .arr{
font-family:'Yeseva One', serif;
color: var(--brick);
font-size: 18px;
}
/* ---------- «Свежее в каталоге» — небольшой ряд ---------- */
.fresh-row{
margin-top: 22px;
display:grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
.fresh{
position:relative;
background:var(--cream-card);
border:2.5px solid var(--ink);
border-radius:14px;
padding: 8px 8px 12px;
box-shadow: 4px 5px 0 var(--ink);
text-decoration:none; color: var(--ink);
transition: transform .14s ease;
}
.fresh:hover{ transform: translate(-1px,-2px) rotate(-1deg); }
.fresh:nth-child(1){ transform: rotate(-1.2deg); }
.fresh:nth-child(2){ transform: rotate(.8deg); }
.fresh:nth-child(3){ transform: rotate(-.6deg); }
.fresh:nth-child(4){ transform: rotate(1.4deg); }
.fresh:nth-child(5){ transform: rotate(-1.6deg); }
.fresh .pic{
aspect-ratio: 4/3;
border-radius: 8px;
border: 2px solid var(--ink);
overflow:hidden;
position:relative;
}
.fresh .pic::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 65%, #00000035);
}
.fresh .pic .silhouette{
position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
width:46%; height:42%;
background: radial-gradient(ellipse at 50% 80%, #1d1208 0%, #1d1208 55%, transparent 60%);
filter:blur(1px);
}
.fresh .pic.f1{ background: radial-gradient(circle at 40% 55%, #e8c6a0 0%, #a4763d 55%, #4b2c10 100%); }
.fresh .pic.f2{ background: radial-gradient(circle at 55% 40%, #b5cba6 0%, #517451 55%, #1c3322 100%); }
.fresh .pic.f3{ background: radial-gradient(circle at 50% 60%, #f6cf94 0%, #b86934 55%, #4a200c 100%); }
.fresh .pic.f4{ background: radial-gradient(circle at 60% 50%, #d7ced7 0%, #7e6f87 55%, #2d1f33 100%); }
.fresh .pic.f5{ background: radial-gradient(circle at 40% 50%, #d9c98a 0%, #8e6b3d 55%, #2c1c0f 100%); }
.fresh .pic .new-stamp{
position:absolute; top: 8px; right: -6px;
background: var(--brick); color: #fff7d6;
border: 2px solid var(--ink); border-radius: 14px;
padding: 2px 9px 3px;
font-family:'Caveat', cursive; font-size: 14px;
transform: rotate(10deg);
box-shadow: 2px 2px 0 var(--ink);
z-index: 2;
}
.fresh .name{
font-family:'Yeseva One', serif;
font-size: 18px;
line-height: 1.05;
margin: 10px 4px 4px;
color: var(--ink);
}
.fresh .meta-line{
display:flex; justify-content:space-between; align-items:baseline;
padding: 0 4px;
font-family:'Caveat', cursive; font-size: 16px;
color: var(--ink-soft);
}
.fresh .meta-line .year{ color: var(--brick); font-weight: 700; font-size: 17px; }
/* ---------- Облако меток ---------- */
.tag-cloud-wrap{
margin-top: 22px;
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 24px;
padding: 28px 28px 26px;
box-shadow: 7px 8px 0 var(--ink);
position: relative;
transform: rotate(-.4deg);
}
.tag-cloud-wrap::before{
content:""; position:absolute; top:-12px; left:36px;
width:80px; height:20px;
background: repeating-linear-gradient(135deg,#f0c97a 0 8px,#e6b85e 8px 16px);
border:1.5px solid #00000020;
transform: rotate(-5deg);
box-shadow: 0 2px 2px #00000018;
}
.tag-cloud-wrap::after{
content:""; position:absolute; top:-10px; right:50px;
width:64px; height:18px;
background: repeating-linear-gradient(135deg,#cfdfa6 0 8px,#b9cd87 8px 16px);
border:1.5px solid #00000020;
transform: rotate(8deg);
box-shadow: 0 2px 2px #00000018;
}
.tag-cloud{
display:flex; flex-wrap:wrap; gap: 10px 12px;
align-items: baseline;
}
.tag-cloud a{
display:inline-flex; align-items:baseline; gap: 4px;
padding: 6px 14px 8px;
border: 2px solid var(--ink);
border-radius: 22px;
background: var(--paper-soft);
text-decoration: none;
color: var(--ink);
font-family:'Alegreya', serif; font-weight: 500;
box-shadow: 2px 3px 0 var(--ink);
transition: transform .12s ease, box-shadow .12s ease;
line-height: 1.1;
}
.tag-cloud a::before{
content:"#";
font-family:'Yeseva One', serif;
color: var(--brick);
margin-right: 2px;
}
.tag-cloud a:hover{ transform: translate(-1px,-2px) rotate(-1.5deg); box-shadow: 3px 5px 0 var(--ink); }
.tag-cloud a .c{
font-family:'Caveat', cursive;
font-size: .82em;
color: var(--ink-soft);
margin-left: 4px;
font-weight: 400;
}
/* Размеры — для облака */
.tag-cloud a.xs{ font-size: 14px; }
.tag-cloud a.sm{ font-size: 16px; }
.tag-cloud a.md{ font-size: 19px; }
.tag-cloud a.lg{ font-size: 23px; }
.tag-cloud a.xl{ font-size: 28px; }
/* Чередование цветов */
.tag-cloud a:nth-child(7n+1){ background:#fbe9b8; transform:rotate(-1.2deg); }
.tag-cloud a:nth-child(7n+2){ background:#dfe6c5; transform:rotate(.9deg); }
.tag-cloud a:nth-child(7n+3){ background:#f3dccf; transform:rotate(-.6deg); }
.tag-cloud a:nth-child(7n+4){ background:#cdd9e3; transform:rotate(1.4deg); }
.tag-cloud a:nth-child(7n+5){ background:#f8e3a4; transform:rotate(-1.8deg); }
.tag-cloud a:nth-child(7n+6){ background:#f4b8a4; transform:rotate(.7deg); }
.tag-cloud a:nth-child(7n+7){ background:#e8d9b0; transform:rotate(-.9deg); }
/* ---------- Письма зрителей (последние комментарии) ---------- */
.letters{
margin-top: 22px;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.letter{
position:relative;
padding: 22px 22px 18px;
border: 2.5px solid var(--ink);
border-radius: 18px;
box-shadow: 5px 6px 0 var(--ink);
font-family:'Alegreya', serif; font-size: 17px;
background: var(--cream-card);
}
.letter::before{
content:""; position:absolute;
width: 56px; height: 18px;
top: -9px; left: 22%;
background: linear-gradient(180deg,#ffffffaa,#ffffff55);
border: 1px solid #00000018;
transform: rotate(-6deg);
}
.letter:nth-child(1){ background: #fbe9b8; transform: rotate(-1.5deg); }
.letter:nth-child(2){ background: #dfe6c5; transform: rotate(1deg); }
.letter:nth-child(3){ background: #f3dccf; transform: rotate(-.6deg); }
.letter:nth-child(4){ background: #cdd9e3; transform: rotate(.9deg); }
.letter:nth-child(5){ background: #f8e3a4; transform: rotate(-1.2deg); }
.letter:nth-child(6){ background: #f4b8a4; transform: rotate(.5deg); }
.letter .head{
display:flex; align-items:center; gap: 10px;
margin-bottom: 10px;
font-family:'Yeseva One', serif; font-size: 17px;
}
.letter .head .ava{
width: 42px; height: 42px; border-radius: 50%;
border: 2px solid var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size: 19px;
color: #fff;
flex: none;
}
.letter .head .when{
margin-left: auto;
font-family:'Caveat', cursive; font-size: 17px;
color: var(--ink-soft);
font-weight: 400;
}
.letter:nth-child(1) .ava{ background: var(--brick); }
.letter:nth-child(2) .ava{ background: var(--moss); }
.letter:nth-child(3) .ava{ background: var(--plum); }
.letter:nth-child(4) .ava{ background: var(--sky); }
.letter:nth-child(5) .ava{ background: var(--honey); color: var(--ink); }
.letter:nth-child(6) .ava{ background: var(--ink); }
.letter p{ margin: 0; }
.letter .about{
margin-top: 12px;
padding-top: 10px;
border-top: 1.5px dotted #00000040;
font-family:'Caveat', cursive; font-size: 17px;
color: var(--ink-soft);
}
.letter .about a{
color: var(--brick);
font-family:'Alegreya', serif; font-weight: 700; font-size: 16px;
text-decoration: none;
border-bottom: 1.5px dotted var(--brick);
}
.letter .heart-row{
margin-top: 8px;
font-family:'Caveat', cursive;
font-size: 17px;
color: var(--brick);
display: inline-block;
}
.letter .heart-row b{ color: var(--brick); }
/* ---------- Студии и режиссёры ---------- */
.makers{
margin-top: 22px;
display:grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.maker-block{
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 22px;
box-shadow: 6px 7px 0 var(--ink);
padding: 24px 26px 22px;
position: relative;
}
.maker-block:nth-child(1){ transform: rotate(-.6deg); background: #fff7e0; }
.maker-block:nth-child(2){ transform: rotate(.7deg); background: #fdf3d2; }
.maker-block h3{
font-family:'Yeseva One', serif;
font-size: 28px;
margin: 0 0 8px;
line-height: 1;
}
.maker-block .small{
font-family:'Caveat', cursive;
font-size: 19px;
color: var(--ink-soft);
margin-bottom: 14px;
display: block;
}
.maker-list{
display:flex; flex-direction: column; gap: 10px;
}
.maker-row{
display:flex; align-items: center; gap: 12px;
padding: 8px 10px;
border-radius: 14px;
text-decoration: none;
color: var(--ink);
font-family:'Alegreya', serif;
transition: background .14s ease;
}
.maker-row:hover{ background: #f7e0a8; }
.maker-row .bullet{
width: 38px; height: 38px; border-radius: 50%;
background: var(--moss);
border: 2px solid var(--ink);
color: #fff7d6;
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size: 17px;
flex: none;
box-shadow: 2px 2px 0 var(--ink);
}
.maker-row:nth-child(2) .bullet{ background: var(--brick); }
.maker-row:nth-child(3) .bullet{ background: var(--plum); }
.maker-row:nth-child(4) .bullet{ background: var(--honey); color: var(--ink); }
.maker-row:nth-child(5) .bullet{ background: var(--sky); }
.maker-row .info{
flex: 1; min-width: 0;
}
.maker-row .info .who{
font-family:'Yeseva One', serif;
font-size: 19px;
line-height: 1.1;
}
.maker-row .info .what{
font-family:'Caveat', cursive;
font-size: 16px;
color: var(--ink-soft);
margin-top: 1px;
}
.maker-row .count-pill{
font-family:'Caveat', cursive;
font-size: 17px;
color: var(--ink-soft);
border: 1.5px dotted var(--ink);
padding: 1px 8px 2px;
border-radius: 12px;
flex: none;
}
.maker-row .count-pill b{
color: var(--brick);
font-family:'Yeseva One', serif;
font-weight: normal;
margin-right: 2px;
}
.maker-foot{
margin-top: 12px;
padding-top: 10px;
border-top: 2px dotted var(--ink);
text-align: right;
}
.maker-foot a{
font-family:'Caveat', cursive;
font-size: 19px;
color: var(--brick);
text-decoration: none;
}
.maker-foot a:hover{ color: var(--plum); }
/* ---------- Полоска «этот день» ---------- */
.onthisday{
margin-top: 80px;
background: #f8e3a4;
border: 2.5px solid var(--ink);
border-radius: 24px;
box-shadow: 8px 9px 0 var(--ink);
padding: 22px 26px 24px;
transform: rotate(.4deg);
display:grid;
grid-template-columns: auto 1fr auto;
gap: 22px;
align-items: center;
position: relative;
}
.onthisday::after{
content:"22 мая";
position:absolute;
top: -16px; right: 28px;
background: var(--brick); color: #fff7d6;
border: 2px solid var(--ink); border-radius: 14px;
padding: 3px 12px 4px;
font-family:'Caveat', cursive; font-size: 17px;
transform: rotate(-3deg);
box-shadow: 2px 2px 0 var(--ink);
}
.onthisday .cal{
width: 92px; height: 92px;
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 14px;
display:grid; grid-template-rows: 28px 1fr;
overflow: hidden;
box-shadow: 3px 4px 0 var(--ink);
transform: rotate(-3deg);
flex: none;
}
.onthisday .cal .month{
background: var(--brick); color: #fff7d6;
font-family:'Yeseva One', serif;
font-size: 16px;
display:grid; place-items:center;
border-bottom: 2px solid var(--ink);
}
.onthisday .cal .day{
display:grid; place-items:center;
font-family:'Yeseva One', serif;
font-size: 38px;
color: var(--ink);
}
.onthisday .text h3{
font-family:'Yeseva One', serif;
font-size: 24px;
margin: 0 0 4px;
line-height: 1.1;
}
.onthisday .text p{
margin: 0;
font-family:'Alegreya', serif;
font-size: 16px;
color: var(--ink);
line-height: 1.45;
}
.onthisday .text p b{ color: var(--brick); font-weight: 700; }
.onthisday .cta{
display:inline-flex; align-items:center; gap: 8px;
padding: 10px 18px 11px;
border: 2.5px solid var(--ink);
border-radius: 22px;
background: var(--moss); color: #fff8db;
font-family:'Alegreya', serif; font-weight: 700; font-size: 16px;
text-decoration: none;
box-shadow: 3px 4px 0 var(--ink);
transform: rotate(2deg);
white-space: nowrap;
}
.onthisday .cta:hover{ transform: rotate(-1deg) translateY(-1px); }
/* ---------- Подвал (тот же) ---------- */
footer{
margin-top:80px;
padding:30px 26px 26px;
background:var(--cream-card);
border:2.5px solid var(--ink);
border-radius:28px;
box-shadow:6px 7px 0 var(--ink);
display:grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap:30px;
position:relative;
}
footer h4{ font-family:'Yeseva One', serif; font-size:22px; margin:0 0 10px; }
footer ul{ list-style:none; padding:0; margin:0; font-family:'Alegreya', serif; font-size:17px; }
footer ul li{ padding:3px 0; }
footer ul a{ color:var(--ink); text-decoration:none; }
footer ul a:hover{ color:var(--brick); }
footer .signoff{ font-family:'Caveat', cursive; font-size:21px; color:var(--ink-soft); margin-top:8px; }
footer .stamp{
position:absolute; right:-12px; top:-22px;
width:84px; height:84px; border-radius:50%;
background:var(--brick); color:#fff7d6;
border:2.5px solid var(--ink);
display:grid; place-items:center; text-align:center;
font-family:'Yeseva One', serif; font-size:14px; line-height:1.05;
transform:rotate(-12deg);
box-shadow:4px 4px 0 var(--ink);
}
footer .stamp::after{ content:""; position:absolute; inset:5px; border:2px dashed #ffffff80; border-radius:50%; }
/* ---------- Декор ---------- */
.decor{ position:absolute; pointer-events:none; }
/* ---------- Мега-меню и поиск ---------- */
.mega, .search-panel{
position:fixed; inset:0; z-index:50; display:none;
overflow-y:auto; padding-bottom: 40px;
background: radial-gradient(900px 600px at 30% 0%, #fff8dc 0%, #f3dfb088 60%, transparent 80%), #00000040;
backdrop-filter: blur(3px);
}
.mega.open, .search-panel.open{ display:block; animation: fadeIn .25s ease both; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes dropIn{ from{ transform: rotate(-.3deg) translateY(-30px); opacity:0 } to{ transform: rotate(-.3deg) translateY(0); opacity:1 } }
.mega-sheet, .search-sheet{
max-width: 1080px;
margin: 36px auto 0;
background: var(--cream-card);
border:2.5px solid var(--ink);
border-radius: 28px;
box-shadow: 10px 14px 0 var(--ink);
padding: 30px 40px 36px;
position:relative;
transform: rotate(-.3deg);
animation: dropIn .35s cubic-bezier(.4,1.6,.4,1) both;
}
.mega-sheet .close, .search-sheet .close{
position:absolute; right:-14px; top:-18px;
width:46px; height:46px; border-radius:50%;
background: var(--brick); color:#fff7d6;
border:2.5px solid var(--ink);
box-shadow:3px 4px 0 var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size:22px;
cursor:pointer; transform: rotate(8deg);
}
.mega-sheet .top-line{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; border-bottom: 3px dotted var(--ink); padding-bottom: 14px; flex-wrap:wrap; }
.mega-sheet .top-line h3{ font-family:'Yeseva One', serif; font-size: 38px; margin:0; line-height:1; }
.mega-sheet .top-line .sub{ font-family:'Caveat', cursive; font-size:22px; color: var(--ink-soft); transform: rotate(-1.5deg); }
.mega-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px 36px; }
.mega-col h4{ font-family:'Caveat', cursive; font-size: 24px; color: var(--brick); margin: 0 0 8px; }
.mega-col h4 .dot{ display:inline-block; width: 8px; height: 8px; background: var(--moss); border:1.5px solid var(--ink); border-radius: 50%; margin-right: 6px; transform: translateY(-2px); }
.mega-col ul{ list-style:none; padding:0; margin:0; font-family:'Alegreya', serif; font-size: 16px; }
.mega-col li{ padding: 3px 0; }
.mega-col a{ color: var(--ink); text-decoration: none; border-bottom: 1.5px dotted transparent; }
.mega-col a:hover{ color: var(--brick); border-bottom-color: var(--brick); }
.mega-col a .pill{ display:inline-block; background: #f8e3a4; border:1.5px solid var(--ink); border-radius: 10px; padding: 1px 6px; font-size: 13px; margin-left: 4px; color: var(--ink-soft); }
.mega-footer{
margin-top: 26px;
padding-top: 18px;
border-top: 3px dotted var(--ink);
display:flex; gap: 14px; flex-wrap:wrap; align-items:center;
}
.mega-footer .featured{
font-family:'Caveat', cursive;
font-size: 22px;
color: var(--ink-soft);
margin-right: 8px;
}
.mega-footer .chip{
display:inline-flex; align-items:center; gap:6px;
background: #dfe6c5;
border:2px solid var(--ink);
border-radius: 18px;
padding: 6px 12px 7px;
font-family:'Alegreya', serif; font-size: 15px;
color: var(--ink);
text-decoration: none;
box-shadow: 2px 2px 0 var(--ink);
}
.mega-footer .chip:nth-child(odd){ background: #f3dccf; transform: rotate(-1deg); }
.mega-footer .chip:nth-child(3n){ background: #fbe9b8; transform: rotate(1.2deg); }
/* Поиск-панель */
.search-sheet{ max-width: 880px; padding: 30px 36px 32px; transform: rotate(-.4deg); }
.search-sheet .lead{
font-family:'Caveat', cursive; font-size:24px; color:var(--ink-soft);
transform:rotate(-1deg); display:inline-block; margin-bottom:6px;
}
.search-sheet .lead .star{ color:var(--brick); }
.search-field{ display:flex; align-items:center; gap:14px; border-bottom: 3px dotted var(--ink); padding: 10px 6px 16px; }
.search-field .glass{ width:50px; height:50px; flex:none; display:grid; place-items:center; }
.search-field input{
flex:1; border:none; outline:none; background:transparent;
font-family:'Marck Script', cursive; font-size:38px; color:var(--ink); padding: 0;
}
.search-field input::placeholder{ color:#a07a4f; }
.search-field .go{
background: var(--moss); color:#fff8db;
border:2.5px solid var(--ink); box-shadow:3px 4px 0 var(--ink);
padding: 10px 20px; border-radius:24px;
font-family:'Alegreya', serif; font-weight:700; font-size:16px;
cursor:pointer; transform: rotate(2deg);
}
.search-hints{ margin-top: 22px; display:grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; }
.search-hints h5{ margin:0 0 10px; font-family:'Caveat', cursive; font-size: 22px; color: var(--brick); font-weight: 600; }
.search-hints .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.search-hints .chip{
border:2px solid var(--ink); border-radius:18px;
padding:5px 12px 6px; background:#fbe9b8;
box-shadow:2px 2px 0 var(--ink);
font-family:'Alegreya', serif; font-size:15px;
text-decoration:none; color:var(--ink); cursor:pointer;
}
.search-hints .chip:nth-child(3n+2){ background:#dfe6c5; transform:rotate(-1deg); }
.search-hints .chip:nth-child(3n+3){ background:#f3dccf; transform:rotate(1.2deg); }
.search-hints .recent{ display:flex; flex-direction:column; gap:6px; font-family:'Alegreya', serif; font-size:16px; }
.search-hints .recent a{ color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px; padding:3px 0; }
.search-hints .recent a::before{ content:"↻"; color:var(--ink-soft); font-size:18px; }
/* ---------- Адаптив ---------- */
@media (max-width: 1080px){
.hero{ grid-template-columns: 1fr; }
.shelves{ grid-template-columns: repeat(3, 1fr); }
.fresh-row{ grid-template-columns: repeat(3, 1fr); }
.collections{ grid-template-columns: 1fr 1fr; }
.letters{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px){
h1{ font-size: 48px !important; }
.moods{ grid-template-columns: repeat(2, 1fr); }
.shelves{ grid-template-columns: repeat(2, 1fr); }
.fresh-row{ grid-template-columns: repeat(2, 1fr); }
.collections{ grid-template-columns: 1fr; }
.letters{ grid-template-columns: 1fr; }
.makers{ grid-template-columns: 1fr; }
.onthisday{ grid-template-columns: 1fr; text-align: center; }
.onthisday .cta{ justify-self: center; }
.onthisday .cal{ justify-self: center; }
footer{ grid-template-columns: 1fr; }
.greet .stats{ grid-template-columns: repeat(3, 1fr); }
}
/* ========================================================================
АРХИВ / ТАКСОНОМИЯ (stat, sub-chips, toolbar, catalog, item, pagination)
======================================================================== */
.stat{
position:relative;
border:2.5px solid var(--ink);
border-radius: 20px;
padding: 16px 18px 18px;
background: var(--cream-card);
box-shadow: 4px 5px 0 var(--ink);
}
.stat:nth-child(1){ background:#fbe9b8; transform:rotate(-1.4deg); }
.stat:nth-child(2){ background:#dfe6c5; transform:rotate(.8deg); }
.stat:nth-child(3){ background:#f3dccf; transform:rotate(1.2deg); }
.stat:nth-child(4){ background:#cdd9e3; transform:rotate(-.6deg); }
.stat .k{
font-family:'Caveat', cursive; font-size: 20px;
color: var(--brick);
}
.stat .v{
font-family:'Yeseva One', serif; font-size: 38px;
line-height: 1; color: var(--ink);
margin-top: 4px;
}
.stat .x{
font-family:'Caveat', cursive; font-size: 16px;
color: var(--ink-soft); margin-top: 4px;
}
/* ---------- Sub-chips: подкатегории ---------- */
.sub-chips{
margin: 44px 4px 0;
display:flex; align-items:center; gap: 14px;
flex-wrap:wrap;
}
.sub-chips .label{
font-family:'Caveat', cursive; font-size: 24px;
color: var(--ink-soft);
transform: rotate(-2deg);
}
.sub-chips .label .arrow{ color: var(--brick); margin-right: 4px; }
.chip-row{ display:flex; flex-wrap:wrap; gap: 10px; }
.chip-row a{
display:inline-flex; align-items:center; gap:8px;
border:2px solid var(--ink); border-radius: 22px;
padding: 7px 14px 8px;
background: var(--cream-card);
font-family:'Alegreya', serif; font-weight:500; font-size:16px;
color: var(--ink); text-decoration: none;
box-shadow: 2px 3px 0 var(--ink);
transition: transform .12s ease;
}
.chip-row a:hover{ transform: translate(-1px,-2px) rotate(-1.5deg); box-shadow: 3px 5px 0 var(--ink); }
.chip-row a.active{
background: var(--moss); color: #fff7d6;
transform: rotate(-1.5deg);
}
.chip-row a .count{ font-family:'Caveat', cursive; font-size: 17px; color: var(--ink-soft); }
.chip-row a.active .count{ color: #fff7d6; opacity: .9; }
.sub-chips.collapsed .chip-row > a:nth-child(n+6){ display: none; }
.chip-more{
display:inline-flex; align-items:center; gap:6px;
border:2px dashed var(--ink); border-radius: 22px;
padding: 6px 14px 7px;
background: transparent;
font-family:'Caveat', cursive; font-size:18px;
color: var(--ink);
cursor: pointer;
transition: transform .12s ease;
}
.chip-more:hover{ transform: translate(-1px,-2px) rotate(-2deg); background:#fff7d6; }
.chip-more .arr{ transition: transform .2s ease; }
.sub-chips:not(.collapsed) .chip-more .arr{ transform: rotate(180deg); }
/* ---------- Сортировка ---------- */
.toolbar{
margin-top: 38px;
display:flex; align-items:center; justify-content:flex-end;
gap: 18px; flex-wrap:wrap;
padding-bottom: 14px;
border-bottom: 3px dotted var(--ink);
}
.toolbar h2{
font-family:'Yeseva One', serif;
font-size: 34px;
margin: 0;
position:relative;
}
.toolbar h2::after{
content:""; position:absolute; left:6px; right:-6px; bottom:-2px; height:12px;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size:100% 100%;
}
.sort-block{
display:flex; align-items:center; gap: 14px; flex-wrap:wrap;
font-family:'Caveat', cursive; font-size: 22px;
color: var(--ink-soft);
}
.sort-block .sorts{
display:flex; gap: 8px;
}
.sort-block .sorts a{
text-decoration:none;
color: var(--ink);
font-family:'Alegreya', serif; font-weight:500; font-size: 16px;
border:2px solid var(--ink); border-radius: 18px;
padding: 5px 12px 6px;
background: var(--cream-card);
box-shadow: 2px 2px 0 var(--ink);
cursor:pointer;
}
.sort-block .sorts a.active{
background: var(--honey);
transform: rotate(-1deg);
}
.sort-block .sorts a:hover{ transform: translate(-1px,-1px) rotate(-1.5deg); box-shadow: 3px 3px 0 var(--ink); }
/* ---------- Каталог ---------- */
.catalog{
margin-top: 28px;
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px 22px;
}
.item{
position:relative;
background:var(--cream-card);
border:2.5px solid var(--ink);
border-radius:16px;
padding:10px 10px 16px;
box-shadow:5px 7px 0 var(--ink);
text-decoration:none; color:var(--ink);
display:block;
transition: transform .14s ease, box-shadow .14s ease;
}
.item:hover{
transform: translate(-2px,-3px) rotate(-1deg);
box-shadow: 7px 9px 0 var(--ink);
}
/* небольшие повороты для рукотворности */
.item:nth-child(8n+1){ transform: rotate(-1.5deg); }
.item:nth-child(8n+2){ transform: rotate(1.2deg); }
.item:nth-child(8n+3){ transform: rotate(-.6deg); }
.item:nth-child(8n+4){ transform: rotate(1.8deg); }
.item:nth-child(8n+5){ transform: rotate(1.4deg); }
.item:nth-child(8n+6){ transform: rotate(-1.1deg); }
.item:nth-child(8n+7){ transform: rotate(.8deg); }
.item:nth-child(8n+8){ transform: rotate(-2deg); }
.item .pic{
aspect-ratio: 4/3;
border-radius: 10px;
border:2px solid var(--ink);
overflow:hidden;
position:relative;
}
.item .play-mark{
position:absolute;
left:50%; top:50%;
transform: translate(-50%,-50%);
width:54px; height:54px;
border-radius:50%;
background: var(--brick);
border:2.5px solid var(--ink);
box-shadow: 3px 4px 0 #00000055;
display:grid; place-items:center;
z-index:2;
transition: transform .15s ease, box-shadow .15s ease;
}
.item .play-mark .tri{
width:0; height:0;
border-left: 16px solid var(--paper-soft);
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
margin-left: 5px;
filter: drop-shadow(0 1px 0 #00000035);
}
.item:hover .play-mark{
transform: translate(-50%,-50%) scale(1.1) rotate(-4deg);
box-shadow: 4px 6px 0 #00000060;
}
.item .pic::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 60%, #00000030);
}
.item .pic .silhouette{
position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
width:46%; height:42%;
background: radial-gradient(ellipse at 50% 80%, #1d1208 0%, #1d1208 55%, transparent 60%);
filter:blur(1px);
}
/* 12 цветовых схем "обложек" */
.pic.s1{ background: radial-gradient(circle at 30% 70%, #f6c785 0%, #b56e36 60%, #5a2f12 100%); }
.pic.s2{ background: radial-gradient(circle at 60% 40%, #a8c79c 0%, #4f7547 60%, #1f3621 100%); }
.pic.s3{ background: radial-gradient(circle at 40% 50%, #d4d2c4 0%, #8aa0a5 50%, #3c5566 100%); }
.pic.s4{ background: radial-gradient(circle at 50% 60%, #f2cb6a 0%, #c87a3b 55%, #6b3015 100%); }
.pic.s5{ background: radial-gradient(circle at 30% 30%, #f1b6a0 0%, #b15a4d 55%, #4b1f1a 100%); }
.pic.s6{ background: radial-gradient(circle at 55% 65%, #ddd5a0 0%, #8a8b46 55%, #2e3a16 100%); }
.pic.s7{ background: radial-gradient(circle at 50% 40%, #d8e2e7 0%, #6e8aa1 55%, #243747 100%); }
.pic.s8{ background: radial-gradient(circle at 45% 60%, #e8ad62 0%, #a25426 55%, #4a200c 100%); }
.pic.s9{ background: radial-gradient(circle at 40% 45%, #cdc6a3 0%, #826e3a 55%, #2c2110 100%); }
.pic.s10{ background: radial-gradient(circle at 50% 60%, #f4b48c 0%, #c2643a 55%, #4f1f0e 100%); }
.pic.s11{ background: radial-gradient(circle at 60% 50%, #c8d7d0 0%, #5a766c 55%, #1c2e26 100%); }
.pic.s12{ background: radial-gradient(circle at 50% 55%, #e1c79a 0%, #a07a3d 55%, #3d2a14 100%); }
.item .corner-tape{
position:absolute; top:-10px; left:18px;
width:60px; height:18px;
background:linear-gradient(180deg,#f3d27aee,#e0b85faa);
transform:rotate(-12deg);
box-shadow: inset 0 0 0 1px #00000020;
}
.item:nth-child(3n+2) .corner-tape{ background:linear-gradient(180deg,#c9d99fee,#aac282aa); transform:rotate(10deg); left:auto; right: 22px; }
.item:nth-child(3n+3) .corner-tape{ background:linear-gradient(180deg,#e89e8aee,#cf7a64aa); transform:rotate(-7deg); }
.item .name{
font-family:'Yeseva One', serif;
font-size: 22px;
line-height: 1.05;
margin: 12px 4px 4px;
color: var(--ink);
text-wrap: balance;
}
.item .meta-line{
display:flex; justify-content:space-between; align-items:baseline;
padding: 0 4px;
font-family:'Caveat', cursive; font-size: 18px;
color: var(--ink-soft);
}
.item .meta-line .year{ color: var(--brick); font-weight: 700; font-size: 19px; }
.item .footer-line{
display:flex; justify-content:space-between; align-items:center;
padding: 6px 4px 0;
font-family:'Alegreya', serif; font-size: 14px; color: var(--ink-soft);
}
.item .heart{
display:inline-flex; align-items:center; gap: 4px;
border-radius: 14px;
border:2px solid var(--ink);
padding: 2px 8px 3px;
background: #f4b8a4;
font-family:'Alegreya', serif; font-size: 13px;
color: var(--ink);
box-shadow: 1.5px 2px 0 var(--ink);
transform: rotate(-2deg);
}
.item .badge{
position:absolute; top: 14px; right: -8px;
background: var(--moss); color: #fff8db;
border:2px solid var(--ink); border-radius: 14px;
padding: 3px 10px 4px;
font-family:'Caveat', cursive; font-size: 15px;
transform: rotate(8deg);
box-shadow: 2px 2px 0 var(--ink);
z-index: 2;
}
.item .badge.rare{ background: var(--plum); }
.item .badge.fresh{ background: var(--brick); }
/* ---------- Пагинация ---------- */
.pagination{
margin-top: 56px;
display: flex; align-items:center; justify-content:center;
gap: 10px; flex-wrap:wrap;
}
.pagination .label{
font-family:'Caveat', cursive; font-size: 22px; color: var(--ink-soft);
margin-right: 8px;
}
.pagination .page{
width: 44px; height: 44px; border-radius: 14px;
border: 2.5px solid var(--ink);
background: var(--cream-card);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size: 18px;
color: var(--ink); text-decoration: none;
box-shadow: 3px 4px 0 var(--ink);
transition: transform .12s ease;
}
.pagination .page:hover{ transform: translate(-1px,-2px) rotate(-2deg); }
.pagination .page.active{ background: var(--brick); color: #fff7d6; transform: rotate(-3deg); }
.pagination .gap{ font-family:'Yeseva One', serif; font-size:22px; color: var(--ink-soft); padding: 0 2px; }
.pagination .next{
padding: 9px 16px 10px;
border-radius: 22px;
border:2.5px solid var(--ink);
background: var(--moss);
color: #fff7d6;
font-family:'Alegreya', serif; font-weight: 700; font-size: 16px;
text-decoration: none;
box-shadow: 3px 4px 0 var(--ink);
transform: rotate(1.5deg);
margin-left: 8px;
}
.pagination .next:hover{ transform: rotate(-1deg) translateY(-1px); }
/* ---------- Подвал (тот же) ---------- */
footer{
margin-top:80px;
padding:30px 26px 26px;
background:var(--cream-card);
border:2.5px solid var(--ink);
border-radius:28px;
box-shadow:6px 7px 0 var(--ink);
display:grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap:30px;
position:relative;
}
footer h4{ font-family:'Yeseva One', serif; font-size:22px; margin:0 0 10px; }
footer ul{ list-style:none; padding:0; margin:0; font-family:'Alegreya', serif; font-size:17px; }
footer ul li{ padding:3px 0; }
footer ul a{ color:var(--ink); text-decoration:none; }
footer ul a:hover{ color:var(--brick); }
footer .signoff{ font-family:'Caveat', cursive; font-size:21px; color:var(--ink-soft); margin-top:8px; }
footer .stamp{
position:absolute; right:-12px; top:-22px;
width:84px; height:84px; border-radius:50%;
background:var(--brick); color:#fff7d6;
border:2.5px solid var(--ink);
display:grid; place-items:center; text-align:center;
font-family:'Yeseva One', serif; font-size:14px; line-height:1.05;
transform:rotate(-12deg);
box-shadow:4px 4px 0 var(--ink);
}
footer .stamp::after{ content:""; position:absolute; inset:5px; border:2px dashed #ffffff80; border-radius:50%; }
/* ---------- Декор ---------- */
.decor{ position:absolute; pointer-events:none; }
/* ---------- Мега-меню и поиск (минимально, чтобы кнопки в шапке работали) ---------- */
.mega, .search-panel{
position:fixed; inset:0; z-index:50; display:none;
overflow-y:auto; padding-bottom: 40px;
background: radial-gradient(900px 600px at 30% 0%, #fff8dc 0%, #f3dfb088 60%, transparent 80%), #00000040;
backdrop-filter: blur(3px);
}
.mega.open, .search-panel.open{ display:block; animation: fadeIn .25s ease both; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes dropIn{ from{ transform: rotate(-.3deg) translateY(-30px); opacity:0 } to{ transform: rotate(-.3deg) translateY(0); opacity:1 } }
.mega-sheet, .search-sheet{
max-width: 1080px;
margin: 36px auto 0;
background: var(--cream-card);
border:2.5px solid var(--ink);
border-radius: 28px;
box-shadow: 10px 14px 0 var(--ink);
padding: 30px 40px 36px;
position:relative;
transform: rotate(-.3deg);
animation: dropIn .35s cubic-bezier(.4,1.6,.4,1) both;
}
.mega-sheet .close, .search-sheet .close{
position:absolute; right:-14px; top:-18px;
width:46px; height:46px; border-radius:50%;
background: var(--brick); color:#fff7d6;
border:2.5px solid var(--ink);
box-shadow:3px 4px 0 var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size:22px;
cursor:pointer; transform: rotate(8deg);
}
.mega-sheet .top-line{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; border-bottom: 3px dotted var(--ink); padding-bottom: 14px; flex-wrap:wrap; }
.mega-sheet .top-line h3{ font-family:'Yeseva One', serif; font-size: 38px; margin:0; line-height:1; }
.mega-sheet .top-line .sub{ font-family:'Caveat', cursive; font-size:22px; color: var(--ink-soft); transform: rotate(-1.5deg); }
.mega-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px 36px; }
.mega-col h4{ font-family:'Caveat', cursive; font-size: 24px; color: var(--brick); margin: 0 0 8px; }
.mega-col h4 .dot{ display:inline-block; width: 8px; height: 8px; background: var(--moss); border:1.5px solid var(--ink); border-radius: 50%; margin-right: 6px; transform: translateY(-2px); }
.mega-col ul{ list-style:none; padding:0; margin:0; font-family:'Alegreya', serif; font-size: 16px; }
.mega-col li{ padding: 3px 0; }
.mega-col a{ color: var(--ink); text-decoration: none; border-bottom: 1.5px dotted transparent; }
.mega-col a:hover{ color: var(--brick); border-bottom-color: var(--brick); }
.mega-col a .pill{ display:inline-block; background: #f8e3a4; border:1.5px solid var(--ink); border-radius: 10px; padding: 1px 6px; font-size: 13px; margin-left: 4px; color: var(--ink-soft); }
/* Адаптив */
@media (max-width: 980px){
.hero{ grid-template-columns: 1fr; }
.catalog{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
.catalog{ grid-template-columns: repeat(2, 1fr); }
footer{ grid-template-columns: 1fr; }
}
/* ========================================================================
СТАТИЧНЫЕ СТРАНИЦЫ (doc-hero, doc-layout, toc, tldr, contact-card, signed)
======================================================================== */
.doc-hero{
margin: 20px 6px 0;
padding: 8px 0 18px;
}
.doc-hero .kicker{
display:inline-block;
font-family:'Caveat', cursive; font-size: 23px;
color: var(--brick);
transform: rotate(-2deg);
margin-bottom: 6px;
}
.doc-hero h1{
font-family:'Yeseva One', serif;
font-size: clamp(40px, 5vw, 64px);
line-height: .96;
margin: 0;
color: var(--ink);
letter-spacing: -.5px;
}
.doc-hero h1 .ink{
display:inline-block;
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 14px;
padding: 0 14px 4px;
box-shadow: 5px 6px 0 var(--ink);
transform: rotate(-1.5deg);
margin-top: 4px;
}
.doc-hero .meta{
margin-top: 22px;
display:flex; flex-wrap:wrap; gap: 18px 26px;
font-family:'Caveat', cursive; font-size: 20px;
color: var(--ink-soft);
align-items: baseline;
}
.doc-hero .meta b{ color: var(--ink); font-family:'Alegreya', serif; font-weight: 700; font-size: 17px; }
.doc-hero .meta .stamp{
display:inline-flex; align-items:center; gap: 8px;
padding: 4px 12px 5px;
border: 2px dashed var(--ink); border-radius: 14px;
color: var(--ink);
background: var(--paper-soft);
transform: rotate(-1.5deg);
}
.doc-hero .meta .stamp b{ color: var(--brick); }
/* ---------- Двухколоночный макет ---------- */
.doc-layout{
margin-top: 28px;
display:grid;
grid-template-columns: 260px 1fr;
gap: 44px;
align-items: start;
}
/* TOC — оглавление */
.toc{
position: sticky;
top: 28px;
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 20px;
box-shadow: 5px 6px 0 var(--ink);
padding: 20px 22px 22px;
transform: rotate(-.4deg);
}
.toc::before{
content:""; position:absolute; top:-10px; left:24px;
width:64px; height:18px;
background: repeating-linear-gradient(135deg,#f0c97a 0 8px,#e6b85e 8px 16px);
border:1.5px solid #00000020;
transform: rotate(-6deg);
box-shadow: 0 2px 2px #00000018;
}
.toc h3{
margin: 0 0 12px;
font-family:'Caveat', cursive;
font-size: 24px;
color: var(--brick);
font-weight: 600;
}
.toc h3::before{
content:"↳ ";
color: var(--moss);
}
.toc ol{
list-style: none;
counter-reset: tocnum;
padding: 0; margin: 0;
}
.toc ol li{
counter-increment: tocnum;
padding: 5px 0 5px 30px;
position: relative;
font-family:'Alegreya', serif;
font-size: 16px;
line-height: 1.3;
border-bottom: 1.5px dotted #00000020;
}
.toc ol li:last-child{ border-bottom: none; }
.toc ol li::before{
content: counter(tocnum, decimal-leading-zero);
position: absolute; left: 0; top: 6px;
font-family:'Yeseva One', serif;
font-size: 14px;
color: var(--brick);
}
.toc ol li a{
color: var(--ink);
text-decoration: none;
border-bottom: 1.5px dotted transparent;
}
.toc ol li a:hover{
color: var(--brick);
border-bottom-color: var(--brick);
}
.toc .foot-note{
margin-top: 12px;
padding-top: 10px;
border-top: 2px dotted var(--ink);
font-family:'Caveat', cursive;
font-size: 17px;
color: var(--ink-soft);
}
/* ---------- Основная колонка ---------- */
.doc-main{
max-width: 70ch;
}
/* «Если коротко» */
.tldr{
position:relative;
margin: 0 0 38px;
padding: 22px 24px 22px;
background: #f8e3a4;
border: 2.5px solid var(--ink);
border-radius: 22px;
box-shadow: 6px 7px 0 var(--ink);
transform: rotate(-.4deg);
}
.tldr::before{
content:"если коротко";
position:absolute;
top:-14px; left: 22px;
background: var(--brick); color: #fff7d6;
border: 2px solid var(--ink); border-radius: 14px;
padding: 3px 12px 4px;
font-family:'Caveat', cursive; font-size: 17px;
transform: rotate(-3deg);
box-shadow: 2px 2px 0 var(--ink);
}
.tldr ul{
list-style: none;
padding: 0; margin: 0;
}
.tldr ul li{
padding: 6px 0 6px 28px;
position: relative;
font-family:'Alegreya', serif;
font-size: 17px;
line-height: 1.45;
}
.tldr ul li::before{
content:"✦";
position:absolute; left: 4px; top: 6px;
color: var(--brick);
font-family:'Yeseva One', serif;
font-size: 16px;
}
.tldr ul li b{ color: var(--ink); font-weight: 700; }
/* Заголовки секций */
.doc-main section{
counter-increment: docnum;
padding-top: 10px;
margin-bottom: 28px;
scroll-margin-top: 24px;
}
.doc-main{ counter-reset: docnum; }
.doc-main h2{
font-family:'Yeseva One', serif;
font-size: 32px;
line-height: 1.05;
margin: 0 0 14px;
position: relative;
padding-left: 60px;
color: var(--ink);
}
.doc-main h2::before{
content: counter(docnum, decimal-leading-zero);
position: absolute; left: 0; top: -2px;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--cream-card);
border: 2.5px solid var(--ink);
box-shadow: 3px 3px 0 var(--ink);
display: grid; place-items: center;
font-family:'Yeseva One', serif;
font-size: 20px;
color: var(--brick);
transform: rotate(-6deg);
}
.doc-main h2 .scribble{
display: block;
margin-top: 4px;
height: 10px;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: 100% 100%;
max-width: 360px;
}
.doc-main h3{
font-family:'Yeseva One', serif;
font-size: 21px;
line-height: 1.1;
margin: 24px 0 8px;
color: var(--ink);
}
.doc-main h3::before{
content:"❀ ";
color: var(--moss);
margin-right: 2px;
}
.doc-main p{
font-family:'Alegreya', serif;
font-size: 18px;
line-height: 1.65;
color: var(--ink);
margin: 0 0 12px;
text-wrap: pretty;
}
.doc-main p b{ color: var(--ink); font-weight: 700; }
.doc-main p em{ color: var(--ink-soft); font-style: italic; }
.doc-main a{
color: var(--brick);
text-decoration: none;
border-bottom: 1.5px dotted var(--brick);
}
.doc-main a:hover{ color: var(--plum); border-bottom-color: var(--plum); }
.doc-main ul, .doc-main ol{
margin: 6px 0 14px;
padding-left: 0;
list-style: none;
}
.doc-main ul li, .doc-main ol li{
position: relative;
padding: 4px 0 4px 28px;
font-family:'Alegreya', serif;
font-size: 18px;
line-height: 1.55;
}
.doc-main ul li::before{
content:"·";
position:absolute; left: 8px; top: 0;
font-family:'Yeseva One', serif;
font-size: 28px;
color: var(--brick);
line-height: 1;
}
.doc-main ol{ counter-reset: listnum; }
.doc-main ol li{ padding-left: 36px; }
.doc-main ol li::before{
counter-increment: listnum;
content: counter(listnum) ".";
position:absolute; left: 4px; top: 4px;
font-family:'Yeseva One', serif;
font-size: 16px;
color: var(--brick);
}
/* Цитата на полях */
.doc-main blockquote{
position: relative;
margin: 24px 0;
padding: 20px 22px 16px 50px;
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 18px;
box-shadow: 5px 6px 0 var(--ink);
transform: rotate(-.6deg);
font-family:'Marck Script', cursive;
font-size: 22px;
line-height: 1.45;
color: var(--ink);
}
.doc-main blockquote::before{
content:"„";
position: absolute;
left: 14px; top: 6px;
font-family:'Yeseva One', serif;
font-size: 56px;
color: var(--brick);
line-height: 1;
}
.doc-main blockquote cite{
display: block;
margin-top: 8px;
font-family:'Caveat', cursive;
font-style: normal;
font-size: 17px;
color: var(--ink-soft);
}
/* «Внимание» — нота красного */
.doc-main .note{
margin: 18px 0;
padding: 14px 18px;
background: #f4b8a4;
border: 2px solid var(--ink);
border-radius: 14px;
font-family:'Alegreya', serif;
font-size: 16px;
line-height: 1.45;
color: var(--ink);
box-shadow: 3px 3px 0 var(--ink);
transform: rotate(.3deg);
}
.doc-main .note b{
display: inline-block;
margin-right: 6px;
color: var(--brick);
text-transform: lowercase;
}
.doc-main .note b::before{
content:"✦ ";
}
/* «Зелёная» нота */
.doc-main .note.ok{
background: #dfe6c5;
transform: rotate(-.4deg);
}
.doc-main .note.ok b{ color: var(--moss); }
/* Контактная карточка в конце */
.contact-card{
margin-top: 30px;
padding: 24px 26px 26px;
background: #f8e3a4;
border: 2.5px solid var(--ink);
border-radius: 22px;
box-shadow: 7px 8px 0 var(--ink);
transform: rotate(-.5deg);
position: relative;
}
.contact-card::before{
content:"";
position:absolute; top:-12px; left: 30%;
width: 90px; height: 18px;
background: repeating-linear-gradient(135deg,#e89e8aee 0 8px,#cf7a64aa 8px 16px);
border:1.5px solid #00000020;
transform: rotate(-3deg);
box-shadow: 0 2px 2px #00000018;
}
.contact-card h3{
margin: 0 0 8px;
font-family:'Yeseva One', serif;
font-size: 22px;
color: var(--ink);
}
.contact-card p{
margin: 0 0 12px;
font-family:'Alegreya', serif;
font-size: 17px;
color: var(--ink);
}
.contact-card .row{
display: flex; gap: 12px; flex-wrap: wrap;
align-items: center;
}
.contact-card .row a{
display:inline-flex; align-items:center; gap: 8px;
padding: 9px 16px 10px;
border: 2.5px solid var(--ink); border-radius: 22px;
background: var(--cream-card);
font-family:'Alegreya', serif; font-weight: 700; font-size: 15px;
color: var(--ink); text-decoration: none;
box-shadow: 3px 4px 0 var(--ink);
border-bottom-style: solid;
border-bottom-color: var(--ink);
}
.contact-card .row a:hover{ transform: translate(-1px,-2px); }
.contact-card .row a.primary{ background: var(--brick); color: #fff7d6; transform: rotate(1.5deg); }
.contact-card .row a.primary:hover{ transform: rotate(-1deg) translateY(-2px); }
/* Подпись внизу страницы */
.signed{
margin: 36px 0 0;
padding: 18px 22px;
text-align: center;
font-family:'Caveat', cursive;
font-size: 20px;
color: var(--ink-soft);
border-top: 3px dotted var(--ink);
}
.signed b{ font-family:'Marck Script', cursive; color: var(--ink); font-size: 26px; font-weight: 400; }
/* Подвал */
footer{
margin-top:80px;
padding:30px 26px 26px;
background:var(--cream-card);
border:2.5px solid var(--ink);
border-radius:28px;
box-shadow:6px 7px 0 var(--ink);
display:grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap:30px;
position:relative;
}
footer h4{ font-family:'Yeseva One', serif; font-size:22px; margin:0 0 10px; }
footer ul{ list-style:none; padding:0; margin:0; font-family:'Alegreya', serif; font-size:17px; }
footer ul li{ padding:3px 0; }
footer ul a{ color:var(--ink); text-decoration:none; }
footer ul a:hover{ color:var(--brick); }
footer .signoff{ font-family:'Caveat', cursive; font-size:21px; color:var(--ink-soft); margin-top:8px; }
footer .stamp{
position:absolute; right:-12px; top:-22px;
width:84px; height:84px; border-radius:50%;
background:var(--brick); color:#fff7d6;
border:2.5px solid var(--ink);
display:grid; place-items:center; text-align:center;
font-family:'Yeseva One', serif; font-size:14px; line-height:1.05;
transform:rotate(-12deg);
box-shadow:4px 4px 0 var(--ink);
}
footer .stamp::after{ content:""; position:absolute; inset:5px; border:2px dashed #ffffff80; border-radius:50%; }
/* Мега-меню и поиск (компакт) */
.mega, .search-panel{
position:fixed; inset:0; z-index:50; display:none; overflow-y:auto; padding-bottom: 40px;
background: radial-gradient(900px 600px at 30% 0%, #fff8dc 0%, #f3dfb088 60%, transparent 80%), #00000040;
backdrop-filter: blur(3px);
}
.mega.open, .search-panel.open{ display:block; animation: fadeIn .25s ease both; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes dropIn{ from{ transform: rotate(-.3deg) translateY(-30px); opacity:0 } to{ transform: rotate(-.3deg) translateY(0); opacity:1 } }
.mega-sheet, .search-sheet{
max-width: 1080px; margin: 36px auto 0;
background: var(--cream-card);
border:2.5px solid var(--ink); border-radius: 28px;
box-shadow: 10px 14px 0 var(--ink);
padding: 30px 40px 36px; position:relative;
transform: rotate(-.3deg);
animation: dropIn .35s cubic-bezier(.4,1.6,.4,1) both;
}
.mega-sheet .close, .search-sheet .close{
position:absolute; right:-14px; top:-18px;
width:46px; height:46px; border-radius:50%;
background: var(--brick); color:#fff7d6;
border:2.5px solid var(--ink); box-shadow:3px 4px 0 var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size:22px;
cursor:pointer; transform: rotate(8deg);
}
.mega-sheet .top-line{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; border-bottom: 3px dotted var(--ink); padding-bottom: 14px; flex-wrap:wrap; }
.mega-sheet .top-line h3{ font-family:'Yeseva One', serif; font-size: 38px; margin:0; line-height:1; }
.mega-sheet .top-line .sub{ font-family:'Caveat', cursive; font-size:22px; color: var(--ink-soft); transform: rotate(-1.5deg); }
.mega-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px 36px; }
.mega-col h4{ font-family:'Caveat', cursive; font-size: 24px; color: var(--brick); margin: 0 0 8px; }
.mega-col h4 .dot{ display:inline-block; width: 8px; height: 8px; background: var(--moss); border:1.5px solid var(--ink); border-radius: 50%; margin-right: 6px; transform: translateY(-2px); }
.mega-col ul{ list-style:none; padding:0; margin:0; font-family:'Alegreya', serif; font-size: 16px; }
.mega-col li{ padding: 3px 0; }
.mega-col a{ color: var(--ink); text-decoration: none; }
.mega-col a:hover{ color: var(--brick); }
.search-sheet{ max-width: 880px; padding: 30px 36px 32px; transform: rotate(-.4deg); }
.search-sheet .lead{
font-family:'Caveat', cursive; font-size:24px; color:var(--ink-soft);
transform:rotate(-1deg); display:inline-block; margin-bottom:6px;
}
.search-sheet .lead .star{ color:var(--brick); }
.search-field{ display:flex; align-items:center; gap:14px; border-bottom: 3px dotted var(--ink); padding: 10px 6px 16px; }
.search-field .glass{ width:50px; height:50px; flex:none; display:grid; place-items:center; }
.search-field input{
flex:1; border:none; outline:none; background:transparent;
font-family:'Marck Script', cursive; font-size:38px; color:var(--ink); padding: 0;
}
.search-field input::placeholder{ color:#a07a4f; }
.search-field .go{
background: var(--moss); color:#fff8db;
border:2.5px solid var(--ink); box-shadow:3px 4px 0 var(--ink);
padding: 10px 20px; border-radius:24px;
font-family:'Alegreya', serif; font-weight:700; font-size:16px;
cursor:pointer; transform: rotate(2deg);
}
/* Адаптив */
@media (max-width: 960px){
.doc-layout{ grid-template-columns: 1fr; gap: 28px; }
.toc{ position: static; transform: rotate(-.4deg); }
.doc-main h2{ padding-left: 54px; font-size: 28px; }
.doc-main h2::before{ width: 42px; height: 42px; font-size: 18px; }
}
@media (max-width: 720px){
footer{ grid-template-columns: 1fr; }
}
/* ========================================================================
СТАТЬИ ЖУРНАЛА (post-hero, cover, post-body, inline-films, author-card, related)
======================================================================== */
.post-hero{
margin: 22px 4px 0;
text-align: center;
}
.post-hero .kicker{
display:inline-block;
font-family:'Caveat', cursive;
font-size: 24px;
color: var(--brick);
transform: rotate(-2deg);
margin-bottom: 6px;
}
.post-hero .kicker .star{ color: var(--honey); margin-right: 2px; }
.post-hero h1{
font-family:'Yeseva One', serif;
font-size: clamp(40px, 5.6vw, 72px);
line-height: 1.02;
margin: 0 auto;
max-width: 18ch;
color: var(--ink);
letter-spacing: -.5px;
text-wrap: balance;
}
.post-hero h1 .swash{ color: var(--brick); font-style: italic; }
.post-hero .deck{
margin: 18px auto 0;
max-width: 56ch;
font-family:'Alegreya', serif;
font-style: italic;
font-size: 22px;
line-height: 1.45;
color: var(--ink-soft);
text-wrap: pretty;
}
.post-hero .byline{
margin: 22px auto 0;
display:inline-flex; align-items:center; gap: 14px;
padding: 8px 18px 9px 8px;
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 32px;
box-shadow: 3px 4px 0 var(--ink);
transform: rotate(-1deg);
font-family:'Alegreya', serif;
font-size: 16px;
color: var(--ink);
}
.post-hero .byline .ava{
width: 40px; height: 40px; border-radius: 50%;
background: var(--brick); color: #fff7d6;
border: 2px solid var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size: 18px;
}
.post-hero .byline b{ font-weight: 700; color: var(--ink); }
.post-hero .byline .dot{
width: 4px; height: 4px; background: var(--ink-soft);
border-radius: 50%; display:inline-block; opacity: .6;
}
.post-hero .byline em{
font-family:'Caveat', cursive; font-style: normal;
font-size: 18px; color: var(--ink-soft);
}
/* Обложка */
.cover{
margin: 38px auto 0;
max-width: 920px;
position: relative;
padding: 14px 14px 22px;
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 22px;
box-shadow: 10px 12px 0 var(--ink);
transform: rotate(-.4deg);
}
.cover .tape{
position:absolute; width:96px; height:24px;
background: linear-gradient(180deg,#f3d27aee,#e0b85faa);
box-shadow: inset 0 0 0 1px #00000018, 2px 3px 4px #00000022;
}
.cover .tape.tl{ top:-12px; left:-22px; transform:rotate(-22deg); }
.cover .tape.tr{ top:-10px; right:-22px; transform:rotate(18deg); background:linear-gradient(180deg,#c9d99fee,#aac282aa); }
.cover .frame{
position:relative;
aspect-ratio: 16 / 9;
border-radius: 14px;
overflow: hidden;
border: 2px solid var(--ink);
background:
radial-gradient(ellipse 90% 60% at 50% 80%, #d9c187 0%, #c2a877 35%, #a99262 70%, #7d6841 100%),
linear-gradient(180deg, #d9d1bd 0%, #c7c4af 60%, #97a59b 100%);
box-shadow: inset 0 0 80px #00000022;
}
.cover .frame::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(ellipse 60% 18% at 30% 70%, #5b4a2a55 0%, transparent 70%),
radial-gradient(ellipse 70% 12% at 70% 78%, #3a2e1a55 0%, transparent 70%),
radial-gradient(circle at 80% 35%, #f6e6b855 0%, transparent 45%),
radial-gradient(ellipse 80% 40% at 50% 100%, #20140888 0%, transparent 60%);
filter:blur(2px);
}
.cover .frame::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg,#00000000 60%, #00000048);
}
.cover .frame .placeholder{
position:absolute; left:50%; bottom:18px;
transform: translateX(-50%) rotate(-2deg);
font-family:'Caveat', cursive;
color:#fff;
font-size: 22px;
text-shadow: 1px 2px 0 #00000080;
z-index: 2;
}
.cover .caption{
margin: 14px 8px 0;
font-family:'Caveat', cursive;
font-size: 18px;
color: var(--ink-soft);
text-align: center;
}
.cover .caption b{ color: var(--ink); font-family:'Alegreya', serif; font-weight: 700; font-size: 16px; }
/* ---------- Тело статьи ---------- */
.post-body{
max-width: 64ch;
margin: 48px auto 0;
padding: 0 6px;
}
.post-body > p, .post-body > section > p{
font-family:'Alegreya', serif;
font-size: 19px;
line-height: 1.7;
color: var(--ink);
margin: 0 0 18px;
text-wrap: pretty;
}
.post-body p b{ font-weight: 700; }
.post-body p em{ font-style: italic; color: var(--ink-soft); }
.post-body a{
color: var(--brick);
text-decoration: none;
border-bottom: 1.5px dotted var(--brick);
}
.post-body a:hover{ color: var(--plum); border-bottom-color: var(--plum); }
.post-body .lead{
font-size: 23px;
line-height: 1.5;
}
.post-body .lead::first-letter{
font-family:'Yeseva One', serif;
font-size: 76px;
float: left;
line-height: .82;
padding: 6px 12px 0 0;
color: var(--brick);
}
.post-body h2{
font-family:'Yeseva One', serif;
font-size: 34px;
line-height: 1.05;
margin: 40px 0 14px;
color: var(--ink);
position: relative;
display: inline-block;
}
.post-body h2::after{
content:""; position:absolute; left:4px; right:-4px; bottom:-2px; height: 12px;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: 100% 100%;
}
.post-body h3{
font-family:'Yeseva One', serif;
font-size: 22px;
margin: 26px 0 8px;
}
.post-body h3::before{
content:"❀ ";
color: var(--moss);
}
.post-body ul, .post-body ol{
margin: 8px 0 18px;
padding-left: 0;
list-style: none;
}
.post-body ul li, .post-body ol li{
position: relative;
padding: 5px 0 5px 30px;
font-family:'Alegreya', serif;
font-size: 18px;
line-height: 1.55;
}
.post-body ul li::before{
content:"·";
position:absolute; left: 10px; top: -4px;
font-family:'Yeseva One', serif; font-size: 32px;
color: var(--brick);
}
.post-body ol{ counter-reset: list; }
.post-body ol li{ padding-left: 38px; }
.post-body ol li::before{
counter-increment: list;
content: counter(list);
position:absolute; left: 0; top: 4px;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--cream-card);
border: 2px solid var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size: 13px;
color: var(--brick);
box-shadow: 2px 2px 0 var(--ink);
}
/* Pull quote */
.pullquote{
margin: 36px -40px;
padding: 32px 56px 28px;
background: #f8e3a4;
border: 2.5px solid var(--ink);
border-radius: 26px;
box-shadow: 8px 10px 0 var(--ink);
transform: rotate(-.7deg);
font-family:'Marck Script', cursive;
font-size: 28px;
line-height: 1.4;
color: var(--ink);
text-align: center;
position: relative;
}
.pullquote::before{
content:"„";
font-family:'Yeseva One', serif;
position:absolute; left: 16px; top:-26px;
font-size: 86px; color: var(--brick); line-height: 1;
}
.pullquote::after{
content:""; position:absolute; right:-18px; top:-14px;
width:64px; height:22px;
background: linear-gradient(180deg,#e89e8aee,#cf7a64aa);
transform: rotate(20deg);
box-shadow: inset 0 0 0 1px #00000020;
}
/* Вставленная картинка в тексте */
.post-figure{
margin: 30px -40px;
padding: 12px 12px 18px;
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 18px;
box-shadow: 6px 8px 0 var(--ink);
transform: rotate(.4deg);
position: relative;
}
.post-figure .tape{
position:absolute; top: -10px; left: 28%;
width: 80px; height: 20px;
background: linear-gradient(180deg,#cdd9e3ee,#9eb0c0aa);
box-shadow: inset 0 0 0 1px #00000020;
transform: rotate(-6deg);
}
.post-figure .image{
aspect-ratio: 16/9;
border-radius: 12px;
border: 2px solid var(--ink);
overflow: hidden;
position: relative;
}
.post-figure .image.scene-fog{
background: radial-gradient(ellipse 70% 50% at 50% 60%, #c8cab8 0%, #8a9890 60%, #44524e 100%);
}
.post-figure .image.scene-kitchen{
background: radial-gradient(circle at 30% 50%, #f1c486 0%, #b07b3c 55%, #4d2c11 100%);
}
.post-figure .image::after{
content:""; position:absolute; inset:0;
background:
radial-gradient(circle at 30% 40%, #ffffff15 0%, transparent 40%),
linear-gradient(180deg, transparent 60%, #00000045);
}
.post-figure .image .silhouette{
position:absolute; left:50%; bottom:10%; transform:translateX(-50%);
width:54%; height:46%;
background: radial-gradient(ellipse at 50% 80%, #1d1208 0%, #1d1208 55%, transparent 60%);
filter: blur(1.2px);
}
.post-figure .image .placeholder{
position:absolute; right: 14px; bottom: 12px;
font-family:'Caveat', cursive; color: #fff;
font-size: 18px; text-shadow: 1px 2px 0 #00000080;
transform: rotate(-2deg);
}
.post-figure .image .placeholder.tl{ left: 14px; right: auto; top: 12px; bottom: auto; }
.post-figure figcaption{
margin-top: 12px;
padding: 0 8px;
font-family:'Caveat', cursive;
font-size: 18px;
color: var(--ink-soft);
text-align: center;
}
.post-figure figcaption b{ font-family:'Alegreya', serif; font-weight: 700; color: var(--ink); font-size: 16px; }
/* Карточки мультиков прямо в тексте */
.inline-films{
margin: 28px -40px;
display:grid; grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.inline-film{
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 14px;
box-shadow: 4px 5px 0 var(--ink);
padding: 8px 8px 12px;
text-decoration: none;
color: var(--ink);
display: block;
transition: transform .14s ease;
position: relative;
}
.inline-film:nth-child(1){ transform: rotate(-1.4deg); background: #fbe9b8; }
.inline-film:nth-child(2){ transform: rotate(.9deg); background: #dfe6c5; }
.inline-film:nth-child(3){ transform: rotate(-.6deg); background: #f3dccf; }
.inline-film:hover{ transform: translate(-1px,-2px) rotate(-2deg); }
.inline-film .pic{
aspect-ratio: 4/3;
border-radius: 10px;
border: 2px solid var(--ink);
overflow: hidden;
position: relative;
}
.inline-film .pic.p1{ background: radial-gradient(circle at 45% 60%, #d4d2c4 0%, #8aa0a5 50%, #3c5566 100%); }
.inline-film .pic.p2{ background: radial-gradient(circle at 55% 50%, #f1c486 0%, #b07b3c 55%, #4d2c11 100%); }
.inline-film .pic.p3{ background: radial-gradient(circle at 40% 55%, #b5cba6 0%, #517451 55%, #1c3322 100%); }
.inline-film .pic .silhouette{
position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
width:50%; height:44%;
background: radial-gradient(ellipse at 50% 80%, #1d1208 0%, #1d1208 55%, transparent 60%);
filter: blur(1px);
}
.inline-film .pic::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 65%, #00000040);
}
.inline-film .name{
font-family:'Yeseva One', serif;
font-size: 17px;
line-height: 1.05;
margin: 8px 4px 2px;
}
.inline-film .meta-line{
display:flex; justify-content:space-between; align-items:baseline;
padding: 0 4px;
font-family:'Caveat', cursive; font-size: 16px;
color: var(--ink-soft);
}
.inline-film .meta-line .year{ color: var(--brick); font-weight: 700; }
/* Метки под статьёй */
.post-tags{
margin: 36px 0 0;
display:flex; flex-wrap: wrap; gap: 8px 10px;
align-items: center;
}
.post-tags .label{
font-family:'Caveat', cursive; font-size: 22px;
color: var(--ink-soft);
transform: rotate(-2deg);
margin-right: 6px;
}
.post-tags .label .arrow{ color: var(--brick); }
.post-tags a{
display:inline-flex; align-items:baseline; gap: 4px;
padding: 5px 12px 6px;
border: 2px solid var(--ink); border-radius: 20px;
background: var(--cream-card);
box-shadow: 2px 3px 0 var(--ink);
font-family:'Alegreya', serif; font-size: 15px;
color: var(--ink); text-decoration: none;
}
.post-tags a::before{
content:"#"; font-family:'Yeseva One', serif;
color: var(--brick); margin-right: 2px;
}
.post-tags a:nth-child(3n+2){ background: #dfe6c5; transform: rotate(-1deg); }
.post-tags a:nth-child(3n+3){ background: #f3dccf; transform: rotate(1.2deg); }
.post-tags a:nth-child(3n+1){ background: #fbe9b8; transform: rotate(-1.5deg); }
.post-tags a:hover{ transform: translate(-1px,-2px) rotate(-2deg); }
/* Автор-карточка */
.author-card{
max-width: 64ch;
margin: 50px auto 0;
padding: 22px 24px;
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 22px;
box-shadow: 7px 8px 0 var(--ink);
transform: rotate(-.5deg);
display:grid;
grid-template-columns: 96px 1fr;
gap: 22px;
align-items: center;
position: relative;
}
.author-card::before{
content:""; position:absolute; top:-12px; left: 30px;
width: 90px; height: 18px;
background: repeating-linear-gradient(135deg,#f0c97a 0 8px,#e6b85e 8px 16px);
border:1.5px solid #00000020;
transform: rotate(-5deg);
box-shadow: 0 2px 2px #00000018;
}
.author-card .ava{
width: 96px; height: 96px;
border-radius: 50%;
background: var(--brick); color: #fff7d6;
border: 2.5px solid var(--ink);
display: grid; place-items: center;
font-family:'Yeseva One', serif; font-size: 42px;
box-shadow: 3px 4px 0 var(--ink);
transform: rotate(-3deg);
}
.author-card .info h4{
margin: 0 0 4px;
font-family:'Yeseva One', serif;
font-size: 22px;
}
.author-card .info .role{
font-family:'Caveat', cursive;
font-size: 19px;
color: var(--brick);
margin-bottom: 8px;
}
.author-card .info p{
margin: 0;
font-family:'Alegreya', serif;
font-size: 16px;
line-height: 1.45;
color: var(--ink);
}
.author-card .info p a{
color: var(--brick); text-decoration: none;
border-bottom: 1.5px dotted var(--brick);
}
/* Связанные статьи */
.related{
margin-top: 76px;
}
.related-head{
display:flex; align-items:baseline; justify-content: space-between;
gap: 18px; flex-wrap: wrap;
margin-bottom: 22px;
}
.related-head h2{
font-family:'Yeseva One', serif;
font-size: 38px;
margin: 0;
position: relative; display:inline-block;
line-height: 1;
}
.related-head h2::after{
content:""; position: absolute; left: 4px; right: -4px; bottom: -2px; height: 12px;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: 100% 100%;
}
.related-head .sub{
font-family:'Caveat', cursive; font-size: 22px;
color: var(--ink-soft);
transform: rotate(-1.5deg);
}
.related-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.related-card{
background: var(--cream-card);
border: 2.5px solid var(--ink);
border-radius: 18px;
box-shadow: 5px 6px 0 var(--ink);
text-decoration: none;
color: var(--ink);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .14s ease;
}
.related-card:hover{ transform: translate(-2px,-3px) rotate(-1deg); }
.related-card:nth-child(1){ transform: rotate(-1.2deg); background: #fbe9b8; }
.related-card:nth-child(2){ transform: rotate(.8deg); background: #dfe6c5; }
.related-card:nth-child(3){ transform: rotate(-.6deg); background: #f3dccf; }
.related-card .pic{
aspect-ratio: 16/9;
border-bottom: 2.5px solid var(--ink);
position: relative;
}
.related-card .pic::after{
content:""; position:absolute; inset:0;
background: linear-gradient(180deg, transparent 60%, #00000035);
}
.related-card:nth-child(1) .pic{ background: radial-gradient(circle at 50% 60%, #f6cf94 0%, #b86934 55%, #4a200c 100%); }
.related-card:nth-child(2) .pic{ background: radial-gradient(circle at 40% 55%, #d4d2c4 0%, #8aa0a5 50%, #3c5566 100%); }
.related-card:nth-child(3) .pic{ background: radial-gradient(circle at 50% 60%, #f1b6a0 0%, #b15a4d 55%, #4b1f1a 100%); }
.related-card .pic .silhouette{
position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
width:50%; height:42%;
background: radial-gradient(ellipse at 50% 80%, #1d1208 0%, #1d1208 55%, transparent 60%);
filter: blur(1.2px);
}
.related-card .body{
padding: 14px 16px 16px;
}
.related-card .body .topic{
display:inline-block;
font-family:'Caveat', cursive;
font-size: 17px;
color: var(--brick);
margin-bottom: 4px;
}
.related-card .body h4{
font-family:'Yeseva One', serif;
font-size: 19px;
line-height: 1.1;
margin: 0 0 6px;
color: var(--ink);
text-wrap: balance;
}
.related-card .body .meta{
font-family:'Caveat', cursive;
font-size: 16px;
color: var(--ink-soft);
}
/* Комментарии — записочки */
.comments-section{ margin-top: 64px; }
.comments-head{
display:flex; align-items:baseline; justify-content: space-between;
gap: 18px; flex-wrap: wrap;
margin-bottom: 18px;
}
.comments-head h2{
font-family:'Yeseva One', serif;
font-size: 38px;
margin: 0;
position: relative; display:inline-block;
}
.comments-head h2::after{
content:""; position: absolute; left: 4px; right: -4px; bottom: -2px; height: 12px;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: 100% 100%;
}
.comments-head .count-pill{
font-family:'Caveat', cursive; font-size: 22px;
color: var(--ink-soft);
transform: rotate(-1.5deg);
}
.notes{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.note{
position:relative;
padding: 20px 22px 18px;
border: 2.5px solid var(--ink);
border-radius: 18px;
box-shadow: 5px 6px 0 var(--ink);
font-family:'Alegreya', serif; font-size: 16px;
}
.note:nth-child(1){ background: #fbe9b8; transform: rotate(-1.3deg); }
.note:nth-child(2){ background: #dfe6c5; transform: rotate(.9deg); }
.note:nth-child(3){ background: #f3dccf; transform: rotate(-.5deg); }
.note::before{
content:""; position: absolute;
width: 46px; height: 16px;
top: -8px; left: 28%;
background: linear-gradient(180deg,#ffffffaa,#ffffff55);
border: 1px solid #00000018;
transform: rotate(-6deg);
}
.note .who{
display:flex; align-items:center; gap: 10px;
font-family:'Yeseva One', serif; font-size: 17px;
margin-bottom: 8px;
}
.note .who .ava{
width: 38px; height: 38px; border-radius: 50%;
border: 2px solid var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size: 18px;
color: #fff;
}
.note:nth-child(1) .ava{ background: var(--brick); }
.note:nth-child(2) .ava{ background: var(--moss); }
.note:nth-child(3) .ava{ background: var(--plum); }
.note .when{
margin-left:auto;
font-family:'Caveat', cursive; font-size: 17px;
color: var(--ink-soft); font-weight: 400;
}
.note p{ margin: 0; }
.note .heart-row{
margin-top: 12px;
font-family:'Caveat', cursive;
font-size: 17px;
color: var(--brick);
}
.add-comment{
margin-top: 26px;
background: var(--cream-card);
border: 2.5px dashed var(--ink);
border-radius: 20px;
padding: 20px 22px;
display: flex; gap: 16px; align-items: center;
font-family:'Caveat', cursive; font-size: 22px;
color: var(--ink-soft);
}
.add-comment .pencil{
width: 46px; height: 46px; border-radius: 50%;
background: var(--honey); border: 2px solid var(--ink);
display:grid; place-items: center; flex: none;
box-shadow: 2px 2px 0 var(--ink);
font-family:'Yeseva One', serif; color: var(--ink); font-size: 22px;
}
.add-comment input{
flex: 1; border: none; outline: none; background: transparent;
font-family:'Caveat', cursive; font-size: 22px; color: var(--ink);
}
.add-comment button{
border: 2px solid var(--ink); background: var(--brick); color: #fff7d6;
font-family:'Alegreya', serif; font-weight: 700; font-size: 16px;
padding: 8px 18px; border-radius: 20px;
box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
}
/* Подвал */
footer{
margin-top:80px;
padding:30px 26px 26px;
background:var(--cream-card);
border:2.5px solid var(--ink);
border-radius:28px;
box-shadow:6px 7px 0 var(--ink);
display:grid; grid-template-columns: 1.4fr 1fr 1fr;
gap:30px; position:relative;
}
footer h4{ font-family:'Yeseva One', serif; font-size:22px; margin:0 0 10px; }
footer ul{ list-style:none; padding:0; margin:0; font-family:'Alegreya', serif; font-size:17px; }
footer ul li{ padding:3px 0; }
footer ul a{ color:var(--ink); text-decoration:none; }
footer ul a:hover{ color:var(--brick); }
footer .signoff{ font-family:'Caveat', cursive; font-size:21px; color:var(--ink-soft); margin-top:8px; }
footer .stamp{
position:absolute; right:-12px; top:-22px;
width:84px; height:84px; border-radius:50%;
background:var(--brick); color:#fff7d6;
border:2.5px solid var(--ink);
display:grid; place-items:center; text-align:center;
font-family:'Yeseva One', serif; font-size:14px; line-height:1.05;
transform:rotate(-12deg); box-shadow:4px 4px 0 var(--ink);
}
footer .stamp::after{ content:""; position:absolute; inset:5px; border:2px dashed #ffffff80; border-radius:50%; }
/* Мега-меню/поиск (минимум) */
.mega, .search-panel{
position:fixed; inset:0; z-index:50; display:none; overflow-y:auto; padding-bottom: 40px;
background: radial-gradient(900px 600px at 30% 0%, #fff8dc 0%, #f3dfb088 60%, transparent 80%), #00000040;
backdrop-filter: blur(3px);
}
.mega.open, .search-panel.open{ display:block; animation: fadeIn .25s ease both; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes dropIn{ from{ transform: rotate(-.3deg) translateY(-30px); opacity:0 } to{ transform: rotate(-.3deg) translateY(0); opacity:1 } }
.mega-sheet, .search-sheet{
max-width: 1080px; margin: 36px auto 0;
background: var(--cream-card);
border:2.5px solid var(--ink); border-radius: 28px;
box-shadow: 10px 14px 0 var(--ink);
padding: 30px 40px 36px; position:relative;
transform: rotate(-.3deg);
animation: dropIn .35s cubic-bezier(.4,1.6,.4,1) both;
}
.mega-sheet .close, .search-sheet .close{
position:absolute; right:-14px; top:-18px;
width:46px; height:46px; border-radius:50%;
background: var(--brick); color:#fff7d6;
border:2.5px solid var(--ink); box-shadow:3px 4px 0 var(--ink);
display:grid; place-items:center;
font-family:'Yeseva One', serif; font-size:22px;
cursor:pointer; transform: rotate(8deg);
}
.mega-sheet .top-line{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; border-bottom: 3px dotted var(--ink); padding-bottom: 14px; flex-wrap:wrap; }
.mega-sheet .top-line h3{ font-family:'Yeseva One', serif; font-size: 38px; margin:0; }
.mega-sheet .top-line .sub{ font-family:'Caveat', cursive; font-size:22px; color: var(--ink-soft); }
.mega-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px 36px; }
.mega-col h4{ font-family:'Caveat', cursive; font-size: 24px; color: var(--brick); margin: 0 0 8px; }
.mega-col ul{ list-style:none; padding:0; margin:0; font-family:'Alegreya', serif; font-size: 16px; }
.mega-col li{ padding: 3px 0; }
.mega-col a{ color: var(--ink); text-decoration: none; }
.mega-col a:hover{ color: var(--brick); }
.search-sheet{ max-width: 880px; padding: 30px 36px 32px; transform: rotate(-.4deg); }
.search-sheet .lead{
font-family:'Caveat', cursive; font-size:24px; color:var(--ink-soft);
transform:rotate(-1deg); display:inline-block; margin-bottom:6px;
}
.search-sheet .lead .star{ color:var(--brick); }
.search-field{ display:flex; align-items:center; gap:14px; border-bottom: 3px dotted var(--ink); padding: 10px 6px 16px; }
.search-field .glass{ width:50px; height:50px; flex:none; display:grid; place-items:center; }
.search-field input{
flex:1; border:none; outline:none; background:transparent;
font-family:'Marck Script', cursive; font-size:38px; color:var(--ink); padding: 0;
}
.search-field .go{
background: var(--moss); color:#fff8db;
border:2.5px solid var(--ink); box-shadow:3px 4px 0 var(--ink);
padding: 10px 20px; border-radius:24px;
font-family:'Alegreya', serif; font-weight:700; font-size:16px;
cursor:pointer; transform: rotate(2deg);
}
/* Адаптив */
@media (max-width: 960px){
.pullquote, .post-figure, .inline-films{ margin-left: 0; margin-right: 0; }
.related-grid{ grid-template-columns: 1fr 1fr; }
.notes{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
.related-grid{ grid-template-columns: 1fr; }
.notes{ grid-template-columns: 1fr; }
.inline-films{ grid-template-columns: 1fr 1fr; }
footer{ grid-template-columns: 1fr; }
.author-card{ grid-template-columns: 1fr; text-align: center; }
.author-card .ava{ justify-self: center; }
}
/* ========================================================================
ДОПОЛНЕНИЯ ТЕМЫ (карточки для шорткодов, исправления для WP-вёрстки)
======================================================================== */
/* Inline-films шорткод — карточки внутри статьи */
.inline-films { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:28px 0; }
.inline-film { display:flex; flex-direction:column; gap:8px; padding:12px; background:var(--cream-card); border:2.5px solid var(--ink); border-radius:14px; box-shadow:3px 4px 0 var(--ink); text-decoration:none; color:var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.inline-film:hover { transform: translate(-1px,-2px) rotate(-.6deg); box-shadow:4px 5px 0 var(--ink); }
.inline-film__pic { position:relative; aspect-ratio:16/10; border-radius:8px; overflow:hidden; background: var(--c, var(--fog)); border:1.5px solid var(--ink); }
.inline-film__pic img { width:100%; height:100%; object-fit:cover; display:block; }
.inline-film__pic .silhouette { position:absolute; inset:0; background: radial-gradient(circle at 50% 60%, rgba(0,0,0,0.18) 0%, transparent 60%); }
.inline-film__title { font-family:'Yeseva One', serif; font-size:18px; line-height:1.1; }
.inline-film__meta { font-family:'Caveat', cursive; font-size:16px; color:var(--ink-soft); }
/* Карточка мультика — общая для архивов и полок */
.cartoon-card { position:relative; background:var(--cream-card); border:2.5px solid var(--ink); border-radius:18px; padding:14px 14px 16px; box-shadow:4px 5px 0 var(--ink); text-decoration:none; color:var(--ink); transition: transform .15s ease, box-shadow .15s ease; display:flex; flex-direction:column; gap:10px; }
.cartoon-card:hover { transform: translate(-2px,-3px) rotate(-.5deg); box-shadow:6px 7px 0 var(--ink); }
.cartoon-card__pic { position:relative; aspect-ratio:16/10; border-radius:12px; overflow:hidden; border:2px solid var(--ink); background: var(--c, var(--fog)); }
.cartoon-card__pic img { width:100%; height:100%; object-fit:cover; display:block; }
.cartoon-card__play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:var(--brick); border:3px solid var(--ink); display:grid; place-items:center; box-shadow:3px 4px 0 rgba(0,0,0,.25); transition: transform .15s ease; }
.cartoon-card:hover .cartoon-card__play { transform:translate(-50%,-50%) rotate(-6deg) scale(1.08); }
.cartoon-card__play svg { color:#fff7d6; transform: translateX(2px); }
.cartoon-card__tape { position:absolute; top:-8px; left:24px; width:60px; height:16px; background:repeating-linear-gradient(135deg,#f0c97a 0 8px,#e6b85e 8px 16px); border:1.5px solid rgba(0,0,0,.18); transform:rotate(-5deg); box-shadow:0 2px 2px rgba(0,0,0,.1); }
.cartoon-card__badge { position:absolute; top:-12px; right:-10px; padding:5px 10px 6px; background:var(--honey); color:var(--ink); font-family:'Caveat',cursive; font-weight:700; font-size:18px; border:2px solid var(--ink); border-radius:14px; transform:rotate(6deg); box-shadow:2px 3px 0 var(--ink); }
.cartoon-card__badge--favorite { background:#f4b8a4; }
.cartoon-card__badge--new { background:#dfe6c5; }
.cartoon-card__badge--rare { background:#f3dccf; }
.cartoon-card__badge--kids { background:#fbe9b8; }
.cartoon-card__title { font-family:'Yeseva One', serif; font-size:22px; line-height:1.05; margin:0; }
.cartoon-card__meta { font-family:'Alegreya', serif; font-size:15px; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:6px 10px; }
.cartoon-card__meta b { color:var(--brick); font-weight:600; }
.cartoon-card__bottom { display:flex; justify-content:space-between; align-items:center; font-family:'Caveat',cursive; font-size:17px; color:var(--ink-soft); margin-top:auto; }
.cartoon-card__bottom .hearts { color:var(--brick); }
/* Видеоплеер на single-cartoon */
.player .embed { position:absolute; inset:0; background:#000; border-radius:14px; overflow:hidden; }
.player .embed iframe { width:100%; height:100%; border:0; display:block; }
.player .embed--empty { display:grid; place-items:center; color:#fff8db; font-family:'Caveat',cursive; font-size:22px; padding:20px; text-align:center; background:linear-gradient(135deg,#3a2418,#5a3a26); }
/* WordPress-специфика */
body.admin-bar header.top { margin-top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar header.top { margin-top: 46px; }
}
.alignleft { float:left; margin: 0 18px 12px 0; }
.alignright { float:right; margin: 0 0 12px 18px; }
.aligncenter { display:block; margin:18px auto; }
.wp-caption, figure.wp-caption { margin: 20px auto; }
.wp-caption-text, figure figcaption { font-family:'Caveat', cursive; font-size:18px; color:var(--ink-soft); text-align:center; margin-top:8px; }
/* Мобильный нижний навбар — приклеенная панель */
@media (max-width: 720px) {
body { padding-bottom: 84px; }
}
/* Комментарии — стиль «notes» */
.comment-list { list-style:none; padding:0; margin:0; display:grid; gap:20px; }
.comment-list .comment { position:relative; background:#fff7e0; border:2.5px solid var(--ink); border-radius:18px; padding:16px 20px 18px; box-shadow:4px 5px 0 var(--ink); }
.comment-list .comment:nth-child(5n+1){ background:#fbe9b8; transform:rotate(-.8deg); }
.comment-list .comment:nth-child(5n+2){ background:#dfe6c5; transform:rotate(.6deg); }
.comment-list .comment:nth-child(5n+3){ background:#f3dccf; transform:rotate(-.4deg); }
.comment-list .comment:nth-child(5n+4){ background:#cdd9e3; transform:rotate(1.2deg); }
.comment-list .comment:nth-child(5n+5){ background:#f4b8a4; transform:rotate(-.6deg); }
.comment-list .comment .vcard { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.comment-list .comment .vcard img { border-radius:50%; border:2px solid var(--ink); }
.comment-list .comment .vcard cite { font-family:'Yeseva One', serif; font-size:18px; font-style:normal; }
.comment-list .comment .comment-meta { font-family:'Caveat', cursive; font-size:16px; color:var(--ink-soft); margin-bottom:6px; }
.comment-list .comment .comment-content p { margin:0 0 8px; }
.comment-list .children { list-style:none; padding-left:24px; margin-top:14px; display:grid; gap:14px; }
.comment-respond { margin-top:30px; padding:20px; background:var(--cream-card); border:2.5px dashed var(--ink); border-radius:18px; }
.comment-respond h3 { font-family:'Yeseva One', serif; margin:0 0 12px; }
.comment-form textarea, .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url] { width:100%; padding:10px 12px; border:2px solid var(--ink); border-radius:10px; background:#fff7e0; font-family:'Alegreya', serif; font-size:16px; margin-bottom:10px; }
.comment-form .submit { padding:10px 20px; border:2.5px solid var(--ink); border-radius:24px; background:var(--brick); color:#fff7d6; font-family:'Alegreya', serif; font-weight:700; font-size:16px; cursor:pointer; box-shadow:3px 4px 0 var(--ink); }
.comment-form .submit:hover { transform: rotate(-1deg) translateY(-1px); }
/* Пагинация WP — стилизуем под штампики */
.pagination { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:32px 0; }
.pagination .page-numbers { width:46px; height:46px; display:grid; place-items:center; border:2.5px solid var(--ink); border-radius:50%; background:var(--cream-card); font-family:'Yeseva One', serif; font-size:18px; color:var(--ink); text-decoration:none; box-shadow:2px 3px 0 var(--ink); transition: transform .12s ease; }
.pagination .page-numbers:nth-child(odd){ transform: rotate(-2deg); }
.pagination .page-numbers:nth-child(even){ transform: rotate(2deg); }
.pagination .page-numbers:hover { transform: translate(-1px,-2px) rotate(0deg); box-shadow:3px 4px 0 var(--ink); }
.pagination .page-numbers.current { background:var(--brick); color:#fff7d6; }
.pagination .page-numbers.dots { background:transparent; border:none; box-shadow:none; width:auto; }
/* 404 */
.error-card { max-width:640px; margin:60px auto; padding:36px 32px; background:var(--cream-card); border:2.5px solid var(--ink); border-radius:24px; box-shadow:6px 8px 0 var(--ink); text-align:center; transform: rotate(-.6deg); }
.error-card h1 { font-family:'Yeseva One', serif; font-size:56px; margin:0 0 16px; }
.error-card p { font-family:'Caveat', cursive; font-size:22px; color:var(--ink-soft); }
.error-card .home-link { display:inline-block; margin-top:18px; padding:10px 22px; background:var(--brick); color:#fff7d6; border:2.5px solid var(--ink); border-radius:24px; font-family:'Alegreya', serif; font-weight:700; text-decoration:none; box-shadow:3px 4px 0 var(--ink); transform: rotate(1.5deg); }
/* Утилитарный класс "только на десктопе" / "только на мобильном" */
@media (max-width: 720px) { .only-desktop { display:none !important; } }
@media (min-width: 721px) { .only-mobile { display:none !important; } }
/* ========================================================================
ACCESSIBILITY & SEO (skip-link, screen-reader-text)
======================================================================== */
.screen-reader-text { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed !important; top: 12px; left: 12px; z-index: 99999; width: auto; height: auto; padding: 10px 18px; background: var(--brick); color: #fff7d6; font-family: 'Alegreya', serif; font-weight: 700; border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 3px 4px 0 var(--ink); text-decoration: none; }
/* ========================================================================
ВИДЕОПЛЕЕР Plyr (плагин wp-plyr-hls) — встраиваем в наш .player без двойных отступов
======================================================================== */
.player .embed .video-wrapper { max-width: none; margin: 0; border-radius: 0; box-shadow: none; height: 100%; }
.player .embed .video-wrapper video,
.player .embed video { width: 100%; height: 100%; display: block; background: #000; }
.player .embed .plyr { height: 100%; --plyr-color-main: var(--brick); }
.player .embed .plyr--video { border-radius: 0; }
/* ========================================================================
ПРОИЗВОДИТЕЛЬНОСТЬ — content-visibility и contain
Не отрисовываем секции под viewport'ом, пока они не нужны (Chromium 85+).
Это даёт мгновенный first paint и снижает Total Blocking Time.
======================================================================== */
.shelves, .moods, .collections, .fresh-row, .tag-cloud-wrap,
.letters, .makers, .onthisday, .catalog, .similar, .creators,
.related, .author-card, .comments-section {
content-visibility: auto;
contain-intrinsic-size: auto 600px;
}
/* Изоляция перерасчётов для интерактивных карточек */
.cartoon-card, .shelf, .mood-card, .coll-card, .letter, .item, .card {
contain: layout style;
}
/* Плеер: фиксируем aspect-ratio заранее, чтобы CLS=0 при загрузке iframe */
.player { aspect-ratio: 16 / 9; }
/* Модалки — paint только при открытии */
.mega, .search-panel, .auth-panel {
contain: layout paint;
}
/* will-change только при ховере — не плодим compositor layers заранее */
.cartoon-card:hover, .sticker:hover, .icon-btn:hover {
will-change: transform;
}
/* ========================================================================
ФИКСЫ ВИДЕОПЛЕЕРА — когда .embed содержит реальное видео, скрываем
декоративные ::before / ::after / .player-label, которые перекрывали плеер.
======================================================================== */
.player .embed:not(.embed--empty) {
z-index: 5;
}
.player:has(.embed:not(.embed--empty)) {
background: #000;
box-shadow: none;
}
.player:has(.embed:not(.embed--empty))::before,
.player:has(.embed:not(.embed--empty))::after {
display: none;
}
.player:has(.embed:not(.embed--empty)) > .player-label {
display: none;
}
/* Fallback для браузеров без :has() — добавляем класс через JS-флаг */
.player.has-video::before,
.player.has-video::after,
.player.has-video > .player-label {
display: none;
}
.player.has-video {
background: #000;
box-shadow: none;
}
.player.has-video .embed { z-index: 5; }
/* Plyr внутри embed — заполняет всё пространство */
.player .embed .plyr,
.player .embed .plyr--video,
.player .embed .plyr__video-wrapper {
width: 100%;
height: 100%;
}
.player .embed .plyr video {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}