/* --------------------------------- THEME TOKENS (scoped to body) --------------------------------- */ /* Light (default) */ @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap'); :root { --bg: #f8fafc; --surface: #ffffff; --text: #111827; --muted: #6b7280; --border: rgba(0, 0, 0, 0.12); --brand-bar: #cfe6ef; --footer: #4b4b4b; --accent: #003366; --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.05); --tl-x: 18px; --tl-dot: 16px; --dot-ring: rgba(0, 0, 0, 0.05); } /* Put the variables on body so toggling on works everywhere */ body { /* typography/layout */ min-height: 100%; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: "Raleway", sans-serif; } /* Dark token overrides – IMPORTANT: target the same element that gets the class */ body.dark-theme { --bg: #1e1f24; --surface: #2a2c32; --text: #e7e7e7; --muted: #cfd8dc; --border: rgba(255, 255, 255, 0.16); --brand-bar: #373636; --footer: #111; --accent: #7fb4ff; --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3); --dot-ring: rgba(255, 255, 255, 0.06); /* Bootstrap CSS vars for components that use them */ --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-card-bg: var(--surface); --bs-card-border-color: rgba(255, 255, 255, 0.14); --bs-list-group-bg: var(--surface); --bs-dropdown-bg: var(--surface); --bs-input-bg: #24262b; --bs-input-border-color: rgba(255, 255, 255, 0.18); } /* Your page layout */ :root { --footer-h: 100px; } /* set your footer height */ footer { position: fixed; left: 0; right: 0; bottom: 0; height: var(--footer-h); z-index: 1030; /* above content but below modals */ } /* prevent overlap */ main { padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom)); } /* --------------------------------- OVERRIDES WHEN BODY HAS UTILITY BG (body often has class="bg-light") --------------------------------- */ .dark-theme.bg-light, .dark-theme.bg-white, .dark-theme.bg-light-subtle, body.dark-theme.bg-light, body.dark-theme.bg-white, body.dark-theme.bg-light-subtle { background-color: var(--bg) !important; color: var(--text) !important; } /* Generic: utilities inside dark theme */ body.dark-theme .bg-white, body.dark-theme .bg-light, body.dark-theme .bg-light-subtle { background-color: var(--surface) !important; } /* --------------------------------- NAVBAR LINKS --------------------------------- */ .navbar .nav-link { color: var(--muted) !important; font-weight: 500; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .navbar .nav-link:hover { color: var(--text) !important; } .navbar .nav-link.active { color: var(--text) !important; font-weight: 700; border-bottom-color: var(--accent); } .nav-item { font-size: 14px; } .custom-color { color: #003366; } .text { font-size: 24px; } .dark-theme .custom-color { color: #fff; } /* Toggler contrast tweaks in dark */ body.dark-theme .navbar-toggler { border-color: var(--border); } body.dark-theme .navbar-toggler-icon { filter: invert(1); } /* --------------------------------- CARDS / LISTS --------------------------------- */ .card, .skeleton { box-shadow: var(--shadow-soft); border-color: var(--border); } /* Your custom ebook cards */ .ebook-item { background: #fff; border-radius: 12px; padding: 12px; } body.dark-theme .ebook-item { background: var(--border); } .ebook-cover { width: 96px; height: 132px; border-radius: 8px; object-fit: cover; } /* Keep timeline dot ring matching the theme surface */ body.dark-theme .timeline-point { border-color: var(--bs-card-bg); } /* --------------------------------- TEXT / BORDERS --------------------------------- */ .text { color: var(--text); } .text-muted, .small.text-muted { color: var(--muted) !important; } .border-bottom { border-color: var(--border) !important; } /* --------------------------------- BRAND / FOOTER --------------------------------- */ .bg-brand { background: var(--brand-bar); } .bg-footer { background-color: #003366; } .footer-link { color: rgba(255, 255, 255, 0.85); text-decoration: none; } .footer-link:hover { color: #fff; text-decoration: underline; } .hero-title { font-size: 12px; } /* --------------------------------- SEARCH INPUT GROUP --------------------------------- */ .input-group.search-box > .input-group-text, .input-group.search-box > .form-control, .input-group.search-box > .btn { height: 44px; border-radius: 12px; } .input-group.search-box > .input-group-text { background-color: var(--bs-input-bg, #fff); color: var(--muted); border: 1px solid var(--bs-input-border-color, var(--border)); border-right: 0; } .input-group.search-box > .form-control { background-color: var(--bs-input-bg, #fff); color: var(--bs-body-color, #111); border: 1px solid var(--bs-input-border-color, var(--border)); border-left: 0; border-right: 0; } .input-group.search-box > .form-control::placeholder { color: var(--muted); opacity: 0.8; } .input-group.search-box > .btn { background-color: var(--accent); border-color: var(--accent); color: #fff; border-left: 0; } .input-group.search-box > :first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .input-group.search-box > :last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .input-group.search-box > :not(:first-child):not(:last-child) { border-radius: 0; } .input-group.search-box .form-control:focus { box-shadow: 0 0 0 0.25rem rgba(0, 51, 102, 0.15); } .input-group.search-box .btn { transform: none; writing-mode: initial; font-weight: 600; } /* --------------------------------- MISC --------------------------------- */ .lang-icon-box { --icon-size: 96px; width: var(--icon-size); height: var(--icon-size); display: flex; align-items: center; justify-content: center; margin: 0 auto; } .lang-icon-box img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .skeleton { background: #e5e6e8; border-radius: 0.5rem; } .panel-tall { min-height: 70vh; } .panel-sm { min-height: 140px; } .shadow-soft { box-shadow: var(--shadow-soft) !important; } .rounded-4 { border-radius: 1rem !important; } /* Badges */ .bg-secondary-subtle { background-color: #f3f4f6 !important; } .text-secondary-emphasis { color: #374151 !important; } body.dark-theme .bg-secondary-subtle { background: rgba(148, 163, 184, 0.16) !important; } body.dark-theme .text-secondary-emphasis { color: #cbd5e1 !important; } body.dark-theme .bg-primary-subtle { background: rgba(59, 130, 246, 0.18) !important; } body.dark-theme .text-primary-emphasis { color: #93c5fd !important; } body.dark-theme .bg-success-subtle { background: rgba(34, 197, 94, 0.18) !important; } body.dark-theme .text-success-emphasis { color: #86efac !important; } body.dark-theme .bg-info-subtle { background: rgba(14, 165, 233, 0.18) !important; } body.dark-theme .text-info-emphasis { color: #7dd3fc !important; } body.dark-theme .bg-warning-subtle { background: rgba(234, 179, 8, 0.18) !important; } body.dark-theme .text-warning-emphasis { color: #fde68a !important; } /* ============= HR Title ============= */ .section-hr-title { text-align: center; margin: 2rem 0 1.25rem; } /* Top line + center label */ .section-hr-title .title { position: relative; display: inline-block; /* shrink to content so lines hug it */ margin: 0 auto 0.25rem; padding: 0 1rem; /* gap between text and lines */ font-weight: 700; font-size: clamp(18px, 2.4vw, 26px); color: #2b6777; /* bluish like your sample */ letter-spacing: 0.5px; } /* the two lines */ .section-hr-title .title::before, .section-hr-title .title::after { content: ""; position: absolute; top: 50%; width: 42vw; max-width: 620px; height: 1px; background: var(--border); transform: translateY(-50%); } .section-hr-title .title::before { right: 100%; } .section-hr-title .title::after { left: 100%; } /* Sub labels */ .section-hr-title .subtitle { font-size: clamp(14px, 1.6vw, 18px); line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.25rem; } /* Colors like the screenshot: EN orange, others default */ .section-hr-title .subtitle .en { color: #f59e0b; font-weight: 600; } .section-hr-title .subtitle .zh { opacity: 0.9; } .section-hr-title .subtitle .dot { opacity: 0.7; transform: translateY(-1px); } /* Optional “paper” background for the whole strip (like your image) */ .section-hr-title.paper { background-image: radial-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px); background-size: 6px 6px; padding: 0.75rem 0 1rem; border-radius: 6px; } /* Dark theme tweaks (inherits your CSS vars) */ body.dark-theme .section-hr-title .title { color: #7fb4ff; } /* brandy blue */ body.dark-theme .section-hr-title .subtitle .zh { opacity: 0.85; } body.dark-theme .section-hr-title.paper { background-image: radial-gradient( rgba(255, 255, 255, 0.05) 1px, transparent 1px ); } /* Sidebar card look */ .sidebar { border-radius: 1rem; } /* Section top border + tag */ .section { position: relative; border-top: 1px solid #b7dbe7; /* light blue line (like screenshot) */ padding-top: 0.75rem; margin-top: 1.25rem; } .section:first-child { margin-top: 0; } /* first block sits flush */ .section-tag { position: absolute; top: -0.9rem; /* pull onto the border line */ left: 0; background: #b7e3f2; /* pastel blue */ color: #0b4f63; /* dark teal text */ padding: 0.3rem 0.9rem; border-radius: 40px 8px 0 0; font-weight: 600; line-height: 1; } /* Soft grey count badge */ .badge-soft { display: inline-block; min-width: 2.25rem; text-align: center; font-weight: 600; background: #e6e6e6; color: #555; padding: 0.2rem 0.5rem; } /* Rounded skeleton cards */ .skeleton-box { height: 110px; /* adjust to taste */ background: #ddd; border-radius: 12px; } /* FINAL lock for the right-side hero */ .featured-hero { position: relative; border-radius: 16px; overflow: hidden; background: #0b2e57; /* pick ONE of these height strategies: */ /* A) Fixed cap + responsive ratio (recommended) */ aspect-ratio: 16 / 6; max-height: 340px; /* If you keep these two lines, REMOVE any previous height: clamp(...) you had */ } /* Force the img to stay inside the hero’s box */ .featured-hero .hero-img { width: 100%; height: 100% !important; object-fit: cover; object-position: right center; display: block; } .featured-hero .hero-overlay { position: absolute; inset: 0 auto 0 0; width: 60%; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: 1.25rem 1.5rem; color: #fff; background: #053761; -webkit-clip-path: polygon(0 0, 92% 0, 72% 100%, 0 100%); clip-path: polygon(0 0, 92% 0, 72% 100%, 0 100%); } /* ===== Most Popular ===== */ .popular-heading { font-size: clamp(22px, 3.2vw, 25px); font-weight: 700; margin-bottom: 1rem; color: var(--text); } /* Card */ .paper-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 18px; box-shadow: var(--shadow-soft); height: 100%; } /* top accent bar */ .paper-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #62c5e4, #62c5e4); border-top-left-radius: 6px; border-top-right-radius: 6px; } .paper-journal { margin: 6px 0 10px; color: var(--muted); font-size: 0.95rem; } .paper-title { display: block; margin: 0 0 12px; color: #0a58ca; text-decoration: none; font-size: 1.05rem; line-height: 1.3; font-weight: 600; } .paper-title:hover { text-decoration: underline; } .paper-authors { margin: 0; color: var(--muted); font-size: 0.95rem; } /* Button */ .btn-more-articles { background: #2a69a6; border: none; color: #fff; padding: 12px 20px; border-radius: 8px; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .5px; } /* Dark theme tweaks */ .dark-theme .paper-card { background: var(--surface); border-color: var(--border); } .dark-theme .paper-title { color: var(--accent); } /* Dark theme harmony (optional if you toggle .dark-theme) */ .dark-theme .badge-soft { background: #3a3a3a; color: #cfcfcf; } .dark-theme .skeleton-box { background: #4a4a4a; } .dark-theme .section { border-top-color: #6fb9cf; } .dark-theme .section-tag { background: #6fb9cf; color: #083540; } @media (max-width: 992px) { .featured-hero { max-height: 300px; aspect-ratio: 16/7; } .featured-hero .hero-overlay { width: 70%; } } @media (max-width: 576px) { .featured-hero { max-height: 260px; aspect-ratio: 16/8; } .featured-hero .hero-overlay { width: 78%; padding: 1rem 1rem; -webkit-clip-path: polygon(0 0, 90% 0, 70% 100%, 0 100%); clip-path: polygon(0 0, 90% 0, 70% 100%, 0 100%); } } /* ===== Numbered article list (like screenshot) ===== */ .article-listing { background: transparent; } .article-row{ padding: 1rem 0; border-top: 1px solid var(--border); } .article-row:first-child{ border-top: 0; } /* left number */ .article-index{ min-width: 2.25rem; font-weight: 600; color: var(--muted); line-height: 1.35; margin-top: .1rem; } /* big blue title link */ .article-link{ display: inline-block; font-size: clamp(1.05rem, 1.1vw + .8rem, 1.6rem); font-weight: 700; color: #0a58ca; /* bootstrap-ish blue */ text-decoration: none; } .article-link:hover{ text-decoration: underline; } /* authors + journal line */ .article-citation{ color: var(--text); font-size: .98rem; } .article-citation a{ color: #0a58ca; text-decoration: none; } .article-citation a:hover{ text-decoration: underline; } /* action buttons row */ .article-actions .btn{ border-radius: .35rem; margin-right: .4rem; } .article-actions .btn-outline-secondary{ background: var(--surface); border-color: var(--border); color: var(--text); } /* dark theme tweaks */ .dark-theme .article-link{ color: var(--accent); } .dark-theme .article-actions .btn-outline-secondary{ background: var(--surface); border-color: var(--border); color: var(--text); } /* ===== LOGIN CARD ===== */ .login-wrap { min-height: calc(100vh - var(--footer-h, 0px)); display: flex; align-items: center; justify-content: center; padding: 32px 16px; } .login-card { width: 100%; max-width: 440px; background: var(--surface); border: 2px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow-soft); overflow: hidden; /* rounds header corners */ } .login-header { background: var(--brand-bar); text-align: center; font-weight: 700; font-size: 25px; letter-spacing: .04em; padding: 14px 18px; color: color-mix(in srgb, var(--accent) 65%, #fff); border-bottom: 1px solid var(--border); } .login-body { padding: 22px 22px 26px; } .login-field { margin-bottom: 16px; padding-right: 20px; } .login-label { display: block; font-size: 16px; color: var(--muted); margin-bottom: 6px; } .login-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); outline: none; } .login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } /* Error box */ .login-error { background: #fde8e8; color: #991b1b; border: 1px solid #f5c2c2; padding: 10px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 14px; } /* Button */ .login-actions { text-align: center; } .login-btn { display: inline-block; min-width: 170px; padding: 10px 16px; border: none; border-radius: 8px; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--accent); /* dark blue */ cursor: pointer; } .login-btn:hover { filter: brightness(1.05); } .login-btn:active { transform: translateY(1px); } /* Dark theme harmony */ body.dark-theme .login-card { border-color: var(--accent); } body.dark-theme .login-header { color: #fff; } body.dark-theme .login-input { background: var(--bs-input-bg, #24262b); } /* Small screens */ @media (max-width: 420px) { .login-body { padding: 18px; } } /* ===== Admin Sidebar ===== */ .admin-sidebar { width: 250px; min-height: 100vh; background: var(--surface, #fff); border-right: 1px solid var(--border, rgba(0,0,0,.12)); box-shadow: var(--shadow-soft, 0 8px 24px rgba(0,0,0,.06)); position: sticky; top: 0; } .admin-brand { display: flex; align-items: center; gap: .6rem; padding: 16px 18px; background: var(--brand-bar, #cfe6ef); border-bottom: 1px solid var(--border, rgba(0,0,0,.12)); font-weight: 800; letter-spacing: .3px; color: #003366; } .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: #003366; display: inline-block; } .admin-nav { padding: 10px; } .admin-menu { list-style: none; margin: 0; padding: 6px; } .admin-sep { height: 1px; background: var(--border, rgba(0,0,0,.12)); margin: 6px 12px; } .admin-link { display: flex; align-items: center; gap: .75rem; padding: 10px 12px; margin: 2px 0; border-radius: 10px; color: var(--muted, #6b7280); text-decoration: none; transition: background .15s ease, color .15s ease; } .admin-link:hover { background: rgba(0, 51, 102, .08); color: var(--text, #111827); } .admin-link.active { background: rgba(0, 51, 102, .14); color: var(--text, #111827); border: 1px solid rgba(0, 51, 102, .35); } .admin-link i { font-size: 1.05rem; } /* Dark theme adjustments */ body.dark-theme .admin-sidebar { background: var(--surface); border-right-color: var(--border); } body.dark-theme .admin-brand { color: #fff; } body.dark-theme .admin-link { color: var(--muted); } .login-links{ margin-top:20px; text-align:center; font-size:14px; } .login-links .sep{ margin:0 .5rem; color:var(--muted); } .login-links a{ text-decoration:none; font-weight:600; } .login-links .link-muted{ color:var(--muted); } .login-links .link-primary{ color:var(--accent); } .login-links a:hover{ text-decoration:underline; } /* --- Fix ebook card layout --- */ .ebook-item { overflow: hidden; } /* keeps content inside the card */ .ebook-item .content-col { min-width: 0; } /* allow text to shrink/wrap in flex */ .ebook-item .title-row { display: flex; align-items: center; gap: .5rem; min-width: 0; /* critical for truncation inside flex */ } .ebook-item .title-text { display: -webkit-box; -webkit-line-clamp: 2; /* show at most 2 lines */ -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; /* handle long CJK/Myanmar titles */ line-height: 1.25; font-weight: 600; } .ebook-item .title-badge { flex-shrink: 0; } /* badge never stretches text row */ .ebook-item .meta { display: flex; flex-wrap: wrap; gap: 12px; } .ebook-item .read-btn { white-space: nowrap; } /* keeps “Read” compact */ .paper-excerpt{ margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 2; /* 2 lines */ -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; line-height: 1.35; font-size: .925rem; } .paper-excerpt{ margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 2; /* 2 lines */ -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; line-height: 1.35; font-size: .925rem; } /* --- Mobile fixes --- */ @media (max-width: 576px) { /* Smaller cover so text has room */ .ebook-cover { width: 64px; height: 86px; } /* Allow titles to wrap even if markup has .text-nowrap */ .ebook-item .text-nowrap { white-space: normal !important; } /* A little more room for description on phones */ .line-clamp-2 { -webkit-line-clamp: 3; } /* Put the Read button under the text on phones */ .ebook-item .text-end { text-align: left !important; margin-top: .5rem; } /* Tighter spacing inside the card */ .ebook-item .d-flex { gap: .75rem; align-items: flex-start; } /* Keep the top-right filter buttons on a single row; scroll if overflow */ .filter-bar { flex-wrap: nowrap; gap: .5rem; max-width: 100%; overflow-x: auto; } .filter-bar .btn { flex: 0 0 auto; /* prevent shrinking */ } } /* Extra-small devices */ @media (max-width: 360px) { .ebook-cover { width: 56px; height: 76px; } } @media (min-width: 768px) { .lang-icon-box { --icon-size: 120px; } }