/* =================================================================== MUN Courseware Design System — Historical Immersion Theme =================================================================== This CSS provides a complete design system for MUN multimedia courseware. It is designed to be used as a standalone CSS file referenced from the HTML template (references/html-template.html). For English committees, override the font variables (see below). For committees in other settings (futuristic, modern, etc.), modify the :root color palette accordingly. =================================================================== */ /* ========== Design System: Historical Immersion ========== */ :root { /* ---- Color Palette ---- */ --bg-deep: #1a1a2e; /* main background */ --bg-dark: #2d2d2d; /* dark surfaces */ --bg-card: #2a2a3e; /* card backgrounds */ --aged-paper: #f4e4bc; /* primary text (aged paper tone) */ --muted-gold: #c9a227; /* accent color */ --faded-blue: #4a6fa5; /* secondary accent */ --cream: #faf3e0; /* bright text accents */ --text-primary: #e8dcc8; /* body text */ --text-secondary: #b8a88a; /* secondary text */ --text-muted: #8a7d6a; /* muted/label text */ --accent-red: #a63d40; /* warnings, key issues */ --accent-green: #5d8a68; /* success, achieved outcomes */ --border-subtle: rgba(201,162,39,0.2); /* subtle borders */ --shadow-deep: rgba(0,0,0,0.4); /* drop shadows */ --overlay-dark: rgba(26,26,46,0.85); /* overlay backgrounds */ --player-height: 64px; /* audio player height */ /* ---- Typography ---- */ /* Default: Chinese committee fonts */ --font-heading: 'Special Elite', 'Courier Prime', monospace; --font-body-cn: 'Noto Serif SC', 'STSong', serif; --font-body-en: 'Georgia', 'Times New Roman', serif; --font-ui: 'Noto Sans SC', 'PingFang SC', sans-serif; --font-mono: 'Courier Prime', 'Courier New', monospace; /* ---- Spacing Scale (4px base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---- Border Radii ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* ---- Transitions ---- */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 500ms ease; } /* English Committee Override ========================== To use English-optimized typography, add this class to the element: This can also be set inline: document.documentElement.classList.add('committee-en'); */ html.committee-en { --font-heading: 'Georgia', 'Times New Roman', serif; --font-body-en: 'Georgia', 'Times New Roman', serif; --font-ui: 'Segoe UI', 'Helvetica Neue', sans-serif; } /* ========== Reset & Base ========== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; overflow: hidden; } body { font-family: var(--font-body-cn); background: var(--bg-deep); color: var(--text-primary); line-height: 1.8; min-height: 100vh; overflow: hidden; } /* English committee body font */ html.committee-en body { font-family: var(--font-body-en); } /* ========== Noise/Grain Overlay ========== */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' 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"); } /* ========== Vignette Effect ========== */ body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%); } /* ========== Page Structure ========== */ .page { position: fixed; top: 0; left: 0; right: 0; bottom: var(--player-height); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: var(--space-8) var(--space-6) var(--space-16); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease; } .page.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); z-index: 1; } .page-content { padding-top: var(--space-10); } .page-title { justify-content: center; padding-top: 0; } /* Ambient background gradients */ .page::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 50% 30%, rgba(201,162,39,0.06) 0%, transparent 50%), radial-gradient(ellipse at 75% 75%, rgba(74,111,165,0.08) 0%, transparent 45%), radial-gradient(ellipse at 25% 80%, rgba(74,111,165,0.06) 0%, transparent 40%), linear-gradient(180deg, #1a1a2e 0%, #222240 50%, #1a1a2e 100%); z-index: -1; } .page-title::before { background: radial-gradient(ellipse at 50% 25%, rgba(201,162,39,0.12) 0%, transparent 45%), radial-gradient(ellipse at 75% 75%, rgba(74,111,165,0.12) 0%, transparent 40%), radial-gradient(ellipse at 25% 75%, rgba(74,111,165,0.08) 0%, transparent 40%), linear-gradient(180deg, #1a1a2e 0%, #222240 50%, #1a1a2e 100%); } /* ========== Content Container ========== */ .content-container { max-width: 900px; width: 100%; margin: 0 auto; padding: var(--space-6); position: relative; z-index: 1; } /* ========== Typography System ========== */ h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--aged-paper); line-height: 1.4; margin-bottom: var(--space-4); } h1 { font-size: 2.2rem; letter-spacing: 2px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } h2 { font-size: 1.6rem; letter-spacing: 1px; border-bottom: 2px solid var(--border-subtle); padding-bottom: var(--space-3); margin-bottom: var(--space-6); } h3 { font-size: 1.2rem; color: var(--muted-gold); margin-top: var(--space-6); margin-bottom: var(--space-3); } h4 { font-size: 1rem; color: var(--faded-blue); font-weight: 600; } html.committee-en h1 { font-size: 2rem; letter-spacing: 0.5px; } html.committee-en h2 { font-size: 1.5rem; } html.committee-en h3 { font-size: 1.15rem; } p { font-size: 1rem; line-height: 1.9; color: var(--text-primary); margin-bottom: var(--space-4); text-align: justify; } p:last-child { margin-bottom: 0; } /* ========== Special Text Elements ========== */ .quote { border-left: 4px solid var(--muted-gold); padding: var(--space-4) var(--space-6); margin: var(--space-6) 0; background: rgba(201,162,39,0.08); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; color: var(--cream); font-size: 1.05rem; line-height: 1.8; } .quote cite { display: block; margin-top: var(--space-3); font-size: 0.9rem; color: var(--muted-gold); font-style: normal; } .highlight { color: var(--muted-gold); font-weight: 600; } .key-term { display: inline-block; background: rgba(201,162,39,0.15); color: var(--muted-gold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-weight: 600; border: 1px solid rgba(201,162,39,0.3); } .timestamp { font-family: var(--font-mono); font-size: 0.85rem; color: var(--faded-blue); background: rgba(74,111,165,0.15); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); display: inline-block; margin-bottom: var(--space-3); } /* ========== Cards & Boxes ========== */ .info-card { background: rgba(42,42,62,0.8); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); margin: var(--space-6) 0; backdrop-filter: blur(8px); } .info-card h3 { margin-top: 0; border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-3); } .data-card { display: inline-flex; flex-direction: column; align-items: center; background: rgba(26,26,46,0.6); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin: var(--space-2); min-width: 120px; } .data-card .value { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: var(--muted-gold); } .data-card .label { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-1); text-align: center; } .data-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; justify-content: center; } /* ========== Lists ========== */ ul, ol { margin: var(--space-4) 0; padding-left: var(--space-6); } li { margin-bottom: var(--space-3); color: var(--text-primary); line-height: 1.7; } li strong { color: var(--aged-paper); } /* ========== Tables ========== */ table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-size: 0.95rem; } th, td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border-subtle); } th { background: rgba(201,162,39,0.1); color: var(--muted-gold); font-weight: 600; font-family: var(--font-ui); font-size: 0.9rem; } tr:hover { background: rgba(201,162,39,0.05); } /* ========== Table Responsive Wrapper ========== */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-6) 0; scrollbar-width: thin; scrollbar-color: rgba(201,162,39,0.3) transparent; } .table-wrapper table { margin: 0; min-width: 600px; } /* ========== Image Containers ========== */ .image-container { margin: var(--space-6) 0; text-align: center; } .lecture-image { max-width: 100%; height: auto; max-height: 50vh; border-radius: var(--radius-lg); border: 2px solid var(--border-subtle); box-shadow: 0 4px 20px rgba(0,0,0,0.3); object-fit: contain; } .image-caption { font-size: 0.85rem; color: var(--text-muted); margin-top: var(--space-3); font-style: italic; line-height: 1.5; } /* ========== Image Layout Variants ========== */ .split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin: var(--space-6) 0; align-items: center; } .split-layout .image-container { margin: 0; } .split-layout .image-container .lecture-image { width: 100%; object-fit: cover; max-height: 45vh; } .split-layout.split-reverse { direction: rtl; } .split-layout.split-reverse > * { direction: ltr; } .image-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-6) 0; } .image-grid-2 .image-container { margin: 0; } .image-banner { margin: var(--space-8) calc(-1 * var(--space-6)); width: auto; } .image-banner .lecture-image { max-height: 55vh; width: 100%; object-fit: cover; border-radius: var(--radius-lg); } .image-inset { max-width: 70%; margin: var(--space-6) auto; } .image-inset .lecture-image { max-height: 35vh; } /* ========== Page Overflow Indicator ========== */ .page-overflow-indicator { position: sticky; bottom: 0; height: 40px; margin-top: -40px; background: transparent; pointer-events: none; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: opacity 0.5s ease; } .page-overflow-indicator::before, .page-overflow-indicator::after { content: ''; width: 13px; height: 13px; border-right: 2px solid var(--muted-gold); border-bottom: 2px solid var(--muted-gold); animation: indicator-drift 2.4s ease-in-out infinite; } .page-overflow-indicator::before { opacity: 0.55; } .page-overflow-indicator::after { opacity: 0.75; } .page-overflow-indicator.hidden { opacity: 0; } @keyframes indicator-drift { 0%, 100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(4px); } } /* ========== Home Button (always visible, top-left) ========== */ .home-button { position: fixed; top: var(--space-4); left: var(--space-4); z-index: 200; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: rgba(26,26,46,0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-muted); text-decoration: none; font-family: var(--font-ui); font-size: 0.85rem; transition: all var(--transition-normal); cursor: pointer; } .home-button:hover { background: rgba(201,162,39,0.15); border-color: var(--muted-gold); color: var(--muted-gold); transform: translateY(-1px); } .home-button svg { width: 18px; height: 18px; fill: currentColor; transition: transform var(--transition-fast); } .home-button:hover svg { transform: translateX(-2px); } .home-button .lock-icon, .home-button .tooltip { display: none; } /* ========== Navigation Arrows ========== */ .nav-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(42,42,62,0.8); border: 1px solid var(--border-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100; transition: all var(--transition-normal); backdrop-filter: blur(8px); } .nav-arrow:hover { background: rgba(201,162,39,0.2); border-color: var(--muted-gold); transform: translateY(-50%) scale(1.1); } .nav-arrow svg { width: 24px; height: 24px; fill: var(--aged-paper); } .nav-arrow.prev { left: var(--space-4); } .nav-arrow.next { right: var(--space-4); } /* ========== Page Indicator Dots ========== */ .page-indicator { position: fixed; right: var(--space-4); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: var(--space-2); z-index: 100; } .page-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(201,162,39,0.3); border: 1px solid rgba(201,162,39,0.5); cursor: pointer; transition: all var(--transition-normal); } .page-dot.active { background: var(--muted-gold); transform: scale(1.3); box-shadow: 0 0 10px rgba(201,162,39,0.5); } .page-dot:hover { background: rgba(201,162,39,0.6); } /* ========== Audio Player ========== */ .audio-player { position: fixed; bottom: 0; left: 0; right: 0; height: var(--player-height); background: rgba(26,26,46,0.95); backdrop-filter: blur(12px); border-top: 1px solid var(--border-subtle); display: flex; align-items: center; padding: 0 var(--space-6); gap: var(--space-4); z-index: 1000; } .audio-player .play-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--muted-gold); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); flex-shrink: 0; } .audio-player .play-btn:hover { background: var(--muted-gold); } .audio-player .play-btn svg { width: 18px; height: 18px; fill: var(--muted-gold); transition: fill var(--transition-fast); } .audio-player .play-btn:hover svg { fill: var(--bg-deep); } .progress-container { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); } .progress-bar { width: 100%; height: 4px; background: rgba(201,162,39,0.2); border-radius: 2px; cursor: pointer; position: relative; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--faded-blue), var(--muted-gold)); border-radius: 2px; width: 0%; transition: width 0.1s linear; position: relative; } .progress-fill::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: var(--muted-gold); border-radius: 50%; opacity: 0; transition: opacity var(--transition-fast); } .progress-bar:hover .progress-fill::after { opacity: 1; } .progress-markers { position: absolute; top: 0; left: 0; right: 0; height: 100%; pointer-events: none; } .progress-marker { position: absolute; top: -2px; width: 2px; height: 8px; background: rgba(201,162,39,0.4); border-radius: 1px; } .time-display { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); display: flex; justify-content: space-between; } .volume-control { display: flex; align-items: center; gap: var(--space-2); } .volume-slider { width: 80px; height: 4px; -webkit-appearance: none; background: rgba(201,162,39,0.2); border-radius: 2px; outline: none; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: var(--muted-gold); border-radius: 50%; cursor: pointer; } /* ========== Subtitle Toggle Button ========== */ .subtitle-toggle { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-1); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); flex-shrink: 0; } .subtitle-toggle:hover { background: rgba(201,162,39,0.15); border-color: var(--muted-gold); } .subtitle-toggle.active svg { fill: var(--muted-gold); } /* ========== Movie-Style Subtitle Container ========== */ .subtitle-container { position: fixed; bottom: calc(var(--player-height) + 12px); left: 50%; transform: translateX(-50%); width: 90%; max-width: 800px; text-align: center; z-index: 1001; pointer-events: none; padding: var(--space-3) var(--space-6); background: rgba(0, 0, 0, 0.75); border-radius: var(--radius-md); transition: opacity 0.3s ease; } .subtitle-container.hidden { opacity: 0; } /* English text (smaller, above) */ .subtitle-en { font-family: 'Georgia', 'Times New Roman', serif; font-size: 0.95rem; color: #e0d5c0; line-height: 1.5; margin-bottom: var(--space-1); } /* Chinese text (larger, below) */ .subtitle-zh { font-family: 'Noto Serif SC', 'STSong', serif; font-size: 1.1rem; color: #ffffff; line-height: 1.5; } /* Single language mode (Chinese committee just has one line) */ .subtitle-container.single-lang .subtitle-en { display: none; } .subtitle-container.single-lang .subtitle-zh { font-size: 1.2rem; } /* ========== Title Page Specific ========== */ .title-page { text-align: center; } .title-page h1 { font-size: 2.5rem; margin-bottom: var(--space-4); background: linear-gradient(135deg, var(--aged-paper), var(--muted-gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; background-clip: text; } .title-subtitle { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: var(--space-8); } .objectives { text-align: left; max-width: 700px; margin: 0 auto; } .objectives h3 { text-align: center; margin-bottom: var(--space-6); } .objectives ul { list-style: none; padding: 0; } .objectives li { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--faded-blue); margin-bottom: var(--space-3); background: rgba(74,111,165,0.08); border-radius: 0 var(--radius-md) var(--radius-md) 0; transition: all var(--transition-normal); } .objectives li:hover { background: rgba(74,111,165,0.15); border-left-color: var(--muted-gold); } /* ========== Keyboard Focus ========== */ .nav-arrow:focus, .page-dot:focus, .play-btn:focus, .subtitle-toggle:focus { outline: 2px solid var(--muted-gold); outline-offset: 2px; } /* ========== Scrollbar ========== */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: rgba(201,162,39,0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(201,162,39,0.5); } /* ========== Responsive ========== */ @media (min-width: 1200px) { .content-container { max-width: 1000px; } .lecture-image { max-height: 75vh; } } @media (max-width: 1024px) { :root { --player-height: 56px; } .nav-arrow { width: 40px; height: 40px; } .nav-arrow svg { width: 20px; height: 20px; } .page-indicator { right: var(--space-3); } .page-dot { width: 8px; height: 8px; } .lecture-image { max-height: 40vh; } .content-container { max-width: 90vw; } h1 { font-size: 2rem; } h2 { font-size: 1.4rem; } .subtitle-en { font-size: 0.85rem; } .subtitle-zh { font-size: 1rem; } } @media (max-width: 768px) { :root { --player-height: 48px; } .page { padding: var(--space-6) var(--space-4) var(--space-12); } h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } .content-container { max-width: 100%; padding: var(--space-3); } .nav-arrow { width: 36px; height: 36px; top: auto; bottom: calc(var(--player-height) + var(--space-4)); transform: none; } .nav-arrow.prev { left: var(--space-2); } .nav-arrow.next { right: var(--space-2); } .page-indicator { top: auto; bottom: calc(var(--player-height) + var(--space-2)); right: 50%; transform: translateX(50%); flex-direction: row; gap: var(--space-2); } .audio-player { height: var(--player-height); padding: 0 var(--space-3); } .volume-control { display: none; } .data-card { min-width: 80px; padding: var(--space-2) var(--space-3); } .data-card .value { font-size: 1rem; } .data-card .label { font-size: 0.7rem; } .split-layout { grid-template-columns: 1fr; gap: var(--space-4); } .split-layout.split-reverse { direction: ltr; } .image-banner { margin: var(--space-4) calc(-1 * var(--space-3)); } .image-inset { max-width: 100%; } .subtitle-container { width: 95%; padding: var(--space-2) var(--space-4); } .subtitle-en { font-size: 0.8rem; } .subtitle-zh { font-size: 0.95rem; } } @media (max-width: 375px) { h1 { font-size: 1.4rem; } .lecture-image { max-height: 25vh; } }