@import"https://fonts.googleapis.com/css2?family=Karla:wght@400;700&family=Rambla:wght@400&family=Rubik:wght@300;400;500;700&display=swap";*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f6f8;color:#111;font-family:Rubik,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.hero{height:613px;background:#fff;position:relative;overflow:hidden}.hero-inner{max-width:1160px;height:100%;margin:auto;position:relative;z-index:1}.hero nav{display:flex;align-items:center;justify-content:space-between;padding-top:33px}.logo{display:flex;align-items:center;font-size:30px;white-space:nowrap}.logo span{font-weight:400}.logo b{font-weight:500}.logo i{width:1px;height:34px;background:#111;margin:0 20px}.navlinks{display:flex;gap:45px;align-items:center;font-weight:500;font-size:16px;color:#fff}.navlinks a{padding:16px 0 12px}.navlinks a.active{border-bottom:3px solid white}.login{font-size:25px;background:#f5f6f8;border:0;border-radius:30px;padding:12px 58px;color:#111;margin-left:0}.menu-button{display:none;border:0;background:none}.hero-text{position:absolute;top:169px;left:0}.hero-text h1{text-transform:uppercase;font-size:75px;line-height:95px;letter-spacing:-1.5px;font-weight:700;margin:0;white-space:nowrap}.hero-text p{font:25px Rambla,sans-serif;margin:13px 0 24px;text-transform:capitalize}.search{display:flex;width:406px;height:60px;align-items:center;gap:8px;background:#f5f6f8;padding:0 15px;color:#999}.search input{background:none;border:0;outline:none;width:100%;font:16px Karla,sans-serif}.hero-art{position:absolute;left:calc(50% + 47px);height:613px;width:1012px;top:0}.orange-shape{position:absolute;top:0;right:0;bottom:0;left:0;background:#ff971d;clip-path:polygon(0 0,100% 0,100% 100%,24% 100%)}.big-circle{position:absolute;left:380px;top:37px;width:483px;height:500px;border:46px solid #ffffff22;border-radius:50%}.dots{position:absolute;width:105px;height:92px;background-image:radial-gradient(#fff9 3px,transparent 3.5px);background-size:18px 18px}.dots-a{left:180px;top:195px}.dots-b{left:484px;top:521px}.hero-cover{position:absolute;left:271px;top:116px;width:297px;height:497px;object-fit:cover}main{min-height:1714px;padding:88px 0 68px}.catalog{width:1353px;max-width:100%;display:grid;grid-template-columns:301px 983px;gap:69px}aside{font-family:Karla,sans-serif;font-size:25px}aside h3{font-size:25px;margin:0 0 17px 85px}aside .genres{display:flex;flex-direction:column;margin-bottom:36px}.genres button{font-size:25px;background:none;text-align:left;border:0;height:54px;padding-left:85px}.genres button.selected{color:#ff971d;background:#fff8ee;border-left:1px solid #ff971d;height:45px;margin-bottom:9px}aside hr{border:0;height:1px;background:#dadada;margin:0 0 54px}aside .recommend{display:block;border:0;background:none;font:25px Karla,sans-serif;margin:0 0 25px 85px;white-space:nowrap;padding:0;text-align:left}.book-grid{display:grid;grid-template-columns:452px 452px;column-gap:79px;row-gap:69px}.book{width:452px;height:338px;position:relative}.book-background{position:absolute;left:66px;top:0;width:384px;height:338px;background:#fff}.book-cover{position:absolute;left:2px;top:32px;width:147px;height:225px;object-fit:cover;box-shadow:0 10px 40px #0003}.book-detail{position:absolute;left:172px;top:29px;width:246px}.book-detail h2{font-size:25px;font-weight:400;line-height:35px;text-transform:capitalize;min-height:68px;max-height:68px;overflow:hidden;margin:0 0 16px}.author{font-size:16px;color:#666;text-transform:capitalize;margin:0 0 16px}.rating{display:flex;gap:22px;align-items:center;margin:0 0 16px;white-space:nowrap}.rating span{color:#ff971d;letter-spacing:1px}.rating span.pale{color:#ddd}.rating small{font-size:13px;color:#bbb}.excerpt{font:16px/25px Rambla,sans-serif;color:#aaa;height:72px;overflow:hidden;margin:0 0 17px}.buy{height:43px;width:100%;border:1px solid #ff971d;background:#fff3e7;color:#ff971d;border-radius:10px;font-size:16px;font-weight:500}.buy:hover{background:#ff971d;color:#fff}.notice{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:10;background:#222;color:#fff;padding:14px 20px;border-radius:9px;display:flex;gap:16px}.notice button,.drawer button{background:none;border:0;cursor:pointer}.notice button{color:#fff}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:20;display:flex;justify-content:flex-end}.drawer{width:min(440px,100%);padding:24px;background:#fff}.drawer header{display:flex;justify-content:space-between;align-items:center}.drawer p{border-bottom:1px solid #ddd;padding:10px 0}.drawer p button{color:#ff971d;float:right}.drawer small{color:#666}@media(max-width:1250px){.hero-inner{margin:0 5%}.hero-art{left:50%}.hero-text h1{font-size:clamp(45px,6vw,75px);line-height:1.2}.catalog{grid-template-columns:230px 1fr;gap:25px}.catalog aside h3,.catalog aside .recommend{margin-left:30px}.genres button{padding-left:30px}.book-grid{grid-template-columns:repeat(2,minmax(300px,1fr));gap:30px}.book{width:100%}.book-background{width:calc(100% - 66px)}.book-detail{width:calc(100% - 195px)}}@media(max-width:850px){.hero{height:660px}.hero-art{opacity:.25;left:35%}.menu-button{display:block}.navlinks{display:none;position:absolute;top:95px;right:0;background:#ff971d;padding:20px;z-index:3;flex-direction:column;align-items:flex-start;gap:0}.navlinks.visible{display:flex}.hero-text{top:165px}.hero-text h1{white-space:normal}.hero-text p{font-size:20px}.catalog{display:block;padding:0 20px}.book-grid{grid-template-columns:1fr;justify-items:center}.book{max-width:452px}.catalog aside{margin-bottom:30px}.genres{flex-direction:row!important;flex-wrap:wrap}.genres button,.genres button.selected{height:auto;padding:8px;font-size:16px;margin:0}.catalog aside h3{margin:0 0 12px}.catalog aside hr,.catalog aside .recommend,.catalog aside h3:last-of-type{display:none}}@media(max-width:480px){.hero-text h1{font-size:39px}.search{width:min(406px,90vw)}.book{height:290px}.book-background{height:290px;left:44px;width:calc(100% - 44px)}.book-cover{width:105px;height:160px}.book-detail{left:122px;width:calc(100% - 137px);top:20px}.book-detail h2{font-size:18px;line-height:24px;min-height:48px;max-height:48px;margin-bottom:8px}.author{font-size:13px;margin-bottom:8px}.rating{gap:5px;margin-bottom:8px}.rating small{font-size:10px}.excerpt{font-size:12px;line-height:18px;height:54px}.buy{height:36px}}
