/* Base styles */ :root { --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --color-primary: #2D9F4F; --color-primary-dark: #1E7A38; --color-primary-light: #56C46E; --color-accent: #E8742A; --color-accent-dark: #CF5F18; --color-accent-light: #F29B5F; --color-surface: #FAFDF7; --color-surface-card: #FFFFFF; --color-surface-dark: #0C1A0F; --color-surface-card-dark: #15261A; --color-text-primary: #1A2E1F; --color-text-secondary: #5A7360; --color-text-muted: #8FA898; --color-border: #D4E6D8; --color-border-dark: #2A4030; } /* ── Smooth scroll ─────────────────────────────────────── */ html { scroll-behavior: smooth; } /* ── Animated gradient background ──────────────────────── */ .hero-gradient { background: linear-gradient(135deg, #0C1A0F 0%, #15261A 40%, #1B3521 70%, #0C1A0F 100%); position: relative; overflow: hidden; } .hero-gradient::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 400px at 20% 50%, rgba(45, 159, 79, 0.12) 0%, transparent 70%), radial-gradient(ellipse 500px 350px at 80% 30%, rgba(232, 116, 42, 0.08) 0%, transparent 70%); pointer-events: none; } /* ── Glassmorphism card ────────────────────────────────── */ .glass-card { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.25rem; } .glass-card-light { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(45, 159, 79, 0.12); border-radius: 1.25rem; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04); } /* ── Stat counter glow ─────────────────────────────────── */ .stat-glow { text-shadow: 0 0 40px rgba(232, 116, 42, 0.4), 0 0 80px rgba(232, 116, 42, 0.15); } /* ── CTA button ────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 2rem; border-radius: 100px; font-weight: 700; font-size: 1rem; color: #fff; background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); box-shadow: 0 4px 20px rgba(232, 116, 42, 0.35), 0 0 0 0 rgba(232, 116, 42, 0); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: none; text-decoration: none; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(232, 116, 42, 0.45), 0 0 0 4px rgba(232, 116, 42, 0.12); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 2rem; border-radius: 100px; font-weight: 600; font-size: 1rem; color: var(--color-primary); background: transparent; border: 2px solid var(--color-primary); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; text-decoration: none; } .btn-secondary:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); } /* ── Scroll reveal animation ───────────────────────────── */ /* Default: content is visible. The hidden state is opt-in via (added by app.js before paint), so if JS fails, content never gets stuck invisible. */ .reveal { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } html.js-anim .reveal { opacity: 0; transform: translateY(30px); } html.js-anim .reveal.visible { opacity: 1; transform: translateY(0); } /* ── Floating animation ────────────────────────────────── */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } .floating { animation: float 4s ease-in-out infinite; } /* ── Pulse ring on CTA ─────────────────────────────────── */ @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(232, 116, 42, 0.35); } 70% { box-shadow: 0 0 0 15px rgba(232, 116, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 116, 42, 0); } } .pulse-cta { animation: pulse-ring 2.5s ease-out infinite; } /* ── Section divider wave ──────────────────────────────── */ .wave-divider { position: absolute; bottom: -1px; left: 0; width: 100%; overflow: hidden; line-height: 0; } .wave-divider svg { display: block; width: 100%; height: 60px; } /* ── Feature icon container ────────────────────────────── */ .feature-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } /* ── Gradient text ─────────────────────────────────────── */ .gradient-text { color: var(--color-accent); } /* ── Input styling ─────────────────────────────────────── */ .email-input { padding: 0.875rem 1.25rem; border-radius: 100px; border: 2px solid var(--color-border); background: var(--color-surface-card); font-size: 1rem; color: var(--color-text-primary); transition: border-color 0.3s, box-shadow 0.3s; outline: none; width: 100%; } .email-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(45, 159, 79, 0.1); } .email-input::placeholder { color: var(--color-text-muted); } /* ── Navbar ────────────────────────────────────────────── */ .navbar { background: rgba(12, 26, 15, 0.85); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.3s; } .navbar.scrolled { background: rgba(12, 26, 15, 0.95); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); } /* ── Popup modal ──────────────────────────────────────── */ .popup-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; transition: opacity 0.3s ease; } .popup-overlay.show { opacity: 1; } .popup-overlay.hidden { display: none; } .popup-modal { background: #fff; border-radius: 1.5rem; padding: 2.5rem 2rem; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15); transform: translateY(30px) scale(0.95); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .popup-overlay.show .popup-modal { transform: translateY(0) scale(1); } .popup-icon { font-size: 3.5rem; margin-bottom: 1rem; line-height: 1; } .popup-title { font-size: 1.35rem; font-weight: 800; color: var(--color-text-primary); margin-bottom: 0.5rem; } .popup-message { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 1.5rem; } /* ═══════════════════════════════════════════════════════════ */ /* BLOG STYLES */ /* ═══════════════════════════════════════════════════════════ */ /* ── Blog hero banner ─────────────────────────────────────── */ .blog-hero { background: linear-gradient(135deg, #0C1A0F 0%, #15261A 40%, #1B3521 70%, #0C1A0F 100%); position: relative; overflow: hidden; } .blog-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 400px at 30% 50%, rgba(45, 159, 79, 0.1) 0%, transparent 70%), radial-gradient(ellipse 500px 350px at 70% 40%, rgba(232, 116, 42, 0.07) 0%, transparent 70%); pointer-events: none; } /* ── Blog card ────────────────────────────────────────────── */ .blog-card { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(45, 159, 79, 0.08); border-radius: 1.25rem; overflow: hidden; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; color: inherit; } .blog-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(45, 159, 79, 0.15); } /* ── Blog card image ──────────────────────────────────────── */ .blog-card-image { width: 100%; height: 220px; overflow: hidden; position: relative; } .blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .blog-card:hover .blog-card-image img { transform: scale(1.08); } /* ── Blog card body ───────────────────────────────────────── */ .blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } /* ── Blog category badge ──────────────────────────────────── */ .blog-category-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 100px; font-size: 0.75rem; font-weight: 600; width: fit-content; margin-bottom: 0.75rem; } .blog-category-primary { background: rgba(45, 159, 79, 0.1); color: var(--color-primary); } .blog-category-accent { background: rgba(232, 116, 42, 0.1); color: var(--color-accent); } .blog-category-green { background: rgba(34, 197, 94, 0.1); color: #16a34a; } .blog-category-blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; } /* ── Blog prose (article body) ────────────────────────────── */ .blog-prose { font-size: 1.0625rem; line-height: 1.85; color: var(--color-text-secondary); } .blog-prose p { margin-bottom: 1.5rem; } .blog-prose strong { color: var(--color-text-primary); font-weight: 700; } .blog-prose h2 { font-size: 1.5rem; font-weight: 800; color: var(--color-text-primary); margin-top: 2.5rem; margin-bottom: 1rem; line-height: 1.3; } .blog-prose h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-text-primary); margin-top: 2rem; margin-bottom: 0.75rem; } .blog-prose ul, .blog-prose ol { margin-bottom: 1.5rem; padding-left: 1.5rem; } .blog-prose ul { list-style-type: disc; } .blog-prose ol { list-style-type: decimal; } .blog-prose li { margin-bottom: 0.5rem; padding-left: 0.25rem; } .blog-prose blockquote { border-left: 4px solid var(--color-primary); background: rgba(45, 159, 79, 0.05); margin: 1.5rem 0; padding: 1.25rem 1.5rem; border-radius: 0 0.75rem 0.75rem 0; } .blog-prose blockquote p { margin-bottom: 0.5rem; font-size: 0.95rem; } .blog-prose blockquote p:last-child { margin-bottom: 0; } /* ── WordPress article body (Gutenberg HTML from REST) ───────── Do not use Tailwind Typography "prose" here — it overrides wp-block-* spacing. Tailwind Preflight zeros margins; we restore readable defaults without fighting WP. */ .blog-wp-entry { font-size: 1.0625rem; line-height: 1.75; color: var(--color-text-primary); overflow-wrap: break-word; word-wrap: break-word; } .blog-wp-entry a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .blog-wp-entry a:hover { color: var(--color-primary-dark); } .blog-wp-entry img, .blog-wp-entry video, .blog-wp-entry iframe, .blog-wp-entry .wp-block-image img, .blog-wp-entry figure img { max-width: 100%; height: auto; } .blog-wp-entry :where(p) { margin: 0 0 1em; } .blog-wp-entry :where(p:last-child) { margin-bottom: 0; } .blog-wp-entry :where(h1, h2, h3, h4) { color: var(--color-text-primary); font-weight: 800; line-height: 1.25; margin: 1.5em 0 0.5em; } .blog-wp-entry :where(h1:first-child, h2:first-child, h3:first-child, h4:first-child) { margin-top: 0; } .blog-wp-entry :where(ul, ol) { margin: 0 0 1em; padding-left: 1.5em; } .blog-wp-entry :where(ul) { list-style-type: disc; } .blog-wp-entry :where(ol) { list-style-type: decimal; } .blog-wp-entry :where(li) { margin: 0.35em 0; } .blog-wp-entry :where(blockquote) { border-left: 4px solid var(--color-primary); margin: 1.25em 0; padding-left: 1rem; color: var(--color-text-secondary); } .blog-wp-entry :where(table) { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.95em; } .blog-wp-entry :where(th, td) { border: 1px solid var(--color-border); padding: 0.5rem 0.75rem; text-align: left; } /* Gutenberg / core blocks keep their own layout; avoid flattening columns */ .blog-wp-entry .wp-block-columns { display: flex; flex-wrap: wrap; gap: 1rem; } .blog-wp-entry .wp-block-column { flex: 1; min-width: 0; } /* ── Blog sidebar card ────────────────────────────────────── */ .blog-sidebar-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(45, 159, 79, 0.08); border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); } /* ── Line clamp utilities ─────────────────────────────────── */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }