.mod-pdf-flipbook { --flipbook-bg: #e0e0e0; --flipbook-text: #302d29; --flipbook-accent: #6f4f28; position: relative; padding: 3rem; background: var(--flipbook-bg); } .mod-pdf-flipbook:focus-visible { outline: 2px solid var(--flipbook-accent); outline-offset: 3px; } .mod-pdf-flipbook__status { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 0.8rem; font-size: 0.92rem; color: var(--flipbook-text); } .mod-pdf-flipbook__status::before { content: ''; width: 0.9rem; height: 0.9rem; border: 2px solid rgba(48, 45, 41, 0.25); border-top-color: rgba(48, 45, 41, 0.85); border-radius: 50%; animation: mod-pdf-flipbook-spin 0.75s linear infinite; } .mod-pdf-flipbook__status.is-hidden { display: none; } .mod-pdf-flipbook__status.is-error { color: #9f1f1f; } .mod-pdf-flipbook__status.is-error::before { display: none; } .mod-pdf-flipbook__stage { position: relative; width: 100%; margin: 0 auto; background: #e0e0e0; z-index: 1; transition: opacity 1.3s ease 0.5s; } .mod-pdf-flipbook .c-flipbook { max-width: 100%; } .mod-pdf-flipbook .c-flipbook.is-booting, .mod-pdf-flipbook .c-flipbook.is-booting .c-flipbook__page, .mod-pdf-flipbook .c-flipbook.is-booting .c-flipbook__page::before { transition: none !important; } .mod-pdf-flipbook .c-flipbook__page { background: #fefdf9; overflow: hidden; border: 1px solid #e2dbcc; } .mod-pdf-flipbook .c-flipbook__page canvas { display: block; width: 100%; height: 100%; } .mod-pdf-flipbook__page-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: #6f675a; background: repeating-linear-gradient( -45deg, rgba(184, 176, 160, 0.18), rgba(184, 176, 160, 0.18) 14px, rgba(239, 235, 227, 0.28) 14px, rgba(239, 235, 227, 0.28) 28px ); } .mod-pdf-flipbook__controls { position: relative; z-index: 20; display: flex; gap: 0.6rem; margin-top: 0.9rem; transition: opacity 1.3s ease 0.5s; } .mod-pdf-flipbook__error { margin-top: 0.8rem; color: #9f1f1f; } @media (max-width: 767px) { .mod-pdf-flipbook__controls { justify-content: space-between; } } @keyframes mod-pdf-flipbook-spin { to { transform: rotate(360deg); } }