/* --- Variables & Base Styles --- */ :root { --bg-color: #e8c9a0; --text-color: #2d2d2d; --accent-color: #555; --border-color: #000000; --button-hover: #1a1a1a; --box-bg: #ffffff; --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: var(--bg-color); color: var(--text-color); line-height: 1.5; } /* --- Container Layout --- */ .container { display: flex; flex-direction: column; gap: 20px; } .top-row { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: stretch; } /* --- Sidebar --- */ .sidebar { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px; background-color: var(--box-bg); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--box-shadow); height: 100%; } .sidebar a { text-decoration: none; color: var(--text-color); font-size: 16px; font-weight: 600; padding: 10px 12px; border-radius: 8px; transition: all 0.2s ease; } .sidebar a:hover { background-color: var(--button-hover); color: #fff; } /* --- Header Section --- */ .header { display: flex; align-items: center; justify-content: center; background-color: var(--box-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 4px 4px; box-shadow: var(--box-shadow); height: 100%; } .header a { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; } .header img { max-width: 100%; height: auto; max-height: 240px; object-fit: contain; mix-blend-mode: multiply; filter: contrast(1.1) brightness(1.05); } /* --- Main Content --- */ .main-content { display: flex; flex-direction: column; gap: 20px; } /* --- Comic Display --- */ .comic { text-align: center; background-color: var(--box-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; box-shadow: var(--box-shadow); } .comic img { max-width: 100%; height: auto; mix-blend-mode: multiply; filter: contrast(1.1) brightness(1.05); border-radius: 4px; } /* --- Navigation Container --- */ .nav-container { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0; } .nav-group { display: flex; background: var(--box-bg); gap: 20px; padding: 10px 16px; border-radius: 50px; border: 1px solid var(--border-color); box-shadow: var(--box-shadow); width: fit-content; } .nav-group a { padding: 12px 24px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; color: var(--text-color); border-radius: 40px; transition: all 0.2s ease; white-space: nowrap; } .nav-group a:hover:not(.disabled) { background: var(--button-hover); color: #fff; transform: translateY(-1px); } .nav-group a.disabled { opacity: 0.15; pointer-events: none; } /* --- Metadata Text --- */ .comic-meta { font-size: 11px; font-weight: 600; color: #666; letter-spacing: 0.08em; text-align: center; } /* --- Archive links --- */ .archive-link { color: #8B6914; text-decoration: none; font-family: 'Courier New', monospace; font-weight: bold; } .archive-link:visited { color: #8B6914; } /* --- Responsive Media Queries --- */ /* Tablets and below */ @media (max-width: 768px) { .top-row { grid-template-columns: 1fr; gap: 15px; } .sidebar { flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 12px; } .sidebar a { padding: 8px 16px; } .header img { max-height: 120px; } .comic { padding: 15px; } .nav-group { gap: 12px; padding: 8px 12px; } .nav-group a { padding: 10px 16px; font-size: 13px; } .archive-link { font-size: 0.8em; } } /* Mobile phones */ @media (max-width: 480px) { body { padding: 15px 10px; } .container { gap: 15px; } .header img { max-height: 80px; } .comic { padding: 12px; } .nav-group a { padding: 8px 12px; font-size: 11px; } .sidebar a { font-size: 14px; } } /* --- About page --- */ .about-page { padding: 0 10px; max-width: 100%; margin: 0 auto; } .about-page h1 { text-align: center; margin-top: 0; margin-bottom: 40px; } .about-section { display: flex; gap: 30px; margin-bottom: 30px; align-items: center; background-color: var(--box-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 30px; box-shadow: var(--box-shadow); } .about-section .about-text { flex: 1; text-align: left; } .about-section .about-image { flex: 0 0 300px; } .about-section .about-image img { width: 100%; height: auto; border-radius: 8px; } .about-section.author-section .about-image { flex: 0 0 300px; width: 300px; height: 300px; border-radius: 50%; overflow: hidden; } .about-section.author-section .about-image img { width: 100%; height: 100%; object-fit: cover; } .author-section { flex-direction: row-reverse; } .characters-section { margin-top: 50px; } .characters-section h2 { text-align: center; margin-bottom: 30px; } .characters-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 20px; } .character-card { display: flex; gap: 20px; align-items: flex-start; background-color: #f5f5f5; border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; box-shadow: var(--box-shadow); } .character-image-circle { flex: 0 0 120px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 3px solid #333; } .character-image-circle img { width: 100%; height: 100%; object-fit: cover; } .character-info { flex: 1; } .character-info h2 { margin: 20px 0 10px; } .character-info h3 { margin: 0 0 10px 0; } .character-info p { margin: 0; font-size: 0.9em; line-height: 1.5; color: #555; text-align: left; } @media (max-width: 768px) { .about-section { flex-direction: column; background-color: transparent; border: none; box-shadow: none; padding: 0; } .about-section .about-image { flex: 0 0 auto; width: 100%; max-width: 300px; } .author-section { flex-direction: column; } .characters-grid { grid-template-columns: 1fr; } }