/* ------------------------------------------------------------------ 2026 catalogue flip-book reader (retailer/catalogue.aspx, and the public section at the bottom of index.aspx with catalogue-home.css). The retailer page sits inside RetailerMasterV2.Master (Bootstrap 5); the home page has its own global reset (html.new-css *), so every rule here is keyed on .hm-cat-reader / .hm-zoom to out-rank it. Page images live in /Catalogue/2026/pages and /Catalogue/2026/thumbs. ------------------------------------------------------------------ */ .hm-catalogue { max-width: 1400px; } .hm-cat-reader, .hm-zoom { --hm-green: #00a478; --hm-dark: #1d1813; } .hm-cat-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px 32px; margin-bottom: 20px; } .hm-cat-head p { max-width: 760px; margin: 0; font-size: 16px; font-weight: 300; line-height: 1.6; color: #4a4a4a; } .hm-cat-download { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 999px; white-space: nowrap; } .hm-cat-download i { font-size: 18px; } /* reader frame ----------------------------------------------------- */ .hm-cat-reader { display: flex; flex-direction: column; color: #fff; background: radial-gradient(120% 90% at 50% 0%, #1f3b30 0%, #0f1615 65%); border: 1px solid #00000022; border-radius: 12px; overflow: hidden; } .hm-cat-reader .hm-cat-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding: 10px 14px; background: #00000055; border-bottom: 1px solid #ffffff14; } .hm-cat-group { display: flex; align-items: center; gap: 6px; } .hm-cat-sections { flex: 1 1 220px; justify-content: center; } /* the reader is moved to for the in-page full screen fallback, so everything inside it is styled via .hm-cat-reader rather than the page */ .hm-cat-reader .hm-btn, .hm-zoom .hm-btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0; margin: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #fff; font: inherit; line-height: 1; cursor: pointer; transition: background 0.2s; } .hm-cat-reader .hm-btn:hover, .hm-zoom .hm-btn:hover { background: #ffffff1f; color: #fff; } .hm-cat-reader .hm-btn.is-active, .hm-cat-reader .hm-btn.is-active:hover { background: var(--hm-green, #00a478); } .hm-cat-reader .hm-btn i, .hm-zoom .hm-btn i { font-size: 22px; color: #fff; } .hm-cat-reader .hm-btn:disabled, .hm-zoom .hm-btn:disabled { opacity: 0.3; pointer-events: none; } .hm-cat-reader .hm-btn:focus-visible, .hm-zoom .hm-btn:focus-visible, .hm-cat-reader .hm-cat-pageinput:focus-visible, .hm-cat-reader .hm-cat-select:focus-visible { outline: 2px solid var(--hm-green, #00a478); outline-offset: 2px; } .hm-cat-reader .hm-cat-pager { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #fff; font-size: 15px; font-weight: 300; white-space: nowrap; } .hm-cat-reader .hm-cat-pager span { color: inherit; } .hm-cat-reader .hm-cat-pageinput { width: 80px; height: 36px; text-align: center; background: #ffffff14; border: 1px solid #ffffff33; border-radius: 6px; color: #fff; font-size: 15px; font-weight: 500; outline: none; } .hm-cat-reader .hm-cat-pageinput:focus { border-color: var(--hm-green, #00a478); } .hm-cat-reader .hm-cat-select { width: 100%; max-width: 320px; height: 36px; padding: 0 12px; background: #ffffff14; border: 1px solid #ffffff33; border-radius: 6px; color: #fff; font-size: 14px; cursor: pointer; outline: none; } .hm-cat-reader .hm-cat-select option { color: #1d1813; background: #fff; } /* book stage ------------------------------------------------------- */ .hm-cat-reader .hm-cat-stage { display: flex; align-items: center; gap: 10px; padding: 24px 14px; height: min(78vh, 900px); min-height: 420px; } .hm-cat-bookwrap { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; } .hm-cat-reader .hm-cat-arrow { flex: 0 0 auto; height: 60px; min-width: 44px; } .hm-cat-reader .hm-cat-loading { position: absolute; margin: 0; font-size: 15px; color: #ffffff99; } .hm-cat-book { position: relative; max-width: 100%; max-height: 100%; } .hm-cat-book .stf__wrapper { position: relative; width: 100%; height: 100%; } .hm-page { background: #fff; overflow: hidden; } .hm-page img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; -webkit-user-drag: none; opacity: 0; transition: opacity 0.25s; } .hm-page.is-loaded img { opacity: 1; } .hm-page::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 3px solid #00000014; border-top-color: var(--hm-green, #00a478); border-radius: 50%; animation: hm-spin 0.8s linear infinite; } .hm-page.is-loaded::after { display: none; } @keyframes hm-spin { to { transform: rotate(360deg); } } /* plain list of pages when the flip-book script could not load */ .hm-cat-book.hm-fallback { width: 100% !important; height: 100% !important; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 15px; } .hm-cat-book.hm-fallback .hm-page { position: relative; width: min(100%, 600px); flex: 0 0 auto; } /* thumbnails ------------------------------------------------------- */ .hm-cat-reader .hm-cat-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px 16px; background: #00000066; border-bottom: 1px solid #ffffff14; -webkit-overflow-scrolling: touch; } .hm-cat-reader .hm-cat-thumbs[hidden] { display: none; } .hm-cat-reader .hm-thumb { flex: 0 0 auto; flex-direction: column; gap: 4px; height: auto; min-width: 0; padding: 4px; border: 2px solid transparent; border-radius: 6px; background: transparent; opacity: 0.7; } .hm-cat-reader .hm-thumb img { display: block; width: 64px; height: 90px; background: #fff; border-radius: 2px; } .hm-cat-reader .hm-thumb span { font-size: 12px; color: #ffffffbb; } .hm-cat-reader .hm-thumb:hover { opacity: 1; background: #ffffff1a; } .hm-cat-reader .hm-thumb.is-current { opacity: 1; border-color: var(--hm-green, #00a478); } /* full screen ------------------------------------------------------ */ .hm-cat-reader.hm-is-fs { position: fixed; inset: 0; width: 100%; height: 100%; max-height: none; border: none; border-radius: 0; z-index: 100000; background: #0f1615; } .hm-cat-reader.hm-is-fs .hm-cat-stage { flex: 1 1 auto; height: auto; min-height: 0; } html.hm-lock, html.hm-lock body { overflow: hidden !important; } /* zoom overlay (appended to , or to the reader while in full screen) */ .hm-zoom { position: fixed; inset: 0; z-index: 100001; display: none; flex-direction: column; background: #0b0f0ee6; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hm-zoom.is-open { display: flex; } .hm-zoom .hm-zoom-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #000000aa; } .hm-zoom .hm-zoom-title { color: #fff; font-size: 15px; } .hm-zoom-actions { display: flex; gap: 6px; } .hm-zoom .hm-zoom-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 15px; } .hm-zoom .hm-zoom-scroll img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; box-shadow: 0 10px 40px #0008; cursor: zoom-in; } .hm-zoom.is-actual .hm-zoom-scroll { display: block; padding: 0; } .hm-zoom.is-actual .hm-zoom-scroll img { max-width: none; max-height: none; width: auto; height: auto; margin: 0 auto; cursor: zoom-out; } /* small screens (same breakpoint as the retailer master's sidebar) ---- */ @media (max-width: 991.98px) { .hm-cat-reader .hm-cat-arrow { display: none; } .hm-cat-reader .hm-cat-stage { padding: 14px 10px; height: min(70vh, 800px); min-height: 360px; } .hm-cat-reader .hm-cat-toolbar { padding: 10px; } .hm-cat-reader .hm-cat-sections { order: 3; flex: 1 1 100%; } .hm-cat-reader .hm-cat-select { max-width: none; } .hm-zoom .hm-zoom-scroll { padding: 10px; } }