.category-panel,.category-panel::before,.category-panel::after{transition:background-color .8s ease,opacity 1s ease} .category-books{margin:2rem auto;padding:0 1rem} .category-panel{position:relative;background:linear-gradient(180deg,#faf8f3f5,#f3ede0f5),url(/assets/img/paper-fiber.webp) center/cover no-repeat;background-blend-mode:multiply;border:1px solid #8c6e3c26;border-radius:1.2rem;box-shadow:0 6px 20px #0000000f;padding:2rem 2rem 3rem;margin:2rem auto 3rem;max-width:1200px;overflow:hidden} @media (max-width:768px) { .category-panel{padding:1.25rem 1rem 2rem;margin:1.5rem auto 2rem;border-radius:1rem} } @media (max-width:480px) { .category-panel{padding:1rem .75rem 1.5rem;margin:1rem auto 1.5rem;border-radius:.9rem} } .category-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#ffffff4d 0%,transparent 70%),linear-gradient(to bottom,#fff3,#0000000d);mix-blend-mode:soft-light;opacity:.3;pointer-events:none;z-index:0} .category-panel::after{content:"";position:absolute;inset:0;background:url(/assets/img/paper-fiber.webp) center/cover repeat;mix-blend-mode:soft-light;opacity:.06;animation:paperShimmer 60s ease-in-out infinite alternate;pointer-events:none;z-index:1} @keyframes paperShimmer { 0%{transform:translate(0,0) scale(1);opacity:.05} 25%{transform:translate(-2%,1%) scale(1.02);opacity:.06} 50%{transform:translate(2%,-1%) scale(1.01);opacity:.07} 75%{transform:translate(-1%,-2%) scale(1.03);opacity:.06} 100%{transform:translate(1%,2%) scale(1);opacity:.05} } body.night .category-panel{background:linear-gradient(180deg,#20150af2 0%,#100b06f2 100%),url(/assets/img/paper-fiber.webp) center/cover no-repeat;background-blend-mode:multiply;border-color:#ffffff12;box-shadow:0 4px 20px #000c,inset 0 1px 1px #ffffff05} body.night .category-panel::before{opacity:.15;background:radial-gradient(ellipse at center,#ffffc80d 0%,transparent 70%)} body.night .category-panel::after{opacity:.08;animation-duration:80s;mix-blend-mode:overlay} .category-panel > *{position:relative;z-index:2} .panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;position:relative;z-index:2} .category-panel h2{font-family:var(--font-title);font-variant-caps:small-caps;font-size:1.6rem;color:var(--accent);margin:0;text-shadow:0 1px 1px #fff8} body.night .category-panel h2{color:#f6e3b1;text-shadow:0 1px 3px #000} .panel-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;background:linear-gradient(180deg,#fdf9f0cc,#f8f3e6cc);border:1px solid #785a2826;border-radius:.6rem;padding:.4rem 1rem;margin:0 auto .5rem;box-shadow:inset 0 1px 2px #fff8,0 2px 4px #0001;backdrop-filter:blur(4px);animation:toolbarSlide .8s cubic-bezier(0.22,1,0.36,1) both;transform-origin:top center;opacity:0} @keyframes toolbarSlide { 0%{opacity:0;transform:translateY(-10px) scale(.98);filter:brightness(.9)} 60%{opacity:1;transform:translateY(0) scale(1.02);filter:brightness(1.05)} 100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)} } body.night .panel-toolbar{background:linear-gradient(180deg,#2a1e13e6,#1b130be6);border-color:#ffffff1a;box-shadow:inset 0 1px 1px #ffffff08,0 2px 6px #0006} .view-toggle,.sort-controls{display:flex;align-items:center;gap:.5rem} .toggle-btn,.sort-btn{background:var(--card);border:1px solid var(--bord);border-radius:.4rem;padding:.35rem .75rem;font-size:.9rem;cursor:pointer;color:var(--fg);transition:background .25s ease,color .25s ease,transform .15s ease} .toggle-btn:hover,.sort-btn:hover{background:#fffff8f0;transform:translateY(-1px)} .toggle-btn.active,.sort-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)} @media (max-width:720px) { .panel-toolbar{flex-direction:column;align-items:stretch;gap:.8rem} } @media (max-width:640px) { .sort-controls .label{display:none} } .category-subheading{font-family:var(--font-title);font-size:1.4rem;font-weight:600;color:var(--accent);text-align:center;margin:1.4rem auto 1.6rem;letter-spacing:.02em;text-shadow:0 1px 1px #fff6;position:relative;display:inline-block;padding-bottom:.6rem} .category-subheading::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:140px;height:2px;background:linear-gradient(to right,transparent,#785a2880,transparent);border-radius:2px;box-shadow:0 1px 1px #fff3} body.night .category-subheading{color:#e0c27a;text-shadow:0 1px 1px #0009} body.night .category-subheading::after{background:linear-gradient(to right,transparent,#d6b8748c,transparent);box-shadow:0 0 6px #d6b87433} @media (max-width:768px) { .category-subheading{font-size:1.15rem;margin:1rem auto 1.2rem} .category-subheading::after{width:100px} } .category-select{font-family:var(--font-title);font-size:1.25rem;font-weight:600;color:var(--fg);background:var(--card);border:1px solid var(--bord);border-radius:.5rem;padding:.3rem 1.6rem .3rem .6rem;appearance:none;cursor:pointer;text-align:center;text-transform:uppercase;transition:all .25s ease;background-image:linear-gradient(to bottom,#fff9f0,#f2e6ce),url("data:image/svg+xml,%3Csvg fill='%23666' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6H0z'/%3E%3C/svg%3E");background-repeat:no-repeat,no-repeat;background-position:center right .7rem,0 0;background-size:.8em auto,100%} .category-select:hover{background-image:linear-gradient(to bottom,#fff3e0,#f2d9b3),url("data:image/svg+xml,%3Csvg fill='%23633' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6H0z'/%3E%3C/svg%3E");transform:translateY(-1px)} body.night .category-select{background:linear-gradient(to bottom,#3b2a17,#2b1d10);color:#f6e3b1;border:1px solid #fff0c826;background-image:linear-gradient(to bottom,#3b2a17,#2b1d10),url("data:image/svg+xml,%3Csvg fill='%23e0c27a' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6H0z'/%3E%3C/svg%3E")} .book-view.list .featured-grid{display:flex!important;flex-direction:column;gap:0;width:100%;padding:0;margin-top:12px} .book-view.list .featured-card{display:flex!important;align-items:center;gap:1.5rem;padding:.35rem .9rem;border-bottom:1px solid #785a2826;background:transparent;transition:background .25s ease,transform .2s ease;width:100%;max-width:1100px;margin:0 auto;flex-wrap:nowrap} .book-view.list .featured-card:hover{background:#faf0d20f;transform:translateX(3px)} .book-view.list .featured-card .thumb{flex:0 0 100px;height:85px;overflow:hidden;border-radius:.4rem;box-shadow:0 1px 4px #00000026} .book-view.list .featured-card img{width:100%;height:100%;object-fit:cover;border-radius:.3rem;display:block} .book-view.list .featured-card .meta{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0} .book-view.list .featured-card h3{margin:0 0 .15rem;font-family:var(--font-title);font-size:1.1rem;line-height:1.25;color:var(--fg);font-weight:600;text-shadow:0 1px 1px #fff3} .book-view.list .featured-card .author{margin:0;font-size:.95rem;color:var(--muted);opacity:.9;font-style:italic;line-height:1.3} .book-view.list .featured-card a{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit;width:100%} body.night .book-view.list .featured-card{border-bottom:1px solid #fff0b414} body.night .book-view.list .featured-card:hover{background:#ffe6960a} body.night .book-view.list .featured-card h3{color:#f6e3b1} body.night .book-view.list .featured-card .author{color:#d4c29b;opacity:.85} @media (max-width:768px) { .book-view.list .featured-card { gap:1rem;padding:.3rem .75rem;} .book-view.list .featured-card .thumb { flex:0 0 85px;height:75px;} .book-view.list .featured-card h3 { font-size:1rem;} } @media (max-width:480px) { .book-view.list .featured-card { gap:.6rem;padding:.3rem .7rem;} .book-view.list .featured-card .thumb { flex:0 0 70px;height:65px;} } .book-view.list .featured-card::after{content:"";position:absolute;bottom:0;left:4%;right:4%;height:1px;background:linear-gradient(to right,transparent,#00000026,transparent);opacity:.7;pointer-events:none} body.night .book-view.list .featured-card::after{background:linear-gradient(to right,transparent,#fff0b426,transparent);opacity:.8} .featured-card.sorting{opacity:0;transform:translateY(10px)} .featured-card.sorted{animation:fadeSlideUp .45s ease forwards} @keyframes fadeSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } body.night .featured-card.sorting{opacity:.7} .category-panel .featured-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:1.8rem} @media (max-width:900px) { .category-panel .featured-grid { grid-template-columns:repeat(2, 1fr) !important;} } @media (max-width:600px) { .category-panel .featured-grid { grid-template-columns:1fr !important;} } .category-panel .featured-grid { grid-template-columns:repeat(4, 1fr) !important;} @media (max-width:1200px) { .category-panel .featured-grid { grid-template-columns:repeat(3, 1fr) !important;} } @media (max-width:900px) { .category-panel .featured-grid { grid-template-columns:repeat(2, 1fr) !important;} } @media (max-width:600px) { .category-panel .featured-grid { grid-template-columns:1fr !important;} }