background: linear-gradient(135deg, transparent 50%, rgba(67, 97, 238, 0.7) 50%);
}
/* Reading Tip Modal */
.reading-tip-modal {
position: fixed;
top: 70px;
right: 20px;
width: 250px;
padding: 15px;
background: white;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
border-radius: 5px;
z-index: 1000;
transition: all 0.3s ease;
}
/* Bookmark Ribbon */
.bookmark-ribbon {
position: absolute;
top: 0;
right: 50px;
width: 40px;
height: 80px;
background-color: #4361ee;
z-index: 100;
}
.bookmark-ribbon::before {
content: ”;
position: absolute;
bottom: -20px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #4361ee;
}
.ribbon-content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 10px;
letter-spacing: -2px;
}
/* Particles */
.particles-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.particle {
position: absolute;
background-color: rgba(67, 97, 238, 0.3);
border-radius: 50%;
pointer-events: none;
opacity: 0;
animation: float-particle 6s infinite ease-in-out;
}
@keyframes float-particle {
0% {
transform: translateY(0) translateX(0);
opacity: 0;
}
20% {
opacity: 0.5;
}
80% {
opacity: 0.3;
}
100% {
transform: translateY(-100px) translateX(20px);
opacity: 0;
}
}
/* Highlight concept */
.highlight-concept {
position: relative;
display: inline;
background: linear-gradient(120deg, rgba(114, 9, 183, 0.2) 0%, rgba(114, 9, 183, 0.2) 100%);
background-repeat: no-repeat;
background-size: 100% 0;
background-position: 0 88%;
transition: background-size 0.4s ease;
padding: 0 2px;
}
.highlight-concept:hover {
background-size: 100% 100%;
}
document.addEventListener(‘DOMContentLoaded’, function() {
// Create reading progress bar
const progressBar = document.createElement(‘div’);
progressBar.className = ‘reading-progress-bar’;
document.body.appendChild(progressBar);
// Reading progress tracking
window.addEventListener(‘scroll’, function() {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight – document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.documentElement.style.setProperty(‘–progress’, scrolled + ‘%’);
});
// Add book page flip sound to book covers
const bookCovers = document.querySelectorAll(‘.book-cover-effect’);
bookCovers.forEach(cover => {
cover.addEventListener(‘click’, function() {
const pageFlip = new Audio(“data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tQwAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAASAAAeMwAUFBQUFCIiIiIiIjAwMDAwMD09PT09PUlJSUlJSVZWVlZWVmRkZGRkZHFxcXFxcX5+fn5+fpubm5ubm6enp6enp7S0tLS0tMDAwMDAwMnJycnJydLS0tLS0tra2tra2uPj4+Pj4+vr6+vr6/v7+/v7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/7UMQAAAesTx2HTEAClI/4DT5gDAAwPIDVs5AhubmyuHhFP/7YuHsR0ts6qSO4+zv/9v/n//+hykQR/+g50gUrkwIGoyQHAi0GoVqCQr8MylQ4h7GrICDwNy0VioSRoGXiY986iLslmmmPSPZK+UPQyLKX7OBAfpJVSpSzaaavSoiS2VJL3yvapPGhTLQ8l9ikKdOEAOPmU3yFJPv5DZbD4ACNBBJ5nKHs8i5iKUyTnc4T3FW2TCYPU9hIc”);
pageFlip.volume = 0.3;
pageFlip.play();
});
});
// Add typewriter effect to main heading
const mainHeading = document.querySelector(‘h1’);
if (mainHeading) {
const text = mainHeading.textContent;
mainHeading.textContent = ”;
let i = 0;
function typeWriter() {
if (i {
if (entries[0].isIntersecting) {
setTimeout(typeWriter, 500);
observer.unobserve(mainHeading);
}
});
observer.observe(mainHeading);
}
// Create floating book icon
const floatingBook = document.createElement(‘div’);
floatingBook.className = ‘floating-book’;
floatingBook.innerHTML = `
Digital Learning
MWEP Inc.
`;
document.body.appendChild(floatingBook);
// Show floating book when scrolled
window.addEventListener(‘scroll’, function() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > 300) {
floatingBook.style.display = ‘block’;
} else {
floatingBook.style.display = ‘none’;
}
});
// Make floating book click to scroll to top
floatingBook.addEventListener(‘click’, function() {
window.scrollTo({
top: 0,
behavior: ‘smooth’
});
// Add page flip sound
const pageSound = new Audio(‘data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tQwAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAASAAAeMwAUFBQUFCIiIiIiIjAwMDAwMD09PT09PUlJSUlJSVZWVlZWVmRkZGRkZHFxcXFxcX5+fn5+fpubm5ubm6enp6enp7S0tLS0tMDAwMDAwMnJycnJydLS0tLS0tra2tra2uPj4+Pj4+vr6+vr6/v7+/v7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/7UMQAAAesTx2HTEAClI/4DT5gDAAwPIDVs5AhubmyuHhFP/7YuHsR0ts6qSO4+zv/9v/n//+hykQR/+g50gUrkwIGoyQHAi0GoVqCQr8MylQ4h7GrICDwNy0VioSRoGXiY986iLslmmmPSPZK+UPQyLKX7OBAfpJVSpSzaaavSoiS2VJL3yvapPGhTLQ8l9ikKdOEAOPmU3yFJPv5DZbD4ACNBBJ5nKHs8i5iKUyTnc4T3FW2TCYPU9hIc’);
pageSound.volume = 0.3;
pageSound.play();
});
// Add page corner fold effect
const pageFold = document.createElement(‘div’);
pageFold.className = ‘page-corner’;
document.body.appendChild(pageFold);
// Create reading tip modal when page corner is clicked
pageFold.addEventListener(‘click’, function() {
let tipModal = document.querySelector(‘.reading-tip-modal’);
if (!tipModal) {
tipModal = document.createElement(‘div’);
tipModal.className = ‘reading-tip-modal’;
// Style the tip modal
tipModal.style.position = ‘fixed’;
tipModal.style.top = ’70px’;
tipModal.style.right = ’20px’;
tipModal.style.width = ‘250px’;
tipModal.style.padding = ’15px’;
tipModal.style.background = ‘white’;
tipModal.style.boxShadow = ‘0 5px 15px rgba(0,0,0,0.2)’;
tipModal.style.borderRadius = ‘5px’;
tipModal.style.zIndex = ‘1000’;
tipModal.style.transition = ‘all 0.3s ease’;
tipModal.style.opacity = ‘0’;
tipModal.style.transform = ‘translateY(-20px)’;
// Educational tips content
const tips = [
“Try our interactive e-books for a more engaging learning experience!”,
“Did you know? MWEP’s digital books include multimedia resources for diverse learning styles.”,
“Explore our adaptive learning technologies that personalize your educational journey.”,
“MWEP ensures all content is accessible to all learners through specialized features.”,
“Our publications work seamlessly with various learning management systems.”
];
// Pick a random tip
const randomTip = tips[Math.floor(Math.random() * tips.length)];
// Construct tip content
tipModal.innerHTML = `
Reading Tip
${randomTip}
Got it
`;
document.body.appendChild(tipModal);
// Animate in
setTimeout(() => {
tipModal.style.opacity = ‘1’;
tipModal.style.transform = ‘translateY(0)’;
}, 10);
// Close button functionality
tipModal.querySelector(‘button’).addEventListener(‘click’, function() {
tipModal.style.opacity = ‘0’;
tipModal.style.transform = ‘translateY(-20px)’;
setTimeout(() => {
tipModal.remove();
}, 300);
});
}
});
// Add bookmark ribbon to top section
const bookmarkRibbon = document.createElement(‘div’);
bookmarkRibbon.className = ‘bookmark-ribbon’;
bookmarkRibbon.innerHTML = ‘
MWEP
‘;
// Position the ribbon in the first main section
const mainSection = document.querySelector(‘.wp-block-group.alignwide’);
if (mainSection) {
mainSection.style.position = ‘relative’;
mainSection.appendChild(bookmarkRibbon);
}
// Add 3D tilt effect to book covers
const bookCovers = document.querySelectorAll(‘.wp-block-image.book-cover-effect’);
bookCovers.forEach(cover => {
cover.addEventListener(‘mousemove’, function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX – rect.left; // x position within the element
const y = e.clientY – rect.top; // y position within the element
// Calculate rotation values based on mouse position
const xRotation = ((y / rect.height) – 0.5) * 20; // -10 to 10 degrees
const yRotation = ((x / rect.width) – 0.5) * -20; // -10 to 10 degrees
// Apply the transform to the book cover
const img = this.querySelector(‘img’);
if (img) {
img.style.transform = `perspective(1000px) rotateX(${xRotation}deg) rotateY(${yRotation}deg)`;
img.style.transition = ‘transform 0.2s’;
}
});
// Reset when mouse leaves
cover.addEventListener(‘mouseleave’, function() {
const img = this.querySelector(‘img’);
if (img) {
img.style.transform = ‘perspective(1000px) rotateX(0) rotateY(0)’;
img.style.transition = ‘transform 0.5s’;
}
});
});
// Add animated underline effect to headings
const headings = document.querySelectorAll(‘.wp-block-heading’);
headings.forEach(heading => {
// Create underline element
const underline = document.createElement(‘span’);
underline.className = ‘heading-underline-effect’;
underline.style.position = ‘absolute’;
underline.style.bottom = ‘0’;
underline.style.left = ‘0’;
underline.style.width = ‘0’;
underline.style.height = ‘3px’;
underline.style.background = ‘linear-gradient(90deg, #4361ee, #7209b7)’;
underline.style.transition = ‘width 0.8s ease’;
// Set up heading for positioning the underline
heading.style.position = ‘relative’;
heading.style.display = ‘inline-block’;
heading.style.paddingBottom = ‘5px’;
// Append underline to heading
heading.appendChild(underline);
// Add hover effect
heading.addEventListener(‘mouseenter’, function() {
underline.style.width = ‘100%’;
});
heading.addEventListener(‘mouseleave’, function() {
underline.style.width = ‘0’;
});
});
// Create particles container for each main section
const sections = document.querySelectorAll(‘.wp-block-group.alignwide’);
sections.forEach(section => {
const particlesContainer = document.createElement(‘div’);
particlesContainer.className = ‘particles-container’;
section.appendChild(particlesContainer);
// Create particles
for (let i = 0; i {
particle.remove();
createParticle(container);
}, (duration + delay) * 1000);
}
// Add highlight effect to key educational terms
const paragraphs = document.querySelectorAll(‘p’);
const educationalTerms = [
‘digital books’, ‘education’, ‘interactive’, ‘learning’,
‘knowledge’, ‘accessible’, ‘technology’, ‘curriculum’,
‘educators’, ‘students’, ‘personalize’, ‘multimedia’
];
paragraphs.forEach(paragraph => {
educationalTerms.forEach(term => {
const regex = new RegExp(`\\b${term}\\b`, ‘gi’);
paragraph.innerHTML = paragraph.innerHTML.replace(
regex,
match => `
${match}`
);
});
});
// Initialize fade-in elements
const fadeElements = document.querySelectorAll(‘.fade-in-text’);
fadeElements.forEach((el, index) => {
el.style.setProperty(‘–animation-order’, index);
});
// Initialize list items
const listItems = document.querySelectorAll(‘.animated-list li’);
listItems.forEach((item, index) => {
item.style.setProperty(‘–li-index’, index);
});
// Setup intersection observer for animation triggers
const animationObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘visible’);
animationObserver.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
// Observe elements
document.querySelectorAll(‘.fade-in-text, .animated-list li, .heading-underline’).forEach(el => {
animationObserver.observe(el);
});
});
/* Enhanced Book Cover Effects */
.book-cover-effect {
transition: transform 0.5s ease, box-shadow 0.5s ease;
position: relative;
overflow: visible;
}
.book-cover-effect::before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%);
opacity: 0;
transition: opacity 0.5s ease;
border-radius: 5px;
z-index: 1;
}
.book-cover-effect:hover {
transform: translateY(-10px) rotate(2deg);
box-shadow: 0 20px 30px rgba(0,0,0,0.3) !important;
}
.book-cover-effect:hover::before {
opacity: 1;
}
.book-cover-effect::after {
content: ‘📖 Click to preview’;
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
text-align: center;
color: #4361ee;
font-weight: bold;
opacity: 0;
transition: opacity 0.3s ease;
}
.book-cover-effect:hover::after {
opacity: 1;
}
/* Animated Badge */
.animated-badge {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.7);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(67, 97, 238, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(67, 97, 238, 0);
}
}
/* Animated Section */
.animated-section {
transition: all 0.5s ease;
position: relative;
overflow: hidden;
}
.animated-section::before {
content: ”;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #4361ee, #7209b7);
transition: left 1s ease;
}
.animated-section:hover::before {
left: 0;
}
/* Image hover zoom effect */
.hover-zoom {
overflow: hidden;
transition: transform 0.5s ease;
}
.hover-zoom img {
transition: transform 0.5s ease;
}
.hover-zoom:hover img {
transform: scale(1.1);
}
/* Animated heading */
.animated-text {
position: relative;
display: inline-block;
}
.animated-text::after {
content: ”;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, #4361ee, #7209b7);
transition: width 0.8s ease;
}
.animated-text:hover::after {
width: 100%;
}
/* Highlight text animation */
.highlight-text {
position: relative;
display: inline-block;
}
.highlight-text::before {
content: ”;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background-color: rgba(114, 9, 183, 0.3);
transform: scaleX(0);
transition: transform 0.3s ease;
transform-origin: bottom right;
}
.highlight-text:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
/* Fade-in text animation */
.fade-in-text {
opacity: 0;
animation: fadeIn 1s forwards;
animation-delay: calc(var(–animation-order, 0) * 0.2s);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Heading underline effect */
.heading-underline {
position: relative;
padding-bottom: 10px;
}
.heading-underline::after {
content: ”;
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, #4361ee, #7209b7);
transition: width 0.5s ease;
}
.heading-underline:hover::after {
width: 100%;
}
/* Animated list */
.animated-list li {
position: relative;
padding-left: 28px;
margin-bottom: 12px;
transition: transform 0.3s ease;
opacity: 0;
animation: fadeInList 0.5s forwards;
animation-delay: calc(var(–li-index, 0) * 0.2s);
}
.animated-list li::before {
content: ‘📚’;
position: absolute;
left: 0;
top: 0;
}
.animated-list li:nth-child(2)::before {
content: ‘🎓’;
}
.animated-list li:nth-child(3)::before {
content: ‘✏️’;
}
.animated-list li:nth-child(4)::before {
content: ‘💻’;
}
.animated-list li:nth-child(5)::before {
content: ‘🔍’;
}
.animated-list li:hover {
transform: translateX(5px);
}
@keyframes fadeInList {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
/* Animated quote */
.animated-quote {
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
}
.animated-quote::before {
content: ‘”‘;
position: absolute;
top: -30px;
left: 20px;
font-size: 100px;
font-family: Georgia, serif;
color: rgba(67, 97, 238, 0.2);
transition: all 0.3s ease;
}
.animated-quote::after {
content: ‘”‘;
position: absolute;
bottom: -70px;
right: 20px;
font-size: 100px;
font-family: Georgia, serif;
color: rgba(114, 9, 183, 0.2);
transition: all 0.3s ease;
}
.animated-quote:hover {
transform: scale(1.02);
}
.animated-quote:hover::before {
color: rgba(67, 97, 238, 0.4);
transform: translateY(5px);
}
.animated-quote:hover::after {
color: rgba(114, 9, 183, 0.4);
transform: translateY(-5px);
}
/* Reading progress bar */
body {
position: relative;
}
body::before {
content: ”;
position: fixed;
top: 0;
left: 0;
width: var(–progress, 0%);
height: 4px;
background: linear-gradient(90deg, #4361ee, #7209b7);
z-index: 1000;
transition: width 0.3s ease;
}
/* Page Corner Folding Effect */
.wp-block-cover {
position: relative;
overflow: hidden;
}
.wp-block-cover::after {
content: “”;
position: absolute;
top: 0;
right: 0;
border-width: 0 30px 30px 0;
border-style: solid;
border-color: #f2f2f2 #fff;
box-shadow: -2px 2px 3px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.wp-block-cover:hover::after {
border-width: 0 50px 50px 0;
}
/* Animated 3D Book Effect */
.book-cover-effect {
transform-style: preserve-3d;
perspective: 1000px;
}
.book-cover-effect img {
transition: transform 0.5s ease;
transform-origin: left center;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
}
.book-cover-effect:hover img {
transform: rotateY(-25deg);
box-shadow: 20px 10px 30px rgba(0,0,0,0.3);
}
/* Digital Book Spine Effect */
.wp-block-image.book-cover-effect::before {
content: ”;
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 100%;
background: linear-gradient(to right,
rgba(0,0,0,0.5),
rgba(0,0,0,0.2) 40%,
rgba(0,0,0,0.4) 60%,
rgba(0,0,0,0.2) 80%,
rgba(0,0,0,0.4) 100%);
transform: translateX(-10px) rotateY(15deg);
transform-origin: right center;
z-index: -1;
border-radius: 2px 0 0 2px;
opacity: 0;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.wp-block-image.book-cover-effect:hover::before {
opacity: 1;
transform: translateX(-15px) rotateY(15deg);
}
/* Interactive Heading Highlight Effect */
.wp-block-heading {
display: inline-block;
position: relative;
transition: all 0.3s ease;
}
.wp-block-heading::before {
content: ”;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.15em;
background-color: rgba(114, 9, 183, 0.2);
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease;
z-index: -1;
}
.wp-block-heading:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.wp-block-heading::after {
content: ‘📚’;
opacity: 0;
position: absolute;
right: -1.5em;
transform: translateY(-0.2em);
transition: opacity 0.3s ease;
}
.wp-block-heading:hover::after {
opacity: 1;
}
/* Digital Learning Decoration Elements */
.wp-block-paragraph::after {
content: ”;
display: block;
width: 50px;
height: 3px;
margin-top: 20px;
background: linear-gradient(to right, rgba(67, 97, 238, 0.5), rgba(114, 9, 183, 0.5));
opacity: 0;
transform: translateX(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.wp-block-paragraph:hover::after {
opacity: 1;
transform: translateX(0);
}
/* Reading Progress Bar with Education Theme */
.reading-progress-bar {
position: fixed;
top: 0;
left: 0;
height: 5px;
background: linear-gradient(90deg, #4361ee, #7209b7);
z-index: 1000;
width: var(–progress, 0%);
transition: width 0.3s ease;
}
/* Floating Book Styles */
.floating-book {
position: fixed;
bottom: 30px;
right: 30px;
width: 100px;
height: 150px;
z-index: 999;
perspective: 1000px;
display: none;
cursor: pointer;
}
.book-cover {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: float 4s ease-in-out infinite;
}
.book-spine {
position: absolute;
width: 20px;
height: 150px;
background: linear-gradient(90deg, #333, #555);
transform: rotateY(90deg) translateZ(10px);
left: -10px;
}
.book-front {
position: absolute;
width: 100px;
height: 150px;
background: linear-gradient(135deg, #4361ee, #7209b7);
border-radius: 3px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 10px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
.book-front h3 {
font-size: 14px;
margin: 0 0 10px 0;
}
.book-front p {
font-size: 12px;
margin: 0;
}
@keyframes float {
0% { transform: translateY(0) rotate3d(0, 1, 0, 10deg); }
50% { transform: translateY(-15px) rotate3d(0, 1, 0, 5deg); }
100% { transform: translateY(0) rotate3d(0, 1, 0, 10deg); }
}
/* Page Corner Styles */
.page-corner {
position: fixed;
top: 0;
right: 0;
width: 50px;
height: 50px;
background: linear-gradient(135deg, transparent 50%, #f0f0f0 50%);
z-index: 998;
transition: all 0.3s ease;
cursor: pointer;
}
.page-corner:hover {
width: 70px;
height: 70px;
}
.page-corner::before {
content: ”;
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
backgroun
MWEP Inc. 