/* ------------------------------------------------------------------ "Explore our new catalogue" section at the bottom of index.aspx. Sits inside MasterPage2025.Master (assets/css2025/style.css, no Bootstrap) and is loaded after catalogue.css, which styles the reader itself. This file lays out the section and adapts the reader to the home page's global rules (the html.new-css * reset and the !important button hover in style.css). Reader rules are keyed on .hm-cat-reader.hm-cat-inline / .hm-zoom rather than on the section, because the in-page full screen fallback moves the reader to and the zoom overlay always lives there. ------------------------------------------------------------------ */ /* section layout ----------------------------------------------------- */ .new-css .hm-home-cat .content { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; } .new-css .hm-home-cat .cta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem; } .new-css .hm-home-cat .cta button { white-space: nowrap; } /* the download link looks like the site's outlined button (style.css button.empty) */ .new-css .hm-home-cat .cta a.hm-home-cat-download { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem 3rem; border: 1px solid var(--primary); background: transparent; color: var(--primary-text); font-size: 1.6rem; font-weight: 500; line-height: 1; text-transform: capitalize; white-space: nowrap; cursor: pointer; transition: 0.3s; } .new-css .hm-home-cat .cta a.hm-home-cat-download:hover { background: var(--primary); color: white; } /* the global reset colours every element, so the icons follow their button */ .new-css .hm-home-cat .cta :is(button, a) i { color: inherit; font-size: 1.8rem; } .new-css .hm-home-cat .hm-home-cat-reader { min-width: 0; } @media (max-width: 1080px) { .new-css .hm-home-cat .grid-2.adj { grid-template-columns: 1fr; gap: 4rem; } } @media (max-width: 660px) { .new-css .hm-home-cat .cta { width: 100%; flex-direction: column; align-items: stretch; } .new-css .hm-home-cat .cta :is(button, a) { width: 100%; } } /* reader on the home page ------------------------------------------- */ .new-css .hm-cat-reader.hm-cat-inline { border-radius: 0; color: #fff; } .new-css .hm-cat-reader.hm-cat-inline:not(.hm-is-fs) .hm-cat-stage { height: auto; min-height: 0; } /* the book box takes its height from its width: a two-page spread, or a single page on phones, so the reader script finds a box the pages already fit (and the no-library page list gets a height as well) */ .new-css .hm-cat-reader.hm-cat-inline:not(.hm-is-fs) .hm-cat-bookwrap { height: auto; aspect-ratio: 1414 / 1000; } @media (max-width: 540px) { .new-css .hm-cat-reader.hm-cat-inline:not(.hm-is-fs) .hm-cat-bookwrap { aspect-ratio: 707 / 1000; } } /* the toolbar (and the thumbnail strip) sit under the book here */ .new-css .hm-cat-reader.hm-cat-inline .hm-cat-toolbar, .new-css .hm-cat-reader.hm-cat-inline .hm-cat-thumbs { border-top: 1px solid #ffffff14; border-bottom: 0; } /* the section list only earns its space once the reader fills the screen */ .new-css .hm-cat-reader.hm-cat-inline:not(.hm-is-fs) .hm-cat-sections { display: none; } .new-css .hm-cat-reader .hm-cat-close { display: none; } .new-css .hm-cat-reader.hm-is-fs .hm-cat-close { display: inline-flex; } /* style.css gives every button a solid green hover with !important */ .new-css .hm-cat-reader .hm-btn:hover, .new-css .hm-zoom .hm-btn:hover { background: #ffffff1f !important; border-color: transparent !important; color: #fff !important; } .new-css .hm-cat-reader .hm-btn.is-active:hover { background: var(--hm-green, #00a478) !important; } .new-css .hm-cat-reader .hm-thumb { gap: 4px; } .new-css .hm-cat-reader .hm-thumb:hover { background: #ffffff1a !important; border-color: transparent !important; } .new-css .hm-cat-reader .hm-thumb.is-current:hover { border-color: var(--hm-green, #00a478) !important; }