@charset "UTF-8";
/*
novels.css — AI NOBORu novel pages shared stylesheet
Deploy to: /css/novels.css (same dir as style.css)
Load order in :
1.
2.
3.
4.
Design rationale:
Header/footer: paste exact HTML from ja/index.html
→ style.css handles header/footer/nav/brand/flinks/fcol
Body: readable light parchment background
Buttons/links/accents: site gold tokens
Body font: Mincho/serif for literary texture
*/
/* ============================================
Design tokens — style.css
============================================ */
:root {
/* Site tokens (fallbacks if style.css not loaded) */
--midnight: #0D162C;
--deep: #04081A;
--core: #18254A;
--gold-hi: #E1CB91;
--gold: #C9A468;
--gold-dk: #765F44;
--parchment:#E8E4CD;
--muted: #9AA3B8;
--bronze: #7F532F;
--line: rgba(201,164,104,.22);
--line-strong: rgba(201,164,104,.45);
--serif: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
--sans: -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",Arial,sans-serif;
/* Novel-page specific (light reading mode) */
--novel-bg: #F5F1E8; /* Parchment beige — easy on the eyes */
--novel-card: #FDFAF3; /* Card background */
--novel-subtle: #EDE9DC; /* Section background */
--novel-ink: #1A160E; /* Body text (warm dark) */
--novel-muted: #6B6054; /* Subtext */
--novel-line: rgba(180,158,110,.30); /* */
--novel-maxw: 760px;
--novel-r: 4px; /* — 3px */
}
/* ============================================
Page base (header/footer delegated to style.css)
============================================ */
body {
background: var(--novel-bg);
color: var(--novel-ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.85;
-webkit-font-smoothing: antialiased;
}
/* Dark header preserved as-is (style.css handles it) */
/* Dark footer preserved as-is (style.css handles it) */
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); text-decoration: underline; }
/* ============================================
Wrapper & breadcrumb
============================================ */
.novel-wrap {
max-width: var(--novel-maxw);
margin: 0 auto;
padding: 36px 20px 80px;
}
.breadcrumb {
font-size: 12.5px;
color: var(--novel-muted);
margin-bottom: 28px;
letter-spacing: .03em;
}
.breadcrumb a { color: var(--novel-muted); }
.breadcrumb a:hover { color: var(--gold); text-decoration: none; }
/* ============================================
Badge & tagline
============================================ */
.badge {
display: inline-block;
font-size: 11px;
font-family: var(--sans);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold);
border: 1px solid var(--gold-dk);
border-radius: 999px;
padding: 3px 13px;
margin-bottom: 14px;
}
.tagline {
font-size: 13px;
letter-spacing: .14em;
color: var(--gold);
font-family: var(--sans);
margin: 0 0 8px;
}
/* ============================================
Headings
============================================ */
h1 {
font-family: var(--serif);
font-size: clamp(24px, 4vw, 32px);
font-weight: 700;
line-height: 1.4;
margin: 0 0 24px;
color: var(--novel-ink);
letter-spacing: .01em;
}
h2.section {
font-family: var(--sans);
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-dk);
border-bottom: 1px solid var(--novel-line);
padding-bottom: 8px;
margin: 52px 0 18px;
}
/* ============================================
Body prose (Mincho + light bg)
============================================ */
.prose {
font-family: var(--serif);
font-size: 17px;
line-height: 2.0;
color: var(--novel-ink);
}
.prose p { margin: 0 0 20px; }
.lead {
font-size: 18.5px;
line-height: 2.0;
}
.verse {
margin: 24px 0;
padding: 0 0 0 18px;
border-left: 2px solid var(--novel-line);
color: #3D3228;
font-style: normal;
}
/* ============================================
Cover image
============================================ */
.cover {
display: block;
width: 190px;
max-width: 52%;
height: auto;
margin: 0 auto 32px;
border-radius: var(--novel-r);
box-shadow: 0 10px 36px rgba(0,0,0,.22);
border: 1px solid var(--novel-line);
}
/* ============================================
Bibliographic table
============================================ */
.meta {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin: 6px 0;
font-family: var(--sans);
}
.meta th {
text-align: left;
white-space: nowrap;
width: 150px;
padding: 9px 16px 9px 0;
vertical-align: top;
color: var(--novel-muted);
font-weight: 400;
}
.meta td {
padding: 9px 0;
border-bottom: 1px solid var(--novel-line);
}
/* ============================================
Buttons (unified with site gold style)
============================================ */
.buy { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 4px; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 22px;
border-radius: var(--novel-r);
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
letter-spacing: .04em;
text-decoration: none;
cursor: pointer;
transition: background .18s, color .18s;
}
.btn-primary {
background: var(--gold);
border: 1px solid var(--gold);
color: #1A1206;
}
.btn-primary:hover {
background: var(--gold-hi);
border-color: var(--gold-hi);
color: #1A1206;
text-decoration: none;
}
.btn-ghost {
border: 1px solid var(--gold-dk);
color: var(--gold);
background: transparent;
}
.btn-ghost:hover {
background: rgba(201,164,104,.10);
text-decoration: none;
}
/* ============================================
FAQ
============================================ */
.faq { font-family: var(--sans); }
.faq dt {
font-weight: 600;
font-size: 15px;
margin: 22px 0 6px;
color: var(--novel-ink);
}
.faq dd {
margin: 0 0 4px;
color: var(--novel-muted);
font-size: 15px;
line-height: 1.8;
}
.faq dd a { color: var(--gold); }
/* ============================================
Series cards (hub page)
============================================ */
.vol {
border: 1px solid var(--novel-line);
border-radius: var(--novel-r);
padding: 20px 22px;
margin: 0 0 14px;
background: var(--novel-card);
}
.vol .k {
font-family: var(--sans);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-dk);
margin: 0 0 5px;
}
.vol h3 {
font-family: var(--serif);
font-size: 19px;
font-weight: 700;
margin: 0 0 8px;
color: var(--novel-ink);
}
.vol p {
font-family: var(--sans);
font-size: 15px;
color: var(--novel-muted);
margin: 0 0 12px;
line-height: 1.75;
}
.vol .lnk {
font-family: var(--sans);
font-size: 14px;
color: var(--gold);
}
/* Spiral structure box */
.spiral {
background: var(--novel-subtle);
border: 1px solid var(--novel-line);
border-radius: var(--novel-r);
padding: 22px 22px 10px;
margin: 8px 0 24px;
font-family: var(--sans);
font-size: 15px;
line-height: 1.85;
color: var(--novel-muted);
}
.spiral strong { color: var(--novel-ink); }
.spiral p { margin: 0 0 14px; }
.phase {
display: flex;
gap: 14px;
align-items: baseline;
margin: 0 0 12px;
font-size: 15px;
}
.phase b {
font-family: var(--sans);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gold-dk);
white-space: nowrap;
min-width: 84px;
font-weight: 700;
}
/* ============================================
Production page
============================================ */
.equation {
font-family: var(--sans);
font-size: 15px;
text-align: center;
background: var(--novel-subtle);
border: 1px solid var(--novel-line);
border-radius: var(--novel-r);
padding: 20px;
margin: 24px 0;
line-height: 1.7;
}
.opening-line {
font-family: var(--serif);
font-size: 19px;
font-weight: 600;
color: var(--gold-dk);
border-bottom: 2px solid var(--gold-dk);
padding-bottom: 12px;
margin: 0 0 28px;
letter-spacing: .04em;
}
.note {
font-family: var(--sans);
font-size: 13px;
color: var(--novel-muted);
border-top: 1px solid var(--novel-line);
padding-top: 16px;
margin-top: 40px;
}
/* ============================================
Related links
============================================ */
.related {
font-family: var(--sans);
font-size: 15px;
line-height: 2.0;
}
.related a { color: var(--gold); }
/* ============================================
Landing page work cards
============================================ */
.work {
border: 1px solid var(--novel-line);
border-radius: var(--novel-r);
padding: 20px 22px;
margin: 0 0 14px;
background: var(--novel-card);
}
.work .k {
font-family: var(--sans);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-dk);
margin: 0 0 5px;
}
.work h3 {
font-family: var(--serif);
font-size: 19px;
font-weight: 700;
margin: 0 0 8px;
color: var(--novel-ink);
}
.work p {
font-family: var(--sans);
font-size: 15px;
color: var(--novel-muted);
margin: 0 0 12px;
line-height: 1.75;
}
.work .lnk {
font-family: var(--sans);
font-size: 14px;
color: var(--gold);
}
/* ============================================
Responsive
============================================ */
@media (max-width: 520px) {
h1 { font-size: 23px; }
.prose { font-size: 16px; }
.lead { font-size: 17px; }
.cover { width: 160px; }
.novel-wrap { padding: 24px 16px 60px; }
}
/* ============================================
Footer grid (flinks/fcol) — from ja/index.html
style.css does not include these; novels.css provides them
============================================ */
footer {
border-top: 1px solid rgba(201,164,104,.16);
padding: 64px 24px 56px;
background: var(--deep);
}
.flinks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 36px;
max-width: 1020px;
margin: 0 auto 48px;
}
.fcol h4 {
font-size: 12px;
letter-spacing: .28em;
color: var(--gold);
margin-bottom: 16px;
font-weight: 600;
text-transform: uppercase;
}
.fcol ul { list-style: none; padding: 0; margin: 0; }
.fcol li { padding: 5px 0; font-size: 14px; }
.fcol a { color: var(--muted); text-decoration: none; }
.fcol a:hover { color: var(--gold-hi); }
.copyright { text-align: center; font-size: 12.5px; color: #5E6679; letter-spacing: .08em; }
/* ============================================
novels.css — style.css override (higher specificity)
Targets elements inside .novel-wrap to win over style.css
============================================ */
/* h1: keep large serif but set novel ink color */
.novel-wrap h1 {
font-family: var(--serif);
font-size: clamp(24px, 3.5vw, 34px);
font-weight: 700;
color: var(--novel-ink);
letter-spacing: .01em;
line-height: 1.4;
margin: 0 0 20px;
}
/* h2: section label style (small, gold, uppercase) */
.novel-wrap h2 {
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-dk);
border-bottom: 1px solid var(--novel-line);
padding-bottom: 8px;
margin: 48px 0 18px;
line-height: 1.5;
}
/* h3: card headings */
.novel-wrap h3 {
font-family: var(--serif);
font-size: 19px;
font-weight: 700;
color: var(--novel-ink);
margin: 0 0 8px;
line-height: 1.4;
letter-spacing: .01em;
}
/* Body text inside novel-wrap */
.novel-wrap p,
.novel-wrap .prose p,
.novel-wrap .lead,
.novel-wrap .faq dt,
.novel-wrap .faq dd,
.novel-wrap .related {
color: var(--novel-ink);
}
/* Muted text */
.novel-wrap .breadcrumb,
.novel-wrap .meta th,
.novel-wrap .vol p,
.novel-wrap .work p,
.novel-wrap .spiral p,
.novel-wrap .spiral {
color: var(--novel-muted);
}
/* Links inside novel-wrap */
.novel-wrap a { color: var(--gold); }
.novel-wrap a:hover { color: var(--gold-hi); text-decoration: none; }
/* Buttons — keep their own colors */
.novel-wrap .btn-primary { color: #1A1206; }
.novel-wrap .btn-primary:hover { color: #1A1206; }
/* Vol/work card h3 override */
.novel-wrap .vol h3,
.novel-wrap .work h3 {
font-size: 19px;
margin: 0 0 8px;
}
/* ============================================
Nav visibility fix for novel pages
style.css .nav-links a uses var(--muted) #9AA3B8
which reads dim — brighten to parchment on novel pages
============================================ */
.nav-links a {
color: var(--parchment);
opacity: 0.75;
}
.nav-links a:hover {
color: var(--gold-hi);
opacity: 1;
text-decoration: none;
}
.nav-links a[aria-current] {
color: var(--gold-hi);
opacity: 1;
}
/* Brand also slightly brighter */
.brand {
color: var(--parchment);
}
/* ============================================
Header dark background — must be here because
this is defined inline in ja/index.html, NOT in style.css
============================================ */
header {
background: rgba(4, 8, 26, 0.95) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(201, 164, 104, .18);
position: sticky;
top: 0;
z-index: 10;
}
/* Body background — force parchment (not white, not dark) */
body {
background: #F5F1E8 !important;
color: #1A160E !important;
}
/* ============================================
Header layout fix
============================================ */
header .wrap,
header .wrap.nav,
.wrap.nav {
max-width: 1080px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
width: 100%;
box-sizing: border-box;
}
.brand svg {
flex-shrink: 0;
}
.nav-links {
display: flex;
gap: 24px;
font-size: 13.5px;
letter-spacing: .06em;
flex-shrink: 0;
margin-right: 0;
padding-right: 0;
}
@media (max-width: 600px) {
header .wrap,
header .wrap.nav,
.wrap.nav { padding: 0 16px; }
.nav-links { gap: 16px; font-size: 12px; }
}