/* English comments: Main stylesheet for the site - Google Fonts are included in each HTML . Change font families here if you want different fonts. - Light/dark theme variables are defined below. Change colors here. - Logo located in /images/logo.svg; fallback cover in /images/fallback-cover.svg */ :root { --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; --font-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --bg: #ffffff; --text: #0b0b0b; --muted: #6b6b6b; --accent: #6b5cFF; --card-bg: #fbfbfb; --focus: #2b6df6; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --transition-fast: 150ms ease-out; --transition-base: 250ms ease-out; } /* Prevent flash during maintenance check */ html.checking-maintenance body { opacity: 0 !important; pointer-events: none; } .dark { --bg: #0b0b10; --text: #e6e6e6; --muted: #9aa0a6; --accent: #8b7dff; --card-bg: #0f1013; --focus: #7aa2ff; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); } /* Respect reduced motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } * { box-sizing: border-box } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.45; transition: background var(--transition-base), color var(--transition-base); padding-top: 70px; /* Spacer for fixed header */ } /* Headings use a serif for a subtle 'book' vibe */ h1, h2, h3, h4, h5 { font-family: var(--font-serif); margin-top: 0; line-height: 1.2; } h1 { font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1rem; } h2 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.75rem; } h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; } h4 { font-size: 1.25rem; font-weight: 600; } p { font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; } .container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; } /* Header with sticky behavior and animations */ .site-header { border-bottom: 1px solid rgba(0, 0, 0, 0.08); background: color-mix(in srgb, var(--bg) 85%, transparent); position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all var(--transition-base); } .dark .site-header { border-bottom-color: rgba(255, 255, 255, 0.1); } .header-inner { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0 } .logo-img { height: 36px; transition: transform var(--transition-fast); } .logo:hover .logo-img { transform: scale(1.05); } /* Mobile hamburger menu */ .menu-toggle { display: none; background: transparent; border: none; cursor: pointer; padding: 0; margin-left: auto; color: var(--text); width: 44px; height: 44px; position: relative; z-index: 101; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .burger-bar { display: block; width: 22px; height: 2px; background-color: currentColor; border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-base); } .menu-toggle[aria-expanded="true"] .burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .burger-bar:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] .burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .main-nav { display: flex; gap: 1rem; align-items: center; } .main-nav a { color: var(--text); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 6px; transition: all var(--transition-fast); position: relative; } .main-nav a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); width: 80%; height: 2px; background: var(--accent); transition: transform var(--transition-base); } .main-nav a:hover { background: rgba(0, 0, 0, 0.04); } .dark .main-nav a:hover { background: rgba(255, 255, 255, 0.08); } .main-nav a[aria-current] { font-weight: 600; } .main-nav a[aria-current]::after { transform: translateX(-50%) scaleX(1); } .actions { margin-left: auto } .btn { background: transparent; border: 1px solid rgba(0, 0, 0, 0.12); padding: 0.75rem 1.25rem; min-height: 44px; border-radius: 8px; cursor: pointer; font-family: var(--font-sans); font-size: 0.95rem; transition: all var(--transition-fast); font-weight: 500; text-decoration: none; display: inline-block; } .btn:hover { background: rgba(0, 0, 0, 0.04); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .dark .btn { border-color: rgba(255, 255, 255, 0.2); } .dark .btn:hover { background: rgba(255, 255, 255, 0.08); } .btn.primary { background: var(--accent); color: white; border: none; box-shadow: var(--shadow-sm); } .btn.primary:hover { background: color-mix(in srgb, var(--accent) 90%, black); box-shadow: var(--shadow-md); transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* Main content with fade-in animation */ .main-content { padding-top: 1.5rem; padding-bottom: 1.5rem; animation: fadeIn 0.5s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .lead { color: var(--muted); font-size: 1.1rem; margin-bottom: 2rem; } /* Grid with stagger animation */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; } /* Enhanced card design with hover effects */ .card { background: var(--card-bg); border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.06); transition: all var(--transition-base); box-shadow: var(--shadow-sm); animation: slideUp 0.4s ease-out backwards; } .dark .card { border-color: rgba(255, 255, 255, 0.08); } /* Stagger animation for cards */ .card:nth-child(1) { animation-delay: 0.05s; } .card:nth-child(2) { animation-delay: 0.1s; } .card:nth-child(3) { animation-delay: 0.15s; } .card:nth-child(4) { animation-delay: 0.2s; } .card:nth-child(5) { animation-delay: 0.25s; } .card:nth-child(6) { animation-delay: 0.3s; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent); } .card-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; height: 100%; } .card-cover { width: 100%; height: 320px; object-fit: cover; transition: transform var(--transition-base); } .card:hover .card-cover { transform: scale(1.05); } .card-body { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; gap: 0.5rem; } .card-title { font-size: 1.05rem; margin: 0; line-height: 1.3; font-weight: 600; } .muted { color: var(--muted) } .small { font-size: 0.85rem; line-height: 1.4 } .chip { background: rgba(0, 0, 0, 0.08); padding: 0.2rem 0.5rem; border-radius: 12px; font-size: 0.8rem; display: inline-block; transition: all var(--transition-fast); } .dark .chip { background: rgba(255, 255, 255, 0.12); } .card:hover .chip { background: var(--accent); color: white; } .actions-row { margin-top: 1.5rem; text-align: center } .actions-row.small { margin-top: 0.75rem } /* Filters section */ .list-section .filters-grid { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; align-items: start; margin-bottom: 1.5rem; } .quick-filters { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; padding: 1rem; background: var(--card-bg); border-radius: 8px; } .quick-filters label { font-weight: 600; margin-right: 0.5rem; } .quick-filter-btn { padding: 0.5rem 1rem; min-height: 40px; font-size: 0.9rem; } .quick-filter-btn.active { background: var(--accent); color: white; border-color: var(--accent); } .search-group input { width: 100%; padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.12); font-family: var(--font-sans); font-size: 1rem; transition: all var(--transition-fast); } .search-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .selects select, .dates input, .sort-row select { width: 100%; padding: 0.5rem; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.12); background: var(--card-bg); font-family: var(--font-sans); transition: all var(--transition-fast); } .selects select:focus, .dates input:focus, .sort-row select:focus { border-color: var(--accent); outline: none; } .selects { display: grid; gap: 0.5rem } .dates { display: flex; flex-direction: column; gap: 0.5rem } .date-row { display: flex; gap: 0.5rem; align-items: center } .results-header { margin: 1rem 0 0.5rem } /* Book detail page */ .book-detail { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; } .book-cover { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-md); } .meta { padding: 0.5rem 0 } .buy-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .buy-buttons a { padding: 0.6rem 1rem; border-radius: 8px; background: var(--accent); color: white; text-decoration: none; transition: all var(--transition-fast); font-weight: 500; } .buy-buttons a:hover { background: color-mix(in srgb, var(--accent) 90%, black); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Related books section */ .related-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(0, 0, 0, 0.08); } .dark .related-section { border-top-color: rgba(255, 255, 255, 0.1); } /* FAQ details */ .faq-list details { margin: 0.75rem 0; padding: 1rem; background: var(--card-bg); border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.06); transition: all var(--transition-fast); } .faq-list details:hover { box-shadow: var(--shadow-sm); } .faq-list summary { cursor: pointer; font-weight: 600; padding: 0.25rem 0; transition: color var(--transition-fast); } .faq-list summary:hover { color: var(--accent); } .faq-list details[open] summary { margin-bottom: 0.75rem; color: var(--accent); } /* Empty states */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); } .empty-state-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.5; } .empty-state h3 { color: var(--text); margin-bottom: 0.5rem; } .site-footer { border-top: 1px solid rgba(0, 0, 0, 0.06); padding: 2rem 0; margin-top: 3rem; color: var(--muted); } .dark .site-footer { border-top-color: rgba(255, 255, 255, 0.1); } /* Focus styles */ :focus:not(:focus-visible) { outline: none } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } .main-nav a:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); border-radius: 4px; } /* Pagination */ .pagination { display: flex; gap: 0.5rem; grid-template-columns: 1fr 240px; gap: 1rem; align-items: start; margin-bottom: 1.5rem; } .search-group input { width: 100%; padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.12); font-family: var(--font-sans); font-size: 1rem; transition: all var(--transition-fast); } .search-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .selects select, .dates input, .sort-row select { width: 100%; padding: 0.5rem; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.12); background: var(--card-bg); font-family: var(--font-sans); transition: all var(--transition-fast); } .selects select:focus, .dates input:focus, .sort-row select:focus { border-color: var(--accent); outline: none; } .selects { display: grid; gap: 0.5rem } .dates { display: flex; flex-direction: column; gap: 0.5rem } .date-row { display: flex; gap: 0.5rem; align-items: center } .results-header { margin: 1rem 0 0.5rem } /* Book detail page */ .book-detail { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; } .book-cover { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-md); } .meta { padding: 0.5rem 0 } .buy-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .buy-buttons a { padding: 0.6rem 1rem; border-radius: 8px; background: var(--accent); color: white; text-decoration: none; transition: all var(--transition-fast); font-weight: 500; } .buy-buttons a:hover { background: color-mix(in srgb, var(--accent) 90%, black); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Related books section */ .related-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(0, 0, 0, 0.08); } .dark .related-section { border-top-color: rgba(255, 255, 255, 0.1); } /* FAQ details */ .faq-list details { margin: 0.75rem 0; padding: 1rem; background: var(--card-bg); border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.06); transition: all var(--transition-fast); } .faq-list details:hover { box-shadow: var(--shadow-sm); } .faq-list summary { cursor: pointer; font-weight: 600; padding: 0.25rem 0; transition: color var(--transition-fast); } .faq-list summary:hover { color: var(--accent); } .faq-list details[open] summary { margin-bottom: 0.75rem; color: var(--accent); } /* Empty states */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); } .empty-state-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.5; } .empty-state h3 { color: var(--text); margin-bottom: 0.5rem; } .site-footer { border-top: 1px solid rgba(0, 0, 0, 0.06); padding: 2rem 0; margin-top: 3rem; color: var(--muted); } .dark .site-footer { border-top-color: rgba(255, 255, 255, 0.1); } /* Focus styles */ :focus:not(:focus-visible) { outline: none } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } .main-nav a:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); border-radius: 4px; } /* Pagination */ .pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; } .error { color: #d32f2f; background: rgba(211, 47, 47, 0.1); padding: 1rem; border-radius: 8px; border-left: 4px solid #d32f2f; } /* Improve contrast slightly for muted text */ .muted { color: color-mix(in srgb, var(--text) 60%, transparent) } /* Mobile responsive */ @media (max-width:800px) { h1 { font-size: 2rem } h2 { font-size: 1.5rem } .header-inner { position: relative; } .menu-toggle { display: flex } .main-nav { position: fixed; top: 64px; left: 0; right: 0; background: var(--bg); flex-direction: column; padding: 1rem; box-shadow: var(--shadow-lg); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: all var(--transition-base); gap: 0; z-index: 999; } .main-nav.active { transform: translateY(0); opacity: 1; pointer-events: all; } .main-nav a { width: 100%; padding: 0.75rem 1rem; border-radius: 6px; } .main-nav a::after { display: none } .actions { position: fixed; top: 64px; left: 0; right: 0; background: var(--bg); padding: 0 1rem 1rem; margin: 0; box-shadow: var(--shadow-lg); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: all var(--transition-base); z-index: 998; } .main-nav.active~.menu-toggle~.actions { transform: translateY(200px); opacity: 1; pointer-events: all; } .actions .btn { width: 100%; font-size: 1.5rem; padding: 0.5rem; } .book-detail { grid-template-columns: 1fr; gap: 1.5rem } .card-cover { height: 220px } .list-section .filters-grid { grid-template-columns: 1fr } .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem } } /* Dark mode tweaks */ .dark { --card-bg: #0f1114; --muted: #9aa0a6 } /* Statistics */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; margin-top: 2rem; } .stat-card { background: var(--card-bg); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.06); text-align: center; transition: transform var(--transition-fast), box-shadow var(--transition-fast); animation: slideUp 0.4s ease-out; } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .stat-value { display: block; font-size: 1.75rem; font-weight: 800; color: var(--accent); margin-bottom: 0.25rem; } .stat-label { font-size: 0.9rem; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .dark .stat-card { border-color: rgba(255, 255, 255, 0.1); } .back-button-container { margin-bottom: 2rem; } /* Contact Page Refined */ .contact-section { max-width: 600px; margin: 3rem auto; padding: 2.5rem; background: var(--card-bg); border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: var(--shadow-md); animation: slideUp 0.5s ease-out; } .dark .contact-section { border-color: rgba(255, 255, 255, 0.1); } .contact-section h1 { text-align: center; margin-bottom: 0.5rem; } .contact-section p { text-align: center; color: var(--muted); margin-bottom: 2rem; } #contact-form { display: flex; flex-direction: column; gap: 1.25rem; } #contact-form label { font-weight: 600; font-size: 0.95rem; margin-bottom: -0.75rem; color: var(--text); } #contact-form input, #contact-form textarea { width: 100%; padding: 0.8rem 1rem; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.12); background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 1rem; transition: all var(--transition-fast); } #contact-form input:focus, #contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); } .dark #contact-form input, .dark #contact-form textarea { border-color: rgba(255, 255, 255, 0.12); } .form-actions { margin-top: 1rem; } #contact-form .btn.primary { width: 100%; padding: 1rem; font-size: 1.1rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem; } #form-message { text-align: center; margin-top: 1rem; font-weight: 500; min-height: 1.5rem; } #form-message.success { color: #10b981; } #form-message.error { color: #ef4444; }