/*.page-id-872 #nl-header{ display: none !important; } .page-id-872 .inner-content{ padding-left:0; padding-right:0; } .page-id-872 .primary-secondary{ padding-top:0; } .page-id-872 .book-hero{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }*/ .book-widget{ background:#fff; padding:35px 30px; text-align:center; border-radius:10px; box-shadow: 0 10px 40px rgba(0,0,0,.06); border:1px solid #edf7f3; } .book-widget-title{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px; } .book-widget-title span{ width:60px; height:1px; background:#d9d9d9; } .book-widget-title i{ color:#43D8A6; font-size:12px; } .book-widget h4{ font-size:18px; letter-spacing:2px; color:#222; margin-bottom:28px; font-weight:500; } .book-cover img{ width:100%; max-width:240px; display:block; margin:auto; transition:.45s; filter: drop-shadow(0 18px 30px rgba(0,0,0,.18)); } .book-cover img:hover{ transform: translateY(-8px) scale(1.03); } .book-description{ margin:30px auto; max-width:260px; font-size:18px; line-height:1.8; color:#555; } .book-buttons{ display:flex; flex-direction:column; gap:14px; margin-bottom:25px; } .book-btn{ display:flex; justify-content:center; align-items:center; gap:10px; padding:16px; text-decoration:none; font-weight:600; border-radius:4px; transition:.35s; } .book-btn.primary{ background:#43D8A6; color:#fff; } .book-btn.primary:hover{ background:#2FC796; transform:translateY(-2px); } .book-btn.secondary{ border:2px solid #43D8A6; color:#43D8A6; background:#fff; } .book-btn.secondary:hover{ background:#43D8A6; color:#fff; } .book-availability{ display:flex; justify-content:center; align-items:flex-start; gap:10px; color:#555; font-size:16px; line-height:1.7; } .book-availability i{ color:#43D8A6; margin-top:4px; } /*Hero Animation*/ /* ============================================ HEADER ENTRANCE ANIMATION (v2 — safe fallback) Add this CSS to your theme (e.g. Additional CSS in WordPress Customizer, or your child theme's style.css). No HTML changes needed. KEY FIX vs v1: elements no longer have a standalone "opacity: 0" rule outside the animation. Instead, the hidden starting state lives INSIDE the keyframes' 0% and is applied via "animation-fill-mode: backwards". This means if any keyframe fails to load/bind for any reason (e.g. CSS got truncated when pasting), the element simply stays visible instead of vanishing forever. ============================================ */ /* Keyframes now include the 0% (hidden) state ---- */ @keyframes nl-fadeDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes nl-fadeUp { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes nl-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes nl-scaleIn { 0% { opacity: 0; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } @keyframes nl-popIn { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } /* 1. Topbar slides down first ------------------ */ #main-header .topbar { animation: nl-fadeDown 0.6s ease-out 0.1s backwards; } .topbar-text .contacts-body { animation: nl-fadeIn 0.6s ease-out 0.3s backwards; } .topbar-social .social-icon-topbar { animation: nl-fadeIn 0.6s ease-out 0.4s backwards; } .social-icon-topbar .icon { animation: nl-popIn 0.5s ease-out backwards; } .social-icon-topbar .icon#ha1 { animation-delay: 0.45s; } .social-icon-topbar .icon#ha2 { animation-delay: 0.50s; } .social-icon-topbar .icon#ha3 { animation-delay: 0.55s; } .social-icon-topbar .icon#ha4 { animation-delay: 0.60s; } .social-icon-topbar .icon#ha5 { animation-delay: 0.65s; } .social-icon-topbar .icon#ha6 { animation-delay: 0.70s; } .social-icon-topbar .icon#ha7 { animation-delay: 0.75s; } .social-icon-topbar .icon#ha8 { animation-delay: 0.80s; } /* 2. Hero/header media image zooms + fades in -- */ .header-media-container .header-media img { animation: nl-scaleIn 1.1s ease-out 0.3s backwards; } /* 3. Overlay title + subtitle rise up over the image */ .media-imag-overlay-cta .nl-media-ovr-title { animation: nl-fadeUp 0.8s ease-out 0.9s backwards; } .media-imag-overlay-cta .nl-media-ovr-sub-title { animation: nl-fadeUp 0.8s ease-out 1.1s backwards; } .overlay_media_corner { animation: nl-fadeIn 0.6s ease-out 1.3s backwards; } /* 4. Logo + site title pop in ------------------ */ .branding .nl-logo-title { animation: nl-fadeDown 0.6s ease-out 1.4s backwards; } /* 5. Main nav menu items stagger in ------------ */ #primary-menu.menu > li { animation: nl-fadeDown 0.5s ease-out backwards; } #primary-menu.menu > li:nth-child(1) { animation-delay: 1.5s; } #primary-menu.menu > li:nth-child(2) { animation-delay: 1.55s; } #primary-menu.menu > li:nth-child(3) { animation-delay: 1.6s; } #primary-menu.menu > li:nth-child(4) { animation-delay: 1.65s; } #primary-menu.menu > li:nth-child(5) { animation-delay: 1.7s; } #primary-menu.menu > li:nth-child(6) { animation-delay: 1.75s; } #primary-menu.menu > li:nth-child(7) { animation-delay: 1.8s; } #primary-menu.menu > li:nth-child(8) { animation-delay: 1.85s; } #primary-menu.menu > li:nth-child(9) { animation-delay: 1.9s; } #primary-menu.menu > li:nth-child(10) { animation-delay: 1.95s; } #primary-menu .search-icon, #primary-menu .sidebar-icon { animation: nl-popIn 0.5s ease-out 2s backwards; } /* ============================================ Respect users who prefer reduced motion ============================================ */ @media (prefers-reduced-motion: reduce) { #main-header .topbar, .topbar-text .contacts-body, .topbar-social .social-icon-topbar, .social-icon-topbar .icon, .header-media-container .header-media img, .media-imag-overlay-cta .nl-media-ovr-title, .media-imag-overlay-cta .nl-media-ovr-sub-title, .overlay_media_corner, .branding .nl-logo-title, #primary-menu.menu > li, #primary-menu .search-icon, #primary-menu .sidebar-icon { animation: none !important; opacity: 1 !important; transform: none !important; } }