/* ============================================================ blog-post-animations.css | Movina Values SHARED across blog01–blog05.html Link in each blog post AFTER escripts.css ============================================================ */ /* ── 1. Scroll-reveal ── */ [data-reveal] { transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1); } [data-reveal].reveal-ready { opacity: 0; transform: translateY(28px); } [data-reveal="left"].reveal-ready { opacity: 0; transform: translateX(-36px); } [data-reveal="right"].reveal-ready { opacity: 0; transform: translateX(36px); } [data-reveal].is-visible { opacity: 1 !important; transform: none !important; } [data-delay="100"] { transition-delay: 0.10s; } [data-delay="200"] { transition-delay: 0.20s; } [data-delay="300"] { transition-delay: 0.30s; } [data-delay="400"] { transition-delay: 0.40s; } /* ── 2. Reading progress bar ── */ .bp-progress-wrap { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; background: transparent; } .bp-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #FAC60A, #4A5E7A); border-radius: 0 999px 999px 0; transition: width 0.1s linear; } /* ── 3. Navbar ── */ #navbar { transition: padding 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; } #navbar.scrolled { padding: 4px 0; box-shadow: 0 4px 24px rgba(0,0,0,0.08); background: rgba(255,255,255,0.97); } /* ════════════════════════════════════════════════════════ ARTICLE HERO ════════════════════════════════════════════════════════ */ .bp-hero { background: #ffffff; padding: clamp(80px,10vw,120px) 20px clamp(40px,5vw,60px); border-bottom: 1px solid #f1f5f9; } .bp-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #94a3b8; margin-bottom: 24px; opacity: 0; animation: bp-up 0.6s 0.1s cubic-bezier(0.22,1,0.36,1) forwards; } .bp-breadcrumb a { color: #6D85A8; text-decoration: none; font-weight: 600; transition: color 0.2s ease; } .bp-breadcrumb a:hover { color: #FAC60A; } .bp-hero-cat { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; opacity: 0; animation: bp-up 0.6s 0.22s cubic-bezier(0.22,1,0.36,1) forwards; } .bp-cat-pill { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; } .bp-cat-wellness { background:#f0fdfa; color:#0F6E56; border:1px solid #9FE1CB; } .bp-cat-community { background:#eef3fb; color:#4A5E7A; border:1px solid rgba(74,94,122,0.2); } .bp-cat-leadership { background:#FAECE7; color:#993C1D; border:1px solid #F0997B; } .bp-cat-selfcare { background:#fefce8; color:#633806; border:1px solid #FAC775; } .bp-cat-mindset { background:#faf5ff; color:#534AB7; border:1px solid #AFA9EC; } .bp-trending-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; color: #ef4444; background: #fef2f2; border: 1px solid #fecaca; padding: 4px 12px; border-radius: 999px; } .bp-trend-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: bp-dot 1.5s ease-in-out infinite; } @keyframes bp-dot{0%,100%{transform:scale(1)}50%{transform:scale(1.7);opacity:.5}} .bp-hero-title { font-size: clamp(1.9rem,4.5vw,3.2rem); font-weight: 800; color: #0f172a; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 28px; opacity: 0; animation: bp-up 0.7s 0.35s cubic-bezier(0.22,1,0.36,1) forwards; } .bp-hero-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; opacity: 0; animation: bp-up 0.7s 0.50s cubic-bezier(0.22,1,0.36,1) forwards; } .bp-author-row { display: flex; align-items: center; gap: 12px; } .bp-author-av { width: 44px; height: 44px; border-radius: 50%; background: #4A5E7A; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; } .bp-author-row strong { display: block; font-size: 0.92rem; color: #1e293b; } .bp-author-row span { font-size: 0.78rem; color: #94a3b8; } .bp-meta-pills { display: flex; gap: 10px; flex-wrap: wrap; } .bp-meta-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; padding: 5px 12px; border-radius: 999px; } @keyframes bp-up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } } /* ════════════════════════════════════════════════════════ LAYOUT ════════════════════════════════════════════════════════ */ .bp-layout { background: #f8fafc; padding: 60px 20px 80px; } .bp-inner { display: grid; grid-template-columns: 280px 1fr; gap: clamp(32px,5vw,60px); align-items: start; } /* ════════════════════════════════════════════════════════ SIDEBAR ════════════════════════════════════════════════════════ */ .bp-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; } .bp-toc-card, .bp-share-card, .bp-refs-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 22px 20px; } .bp-sidebar-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .bp-sidebar-label::after { content: ""; flex: 1; height: 1px; background: #f1f5f9; } /* TOC */ .bp-toc-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: toc; } .bp-toc-link { display: block; padding: 8px 12px; border-radius: 10px; font-size: 0.85rem; font-weight: 500; color: #64748b; text-decoration: none; border-left: 2px solid transparent; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .bp-toc-link:hover { background: #f8fafc; color: #1e293b; } .bp-toc-link.active { background: #eef3fb; color: #4A5E7A; border-left-color: #FAC60A; font-weight: 600; } /* Share */ .bp-share-btns { display: flex; gap: 8px; flex-wrap: wrap; } .bp-share-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .bp-share-btn:hover { background: #1e293b; color: #ffffff; border-color: #1e293b; transform: translateY(-2px); } .bp-share-btn.copied { background: #f0fdfa; color: #0F6E56; border-color: #9FE1CB; } /* Refs */ .bp-refs-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; } .bp-refs-list li { font-size: 0.78rem; color: #64748b; line-height: 1.55; padding-left: 12px; border-left: 2px solid #FAC60A; } /* ════════════════════════════════════════════════════════ ARTICLE CONTENT ════════════════════════════════════════════════════════ */ .bp-content { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 24px; padding: clamp(32px,5vw,52px); } .bp-section { margin-bottom: 52px; } .bp-section:last-child { margin-bottom: 0; } .bp-content h2 { font-size: clamp(1.3rem,2.5vw,1.7rem); font-weight: 800; color: #0f172a; letter-spacing: -0.02em; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9; position: relative; } .bp-content h2::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 40px; height: 2px; background: #FAC60A; border-radius: 999px; } .bp-content p { font-size: 1.02rem; color: #475569; line-height: 1.85; margin-bottom: 18px; } /* Highlight box */ .bp-highlight-box { background: linear-gradient(135deg,#eef3fb 0%,#f8fafc 100%); border: 1px solid rgba(74,94,122,0.12); border-left: 4px solid #FAC60A; border-radius: 16px; padding: 28px 28px 28px 24px; position: relative; } .bp-highlight-icon { position: absolute; top: -14px; left: 20px; width: 28px; height: 28px; border-radius: 50%; background: #FAC60A; color: #1e293b; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .bp-benefit-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 16px; } .bp-benefit-list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; } .bp-benefit-list strong { grid-column: 1 / -1; font-size: 0.95rem; color: #1e293b; font-weight: 700; } .bp-benefit-list span { grid-column: 1 / -1; font-size: 0.92rem; color: #64748b; line-height: 1.6; padding-left: 14px; border-left: 2px solid #e2e8f0; } /* Practice cards */ .bp-practices-list { display: flex; flex-direction: column; gap: 24px; } .bp-practice-card { display: grid; grid-template-columns: 56px 1fr; gap: 20px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 18px; padding: 28px 24px; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, border-color 0.25s ease; } .bp-practice-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(74,94,122,0.1); border-color: rgba(250,198,10,0.35); } .bp-practice-num { font-size: 2.2rem; font-weight: 800; color: rgba(74,94,122,0.15); line-height: 1; padding-top: 4px; transition: color 0.3s ease; } .bp-practice-card:hover .bp-practice-num { color: rgba(250,198,10,0.6); } .bp-practice-body h3 { font-size: 1.08rem; font-weight: 700; color: #0f172a; margin-bottom: 10px; } .bp-practice-body p { font-size: 0.93rem; color: #64748b; line-height: 1.75; margin-bottom: 14px; } .bp-practice-tip { background: #ffffff; border: 1px solid #e2e8f0; border-left: 3px solid #FAC60A; border-radius: 10px; padding: 12px 16px; font-size: 0.88rem; color: #475569; line-height: 1.6; } .bp-tip-label { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #92650a; background: #fefce8; border: 1px solid #FAC775; padding: 2px 8px; border-radius: 999px; margin-right: 8px; vertical-align: middle; } /* Pull quote */ .bp-pullquote { border: none; margin: 48px 0; padding: 36px 36px 36px 32px; background: #1e293b; border-radius: 20px; position: relative; overflow: hidden; } .bp-pullquote::before { content: "\201C"; position: absolute; top: -10px; left: 20px; font-size: 8rem; color: rgba(250,198,10,0.15); font-family: Georgia, serif; line-height: 1; pointer-events: none; } .bp-pullquote p { font-size: clamp(1.1rem,2vw,1.4rem); color: #ffffff; font-style: italic; line-height: 1.65; margin: 0 0 14px; position: relative; z-index: 1; } .bp-pullquote cite { font-size: 0.85rem; color: #FAC60A; font-style: normal; font-weight: 600; } /* Tags */ .bp-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid #f1f5f9; margin-top: 40px; } .bp-tag-label { font-size: 0.8rem; color: #94a3b8; font-weight: 600; } .bp-tag { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .bp-tag:hover { background: #1e293b; color: #ffffff; border-color: #1e293b; transform: translateY(-2px); } /* Pager */ .bp-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid #f1f5f9; } .bp-pager-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-size: 0.88rem; font-weight: 700; text-decoration: none; border: 1.5px solid #e2e8f0; color: #475569; background: #f8fafc; position: relative; overflow: hidden; transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease; } .bp-pager-btn:hover { background: #1e293b; color: #ffffff; border-color: #1e293b; transform: translateY(-2px); } .bp-pager-btn svg { flex-shrink: 0; } .bp-next svg { transition: transform 0.22s ease; } .bp-next:hover svg { transform: translateX(4px); } .bp-prev svg { transition: transform 0.22s ease; } .bp-prev:hover svg { transform: translateX(-4px); } /* ════════════════════════════════════════════════════════ RELATED ARTICLES ════════════════════════════════════════════════════════ */ .bp-related { background: #ffffff; padding: clamp(60px,8vw,100px) 20px; border-top: 1px solid #f1f5f9; } .bp-related-title { font-size: clamp(1.3rem,2.5vw,1.8rem); font-weight: 800; color: #0f172a; letter-spacing: -0.02em; margin-bottom: 36px; } .bp-related-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 24px; } .bp-related-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 18px; overflow: hidden; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease; } .bp-related-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(74,94,122,0.11); } .bp-rel-img { height: 120px; position: relative; display: flex; align-items: flex-end; padding: 12px; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); } .bp-related-card:hover .bp-rel-img { transform: scale(1.04); } .bp-rel-cat { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(6px); } .bp-rel-body { padding: 18px 18px 20px; } .bp-rel-body h3 { font-size: 0.95rem; font-weight: 700; color: #0f172a; line-height: 1.4; margin-bottom: 8px; } .bp-rel-body h3 a { text-decoration: none; color: inherit; transition: color 0.2s ease; } .bp-rel-body h3 a:hover { color: #4A5E7A; } .bp-rel-body p { font-size: 0.78rem; color: #94a3b8; } /* ── Footer ── */ .footer-column { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; } .footer-column.stagger-ready { opacity: 0; transform: translateY(20px); } .footer-column.is-visible { opacity: 1 !important; transform: none !important; } /* ── Ripple ── */ .ripple-btn { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: bp-ripple 0.55s linear; background: rgba(255,255,255,0.28); pointer-events: none; } @keyframes bp-ripple { to { transform: scale(4); opacity: 0; } } /* ── Responsive ── */ @media(max-width:900px){ .bp-inner { grid-template-columns: 1fr; } .bp-sidebar { position: static; order: -1; display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; } .bp-sidebar { flex-direction: row; flex-wrap: wrap; } } @media(max-width:540px){ .bp-practice-card { grid-template-columns: 1fr; } .bp-practice-num { font-size: 1.6rem; } .bp-hero-meta { flex-direction: column; align-items: flex-start; } } /* ── Reduced motion ── */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:0.01ms!important; transition-duration:0.01ms!important; } [data-reveal],[data-reveal].reveal-ready, .bp-breadcrumb,.bp-hero-cat,.bp-hero-title, .bp-hero-meta,.footer-column{ opacity:1!important;transform:none!important; } }