:root { --card-shadow: 0 14px 40px rgba(15, 23, 42, 0.12); } .textbook-hero { background: radial-gradient(circle at 20% 20%, rgba(239, 68, 68, 0.12), transparent 45%), radial-gradient(circle at 80% 0%, rgba(99, 102, 241, 0.12), transparent 35%), radial-gradient(circle at 50% 60%, rgba(14, 165, 233, 0.12), transparent 40%), #0f172a; color: #e2e8f0; } .textbook-hero h1 { color: #fff; } .textbook-card { box-shadow: var(--card-shadow); transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; border: 1px solid #e5e7eb; } .textbook-card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(15, 23, 42, 0.15); border-color: #cbd5e1; } .textbook-img { width: 100%; display: block; } .textbook-meta { font-size: 0.9rem; color: #475569; } .textbook-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border-radius: 9999px; background: rgba(99, 102, 241, 0.12); color: #4338ca; font-weight: 600; letter-spacing: 0.02em; } .textbook-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .section-header { display: flex; flex-direction: column; gap: 0.25rem; } .section-header h2 { font-size: 1.5rem; font-weight: 800; color: #0f172a; } .section-header p { color: #475569; } @media (max-width: 640px) { .textbook-pill { font-size: 0.8rem; } .section-header h2 { font-size: 1.3rem; } } /* Dark mode (opt-in): add .theme-dark to to enable. */ body.theme-dark .textbook-hero { background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.18), transparent 45%), radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.16), transparent 35%), radial-gradient(circle at 50% 60%, rgba(14, 116, 144, 0.18), transparent 40%), #0b1020; color: #e2e8f0; } body.theme-dark .textbook-card { border-color: #1f2937; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45); } body.theme-dark .textbook-card:hover { border-color: #334155; box-shadow: 0 24px 55px rgba(0, 0, 0, 0.55); } body.theme-dark .textbook-meta { color: #94a3b8; } body.theme-dark .textbook-pill { background: rgba(99, 102, 241, 0.2); color: #c7d2fe; } body.theme-dark .section-header h2 { color: #e2e8f0; } body.theme-dark .section-header p { color: #94a3b8; }