/* ============================================================ blog-landing-animations.css | Movina Values Link in blog-landing.html 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(32px); } [data-reveal="left"].reveal-ready { opacity: 0; transform: translateX(-40px); } [data-reveal="right"].reveal-ready { opacity: 0; transform: translateX(40px); } [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. 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); } /* ════════════════════════════════════════════════════════ HERO ════════════════════════════════════════════════════════ */ .bl-hero { position: relative; overflow: hidden; background: #ffffff; padding: clamp(90px,12vw,140px) 20px clamp(60px,7vw,90px); text-align: center; } .bl-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .bl-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(74,94,122,0.07); top: 50%; left: 50%; animation: bl-ring-pulse 9s ease-in-out infinite; } .bl-ring:nth-child(1){width:400px;height:400px;transform:translate(-50%,-50%);animation-delay:0s} .bl-ring:nth-child(2){width:750px;height:750px;transform:translate(-50%,-50%);animation-delay:3s} @keyframes bl-ring-pulse{ 0%,100%{opacity:0.4;transform:translate(-50%,-50%) scale(1)} 50% {opacity:1; transform:translate(-50%,-50%) scale(1.04)} } .bl-orb { position: absolute; border-radius: 50%; pointer-events: none; } .bl-orb-1{ width:360px;height:360px;top:-120px;right:-80px; background:radial-gradient(circle,rgba(250,198,10,0.08) 0%,transparent 70%); } .bl-orb-2{ width:280px;height:280px;bottom:-100px;left:-60px; background:radial-gradient(circle,rgba(74,94,122,0.07) 0%,transparent 70%); } .bl-hero .container { position: relative; z-index: 1; } .bl-hero-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #4A5E7A; background: #eef3fb; border: 1px solid rgba(74,94,122,0.15); padding: 7px 16px; border-radius: 999px; margin-bottom: 20px; opacity: 0; animation: bl-up 0.7s 0.15s cubic-bezier(0.22,1,0.36,1) forwards; } .bl-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: #FAC60A; flex-shrink: 0; animation: bl-dot 2s ease-in-out infinite; } @keyframes bl-dot{0%,100%{transform:scale(1)}50%{transform:scale(1.6);opacity:.6}} .bl-hero-title { font-size: clamp(3rem,7vw,5.5rem); font-weight: 800; color: #0f172a; letter-spacing: -0.04em; line-height: 1; margin-bottom: 18px; opacity: 0; animation: bl-up 0.7s 0.3s cubic-bezier(0.22,1,0.36,1) forwards; } .bl-hero-sub { font-size: clamp(1rem,2vw,1.15rem); color: #64748b; max-width: 560px; margin: 0 auto 40px; line-height: 1.75; opacity: 0; animation: bl-up 0.7s 0.45s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes bl-up{ from{opacity:0;transform:translateY(22px)} to {opacity:1;transform:none} } /* Search */ .bl-search-wrap { display: flex; justify-content: center; margin-bottom: 28px; opacity: 0; animation: bl-up 0.7s 0.58s cubic-bezier(0.22,1,0.36,1) forwards; } .bl-search-box { display: flex; align-items: center; gap: 10px; background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 999px; padding: 12px 20px; width: min(520px,100%); transition: border-color 0.22s ease, box-shadow 0.22s ease; } .bl-search-box:focus-within { border-color: #FAC60A; box-shadow: 0 0 0 3px rgba(250,198,10,0.18); } .bl-search-icon { color: #94a3b8; flex-shrink: 0; } .bl-search-box input { flex: 1; border: none; outline: none; font-size: 0.95rem; color: #1e293b; background: transparent; } .bl-search-box input::placeholder { color: #94a3b8; } .bl-search-kbd { font-size: 0.7rem; color: #94a3b8; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 2px 7px; border-radius: 6px; font-family: monospace; flex-shrink: 0; } /* Filter pills */ .bl-filters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; opacity: 0; animation: bl-up 0.7s 0.70s cubic-bezier(0.22,1,0.36,1) forwards; } .bl-filter { padding: 9px 20px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: #f8fafc; color: #64748b; border: 1.5px solid #e2e8f0; cursor: pointer; transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease; position: relative; overflow: hidden; } .bl-filter:hover { background: #f1f5f9; color: #1e293b; transform: translateY(-2px); } .bl-filter.active { background: #1e293b; color: #ffffff; border-color: #1e293b; } /* ════════════════════════════════════════════════════════ FEATURED ARTICLE ════════════════════════════════════════════════════════ */ .bl-featured-section { padding: 60px 20px 0; background: #f8fafc; } .bl-featured-card { display: grid; grid-template-columns: 1.1fr 1fr; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 28px; overflow: hidden; box-shadow: 0 8px 32px rgba(74,94,122,0.08); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease; } .bl-featured-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(74,94,122,0.14); } .bl-featured-img-wrap { position: relative; } .bl-featured-img { width: 100%; height: 100%; min-height: 360px; display: flex; align-items: center; justify-content: center; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); } .bl-featured-card:hover .bl-featured-img { transform: scale(1.04); } .bl-img-placeholder { opacity: 0.5; } .bl-trending-badge { position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.95); border: 1px solid #e2e8f0; padding: 7px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #ef4444; backdrop-filter: blur(8px); } .bl-trend-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: bl-dot 1.5s ease-in-out infinite; } .bl-featured-body { padding: clamp(32px,5vw,52px); display: flex; flex-direction: column; justify-content: center; } .bl-featured-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .bl-read-time { font-size: 0.8rem; color: #94a3b8; font-weight: 500; } .bl-featured-title { font-size: clamp(1.4rem,2.5vw,2rem); font-weight: 800; color: #0f172a; line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 14px; } .bl-featured-excerpt { font-size: 0.97rem; color: #64748b; line-height: 1.75; margin-bottom: 24px; } .bl-featured-author { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } .bl-author-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; } .bl-featured-author strong { display: block; font-size: 0.9rem; color: #1e293b; } .bl-featured-author span { font-size: 0.78rem; color: #94a3b8; } .bl-btn-read { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; background: #1e293b; color: #ffffff; font-size: 0.92rem; font-weight: 700; text-decoration: none; border: none; cursor: pointer; align-self: flex-start; position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .bl-btn-read:hover { background: #0f172a; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(30,41,59,0.22); } .bl-btn-read svg { transition: transform 0.22s ease; } .bl-btn-read:hover svg { transform: translateX(4px); } /* ════════════════════════════════════════════════════════ ARTICLES GRID ════════════════════════════════════════════════════════ */ .bl-grid-section { padding: 60px 20px 100px; background: #f8fafc; } .bl-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 36px; flex-wrap: wrap; gap: 8px; } .bl-section-head h2 { font-size: clamp(1.4rem,2.5vw,1.8rem); font-weight: 800; color: #0f172a; letter-spacing: -0.02em; } #bl-result-count { font-size: 0.85rem; color: #94a3b8; font-weight: 500; } .bl-articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 24px; } /* Article card */ .bl-article-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; overflow: hidden; position: relative; display: flex; flex-direction: column; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, opacity 0.3s ease; } .bl-article-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(74,94,122,0.13); } .bl-article-card.hidden { opacity: 0; pointer-events: none; position: absolute; /* remove from flow */ } /* Invisible full-card link layer */ .bl-card-link { position: absolute; inset: 0; z-index: 0; } .bl-card-img { height: 160px; position: relative; display: flex; align-items: flex-end; padding: 14px; overflow: hidden; transition: transform 0.55s cubic-bezier(0.22,1,0.36,1); } .bl-article-card:hover .bl-card-img { transform: scale(1.04); } .bl-card-cat-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.35); color: #ffffff; backdrop-filter: blur(6px); } .bl-card-body { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1; position: relative; z-index: 1; } .bl-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .bl-card-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; } .bl-card-author { font-size: 0.8rem; color: #64748b; font-weight: 500; } .bl-card-dot { color: #cbd5e1; font-size: 0.7rem; } .bl-card-time { font-size: 0.78rem; color: #94a3b8; } .bl-card-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; line-height: 1.35; margin-bottom: 10px; } .bl-card-excerpt { font-size: 0.88rem; color: #64748b; line-height: 1.65; margin-bottom: 18px; flex: 1; } .bl-card-cta { display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 700; color: #4A5E7A; text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; position: relative; overflow: hidden; transition: color 0.22s ease, gap 0.22s ease; gap: 4px; } .bl-card-cta:hover { color: #FAC60A; gap: 8px; } /* Category colour tokens */ .bl-cat-pill { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; } .bl-cat-wellness { background:#f0fdfa; color:#0F6E56; border:1px solid #9FE1CB; } .bl-cat-mindset { background:#faf5ff; color:#534AB7; border:1px solid #AFA9EC; } .bl-cat-community { background:#f0fdfa; color:#0F6E56; border:1px solid #5DCAA5; } .bl-cat-leadership { background:#FAECE7; color:#993C1D; border:1px solid #F0997B; } .bl-cat-selfcare { background:#fefce8; color:#633806; border:1px solid #FAC775; } /* Empty state */ .bl-empty { text-align: center; padding: 80px 20px; } .bl-empty h3 { font-size: 1.2rem; color: #1e293b; margin: 16px 0 8px; } .bl-empty p { color: #94a3b8; margin-bottom: 24px; } .bl-btn-reset { display: inline-flex; align-items: center; padding: 11px 24px; border-radius: 999px; background: #1e293b; color: #fff; font-size: 0.88rem; font-weight: 700; border: none; cursor: pointer; position: relative; overflow: hidden; transition: background 0.22s ease, transform 0.22s ease; } .bl-btn-reset:hover { background: #0f172a; transform: translateY(-2px); } /* ════════════════════════════════════════════════════════ NEWSLETTER ════════════════════════════════════════════════════════ */ .bl-newsletter { padding: 0 20px 100px; background: #f8fafc; } .bl-nl-card { position: relative; overflow: hidden; background: #1e293b; border-radius: 28px; padding: clamp(50px,8vw,80px) clamp(28px,6vw,60px); text-align: center; } .bl-nl-rings { position: absolute; inset: 0; pointer-events: none; } .bl-nl-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.05); top: 50%; left: 50%; } .bl-nl-ring:nth-child(1){width:340px;height:340px;transform:translate(-50%,-50%)} .bl-nl-ring:nth-child(2){width:640px;height:640px;transform:translate(-50%,-50%)} .bl-nl-content { position: relative; z-index: 1; } .bl-nl-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #FAC60A; background: rgba(250,198,10,0.14); border: 1px solid rgba(250,198,10,0.3); padding: 5px 16px; border-radius: 999px; margin-bottom: 16px; } .bl-nl-card h2 { font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 800; color: #ffffff; letter-spacing: -0.02em; margin-bottom: 12px; } .bl-nl-card > .bl-nl-content > p { color: rgba(255,255,255,0.62); max-width: 460px; margin: 0 auto 32px; font-size: 0.98rem; line-height: 1.7; } .bl-nl-form { max-width: 460px; margin: 0 auto; } .bl-nl-input-wrap { display: flex; gap: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 6px 6px 6px 22px; transition: border-color 0.22s ease, box-shadow 0.22s ease; } .bl-nl-input-wrap:focus-within { border-color: rgba(250,198,10,0.6); box-shadow: 0 0 0 3px rgba(250,198,10,0.15); } .bl-nl-input-wrap input { flex: 1; border: none; outline: none; background: transparent; color: #ffffff; font-size: 0.95rem; } .bl-nl-input-wrap input::placeholder { color: rgba(255,255,255,0.4); } .bl-nl-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 110px; padding: 11px 22px; border-radius: 999px; background: #FAC60A; color: #1e293b; font-size: 0.9rem; font-weight: 700; border: none; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease; } .bl-nl-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(250,198,10,0.35); } .bl-nl-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .bl-nl-spinner { display: none; width: 16px; height: 16px; border: 2.5px solid rgba(30,41,59,0.25); border-top-color: #1e293b; border-radius: 50%; animation: bl-spin 0.7s linear infinite; } .bl-nl-btn.loading .bl-nl-btn-label { display: none; } .bl-nl-btn.loading .bl-nl-spinner { display: block; } @keyframes bl-spin { to { transform: rotate(360deg); } } .bl-nl-note { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin-top: 12px; } .bl-nl-success { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 0.9rem; color: #86efac; font-weight: 600; animation: bl-up 0.5s cubic-bezier(0.22,1,0.36,1); } /* ── 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: bl-ripple 0.55s linear; background: rgba(255,255,255,0.28); pointer-events: none; } @keyframes bl-ripple { to { transform: scale(4); opacity: 0; } } /* ── Responsive ── */ @media(max-width:860px){ .bl-featured-card { grid-template-columns: 1fr; } .bl-featured-img { min-height: 220px; } } @media(max-width:480px){ .bl-filters { gap: 8px; } .bl-filter { padding: 8px 14px; font-size: 0.8rem; } .bl-nl-input-wrap { flex-direction: column; border-radius: 16px; padding: 12px; } .bl-nl-btn { width: 100%; } } /* ── 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, .bl-hero-tag,.bl-hero-title,.bl-hero-sub, .bl-search-wrap,.bl-filters,.footer-column{ opacity:1!important;transform:none!important; } }