/* Theme Name: OtakuVerse Theme URI: https://example.com/otakuverse Author: OtakuVerse Author URI: https://example.com Description: A lightweight, SEO-rich WordPress theme for anime & manga blogs. Organize content like a book — Series, Chapters and Episodes — with chapter navigation, embedded video episodes, reviews, an animated home page and a stylish neo-Tokyo dark aesthetic. Fully customizable from the WordPress Customizer. Version: 1.2.0 Requires at least: 5.8 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: otakuverse Tags: blog, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready, two-columns, right-sidebar */ /* ============================================================ OtakuVerse — Design Tokens Accent colors are overridden from the Customizer via inline CSS. ============================================================ */ :root{ --ov-bg:#0a0a0f; --ov-surface:#14141f; --ov-surface-2:#1c1c2b; --ov-surface-3:#262638; --ov-border:rgba(255,255,255,.08); --ov-border-strong:rgba(255,255,255,.16); --ov-text:#ece9f5; --ov-muted:#9a96b0; --ov-faint:#65617c; --ov-accent:#ff2e88; /* customizable */ --ov-accent-2:#00e5ff; /* customizable */ --ov-accent-3:#7b5cff; /* derived gradient stop */ --ov-radius:16px; --ov-radius-sm:10px; --ov-shadow:0 18px 50px -20px rgba(0,0,0,.8); --ov-shadow-glow:0 0 0 1px var(--ov-border),0 12px 40px -18px color-mix(in srgb,var(--ov-accent) 60%,transparent); --ov-display:'Chakra Petch','Zen Kaku Gothic New',system-ui,sans-serif; --ov-body:'Zen Kaku Gothic New','Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --ov-wrap:1180px; --ov-read:760px; } /* Light mode (Customizer toggle adds .ov-light to ) */ html.ov-light{ --ov-bg:#f5f3fb; --ov-surface:#ffffff; --ov-surface-2:#f0edf7; --ov-surface-3:#e7e2f2; --ov-border:rgba(20,16,40,.10); --ov-border-strong:rgba(20,16,40,.18); --ov-text:#171327; --ov-muted:#5a5570; --ov-faint:#8a85a0; --ov-shadow:0 18px 50px -24px rgba(60,40,120,.35); } /* ============================================================ Reset / base ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--ov-bg); color:var(--ov-text); font-family:var(--ov-body); font-size:16px; line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* subtle starfield/noise atmosphere */ body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb,var(--ov-accent) 16%,transparent), transparent 60%), radial-gradient(900px 500px at -10% 10%, color-mix(in srgb,var(--ov-accent-2) 14%,transparent), transparent 55%); } body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img{max-width:100%;height:auto;display:block} a{color:var(--ov-accent-2);text-decoration:none;transition:color .2s} a:hover{color:var(--ov-accent)} h1,h2,h3,h4,h5{font-family:var(--ov-display);font-weight:700;line-height:1.15;letter-spacing:.2px;margin:0 0 .5em} p{margin:0 0 1.1em} ul,ol{margin:0 0 1.1em;padding-left:1.3em} hr{border:none;border-top:1px solid var(--ov-border);margin:2rem 0} button{font-family:inherit} :focus-visible{outline:2px solid var(--ov-accent);outline-offset:3px} .ov-wrap{width:100%;max-width:var(--ov-wrap);margin-inline:auto;padding-inline:20px} .ov-screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ov-accent);color:#fff;padding:10px 16px;border-radius:0 0 8px 0} .skip-link:focus{left:0} /* gradient text helper */ .ov-grad{ background:linear-gradient(100deg,var(--ov-accent),var(--ov-accent-3),var(--ov-accent-2)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* ============================================================ Buttons / chips ============================================================ */ .ov-btn{ display:inline-flex;align-items:center;gap:.5em; padding:.8em 1.5em;border-radius:999px;font-family:var(--ov-display); font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-size:.82rem; background:linear-gradient(100deg,var(--ov-accent),var(--ov-accent-3)); color:#fff!important;border:none;cursor:pointer; box-shadow:0 10px 30px -10px color-mix(in srgb,var(--ov-accent) 70%,transparent); transition:transform .2s,box-shadow .2s,filter .2s; } .ov-btn:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 16px 36px -12px color-mix(in srgb,var(--ov-accent) 80%,transparent)} .ov-btn--ghost{background:transparent;color:var(--ov-text)!important;border:1px solid var(--ov-border-strong);box-shadow:none} .ov-btn--ghost:hover{border-color:var(--ov-accent);color:var(--ov-accent)!important} .ov-chip{ display:inline-block;padding:.28em .8em;border-radius:999px;font-size:.72rem; font-family:var(--ov-display);letter-spacing:.6px;text-transform:uppercase; background:var(--ov-surface-2);border:1px solid var(--ov-border);color:var(--ov-muted); } .ov-chip--accent{background:color-mix(in srgb,var(--ov-accent) 18%,transparent);color:var(--ov-accent);border-color:color-mix(in srgb,var(--ov-accent) 40%,transparent)} /* ============================================================ Header ============================================================ */ .ov-site-header{ position:sticky;top:0;z-index:100; backdrop-filter:saturate(140%) blur(14px); background:color-mix(in srgb,var(--ov-bg) 78%,transparent); border-bottom:1px solid var(--ov-border); transition:background .3s,box-shadow .3s; } .ov-site-header.is-scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.7)} .ov-header-inner{display:flex;align-items:center;gap:24px;height:74px} .ov-brand{display:flex;align-items:center;gap:12px;font-family:var(--ov-display);font-weight:700;font-size:1.35rem;color:var(--ov-text)} .ov-brand img{max-height:42px;width:auto} .ov-brand .ov-brand-mark{ width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:1.1rem; background:linear-gradient(135deg,var(--ov-accent),var(--ov-accent-2)); box-shadow:0 8px 22px -8px color-mix(in srgb,var(--ov-accent) 70%,transparent); } .ov-brand:hover{color:var(--ov-text)} .ov-brand .ov-brand-text b{color:var(--ov-accent)} .ov-nav{margin-left:auto} .ov-nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0} .ov-nav li{position:relative} .ov-nav a{ display:block;padding:9px 14px;border-radius:10px;color:var(--ov-text); font-family:var(--ov-display);font-weight:500;font-size:.92rem;letter-spacing:.3px; transition:background .2s,color .2s; } .ov-nav a:hover,.ov-nav .current-menu-item>a{background:var(--ov-surface-2);color:var(--ov-accent)} .ov-nav .sub-menu{ position:absolute;top:calc(100% + 8px);left:0;min-width:200px; background:var(--ov-surface);border:1px solid var(--ov-border);border-radius:12px; padding:8px;display:none;flex-direction:column;box-shadow:var(--ov-shadow); } .ov-nav li:hover>.sub-menu{display:flex} .ov-header-tools{display:flex;align-items:center;gap:8px} .ov-icon-btn{ width:40px;height:40px;border-radius:11px;display:grid;place-items:center;cursor:pointer; background:var(--ov-surface-2);border:1px solid var(--ov-border);color:var(--ov-text); transition:border-color .2s,color .2s,transform .2s; } .ov-icon-btn:hover{border-color:var(--ov-accent);color:var(--ov-accent);transform:translateY(-1px)} .ov-menu-toggle{display:none} /* mobile nav drawer */ .ov-mobile-nav{ position:fixed;inset:0 0 0 auto;width:min(320px,86vw);z-index:200; background:var(--ov-surface);border-left:1px solid var(--ov-border); transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1); padding:80px 22px 30px;overflow-y:auto; } .ov-mobile-nav.is-open{transform:translateX(0)} .ov-mobile-nav ul{list-style:none;margin:0;padding:0} .ov-mobile-nav a{display:block;padding:13px 12px;border-radius:10px;color:var(--ov-text);font-family:var(--ov-display);font-size:1.05rem;border-bottom:1px solid var(--ov-border)} .ov-mobile-nav a:hover{color:var(--ov-accent)} .ov-mobile-nav .sub-menu a{padding-left:26px;font-size:.95rem;color:var(--ov-muted)} .ov-overlay{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:.3s} .ov-overlay.is-open{opacity:1;visibility:visible} .ov-mobile-close{position:absolute;top:18px;right:18px} /* ============================================================ Hero banner (home) ============================================================ */ .ov-hero{ position:relative;overflow:hidden;border-bottom:1px solid var(--ov-border); padding:clamp(70px,12vw,140px) 0 clamp(60px,10vw,110px); } .ov-hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.4} .ov-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--ov-bg) 92%),linear-gradient(90deg,var(--ov-bg) 5%,transparent 50%,var(--ov-bg) 98%)} .ov-hero.has-anim .ov-hero__mesh{ position:absolute;inset:-20%;z-index:0;filter:blur(60px);opacity:.6; background: radial-gradient(circle at 20% 30%,var(--ov-accent),transparent 40%), radial-gradient(circle at 80% 20%,var(--ov-accent-2),transparent 42%), radial-gradient(circle at 60% 80%,var(--ov-accent-3),transparent 45%); animation:ov-mesh 14s ease-in-out infinite alternate; } .ov-hero__grid{ position:absolute;inset:0;z-index:0;opacity:.18;pointer-events:none; background-image:linear-gradient(var(--ov-border) 1px,transparent 1px),linear-gradient(90deg,var(--ov-border) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%); } .ov-hero__inner{position:relative;z-index:2;max-width:760px} .ov-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px} .ov-hero h1{ font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:1.02;margin-bottom:.35em;letter-spacing:-.5px; text-shadow:0 0 40px color-mix(in srgb,var(--ov-accent) 30%,transparent); } .ov-hero p.ov-hero__sub{font-size:clamp(1rem,2.1vw,1.25rem);color:var(--ov-muted);max-width:560px;margin-bottom:1.8em} .ov-hero__cta{display:flex;gap:14px;flex-wrap:wrap} /* floating sparks */ .ov-spark{position:absolute;border-radius:50%;z-index:1;filter:blur(.5px);opacity:.7} .has-anim .ov-spark{animation:ov-float linear infinite} /* ============================================================ Sections / grids ============================================================ */ .ov-section{padding:clamp(46px,7vw,84px) 0} .ov-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap} .ov-section-head h2{font-size:clamp(1.6rem,3.6vw,2.3rem);position:relative} .ov-section-head h2::before{content:"";display:inline-block;width:10px;height:1.05em;margin-right:14px;border-radius:3px;background:linear-gradient(var(--ov-accent),var(--ov-accent-2));vertical-align:-2px} .ov-section-head .ov-sub{color:var(--ov-muted);font-size:.95rem;margin:0} .ov-section-head a.ov-more{font-family:var(--ov-display);font-size:.85rem;letter-spacing:.5px;text-transform:uppercase} .ov-grid{display:grid;gap:22px} .ov-grid--4{grid-template-columns:repeat(4,1fr)} .ov-grid--3{grid-template-columns:repeat(3,1fr)} .ov-grid--2{grid-template-columns:repeat(2,1fr)} /* ============================================================ Cards ============================================================ */ .ov-card{ position:relative;background:var(--ov-surface);border:1px solid var(--ov-border); border-radius:var(--ov-radius);overflow:hidden;display:flex;flex-direction:column; transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .28s,box-shadow .28s; } .ov-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ov-accent) 50%,transparent);box-shadow:var(--ov-shadow)} .ov-card__thumb{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ov-surface-2)} .ov-card--wide .ov-card__thumb{aspect-ratio:16/9} .ov-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .ov-card:hover .ov-card__thumb img{transform:scale(1.07)} .ov-card__thumb .ov-noimg{position:absolute;inset:0;display:grid;place-items:center;color:var(--ov-faint);font-family:var(--ov-display);font-size:2.4rem;background:linear-gradient(135deg,var(--ov-surface-2),var(--ov-surface-3))} .ov-card__badge{position:absolute;top:10px;left:10px;z-index:2} .ov-card__play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .25s;background:rgba(0,0,0,.35)} .ov-card--wide:hover .ov-card__play{opacity:1} .ov-card__play span{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--ov-accent);color:#fff;box-shadow:0 0 0 10px color-mix(in srgb,var(--ov-accent) 25%,transparent)} .ov-card__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1} .ov-card__meta{display:flex;align-items:center;gap:10px;font-size:.76rem;color:var(--ov-faint);font-family:var(--ov-display);letter-spacing:.4px;text-transform:uppercase} .ov-card__title{font-size:1.02rem;line-height:1.25;margin:0} .ov-card__title a{color:var(--ov-text)} .ov-card__title a:hover{color:var(--ov-accent)} .ov-card__excerpt{font-size:.88rem;color:var(--ov-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ov-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:8px;font-size:.78rem;color:var(--ov-faint)} /* rating star */ .ov-rating{display:inline-flex;align-items:center;gap:5px;font-family:var(--ov-display);color:var(--ov-accent-2);font-weight:600} .ov-rating svg{width:15px;height:15px;fill:currentColor} /* chapter pill row (new chapters) */ .ov-chaplist{display:grid;gap:10px} .ov-chaprow{ display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--ov-border); border-radius:var(--ov-radius-sm);background:var(--ov-surface);transition:border-color .2s,transform .2s; } .ov-chaprow:hover{border-color:color-mix(in srgb,var(--ov-accent) 50%,transparent);transform:translateX(3px)} .ov-chaprow__num{ flex:none;min-width:54px;height:54px;border-radius:12px;display:grid;place-items:center;text-align:center; font-family:var(--ov-display);font-weight:700;line-height:1; background:linear-gradient(135deg,color-mix(in srgb,var(--ov-accent) 22%,transparent),color-mix(in srgb,var(--ov-accent-2) 18%,transparent)); border:1px solid var(--ov-border); } .ov-chaprow__num small{display:block;font-size:.55rem;letter-spacing:1px;color:var(--ov-muted);margin-bottom:2px} .ov-chaprow__num b{font-size:1.2rem} .ov-chaprow__info{flex:1;min-width:0} .ov-chaprow__info .s{font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;color:var(--ov-accent);font-family:var(--ov-display)} .ov-chaprow__info h4{margin:2px 0 0;font-size:1rem;font-family:var(--ov-body);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ov-chaprow__info h4 a{color:var(--ov-text)} .ov-chaprow__date{flex:none;font-size:.78rem;color:var(--ov-faint);font-family:var(--ov-display)} /* ============================================================ Single / content layout ============================================================ */ .ov-layout{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;padding:46px 0} .ov-main{min-width:0} .ov-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:26px} .ov-widget{background:var(--ov-surface);border:1px solid var(--ov-border);border-radius:var(--ov-radius);padding:20px} .ov-widget h3{font-size:1rem;margin-bottom:14px;display:flex;align-items:center;gap:8px} .ov-widget ul{list-style:none;padding:0;margin:0} .ov-widget li{padding:8px 0;border-bottom:1px solid var(--ov-border);font-size:.92rem} .ov-widget li:last-child{border-bottom:none} .ov-article-head{margin-bottom:26px} .ov-breadcrumb{font-size:.8rem;color:var(--ov-faint);font-family:var(--ov-display);margin-bottom:14px;letter-spacing:.3px} .ov-breadcrumb a{color:var(--ov-muted)} .ov-breadcrumb span{margin:0 6px;color:var(--ov-faint)} .ov-article-head h1{font-size:clamp(1.8rem,4.4vw,2.8rem);margin-bottom:.4em} .ov-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;color:var(--ov-muted);font-size:.86rem;font-family:var(--ov-display)} .ov-featured{border-radius:var(--ov-radius);overflow:hidden;border:1px solid var(--ov-border);margin-bottom:26px} .ov-content{max-width:var(--ov-read);font-size:1.06rem} .ov-content.is-reader{max-width:880px} .ov-content img{border-radius:10px;margin:1.6em auto} .ov-content h2{margin-top:1.8em;font-size:1.6rem} .ov-content h3{margin-top:1.5em;font-size:1.3rem} .ov-content blockquote{margin:1.6em 0;padding:.6em 1.2em;border-left:4px solid var(--ov-accent);background:var(--ov-surface);border-radius:0 10px 10px 0;color:var(--ov-muted);font-style:italic} .ov-content code{background:var(--ov-surface-2);padding:.15em .45em;border-radius:6px;font-size:.9em} .ov-content figure{margin:1.6em 0} .ov-content figcaption{text-align:center;font-size:.82rem;color:var(--ov-faint);margin-top:.6em} /* video embed responsive */ .ov-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--ov-radius);overflow:hidden;border:1px solid var(--ov-border);background:#000;margin-bottom:26px} .ov-video iframe,.ov-video video{position:absolute;inset:0;width:100%;height:100%;border:0} /* ============================================================ Chapter / Episode navigation ============================================================ */ .ov-chapnav{ display:flex;align-items:stretch;gap:12px;margin:30px 0;flex-wrap:wrap; } .ov-chapnav__btn{ flex:1;min-width:160px;display:flex;align-items:center;gap:12px;padding:14px 18px; background:var(--ov-surface);border:1px solid var(--ov-border);border-radius:var(--ov-radius-sm); transition:border-color .2s,transform .2s,background .2s;color:var(--ov-text); } .ov-chapnav__btn:hover{border-color:var(--ov-accent);transform:translateY(-2px);color:var(--ov-text)} .ov-chapnav__btn.is-next{justify-content:flex-end;text-align:right} .ov-chapnav__btn .dir{font-family:var(--ov-display);font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--ov-accent)} .ov-chapnav__btn .ttl{font-size:.92rem;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px} .ov-chapnav__btn.is-disabled{opacity:.4;pointer-events:none} .ov-chapnav__list{ flex:none;display:flex;align-items:center;gap:8px;padding:0 18px;border:1px solid var(--ov-border); border-radius:var(--ov-radius-sm);background:var(--ov-surface-2);font-family:var(--ov-display);cursor:pointer;color:var(--ov-text); } .ov-chapnav__list:hover{border-color:var(--ov-accent)} /* chapter selector dropdown (jump to any chapter number) */ .ov-chapter-select{position:relative} .ov-chapter-select select{ width:100%;appearance:none;padding:13px 44px 13px 16px;border-radius:var(--ov-radius-sm); background:var(--ov-surface);border:1px solid var(--ov-border);color:var(--ov-text); font-family:var(--ov-display);font-size:.95rem;cursor:pointer; } .ov-chapter-select::after{content:"▾";position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ov-accent)} /* full chapter list grid of numbers */ .ov-chapter-numbers{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .ov-chapter-numbers a{ min-width:42px;text-align:center;padding:9px 10px;border-radius:9px;font-family:var(--ov-display); font-weight:600;font-size:.9rem;background:var(--ov-surface-2);border:1px solid var(--ov-border);color:var(--ov-text); transition:.18s; } .ov-chapter-numbers a:hover{background:color-mix(in srgb,var(--ov-accent) 18%,transparent);border-color:var(--ov-accent);color:var(--ov-accent)} .ov-chapter-numbers a.is-current{background:linear-gradient(135deg,var(--ov-accent),var(--ov-accent-3));color:#fff;border-color:transparent} /* aside scrollable chapter list */ .ov-chaplist-aside{max-height:420px;overflow-y:auto;padding-right:6px} .ov-chaplist-aside li a{display:flex;justify-content:space-between;gap:10px;color:var(--ov-text)} .ov-chaplist-aside li.is-current a{color:var(--ov-accent);font-weight:600} .ov-chaplist-aside li .ep-date{color:var(--ov-faint);font-size:.78rem;font-family:var(--ov-display)} /* series header */ .ov-series-hero{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start;margin-bottom:36px} .ov-series-hero__poster{border-radius:var(--ov-radius);overflow:hidden;border:1px solid var(--ov-border);aspect-ratio:3/4;background:var(--ov-surface-2)} .ov-series-hero__poster img{width:100%;height:100%;object-fit:cover} .ov-series-meta{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0} .ov-series-stats{display:flex;gap:26px;margin:18px 0;flex-wrap:wrap} .ov-series-stats div b{display:block;font-family:var(--ov-display);font-size:1.4rem;color:var(--ov-accent-2)} .ov-series-stats div span{font-size:.78rem;color:var(--ov-faint);text-transform:uppercase;letter-spacing:.5px} /* tabs */ .ov-tabs{display:flex;gap:6px;border-bottom:1px solid var(--ov-border);margin-bottom:22px;flex-wrap:wrap} .ov-tab{padding:11px 18px;font-family:var(--ov-display);font-weight:600;font-size:.92rem;color:var(--ov-muted);cursor:pointer;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none} .ov-tab.is-active{color:var(--ov-accent);border-bottom-color:var(--ov-accent)} .ov-tabpane{display:none} .ov-tabpane.is-active{display:block;animation:ov-fade .4s ease} /* ============================================================ Pagination / comments / forms ============================================================ */ .ov-pagination{display:flex;justify-content:center;gap:8px;margin:40px 0;flex-wrap:wrap} .ov-pagination .page-numbers{ min-width:44px;text-align:center;padding:10px 14px;border-radius:10px;font-family:var(--ov-display); background:var(--ov-surface);border:1px solid var(--ov-border);color:var(--ov-text); } .ov-pagination .page-numbers.current{background:linear-gradient(135deg,var(--ov-accent),var(--ov-accent-3));color:#fff;border-color:transparent} .ov-pagination a.page-numbers:hover{border-color:var(--ov-accent);color:var(--ov-accent)} .ov-comments{margin-top:46px;background:var(--ov-surface);border:1px solid var(--ov-border);border-radius:var(--ov-radius);padding:26px} .ov-comments input[type=text],.ov-comments input[type=email],.ov-comments input[type=url],.ov-comments textarea{ width:100%;background:var(--ov-surface-2);border:1px solid var(--ov-border);border-radius:10px; padding:12px 14px;color:var(--ov-text);font-family:inherit;margin-bottom:14px; } .ov-comments .comment-list{list-style:none;padding:0} .ov-comments .comment-body{padding:14px 0;border-bottom:1px solid var(--ov-border)} .ov-searchform{display:flex;gap:8px} .ov-searchform input{flex:1;background:var(--ov-surface-2);border:1px solid var(--ov-border);border-radius:10px;padding:11px 14px;color:var(--ov-text)} /* ============================================================ Footer ============================================================ */ .ov-site-footer{border-top:1px solid var(--ov-border);background:var(--ov-surface);margin-top:60px} .ov-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;padding:54px 0 34px} .ov-footer-grid h4{font-size:.92rem;text-transform:uppercase;letter-spacing:.8px;color:var(--ov-muted);margin-bottom:16px} .ov-footer-grid ul{list-style:none;padding:0;margin:0} .ov-footer-grid li{margin-bottom:9px} .ov-footer-grid a{color:var(--ov-muted)} .ov-footer-grid a:hover{color:var(--ov-accent)} .ov-footer-about p{color:var(--ov-muted);font-size:.92rem;max-width:320px} .ov-social{display:flex;gap:10px;margin-top:16px} .ov-social a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--ov-surface-2);border:1px solid var(--ov-border);color:var(--ov-text)} .ov-social a:hover{border-color:var(--ov-accent);color:var(--ov-accent);transform:translateY(-2px)} .ov-social svg{width:18px;height:18px;fill:currentColor} .ov-footer-bottom{border-top:1px solid var(--ov-border);padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--ov-faint);font-size:.85rem} /* footer chapter list (requested: show chapter numbers in footer) */ .ov-footer-chapters{flex-wrap:wrap} /* ============================================================ Back to top ============================================================ */ .ov-totop{position:fixed;right:22px;bottom:22px;z-index:90;opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s} .ov-totop.is-visible{opacity:1;visibility:visible;transform:none} /* ============================================================ Scroll reveal ============================================================ */ .ov-reveal{transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .ov-reveal.ov-will{opacity:0;transform:translateY(26px)} .ov-reveal.ov-will.is-in{opacity:1;transform:none} /* ============================================================ Keyframes ============================================================ */ @keyframes ov-mesh{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(4%,3%) rotate(8deg)}} @keyframes ov-float{0%{transform:translateY(0)}100%{transform:translateY(-130vh)}} @keyframes ov-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes ov-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ov-accent) 45%,transparent)}50%{box-shadow:0 0 0 12px transparent}} /* ============================================================ Responsive ============================================================ */ @media (max-width:1024px){ .ov-grid--4{grid-template-columns:repeat(3,1fr)} .ov-layout{grid-template-columns:1fr;gap:30px} .ov-aside{position:static;flex-direction:column;order:2} .ov-footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:768px){ .ov-nav{display:none} .ov-menu-toggle{display:grid} .ov-grid--4,.ov-grid--3{grid-template-columns:repeat(2,1fr)} .ov-series-hero{grid-template-columns:130px 1fr;gap:18px} .ov-chapnav__list{order:-1;width:100%;justify-content:center} .ov-footer-grid{grid-template-columns:1fr 1fr;gap:24px} } @media (max-width:520px){ .ov-grid--2,.ov-grid--3,.ov-grid--4{grid-template-columns:1fr 1fr;gap:14px} .ov-card__body{padding:12px} .ov-card__title{font-size:.92rem} .ov-chapnav{flex-direction:column} .ov-chapnav__btn{min-width:0} .ov-chapnav__btn.is-next{justify-content:space-between} .ov-footer-grid{grid-template-columns:1fr} .ov-series-hero{grid-template-columns:1fr} .ov-series-hero__poster{max-width:200px} .ov-header-inner{height:62px} } /* reduced motion */ @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .ov-reveal{opacity:1;transform:none} } /* ============================================================ Single posts / archive / misc additions ============================================================ */ .ov-single-head{margin-bottom:22px} .ov-single-title{font-size:clamp(1.7rem,4.4vw,2.8rem);line-height:1.08;letter-spacing:-.5px} .ov-single-thumb{margin:0 0 26px;border-radius:var(--ov-radius);overflow:hidden;border:1px solid var(--ov-border)} .ov-single-thumb img{width:100%;display:block} .ov-single-meta{color:var(--ov-faint);font-size:.86rem;font-family:var(--ov-display)} .ov-single-meta .ov-meta-date svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px} .ov-rating--lg{font-size:1.15rem} .ov-rating--lg svg{width:20px;height:20px} .ov-allnumbers{margin:30px 0} .ov-allnumbers h3{font-size:1rem;margin-bottom:12px;display:flex;align-items:center;gap:8px} .ov-archive-title{font-size:clamp(1.7rem,4vw,2.6rem)} .ov-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .ov-tags a{font-size:.78rem;padding:5px 12px;border-radius:999px;background:var(--ov-surface);border:1px solid var(--ov-border);color:var(--ov-muted);font-family:var(--ov-display)} .ov-tags a:hover{border-color:var(--ov-accent);color:var(--ov-accent)} .ov-pagelinks{margin:24px 0;display:flex;gap:8px;flex-wrap:wrap;font-family:var(--ov-display);font-size:.85rem;align-items:center} .ov-pagelinks a{padding:6px 12px;border-radius:8px;background:var(--ov-surface);border:1px solid var(--ov-border)} .ov-empty{text-align:center} .ov-searchform__btn{display:grid;place-items:center;width:46px;border:1px solid var(--ov-border);background:var(--ov-surface-2);border-radius:10px;color:var(--ov-text);cursor:pointer;flex:0 0 auto} .ov-searchform__btn:hover{border-color:var(--ov-accent);color:var(--ov-accent)} .ov-searchform__btn svg{width:18px;height:18px} .ov-series-hero__body .ov-content p:first-child{margin-top:0} @media(max-width:520px){ .ov-series-stats{gap:18px} .ov-allnumbers{margin:22px 0} } /* ============================================================ v1.1 ENHANCEMENTS Banner image animation · video loading · search filter · no-results suggestions · mobile responsiveness ============================================================ */ /* ---- Animated banner image (Ken Burns) ---- */ .ov-hero__bg.is-kenburns{ transform:scale(1.12); transform-origin:50% 50%; will-change:transform; } .ov-hero.has-anim .ov-hero__bg.is-kenburns{ animation:ov-kenburns 26s ease-in-out infinite alternate; } @keyframes ov-kenburns{ 0% {transform:scale(1.08) translate3d(-1.5%,-1%,0)} 100%{transform:scale(1.2) translate3d(2%,1.5%,0)} } /* a gentle drift for the whole banner content on load */ .ov-hero.has-anim .ov-hero__inner{animation:ov-fade .8s ease both} /* ---- Video player: loading skeleton until the frame paints ---- */ .ov-video{position:relative} .ov-video__spinner{ position:absolute;z-index:1;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px; border-radius:50%;border:3px solid color-mix(in srgb,var(--ov-accent) 25%,transparent); border-top-color:var(--ov-accent);animation:ov-spin .8s linear infinite; } .ov-video.is-loaded .ov-video__spinner{display:none} .ov-video iframe,.ov-video video{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2} @keyframes ov-spin{to{transform:rotate(360deg)}} /* ---- Search form with filter dropdown ---- */ .ov-searchform{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap} .ov-searchform__field{flex:1 1 220px;min-width:0;display:flex} .ov-searchform__input{ width:100%;background:var(--ov-surface-2);border:1px solid var(--ov-border);border-radius:10px; padding:11px 14px;color:var(--ov-text);font-family:inherit;font-size:.95rem; } .ov-searchform__input:focus{outline:none;border-color:var(--ov-accent)} .ov-searchform__filter{ position:relative;display:flex;align-items:center;gap:6px;flex:0 0 auto; background:var(--ov-surface-2);border:1px solid var(--ov-border);border-radius:10px;padding:0 8px 0 12px;color:var(--ov-muted); } .ov-searchform__filter:focus-within{border-color:var(--ov-accent)} .ov-searchform__filter > svg:first-child{width:16px;height:16px;flex:none;opacity:.8} .ov-searchform__filter select{ appearance:none;-webkit-appearance:none;background:transparent;border:none;color:var(--ov-text); font-family:var(--ov-display);font-size:.86rem;font-weight:600;letter-spacing:.3px; padding:11px 26px 11px 4px;cursor:pointer; } .ov-searchform__filter select:focus{outline:none} .ov-searchform__filter select option{background:var(--ov-surface);color:var(--ov-text)} .ov-searchform__caret{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none;color:var(--ov-accent)} /* ---- No-results / suggestions ---- */ .ov-noresults{ text-align:center;max-width:560px;margin:30px auto 10px;padding:34px 20px; background:var(--ov-surface);border:1px solid var(--ov-border);border-radius:var(--ov-radius); } .ov-noresults__icon{ display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;border-radius:50%; background:color-mix(in srgb,var(--ov-accent) 14%,transparent);color:var(--ov-accent); } .ov-noresults__icon svg{width:28px;height:28px} .ov-noresults h3{font-size:1.4rem;margin-bottom:.4em} .ov-noresults p{color:var(--ov-muted);margin-bottom:18px} .ov-noresults__form{max-width:440px;margin:0 auto} .ov-section-head h2 svg{width:22px;height:22px;vertical-align:-3px;color:var(--ov-accent)} /* ============================================================ Responsive — refined breakpoints (mobile-first hardening) ============================================================ */ @media (max-width:680px){ /* search bar stacks: full-width input, filter + button share a row */ .ov-searchform{gap:8px} .ov-searchform__field{flex:1 1 100%;order:1} .ov-searchform__filter{flex:1 1 auto;order:2} .ov-searchform__filter select{width:100%;flex:1} .ov-searchform__btn{order:3;flex:0 0 46px} /* episode (wide) cards go single-column so the 16:9 thumb is legible */ .ov-grid--3{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .ov-hero{padding:64px 0 52px;text-align:center} .ov-hero__inner{margin-inline:auto} .ov-hero__cta{justify-content:center} .ov-hero h1{font-size:clamp(2rem,9vw,2.8rem)} .ov-grid--3{grid-template-columns:1fr} /* wide episode cards: 1 per row */ .ov-grid--4,.ov-grid--2{grid-template-columns:1fr 1fr;gap:14px} .ov-section-head{margin-bottom:20px} .ov-chapnav__btn .ttl{max-width:60vw} .ov-header-inner{gap:12px} .ov-brand{font-size:1.15rem} .ov-brand img{max-height:34px} } @media (max-width:400px){ .ov-grid--4,.ov-grid--2,.ov-grid--3{grid-template-columns:1fr} .ov-header-tools{gap:6px} .ov-icon-btn{width:38px;height:38px} } /* keep the banner image motion subtle (not jarring) on small screens, but DO keep it — explicitly requested for mobile */ @media (max-width:560px){ @keyframes ov-kenburns{ 0% {transform:scale(1.1) translate3d(-1%,-.5%,0)} 100%{transform:scale(1.16) translate3d(1%,1%,0)} } } /* respect reduced-motion: stop the banner image animation too */ @media (prefers-reduced-motion:reduce){ .ov-hero__bg.is-kenburns{animation:none!important;transform:scale(1.04)!important} } /* ============================================================ Preloader — self-removing (JS + pure-CSS failsafe) ============================================================ */ .ov-preloader{ position:fixed;inset:0;z-index:9999;display:grid;place-items:center; background:var(--ov-bg); /* CSS SAFETY NET: even with zero JS, fade out automatically. */ animation:ov-preloader-auto .6s ease 2.6s forwards; } .ov-preloader.is-done{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease} .ov-preloader__inner{position:relative;width:84px;height:84px;display:grid;place-items:center} .ov-preloader__ring{ position:absolute;inset:0;border-radius:50%; border:3px solid color-mix(in srgb,var(--ov-accent) 18%,transparent); border-top-color:var(--ov-accent);border-right-color:var(--ov-accent-2); animation:ov-spin .9s linear infinite; } .ov-preloader__mark{ font-family:var(--ov-display);font-weight:700;font-size:1.6rem;color:#fff; width:52px;height:52px;border-radius:14px;display:grid;place-items:center; background:linear-gradient(135deg,var(--ov-accent),var(--ov-accent-2)); box-shadow:0 10px 30px -10px color-mix(in srgb,var(--ov-accent) 70%,transparent); animation:ov-pulse 1.6s ease-in-out infinite; } @keyframes ov-preloader-auto{to{opacity:0;visibility:hidden}} @media (prefers-reduced-motion:reduce){ .ov-preloader{animation:ov-preloader-auto .01s linear .3s forwards} .ov-preloader__ring,.ov-preloader__mark{animation:none} } /* ============================================================ v1.2 — Auto poster art · animated headings · creative polish ============================================================ */ /* Auto-generated SVG posters fill their card / hero slot */ .ov-poster-art{width:100%;height:100%;display:block;object-fit:cover} .ov-card__thumb .ov-poster-art{position:absolute;inset:0} .ov-series-hero__poster .ov-poster-art{position:absolute;inset:0} /* ---- Changeable heading size (Customizer → Typography) ---- --ov-h-scale is injected from the Customizer (1 / 1.15 / 1.32). */ :root{--ov-h-scale:1} .ov-hero h1{font-size:calc(clamp(2.4rem,6.4vw,4.6rem) * var(--ov-h-scale))} .ov-section-head h2{font-size:calc(clamp(1.6rem,3.6vw,2.3rem) * var(--ov-h-scale))} .ov-single-title{font-size:calc(clamp(1.7rem,4.4vw,2.8rem) * var(--ov-h-scale))} .ov-archive-title{font-size:calc(clamp(1.7rem,4vw,2.6rem) * var(--ov-h-scale))} /* ---- Animated gradient hero title ---- */ .ov-hero h1{ background:linear-gradient(100deg,var(--ov-text) 0%,var(--ov-text) 35%,var(--ov-accent) 55%,var(--ov-accent-2) 75%,var(--ov-text) 95%); background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent; } .ov-hero.has-anim h1{animation:ov-title-shine 7s linear infinite} @keyframes ov-title-shine{to{background-position:-220% center}} @media (prefers-reduced-motion:reduce){ .ov-hero.has-anim h1{animation:none} } /* ---- Section heading: animated underline accent ---- */ .ov-section-head h2::before{transition:height .3s ease} .ov-section:hover .ov-section-head h2::before{height:1.25em} /* ---- Cards: subtle sheen sweep on hover ---- */ .ov-card__thumb::after{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%); transform:translateX(-60%);transition:opacity .1s; } .ov-card:hover .ov-card__thumb::after{opacity:1;animation:ov-sheen .8s ease} @keyframes ov-sheen{from{transform:translateX(-60%)}to{transform:translateX(60%)}} @media (prefers-reduced-motion:reduce){ .ov-card:hover .ov-card__thumb::after{animation:none;opacity:0} } /* ---- Staggered reveal for cards inside a grid ---- */ .ov-grid .ov-reveal.ov-will{transition-delay:0ms} .ov-grid .ov-reveal.ov-will:nth-child(2){transition-delay:60ms} .ov-grid .ov-reveal.ov-will:nth-child(3){transition-delay:120ms} .ov-grid .ov-reveal.ov-will:nth-child(4){transition-delay:180ms} .ov-grid .ov-reveal.ov-will:nth-child(5){transition-delay:120ms} .ov-grid .ov-reveal.ov-will:nth-child(6){transition-delay:180ms} .ov-grid .ov-reveal.ov-will:nth-child(7){transition-delay:240ms} .ov-grid .ov-reveal.ov-will:nth-child(8){transition-delay:300ms} /* ---- Single article hero header (review / episode / blog) ---- */ .ov-post-hero{ position:relative;margin:0 0 26px;padding:30px clamp(18px,4vw,40px); border-radius:var(--ov-radius);overflow:hidden;border:1px solid var(--ov-border); background: radial-gradient(900px 380px at 12% -30%,color-mix(in srgb,var(--ov-accent) 26%,transparent),transparent 60%), radial-gradient(700px 360px at 100% 0%,color-mix(in srgb,var(--ov-accent-2) 22%,transparent),transparent 60%), var(--ov-surface); } .ov-post-hero .ov-single-title{margin-bottom:.3em} .ov-post-hero .ov-single-meta{color:var(--ov-muted)} /* episode / review wider reader column for comfortable reading */ .ov-content.is-reader{max-width:880px}