.h4f-modern-reader{
--h4f-bg:#090a13;
--h4f-panel:#11121d;
--h4f-panel-2:#171425;
--h4f-purple:#b63cff;
--h4f-purple-2:#8628d8;
--h4f-line:rgba(190,80,255,.28);
--h4f-text:#f7f4fb;
--h4f-muted:#aaa4b5;
overflow-x:hidden;
}
.h4f-modern-reader .h4f-reader-hero{
width:min(1180px,calc(100% - 28px));
margin:24px auto 28px;
padding:38px 30px 26px;
border:1px solid var(--h4f-line);
border-radius:28px;
background:
radial-gradient(circle at 4% 4%,rgba(182,60,255,.14),transparent 24%),
radial-gradient(circle at 96% 96%,rgba(115,46,220,.09),transparent 28%),
linear-gradient(145deg,#171422 0%,#0e0f19 58%,#090a12 100%);
box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.03);
}
.h4f-modern-reader .h4f-reader-hero #chapter-heading{
width:auto!important;
max-width:980px!important;
margin:0 auto!important;
padding:0!important;
border:0!important;
background:none!important;
box-shadow:none!important;
color:var(--h4f-text)!important;
font-size:clamp(26px,3vw,42px)!important;
font-weight:850!important;
line-height:1.2!important;
letter-spacing:-.035em!important;
text-align:center!important;
}
.h4f-modern-reader .h4f-reader-hero #chapter-heading:after{display:none!important;}
.h4f-modern-reader .h4f-reader-hero__chapter{
display:flex;
align-items:center;
justify-content:center;
gap:16px;
margin:22px 0 30px;
color:#c653ff;
font-size:clamp(20px,2.1vw,29px);
font-weight:850;
}
.h4f-modern-reader .h4f-reader-hero__chapter span{color:#d8b8ff;}
.h4f-modern-reader .h4f-reader-toolbar--pro{
display:grid;
grid-template-columns:minmax(235px,320px) minmax(260px,1fr) 160px;
gap:22px;
align-items:center;
padding:18px;
border:1px solid rgba(190,80,255,.20);
border-radius:22px;
background:rgba(8,9,17,.63);
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.h4f-modern-reader .h4f-reader-library-btn{
display:flex;
align-items:center;
gap:16px;
min-height:82px;
padding:10px 16px 10px 10px;
border:0;
border-radius:17px;
background:transparent;
color:#fff;
text-align:left;
cursor:pointer;
}
.h4f-modern-reader .h4f-reader-library-btn__icon{
display:grid;
place-items:center;
flex:0 0 68px;
width:68px;
height:68px;
border:1px solid rgba(226,157,255,.48);
border-radius:18px;
background:linear-gradient(145deg,#bd43ff 0%,#8726d7 100%);
box-shadow:0 12px 30px rgba(155,36,232,.28),inset 0 1px 0 rgba(255,255,255,.24);
}
.h4f-modern-reader .h4f-reader-library-btn__copy{
display:flex;
flex-direction:column;
gap:3px;
}
.h4f-modern-reader .h4f-reader-library-btn__copy small{
color:#f7f3fa;
font-size:14px;
font-weight:700;
line-height:1.1;
}
.h4f-modern-reader .h4f-reader-library-btn__copy strong{
color:#c64fff;
font-size:20px;
font-weight:900;
line-height:1.12;
}
.h4f-modern-reader .h4f-reader-library-btn.is-saved .h4f-reader-library-btn__icon{
background:linear-gradient(145deg,#8c3cff,#6820b7);
}
.h4f-modern-reader .h4f-reader-library-btn.is-saved .h4f-reader-library-btn__copy strong{color:#fff;}
.h4f-modern-reader .h4f-reader-toolbar__middle{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
padding-left:20px;
border-left:1px solid rgba(255,255,255,.14);
}
.h4f-modern-reader .h4f-reader-control-slot,
.h4f-modern-reader .h4f-reader-info-slot{
min-width:0;
}
.h4f-modern-reader .h4f-reader-control-slot .bootstrap-select,
.h4f-modern-reader .h4f-reader-control-slot .c-selectpicker,
.h4f-modern-reader .h4f-reader-control-slot select{
width:100%!important;
max-width:none!important;
}
.h4f-modern-reader .h4f-reader-control-slot .bootstrap-select>.dropdown-toggle,
.h4f-modern-reader .h4f-reader-control-slot .btn,
.h4f-modern-reader .h4f-reader-control-slot button,
.h4f-modern-reader .h4f-reader-control-slot select{
min-height:48px!important;
border:1px solid rgba(255,255,255,.18)!important;
border-radius:12px!important;
background:rgba(18,18,30,.98)!important;
color:#f5f1f8!important;
box-shadow:none!important;
}
.h4f-modern-reader .h4f-reader-toolbar__right{
display:flex;
flex-direction:column;
align-items:stretch;
gap:10px;
}
.h4f-modern-reader .h4f-reader-home{
display:grid;
place-items:center;
width:100%;
min-height:60px;
border:1px solid rgba(222,132,255,.50);
border-radius:16px;
background:linear-gradient(145deg,#b83df3 0%,#7920c6 100%);
color:#fff!important;
text-decoration:none!important;
box-shadow:0 12px 28px rgba(146,38,220,.28),inset 0 1px 0 rgba(255,255,255,.2);
}
.h4f-modern-reader .h4f-reader-home svg{
width:25px;
height:25px;
fill:currentColor;
}
.h4f-modern-reader .h4f-reader-info-slot a,
.h4f-modern-reader .h4f-reader-info-slot button,
.h4f-modern-reader .h4f-reader-info-slot .btn{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
min-height:46px!important;
border:1px solid rgba(205,112,255,.35)!important;
border-radius:12px!important;
background:rgba(17,16,28,.98)!important;
color:#fff!important;
box-shadow:none!important;
}
.h4f-modern-reader .h4f-reader-native-nav--source{
position:absolute!important;
width:1px!important;
height:1px!important;
overflow:hidden!important;
clip:rect(0 0 0 0)!important;
clip-path:inset(50%)!important;
white-space:nowrap!important;
}
.h4f-modern-reader #manga-reading-nav-foot{
box-sizing:border-box;
width:min(1180px,calc(100% - 28px));
margin:22px auto!important;
padding:16px 18px!important;
border:1px solid rgba(190,80,255,.22)!important;
border-radius:18px!important;
background:linear-gradient(145deg,rgba(17,17,30,.99),rgba(10,11,20,.99))!important;
box-shadow:0 16px 40px rgba(0,0,0,.24)!important;
}
.h4f-modern-reader #manga-reading-nav-foot a,
.h4f-modern-reader #manga-reading-nav-foot button,
.h4f-modern-reader #manga-reading-nav-foot .btn{
min-height:50px!important;
padding:0 22px!important;
border:1px solid rgba(220,138,255,.42)!important;
border-radius:13px!important;
background:linear-gradient(145deg,#b13cf0 0%,#7c22c8 100%)!important;
color:#fff!important;
font-weight:850!important;
box-shadow:0 10px 24px rgba(145,36,215,.22)!important;
} @media(max-width:767px){
.h4f-modern-reader .h4f-reading-shell{
width:100%!important;
max-width:none!important;
padding-left:0!important;
padding-right:0!important;
}
.h4f-modern-reader .h4f-reading-row{
margin-left:0!important;
margin-right:0!important;
}
.h4f-modern-reader .h4f-reading-row>.main-col,
.h4f-modern-reader .main-col-inner,
.h4f-modern-reader .c-blog-post,
.h4f-modern-reader .entry-content,
.h4f-modern-reader .entry-content_wrap,
.h4f-modern-reader .read-container,
.h4f-modern-reader .h4f-reader-pages{
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:0!important;
padding-right:0!important;
}
.h4f-modern-reader .h4f-reader-pages img{
display:block!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
margin-left:auto!important;
margin-right:auto!important;
}
.h4f-modern-reader .h4f-reader-pages p,
.h4f-modern-reader .h4f-reader-pages figure{
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
}
.h4f-modern-reader .h4f-reader-hero{
width:calc(100% - 14px);
margin:8px auto 14px;
padding:20px 9px 10px;
border-radius:20px;
}
.h4f-modern-reader .h4f-reader-hero #chapter-heading{
font-size:clamp(21px,6.2vw,29px)!important;
line-height:1.28!important;
padding:0 8px!important;
}
.h4f-modern-reader .h4f-reader-hero__chapter{
gap:10px;
margin:16px 0 18px;
font-size:20px;
}
.h4f-modern-reader .h4f-reader-toolbar--pro{
grid-template-columns:minmax(0,1fr) minmax(150px,.9fr) 62px;
gap:10px;
padding:10px;
border-radius:18px;
}
.h4f-modern-reader .h4f-reader-library-btn{
min-height:72px;
padding:8px 8px 8px 7px;
gap:11px;
border-radius:15px;
background:rgba(25,16,40,.72);
}
.h4f-modern-reader .h4f-reader-library-btn__icon{
flex-basis:58px;
width:58px;
height:58px;
border-radius:15px;
}
.h4f-modern-reader .h4f-reader-library-btn__copy small{font-size:12px;}
.h4f-modern-reader .h4f-reader-library-btn__copy strong{font-size:17px;}
.h4f-modern-reader .h4f-reader-toolbar__middle{
grid-template-columns:1fr;
gap:8px;
padding-left:10px;
}
.h4f-modern-reader .h4f-reader-control-slot .bootstrap-select>.dropdown-toggle,
.h4f-modern-reader .h4f-reader-control-slot .btn,
.h4f-modern-reader .h4f-reader-control-slot button,
.h4f-modern-reader .h4f-reader-control-slot select{
min-height:44px!important;
font-size:13px!important;
}
.h4f-modern-reader .h4f-reader-toolbar__right{
gap:8px;
}
.h4f-modern-reader .h4f-reader-home{
min-height:58px;
border-radius:15px;
}
.h4f-modern-reader .h4f-reader-info-slot a,
.h4f-modern-reader .h4f-reader-info-slot button,
.h4f-modern-reader .h4f-reader-info-slot .btn{
min-height:44px!important;
padding:0 6px!important;
font-size:12px!important;
}
.h4f-modern-reader #manga-reading-nav-foot{
width:calc(100% - 14px);
margin:14px auto 18px!important;
padding:10px!important;
border-radius:17px!important;
}
.h4f-modern-reader #manga-reading-nav-foot a,
.h4f-modern-reader #manga-reading-nav-foot button,
.h4f-modern-reader #manga-reading-nav-foot .btn{
min-height:46px!important;
padding:0 14px!important;
font-size:13px!important;
}
}
@media(max-width:520px){
.h4f-modern-reader .h4f-reader-toolbar--pro{
grid-template-columns:minmax(0,1fr) 56px;
}
.h4f-modern-reader .h4f-reader-library-btn{
grid-column:1/3;
}
.h4f-modern-reader .h4f-reader-toolbar__middle{
grid-column:1;
padding-left:0;
border-left:0;
}
.h4f-modern-reader .h4f-reader-toolbar__right{
grid-column:2;
align-self:stretch;
}
.h4f-modern-reader .h4f-reader-home{
min-height:56px;
}
.h4f-modern-reader .h4f-reader-info-slot a,
.h4f-modern-reader .h4f-reader-info-slot button,
.h4f-modern-reader .h4f-reader-info-slot .btn{
min-height:44px!important;
font-size:0!important;
}
.h4f-modern-reader .h4f-reader-info-slot i,
.h4f-modern-reader .h4f-reader-info-slot svg{
font-size:16px!important;
width:18px!important;
height:18px!important;
}
} .h4f-reader-mode-paged .h4f-reader-pages {
position: relative;
min-height: 44vh;
background: #050509;
}
.h4f-reader-mode-paged .h4f-reader-pages img[data-h4f-page] {
display: none !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
user-select: none;
-webkit-user-drag: none;
}
.h4f-reader-mode-paged .h4f-reader-pages img[data-h4f-page].is-active {
display: block !important;
}
.h4f-paged-reader-ui {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: min(460px, calc(100% - 24px));
margin: 10px auto 18px;
padding: 7px 10px;
position: sticky;
top: 8px;
z-index: 25;
border: 1px solid rgba(190,80,255,.25);
border-radius: 16px;
background: rgba(10,10,18,.88);
box-shadow: 0 14px 38px rgba(0,0,0,.28);
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.h4f-page-nav {
display: grid;
place-items: center;
width: 44px;
height: 40px;
padding: 0;
border: 1px solid rgba(222,132,255,.48);
border-radius: 11px;
background: linear-gradient(145deg,#b53ef3 0%,#7a22c7 100%);
color: #fff;
cursor: pointer;
box-shadow: 0 9px 22px rgba(142,39,215,.22);
transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}
.h4f-page-nav svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.h4f-page-nav:not(:disabled):hover {
transform: translateY(-1px);
filter: brightness(1.07);
}
.h4f-page-nav:disabled {
opacity: .28;
cursor: default;
box-shadow: none;
}
.h4f-page-counter {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 84px;
color: #f7f3fb;
font-size: 13px;
font-weight: 850;
letter-spacing: .02em;
}
.h4f-page-counter__sep {
color: #815b98;
}
.h4f-reader-mode-vertical .h4f-reader-pages {
background: #050509;
}
.h4f-reader-mode-vertical .h4f-reader-pages img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
}
@media (min-width: 768px) {
.h4f-reader-mode-paged .h4f-reader-pages img[data-h4f-page] {
max-height: calc(100vh - 150px) !important;
object-fit: contain;
}
}
@media (max-width: 767px) {
.h4f-reader-mode-paged .h4f-reader-pages {
min-height: 50vh;
}
.h4f-reader-mode-paged .h4f-reader-pages img[data-h4f-page] {
width: 100% !important;
max-width: 100% !important;
}
.h4f-paged-reader-ui {
width: calc(100% - 16px);
margin: 6px auto 10px;
top: 6px;
}
.h4f-page-nav {
width: 46px;
height: 42px;
}
} .h4f-modern-reader .h4f-reader-toolbar--pro{
grid-template-columns:minmax(240px,320px) minmax(300px,1fr) 150px;
}
.h4f-modern-reader .h4f-reader-control-slot:empty,
.h4f-modern-reader .h4f-reader-info-slot:empty{
display:none !important;
}
.h4f-modern-reader .h4f-reader-fallback-control{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
min-height:48px;
padding:0 14px;
border:1px solid rgba(255,255,255,.18);
border-radius:12px;
background:rgba(18,18,30,.98);
color:#f5f1f8;
font-size:14px;
font-weight:700;
text-decoration:none;
}
.h4f-modern-reader .h4f-reader-fallback-control svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:2;
}
@media(max-width:767px){
.h4f-modern-reader .h4f-reader-hero{
padding:20px 9px 12px;
}
.h4f-modern-reader .h4f-reader-toolbar--pro{
display:grid;
grid-template-columns:minmax(0,1fr) 58px;
grid-template-areas:
"library library"
"middle right";
gap:10px;
align-items:stretch;
padding:10px;
}
.h4f-modern-reader .h4f-reader-library-btn{
grid-area:library;
width:100%;
min-height:78px;
}
.h4f-modern-reader .h4f-reader-toolbar__middle{
grid-area:middle;
display:grid;
grid-template-columns:1fr;
gap:8px;
padding:0;
border-left:0;
min-width:0;
}
.h4f-modern-reader .h4f-reader-toolbar__right{
grid-area:right;
display:grid;
grid-template-rows:58px auto;
gap:8px;
align-content:start;
min-width:58px;
}
.h4f-modern-reader .h4f-reader-home{
width:58px;
min-height:58px;
height:58px;
border-radius:15px;
}
.h4f-modern-reader .h4f-reader-info-slot{
width:58px;
min-height:44px;
}
.h4f-modern-reader .h4f-reader-info-slot a,
.h4f-modern-reader .h4f-reader-info-slot button,
.h4f-modern-reader .h4f-reader-info-slot .btn{
width:58px !important;
min-width:58px !important;
min-height:44px !important;
height:44px !important;
padding:0 !important;
border-radius:13px !important;
font-size:0 !important;
}
.h4f-modern-reader .h4f-reader-info-slot a::after,
.h4f-modern-reader .h4f-reader-info-slot button::after,
.h4f-modern-reader .h4f-reader-info-slot .btn::after{
content:"i";
display:grid;
place-items:center;
width:22px;
height:22px;
border:2px solid currentColor;
border-radius:50%;
font-size:14px;
font-weight:900;
line-height:1;
}
.h4f-modern-reader .h4f-reader-control-slot{
width:100%;
min-width:0;
}
.h4f-modern-reader .h4f-reader-control-slot .bootstrap-select,
.h4f-modern-reader .h4f-reader-control-slot .c-selectpicker,
.h4f-modern-reader .h4f-reader-control-slot select,
.h4f-modern-reader .h4f-reader-fallback-control{
width:100% !important;
max-width:none !important;
min-height:46px !important;
}
.h4f-modern-reader .h4f-reader-hero #chapter-heading{
font-size:clamp(20px,6vw,28px)!important;
line-height:1.24!important;
}
.h4f-modern-reader .h4f-reader-hero__chapter{
margin:14px 0 17px;
font-size:19px;
}
}