/* ═══════════════════════════════════════════════════════════════════════════
《維摩詰經》梵漢對勘 - 古典學術典籍風格
Classical Scholarly Edition Design
使用方法：在 HTML 的 中添加：
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* 宣紙色系 - Xuan Paper Tones */
--paper-light: #faf8f4;
--paper-warm: #f5f1ea;
--paper-deep: #ebe5da;
--paper-aged: #e3dccf;
/* 墨色系 - Ink Tones */
--ink-black: #1a1814;
--ink-deep: #2d2926;
--ink-medium: #4a4540;
--ink-light: #6b6560;
--ink-pale: #8a847d;
/* 朱砂色系 - Cinnabar Tones */
--cinnabar: #c75146;
--cinnabar-dark: #a33d34;
--cinnabar-light: #e07568;
--cinnabar-pale: #f5d8d4;
/* 靛青色系 - Indigo Tones */
--indigo: #3d4f7c;
--indigo-dark: #2a3754;
--indigo-light: #5a6d9a;
--indigo-pale: #d8dce8;
/* 古銅金色系 - Antique Gold */
--gold: #b5915a;
--gold-dark: #8f7245;
--gold-light: #d4b88a;
--gold-pale: #f0e8d8;
/* 松石綠 - Turquoise/Jade */
--jade: #4a8f7c;
--jade-dark: #3a7263;
--jade-pale: #d8ebe5;
/* 字體系統 */
--font-chinese: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'SimSun', serif;
--font-latin: 'Crimson Pro', 'EB Garamond', 'Times New Roman', serif;
--font-display: 'Noto Serif SC', serif;
/* 覆蓋原有變量 */
--blue-600: var(--indigo);
--blue-700: var(--indigo-dark);
--blue-100: var(--indigo-pale);
--orange-500: var(--gold);
--orange-600: var(--gold-dark);
--green-500: var(--jade);
--purple-500: var(--indigo);
--gray-900: var(--ink-black);
--gray-700: var(--ink-medium);
--gray-600: var(--ink-light);
--gray-400: var(--paper-aged);
--gray-300: var(--paper-aged);
--gray-200: var(--paper-deep);
--gray-100: var(--paper-warm);
--white: var(--paper-light);
/* 間距系統 */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
/* 圓角 */
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
--border-radius: 4px;
/* 陰影 */
--shadow-sm: 0 1px 3px rgba(26, 24, 20, 0.06);
--shadow-md: 0 4px 12px rgba(26, 24, 20, 0.08);
--shadow-lg: 0 8px 24px rgba(26, 24, 20, 0.1);
}
/* ═══════════════════════════════════════════════════════════════════════════
基礎重置與全局樣式
═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: var(--font-chinese) !important;
font-size: 1rem;
line-height: 1.8;
color: var(--ink-deep) !important;
background: var(--paper-warm) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
margin: 0;
}
/* 宣紙紋理背景 */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.03;
pointer-events: none;
z-index: -1;
}
/* 選擇樣式 */
::selection {
background: var(--cinnabar-pale);
color: var(--ink-black);
}
/* 羅馬字母字體規則 */
[lang="en"], [lang="la"], [lang="sa"],
.sanskrit, .latin, .romanized {
font-family: var(--font-latin) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
主容器
═══════════════════════════════════════════════════════════════════════════ */
.main-container {
max-width: 1100px;
margin: 0 auto;
padding: var(--space-3xl) var(--space-xl);
padding-bottom: 120px;
}
/* ═══════════════════════════════════════════════════════════════════════════
頁眉設計
═══════════════════════════════════════════════════════════════════════════ */
.header-container {
text-align: center;
margin-bottom: var(--space-3xl);
padding-bottom: var(--space-2xl);
position: relative;
display: block !important;
border-bottom: none !important;
}
/* 傳統紋樣裝飾線 */
.header-container::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--gold) 20%,
var(--cinnabar) 50%,
var(--gold) 80%,
transparent
) !important;
border: none !important;
}
.page-title {
font-family: var(--font-display) !important;
font-size: 2.5rem !important;
font-weight: 700 !important;
color: var(--ink-black) !important;
letter-spacing: 0.15em !important;
margin-bottom: var(--space-md);
position: relative;
display: inline-block;
background: none !important;
-webkit-text-fill-color: var(--ink-black) !important;
}
.author-info {
font-size: 0.9rem !important;
color: var(--ink-light) !important;
margin-top: var(--space-lg);
letter-spacing: 0.05em;
position: static !important;
text-align: center !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
搜索區域
═══════════════════════════════════════════════════════════════════════════ */
.search-container {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-lg);
margin: var(--space-2xl) 0;
flex-wrap: wrap;
}
.search-box {
display: flex;
align-items: center;
background: var(--paper-light) !important;
border: 1px solid var(--paper-aged) !important;
border-radius: var(--radius-md);
padding: var(--space-xs);
padding-left: var(--space-md);
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.search-box:focus-within {
border-color: var(--cinnabar) !important;
box-shadow: 0 0 0 3px var(--cinnabar-pale) !important;
}
.search-box input,
.search-box select {
font-family: var(--font-chinese) !important;
font-size: 0.95rem;
padding: var(--space-sm) var(--space-md);
border: none;
outline: none;
background: transparent !important;
color: var(--ink-deep) !important;
}
.search-box input::placeholder {
color: var(--ink-pale);
}
.search-box select {
cursor: pointer;
border-left: 1px solid var(--paper-aged);
color: var(--ink-medium);
}
.search-box button {
font-family: var(--font-chinese) !important;
font-size: 0.9rem;
padding: var(--space-sm) var(--space-lg);
background: var(--cinnabar) !important;
color: var(--paper-light) !important;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
font-weight: 500;
letter-spacing: 0.1em;
transition: all 0.2s ease;
}
.search-box button:hover {
background: var(--cinnabar-dark) !important;
transform: translateY(-1px);
}
#fold-all-btn {
font-family: var(--font-chinese) !important;
font-size: 0.9rem !important;
padding: var(--space-sm) var(--space-lg) !important;
background: var(--paper-light) !important;
color: var(--indigo) !important;
border: 1px solid var(--indigo-pale) !important;
border-radius: var(--radius-md) !important;
cursor: pointer;
font-weight: 500;
letter-spacing: 0.05em;
transition: all 0.2s ease;
box-shadow: var(--shadow-sm);
}
#fold-all-btn:hover {
background: var(--indigo-pale) !important;
border-color: var(--indigo-light) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
內容區塊
═══════════════════════════════════════════════════════════════════════════ */
.block {
margin: var(--space-2xl) 0;
background: var(--paper-light) !important;
border: 1px solid var(--paper-aged) !important;
border-left: none !important;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
position: relative;
padding: 0 !important;
}
/* 區塊左側裝飾條 */
.block::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(
180deg,
var(--cinnabar) 0%,
var(--gold) 50%,
var(--cinnabar) 100%
) !important;
}
.block-id {
font-family: var(--font-display) !important;
font-size: 1.15rem !important;
font-weight: 600 !important;
color: var(--ink-black) !important;
padding: var(--space-lg) var(--space-xl);
padding-left: calc(var(--space-xl) + 4px);
background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-light) 100%) !important;
border-bottom: 1px solid var(--paper-aged);
letter-spacing: 0.1em;
margin: 0 !important;
}
.fold-toggle {
cursor: pointer;
user-select: none;
transition: color 0.2s ease;
}
.fold-toggle:hover {
color: var(--cinnabar) !important;
}
.fold-content {
display: block;
padding: var(--space-xl);
padding-left: calc(var(--space-xl) + 4px);
margin-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
章節標題
═══════════════════════════════════════════════════════════════════════════ */
.section-header,
.table-header {
display: flex;
align-items: center;
justify-content: center;
margin: var(--space-3xl) 0 var(--space-xl);
font-family: var(--font-display) !important;
font-size: 1.25rem !important;
font-weight: 600 !important;
color: var(--ink-black) !important;
letter-spacing: 0.2em;
position: relative;
padding-bottom: 0 !important;
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: var(--ink-black) !important;
text-shadow: none !important;
}
.section-header::before,
.section-header::after,
.table-header::before,
.table-header::after {
content: '';
flex: 1;
height: 1px;
border: none !important;
}
.section-header::before,
.table-header::before {
background: linear-gradient(90deg, transparent, var(--paper-aged)) !important;
margin-right: var(--space-lg);
}
.section-header::after,
.table-header::after {
background: linear-gradient(270deg, transparent, var(--paper-aged)) !important;
margin-left: var(--space-lg);
}
/* 原文對照標題 */
.section-header {
font-size: 1.4rem !important;
}
/* 梵文分析表標題 */
.table-header-fanwen {
color: var(--indigo) !important;
-webkit-text-fill-color: var(--indigo) !important;
}
/* 支謙本對照表標題 */
.table-header-zhi {
color: var(--gold-dark) !important;
-webkit-text-fill-color: var(--gold-dark) !important;
}
/* 羅什本對照表標題 */
.table-header-shi {
color: var(--jade-dark) !important;
-webkit-text-fill-color: var(--jade-dark) !important;
}
/* 玄奘本對照表標題 */
.table-header-zang {
color: var(--cinnabar) !important;
-webkit-text-fill-color: var(--cinnabar) !important;
}
/* 藏文本對照表標題 */
.table-header-tibetan {
color: var(--indigo-dark) !important;
-webkit-text-fill-color: var(--indigo-dark) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
原文展示
═══════════════════════════════════════════════════════════════════════════ */
.original-text {
margin: var(--space-md) 0;
padding: var(--space-md) var(--space-lg);
background: var(--paper-warm) !important;
border-left: 3px solid var(--gold) !important;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
line-height: 1.9;
position: relative;
}
.original-text[data-type="Vimalakīrtinirdeśa："] {
font-family: var(--font-latin) !important;
font-style: italic;
border-left-color: var(--indigo) !important;
background: linear-gradient(135deg, rgba(61, 79, 124, 0.08) 0%, rgba(61, 79, 124, 0.03) 100%) !important;
}
.original-text[data-type*="經"] {
border-left-color: var(--cinnabar) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
文本分析區塊
═══════════════════════════════════════════════════════════════════════════ */
.text-analysis {
margin: var(--space-xl) 0;
background: var(--paper-light) !important;
border: 1px solid var(--paper-aged) !important;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
padding: 0 !important;
}
.text-analysis:hover {
box-shadow: var(--shadow-md);
transform: none !important;
}
.text-analysis-header {
background: linear-gradient(135deg, var(--ink-deep) 0%, var(--ink-medium) 100%) !important;
color: var(--paper-light) !important;
padding: var(--space-md) var(--space-lg) !important;
font-size: 1rem !important;
font-weight: 500 !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
letter-spacing: 0.1em;
transition: all 0.3s ease;
margin: 0 !important;
border-radius: 0 !important;
text-shadow: none !important;
}
.text-analysis-header:hover {
background: linear-gradient(135deg, var(--ink-black) 0%, var(--ink-deep) 100%) !important;
}
.text-analysis-header::after {
content: '▼';
font-size: 0.7em;
transition: transform 0.3s ease;
opacity: 0.7;
}
.text-analysis.open .text-analysis-header::after {
transform: rotate(180deg);
}
.text-analysis-content-wrapper {
padding: var(--space-lg) !important;
background: var(--paper-warm) !important;
display: none;
animation: slideDown 0.3s ease;
margin-top: 0 !important;
border-top: none !important;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.text-analysis.open .text-analysis-content-wrapper {
display: block;
}
.text-analysis-subtitle {
font-family: var(--font-display) !important;
font-size: 1.05rem !important;
font-weight: 600 !important;
color: var(--ink-black) !important;
margin: var(--space-lg) 0 var(--space-md) !important;
padding: var(--space-sm) var(--space-md) !important;
background: linear-gradient(90deg, var(--cinnabar-pale) 0%, transparent 100%) !important;
border-left: 3px solid var(--cinnabar) !important;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
display: block !important;
box-shadow: none !important;
position: static !important;
overflow: visible !important;
}
.text-analysis-subtitle::before {
display: none !important;
}
.text-analysis-subtitle:first-child {
margin-top: 0 !important;
}
.text-analysis-content {
line-height: 1.9;
color: var(--ink-medium) !important;
font-size: 0.95rem;
margin-bottom: var(--space-md);
padding: var(--space-md) var(--space-lg);
background: var(--paper-light) !important;
border-radius: var(--radius-md);
}
.text-analysis-point {
position: relative;
margin-bottom: var(--space-sm) !important;
padding: var(--space-sm) var(--space-md) !important;
padding-left: var(--space-xl) !important;
line-height: 1.9;
color: var(--ink-medium) !important;
font-size: 0.95rem !important;
background: var(--paper-light) !important;
border-radius: var(--radius-md);
transition: all 0.2s ease;
}
.text-analysis-point:hover {
background: var(--paper-warm) !important;
transform: translateX(4px);
}
.text-analysis-point::before {
content: '◇' !important;
position: absolute;
left: var(--space-sm) !important;
color: var(--gold) !important;
font-size: 0.8rem !important;
font-weight: normal !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
表格設計
═══════════════════════════════════════════════════════════════════════════ */
table {
width: 100%;
border-collapse: separate !important;
border-spacing: 0;
margin: var(--space-lg) 0;
background: var(--paper-light) !important;
border: 1px solid var(--paper-aged) !important;
border-radius: var(--radius-lg) !important;
overflow: hidden;
box-shadow: var(--shadow-sm) !important;
}
th {
font-family: var(--font-display) !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0.1em !important;
color: var(--paper-light) !important;
background: linear-gradient(135deg, var(--ink-deep) 0%, var(--ink-medium) 100%) !important;
padding: var(--space-md) !important;
text-align: center;
border-bottom: 2px solid var(--ink-black) !important;
white-space: nowrap;
text-shadow: none !important;
}
td {
padding: var(--space-md) !important;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--paper-aged) !important;
line-height: 1.7;
font-size: 0.95rem;
background: transparent !important;
}
tr {
background: transparent !important;
transition: background-color 0.2s;
}
tr:last-child td {
border-bottom: none !important;
}
tr:hover td {
background: var(--paper-warm) !important;
}
/* 梵文單元格樣式 */
td[data-field="梵文"],
td[data-field="原型"],
td[data-field="詞根"],
td[data-field="词根"] {
font-family: var(--font-latin) !important;
font-style: italic;
color: var(--indigo) !important;
}
/* 中文單元格樣式 */
td[data-field="今译"],
td[data-field="支译"],
td[data-field="什译"],
td[data-field="奘译"],
td[data-field="藏译"] {
font-family: var(--font-chinese) !important;
font-style: normal;
}
/* 表格類型區分 */
.table-fanwen th {
background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-dark) 100%) !important;
}
.table-zhi th {
background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%) !important;
color: var(--ink-black) !important;
}
.table-shi th {
background: linear-gradient(135deg, var(--jade-dark) 0%, var(--jade) 100%) !important;
}
.table-zang th {
background: linear-gradient(135deg, var(--cinnabar-dark) 0%, var(--cinnabar) 100%) !important;
}
/* 梵文/漢譯標記 */
.fanwen {
color: var(--indigo) !important;
font-weight: 500;
font-family: var(--font-latin) !important;
font-style: italic;
}
.hanyi {
color: var(--jade-dark) !important;
font-weight: 500;
}
/* ═══════════════════════════════════════════════════════════════════════════
高亮與隱藏
═══════════════════════════════════════════════════════════════════════════ */
.highlight {
background: linear-gradient(180deg, transparent 60%, var(--gold-pale) 60%) !important;
border-radius: var(--radius-sm);
box-shadow: none !important;
}
.hide-block {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
註腳
═══════════════════════════════════════════════════════════════════════════ */
.footnote {
font-size: 0.875rem;
color: var(--ink-light) !important;
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--paper-aged) !important;
line-height: 1.7;
}
/* ═══════════════════════════════════════════════════════════════════════════
導航側邊欄
═══════════════════════════════════════════════════════════════════════════ */
.nav-toggle {
position: fixed;
left: 12px;
top: 50%;
transform: translateY(-50%);
background: var(--ink-deep) !important;
color: var(--paper-light) !important;
padding: var(--space-md) var(--space-sm) !important;
border-radius: var(--radius-md) !important;
cursor: pointer;
z-index: 1000;
box-shadow: var(--shadow-md) !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
letter-spacing: 0.15em;
writing-mode: vertical-rl;
text-orientation: mixed;
opacity: 0.9;
transition: all 0.3s ease;
}
.nav-toggle:hover {
opacity: 1;
background: var(--ink-black) !important;
transform: translateY(-50%) scale(1.02);
}
.nav-sidebar {
position: fixed;
left: -280px;
top: 0;
width: 260px !important;
height: 100%;
background: var(--paper-light) !important;
backdrop-filter: none !important;
box-shadow: var(--shadow-lg) !important;
z-index: 999;
transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
padding: var(--space-xl) !important;
overflow-y: auto;
border-right: 1px solid var(--paper-aged) !important;
}
.nav-sidebar.active {
left: 0;
}
.nav-sidebar h3 {
font-family: var(--font-display) !important;
color: var(--ink-black) !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
margin: 0 0 var(--space-lg) 0 !important;
padding-bottom: var(--space-md) !important;
border-bottom: 2px solid var(--cinnabar) !important;
letter-spacing: 0.15em;
}
.nav-links {
list-style: none;
padding: 0;
margin: 0;
}
.nav-links li {
margin: var(--space-xs) 0;
}
.nav-links a {
color: var(--ink-medium) !important;
text-decoration: none;
display: block;
padding: var(--space-sm) var(--space-md) !important;
border-radius: var(--radius-md) !important;
font-size: 0.9rem !important;
line-height: 1.5;
transition: all 0.2s ease;
border-left: 2px solid transparent;
font-weight: normal !important;
}
.nav-links a:hover {
background: var(--paper-warm) !important;
color: var(--cinnabar) !important;
border-left-color: var(--cinnabar) !important;
transform: translateX(4px);
}
.nav-links a.active {
background: var(--cinnabar-pale) !important;
color: var(--cinnabar-dark) !important;
border-left-color: var(--cinnabar) !important;
font-weight: 500 !important;
}
/* 滾動條樣式 */
.nav-sidebar::-webkit-scrollbar {
width: 4px;
}
.nav-sidebar::-webkit-scrollbar-track {
background: transparent;
}
.nav-sidebar::-webkit-scrollbar-thumb {
background: var(--paper-aged);
border-radius: 4px;
}
.nav-sidebar::-webkit-scrollbar-thumb:hover {
background: var(--ink-pale);
}
/* ═══════════════════════════════════════════════════════════════════════════
工具欄
═══════════════════════════════════════════════════════════════════════════ */
#toolbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px !important;
display: flex;
align-items: center;
padding: 0 var(--space-xl) !important;
background: linear-gradient(135deg, var(--ink-deep) 0%, var(--ink-black) 100%) !important;
color: var(--paper-light) !important;
z-index: 9999;
box-shadow: var(--shadow-md) !important;
}
#toolbar button {
font-family: var(--font-chinese) !important;
margin-right: var(--space-sm);
padding: var(--space-sm) var(--space-lg) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: var(--radius-md) !important;
background: rgba(255, 255, 255, 0.1) !important;
color: var(--paper-light) !important;
font-weight: 500 !important;
font-size: 0.9rem !important;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.2s ease;
}
#toolbar button:hover {
background: rgba(255, 255, 255, 0.2) !important;
border-color: rgba(255, 255, 255, 0.4) !important;
}
#toolbar button:active {
background: var(--cinnabar) !important;
border-color: var(--cinnabar) !important;
}
#switch-box {
margin-top: 56px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
響應式設計
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.main-container {
padding: var(--space-xl) var(--space-md);
}
.page-title {
font-size: 1.8rem !important;
letter-spacing: 0.1em !important;
}
.search-container {
flex-direction: column;
gap: var(--space-md);
}
.search-box {
width: 100%;
}
.search-box input {
width: 100%;
flex: 1;
}
table {
font-size: 0.85rem;
}
th, td {
padding: var(--space-sm) !important;
}
.nav-sidebar {
width: 85% !important;
max-width: 300px;
}
.author-info {
position: static !important;
text-align: center !important;
}
.header-container {
flex-direction: column;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
列印樣式
═══════════════════════════════════════════════════════════════════════════ */
@media print {
body {
background: white !important;
}
body::before {
display: none;
}
.nav-toggle,
.nav-sidebar,
#toolbar,
.search-container,
#fold-all-btn {
display: none !important;
}
.main-container {
max-width: none;
padding: 0;
}
.block {
break-inside: avoid;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
.fold-content {
display: block !important;
}
}