/* =========================================================
novel-style.css (v3.38 - Revert Body Font, Compact Footer)
For: khokh-sudar WordPress theme
FIX v3.38:
- Reverted body font to 16px / 1.7 line-height
for better novel readability.
- Added new specific font-size (14px) and
line-height (1.6) to .site-footer to make
it compact as requested.
========================================================= */
/* --- Custom Properties (CSS Variables) ----------------------------------- */
:root {
--bg-main: #f0e6d9;
--bg-deep: #121110;
--ink: #2a2012;
--ink-soft: #554433;
--accent-main: #8c5a3a;
--accent-deep: #5e3b26;
--accent-novel: #9f664a;
--accent-novel-deep: #7e4b33;
--radius-main: 4px;
--shadow-soft: 0 2px 5px rgba(0,0,0,.1);
--max-width-content: 1180px;
}
/* --- 1. Base Layout (💠 FONT REVERTED) ------------------------------------ */
body {
margin: 0;
color: var(--ink);
background: var(--bg-deep);
font-family: "Noto Serif JP", ui-serif, Georgia, serif;
line-height: 1.7; /* 💠 Changed back to 1.7 */
font-size: 16px; /* 💠 Changed back to 16px */
}
a {
color: var(--accent-novel);
text-decoration: none;
}
a:hover {
color: var(--accent-novel-deep);
text-decoration: underline;
}
/* --- 2. Header -------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.25));
border-bottom: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(6px);
margin: 0; /* Remove any margin */
padding: 0; /* Remove padding, let nav control spacing */
}
.nav {
max-width: var(--max-width-content);
margin: 0 auto;
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: #f6efe6;
font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.nav .menu a {
color: #f6efe6;
opacity: .85;
}
.nav .menu a:hover {
opacity: 1;
}
/* --- 3. Page Layout ------------------------------------------------- */
#main-content { /* Changed from .page to avoid collision with class */
position: relative;
overflow: visible;
max-width: var(--max-width-content);
margin: 80px auto 120px;
padding: 0 16px;
/* 💠 FLEXBOX LAYOUT */
display: flex;
justify-content: space-between;
gap: 20px; /* Creates space between paper and sidebar */
}
/* --- 4. Paper (Main Parchment Block) -------------------------------------- */
.paper {
position: relative;
overflow: visible;
margin: 0;
background: none;
isolation: isolate; /* Safeguard for inkstone transform */
/* 💠 FLEXBOX LAYOUT */
flex-grow: 1; /* Allow to grow and fill space */
flex-basis: 0; /* Allow to shrink */
min-width: 300px; /* Prevents over-shrinking */
}
.paper .content {
position: relative;
z-index: 2;
padding: 100px 40px;
border-left: 1px solid rgba(0,0,0,.08);
border-right: 1px solid rgba(0,0,0,.08);
min-height: 500px;
box-shadow: 0 8px 20px rgba(0,0,0,.35);
border-radius: 6px;
}
/* --- 5. DARK PARCHMENT (Homepage / TOC) ----------------------------------- */
body.page-toc .paper .content,
body.is-homepage .paper .content {
background:
url("http://itako999.com/khokh-sudar/parchment-top-dark/") no-repeat center top,
url("http://itako999.com/khokh-sudar/parchment-bottom-dark/") no-repeat center bottom,
url("http://itako999.com/khokh-sudar/parchment-tile-dark/") repeat-y center top;
background-size: 100% auto;
color: #1b140e;
}
/* Inkstone image - HOMEPAGE ONLY */
body.page-toc .paper .content::before,
body.is-homepage .paper .content::before {
content: "";
position: absolute;
top: -270px;
right: -200px;
width: 300px;
height: 400px;
background: url("https://itako999.com/khokh-sudar/inkstone/") no-repeat center center;
background-size: contain;
z-index: 3;
opacity: 1.0;
pointer-events: none;
transform: rotate(-115deg);
}
/* --- 6. LIGHT PARCHMENT (Chapters) ---------------------------------------- */
body.page-chapter .paper .content {
background:
url("http://itako999.com/khokh-sudar/parchment-top/") no-repeat center top,
url("http://itako999.com/khokh-sudar/parchment-bottom/") no-repeat center bottom,
url("http://itako999.com/khokh-sudar/parchment-tile/") repeat-y center top;
background-size: 100% auto;
color: #3b2e2a;
}
/* --- 7. Sidebar ------------------------------------------------------------ */
.sidebar {
width: 320px;
margin-top: 80px;
display: flex;
flex-direction: column;
gap: 18px;
isolation: isolate; /* Safeguard for card opacity/blend-mode */
/* 💠 FLEXBOX LAYOUT */
flex-shrink: 0; /* Prevent sidebar from shrinking */
}
.card {
position: relative;
background: #352a21;
background-image:
linear-gradient(165deg, #3d3027 0%, #2a211a 100%),
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.03), transparent 60%),
radial-gradient(circle at 70% 80%, rgba(0,0,0,0.4), transparent 80%);
border: 1px solid rgba(80,60,40,0.5);
border-radius: 8px;
padding: 22px 24px;
color: #e2d7b9;
box-shadow:
inset 0 1px 2px rgba(255,255,255,0.05),
inset 0 -2px 3px rgba(0,0,0,0.6),
0 5px 10px rgba(0,0,0,0.35);
isolation: isolate;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
inset: 0;
background-image:
url("data:image/svg+xml;utf8,\
");
background-size: 200px 200px;
mix-blend-mode: multiply;
opacity: 0.45;
pointer-events: none;
}
.card::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 6px;
border: 1px dashed rgba(200,160,90,0.12);
box-shadow:
inset 0 0 12px rgba(255,220,160,0.04),
inset 0 0 6px rgba(0,0,0,0.5),
0 0 3px rgba(0,0,0,0.3);
opacity: 0.85;
pointer-events: none;
}
.card h3 {
color: #d5b57c;
font-family: "Noto Serif JP", serif;
margin-top: 0;
font-weight: 600;
text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.card a {
color: #e6cf95;
text-decoration: none;
transition: color 0.2s ease;
}
.card a:hover {
color: #fff6cf;
}
.card:hover {
background-image:
linear-gradient(170deg, #3a2e26 0%, #271f19 100%);
box-shadow:
inset 0 0 4px rgba(255,255,255,0.05),
inset 0 -2px 4px rgba(0,0,0,0.5),
0 6px 12px rgba(0,0,0,0.25);
transform: translateY(-1px);
transition: all 0.25s ease;
}
/* --- 8. Typography --------------------------------------------------------- */
.title {
font-size: clamp(22px, 3vw, 30px);
margin: 6px 0 8px;
color: var(--ink);
text-shadow: 0 1px 0 #fff;
}
.subtitle {
color: var(--ink-soft);
font-family: "Noto Sans JP", sans-serif;
font-size: .95rem;
}
.ornament {
display: block;
width: 100%;
max-width: 600px;
height: auto;
opacity: 0.85;
margin: 20px auto;
}
.ornament-medallion {
display: block;
width: 100px;
height: auto;
opacity: 0.75;
margin: 40px auto;
}
.ornament-tapered {
display: block;
width: 100%;
max-width: 450px;
height: 10px;
opacity: 0.65;
margin: 25px auto;
background:
url('data:image/svg+xml;utf8,')
center/contain no-repeat;
}
.novel-body,
.post-content {
margin-top: 2rem;
}
/* --- 9. TOC --------------------------------------------------------------- */
.toc h2 {
text-align: center;
color: var(--accent-novel-deep);
margin: 18px 0 6px;
}
.toc ol {
list-style: none;
padding-left: 0;
margin: 0;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.toc li {
margin: .45rem 0;
}
.toc a {
font-weight: 600;
}
/* --- 10. Footer (💠 COMPACT FONT) ----------------------------------------- */
.site-footer {
max-width: var(--max-width-content);
margin: 60px auto 40px;
padding: 20px 16px;
color: #f0e6d9;
font-family: "Noto Sans JP", sans-serif;
opacity: .9;
border-top: 1px solid rgba(255,255,255,.08);
background-color: var(--bg-deep) !important;
text-align: center;
/* 💠 NEW: Specific font rules for footer only */
font-size: 14px;
line-height: 1.6;
}
.footer-nav {
margin: 0 auto 1rem;
padding: 0;
}
.footer-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.site-footer .footer-nav a {
color: #f0e6d9 !important;
opacity: 0.9;
}
.site-footer .footer-nav a:hover {
color: #fff !important;
text-decoration: underline;
}
/* --- 11. Scroll to Top ------------------------------------------------------ */
#scrollToTopBtn {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
border: none;
background: var(--accent-novel-deep);
color: #fff;
border-radius: 50%;
width: 48px;
height: 48px;
font-size: 24px;
line-height: 48px;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,.25);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
#scrollToTopBtn.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#scrollToTopBtn:hover {
background: var(--accent-novel);
}
/* --- 12. Responsive ------------------------------------------------- */
@media (max-width: 980px) {
#main-content { /* Changed from .page */
flex-direction: column; /* Stacks paper and sidebar */
}
.paper {
width: 100%;
}
.sidebar {
width: 100%;
margin-top: 40px;
order: -1; /* This remains correct, puts sidebar first */
}
}
/* --- 13. TOC Page - Dark Parchment Palette -------------------------------- */
body.page-toc .paper .content,
body.is-homepage .paper .content {
color: #1b140e;
}
body.page-toc .title,
body.is-homepage .title {
color: #1a110b;
text-shadow: 0 1px 0 rgba(240,220,180,.4);
}
body.page-toc .subtitle,
body.is-homepage .subtitle {
color: #34271d;
font-weight: 500;
}
body.page-toc h1.title,
body.page-toc h2,
body.is-homepage h1.title,
body.is-homepage h2 {
color: #3a2215;
}
body.page-toc h2,
body.is-homepage h2 {
border-bottom: 1px solid rgba(60,35,20,.2);
padding-bottom: .2em;
margin-top: 1.2em;
}
body.page-toc .toc a,
body.is-homepage .toc a {
color: #552c17;
}
body.page-toc .toc a:hover,
body.is-homepage .toc a:hover {
color: #773b20;
}
body.page-toc .lead a,
body.is-homepage .lead a {
color: #f4c378;
text-decoration: underline;
}
body.page-toc .lead a:hover,
body.is-homepage .lead a:hover {
color: #ffda8a;
}
body.page-toc .lead,
body.is-homepage .lead {
position: relative;
z-index: 5;
isolation: isolate;
mix-blend-mode: normal;
background: linear-gradient(135deg, #3a0e08, #5b2411 55%, #6e2f16 80%, #3a0e08);
color: #e9d9c3;
padding: 1rem 1.3rem;
margin: 1.6rem 0;
border-radius: 4px;
box-shadow:
0 3px 8px rgba(0,0,0,.45),
inset 0 1px 1px rgba(255,255,255,.08),
inset 0 -2px 6px rgba(0,0,0,.4);
transform: rotate(-0.3deg);
}
/* --- 14. Chapter Page - Light Parchment Palette --------------------------- */
body.page-chapter .paper .content {
color: #3b2e2a;
}
body.page-chapter .title {
color: #3a2215;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.page-chapter .subtitle {
color: #5a4943;
font-weight: 500;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
body.page-chapter h2 {
color: #7e4b33;
border-bottom: 1px solid rgba(60,35,20,.2);
padding-bottom: .2em;
margin-top: 1.2em;
}
/* --- 15. Paragraph Margins ------------------------------------------------- */
.paper .content section p,
.paper .content .novel-body p,
.paper .content .post-content p {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
/* --- 16. Title Margins ----------------------------------------------------- */
.paper .content .title,
.paper .content section > h2,
body.page-chapter h2 {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
/* --- 17. Chapter Page Sidebar Muting --------------------------------------- */
body.page-chapter .card h3 {
color: #a1742a;
}
body.page-chapter .card a {
color: #c49d5c;
}
body.page-chapter .card a:hover {
color: #d6b27a;
}
/* --- 18. Search Box (harmonized) ------------------------------------------- */
.widget_search,
.search-form {
margin-top: 1rem;
margin-bottom: 1rem;
}
.search-form input[type="search"],
.widget_search input[type="search"] {
width: 100%;
height: 40px;
font-family: "Noto Serif JP", serif;
font-size: 0.95rem;
color: #e8dcc0;
background: linear-gradient(180deg, #2f2620 0%, #231c17 100%);
border: 1px solid rgba(80,60,40,0.6);
border-radius: 6px;
padding: 0 12px;
box-shadow:
inset 0 1px 2px rgba(255,255,255,0.05),
inset 0 -2px 3px rgba(0,0,0,0.6),
0 2px 4px rgba(0,0,0,0.3);
outline: none;
transition: all 0.25s ease;
}
.search-form input[type="search"]::placeholder {
color: #cdbf9d;
opacity: 0.8;
}
.search-form input[type="search"]:focus {
background: linear-gradient(180deg, #362b23 0%, #271f1a 100%);
border-color: rgba(190,150,90,0.7);
box-shadow:
0 0 0 2px rgba(190,150,90,0.15),
inset 0 1px 2px rgba(255,255,255,0.05);
}
.search-form input[type="submit"],
.widget_search input[type="submit"] {
height: 40px;
padding: 0 16px;
font-family: "Noto Serif JP", serif;
font-size: 0.9rem;
font-weight: 600;
color: #2a1f15;
background: linear-gradient(180deg, #b69356 0%, #8f6a38 100%);
border: 1px solid rgba(100,70,40,0.5);
border-radius: 6px;
margin-left: 6px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
0 2px 5px rgba(0,0,0,0.3);
cursor: pointer;
transition: all 0.2s ease;
}
.search-form input[type="submit"]:hover {
filter: brightness(1.1);
}
.search-form input[type="submit"]:active {
transform: translateY(1px);
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.3),
0 1px 3px rgba(0,0,0,0.25);
}
.widget_search {
padding: 18px;
border-radius: 8px;
background: linear-gradient(180deg, #3a2e26 0%, #2b211a 100%);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.05),
inset 0 -1px 2px rgba(0,0,0,0.5);
}
/* =========================================================
FIXES (Moved from functions.php)
========================================================= */
/* Fix: Mobile layout vertical text bug */
html,
body {
writing-mode: horizontal-tb !important;
}
/* === WP WIDGET STYLE OVERRIDES === */
.widget_search .wp-block-search__inside-wrapper {
display: flex;
gap: .5rem;
align-items: center;
margin-top: .25rem;
}
.widget_search .wp-block-search__input {
width: 100%;
padding: .65rem .8rem;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, .15);
font-family: 'Noto Sans JP', sans-serif;
background: #fffaf3;
}
.widget_search .wp-block-search__button {
padding: .55rem .9rem;
border-radius: 999px;
border: 0;
cursor: pointer;
background: linear-gradient(180deg, var(--accent-novel), var(--accent-novel-deep));
color: white;
font-weight: 600;
}
.widget_search .wp-block-search__button:hover {
filter: brightness(1.05);
}
.widget_search .wp-block-search__label {
display: none;
}
.widget_search .wp-block-group {
padding: 0 !important;
}
.widget_nav_menu .sidebar-widget-content ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.widget_nav_menu .sidebar-widget-content li {
margin: .45rem 0;
}
.sidebar-widget-content .wp-block-latest-posts__list {
list-style: none;
padding-left: 0;
margin: 0;
counter-reset: toc-counter;
}
.sidebar-widget-content .wp-block-latest-posts__list li {
display: flex;
align-items: center;
gap: .55rem;
margin: .45rem 0;
}
.sidebar-widget-content .wp-block-latest-posts__list li::before {
content: counter(toc-counter);
counter-increment: toc-counter;
display: inline-block;
font-size: .78rem;
padding: .15rem .5rem;
border-radius: 999px;
background: #ffe9c8;
border: 1px solid rgba(0, 0, 0, .06);
line-height: 1.2;
text-align: center;
min-width: 1.5em;
}
.sidebar-widget-content .wp-block-latest-posts__list li a {
font-weight: 600;
}
/* =========================================================
PROLOGUE INK ANIMATION (Moved from WP Content)
========================================================= */
/* Scoped, parchment-friendly */
.khokh-prologue {
max-width: 42rem;
margin: 2rem auto 0;
line-height: 1.9;
letter-spacing: 0.02em;
color: #fef4db;
visibility: hidden;
/* prevent flash before JS wraps chars */
}
.khokh-prologue p {
margin: 0.35rem 0;
}
/* Each character span (inline to preserve flow) */
.khokh-char {
display: inline-block;
opacity: 0;
filter: blur(2px);
transform: translateY(3px);
will-change: opacity, filter, transform;
animation: khokh-ink 600ms ease-out forwards;
animation-play-state: paused;
/* JS starts it */
}
@keyframes khokh-ink {
0% {
opacity: 0;
filter: blur(2px);
transform: translateY(3px);
letter-spacing: 0.06em;
}
60% {
opacity: 1;
filter: blur(0.6px);
transform: translateY(0);
letter-spacing: 0.03em;
}
100% {
opacity: 1;
filter: blur(0);
transform: translateY(0);
letter-spacing: 0.02em;
}
}
/* Reduced motion: show immediately, no animation */
@media (prefers-reduced-motion: reduce) {
.khokh-prologue {
visibility: visible !important;
}
.khokh-char {
animation: none !important;
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
}