EcoBusinessNews – Climate-smart business briefings :root { --bg: #f4f7f5; --bg-accent: #e0f4ea; --accent: #16a34a; --accent-soft: rgba(22, 163, 74, 0.12); --accent-strong: #15803d; --card: #ffffff; --card-soft: #f9fafb; --text-main: #0f172a; --text-muted: #6b7280; --border-subtle: rgba(148, 163, 184, 0.55); --danger: #dc2626; --radius-lg: 1.5rem; --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.15); --shadow-subtle: 0 12px 34px rgba(15, 23, 42, 0.12); --transition-fast: 150ms ease-out; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; background: radial-gradient(circle at 10% -20%, #dcfce7 0, transparent 55%), radial-gradient(circle at 100% 120%, #e0f2fe 0, transparent 55%), var(--bg); color: var(--text-main); display: flex; align-items: stretch; justify-content: center; padding: 1.75rem 1.25rem 2.5rem; } .shell { max-width: 1120px; width: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.75rem; align-items: stretch; } @media (max-width: 900px) { body { padding-top: 1rem; } .shell { grid-template-columns: minmax(0, 1fr); } } /* LEFT PANEL – BRANDING / PITCH */ .hero-card { backdrop-filter: blur(20px); background: linear-gradient( 135deg, rgba(255, 255, 255, 0.95), rgba(240, 253, 250, 0.98) ); border-radius: 2rem; padding: 1.75rem 1.75rem 1.6rem; border: 1px solid rgba(148, 163, 184, 0.4); box-shadow: var(--shadow-soft); position: relative; overflow: hidden; } .hero-card::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 0 0, rgba(59, 130, 246, 0.08), transparent 55%), radial-gradient(circle at 80% 20%, rgba(22, 163, 74, 0.16), transparent 55%); opacity: 0.7; pointer-events: none; } .hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.3rem; } .brand-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid rgba(22, 163, 74, 0.35); background: rgba(255, 255, 255, 0.9); width: fit-content; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .brand-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px rgba(22, 163, 74, 0.9); flex-shrink: 0; } h1 { margin: 0; font-size: clamp(2.1rem, 3vw, 2.8rem); line-height: 1.05; letter-spacing: -0.04em; } .headline-highlight { display: inline-block; position: relative; white-space: nowrap; } .headline-highlight::after { content: ""; position: absolute; inset: auto -4px -4px -4px; height: 9px; border-radius: 999px; background: linear-gradient( 90deg, rgba(74, 222, 128, 0.45), rgba(59, 130, 246, 0.35) ); opacity: 0.8; z-index: -1; } .hero-subtitle { margin: 0.3rem 0 0.4rem; font-size: 0.98rem; color: var(--text-muted); max-width: 32rem; } .hero-subtitle strong { color: #111827; font-weight: 600; } .hero-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.6rem; } @media (max-width: 700px) { .hero-points { grid-template-columns: minmax(0, 1fr); } } .point { border-radius: 1.2rem; border: 1px solid rgba(148, 163, 184, 0.5); background: rgba(255, 255, 255, 0.9); padding: 0.65rem 0.8rem; font-size: 0.8rem; display: grid; gap: 0.2rem; } .point-label { text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em; color: #9ca3af; } .point-main { font-weight: 600; font-size: 0.9rem; color: #111827; } .point-tag { font-size: 0.78rem; color: var(--accent-strong); } .hero-footer { margin-top: 1.1rem; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr); gap: 0.75rem 1.2rem; align-items: start; } @media (max-width: 780px) { .hero-footer { grid-template-columns: minmax(0, 1fr); } } .micro-proof { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; color: var(--text-muted); } .micro-avatars { display: flex; align-items: center; } .tiny-avatar { width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid #ffffff; background: linear-gradient(135deg, #22c55e, #0ea5e9); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: #f9fafb; margin-right: -6px; } .micro-proof-strong { color: #111827; font-weight: 600; } .micro-badge { padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px dashed rgba(148, 163, 184, 0.9); font-size: 0.8rem; color: var(--text-muted); background: rgba(255, 255, 255, 0.95); display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content; } .micro-badge span { color: var(--accent-strong); font-weight: 600; } .founding-details { margin-top: 0.5rem; padding: 0.6rem 0.7rem; border-radius: 1rem; background: var(--bg-accent); border: 1px solid rgba(34, 197, 94, 0.35); font-size: 0.8rem; color: #14532d; display: grid; gap: 0.25rem; } .founding-details-title { font-weight: 600; display: flex; align-items: center; gap: 0.25rem; } .founding-details-list { margin: 0; padding-left: 1.1rem; } .founding-details-list li { margin-bottom: 0.1rem; } /* RIGHT PANEL – GAME + SUBSCRIBE */ .game-card { backdrop-filter: blur(18px); background: linear-gradient( 135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 1) ); border-radius: var(--radius-lg); border: 1px solid rgba(148, 163, 184, 0.6); padding: 1.4rem 1.4rem 1.3rem; box-shadow: var(--shadow-subtle); display: flex; flex-direction: column; gap: 1rem; } .game-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .game-header-main { display: flex; flex-direction: column; gap: 0.1rem; } .game-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-strong); } .game-title { font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; color: #0f172a; } .game-tagline { font-size: 0.8rem; color: var(--text-muted); } .score-badge { width: 70px; height: 70px; border-radius: 999px; border: 2px solid rgba(22, 163, 74, 0.85); background: conic-gradient( from 210deg, rgba(22, 163, 74, 0.85), rgba(59, 130, 246, 0.4), rgba(34, 197, 94, 0.95), rgba(22, 163, 74, 0.85) ); padding: 2px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(34, 197, 94, 0.45); flex-shrink: 0; } .score-badge-inner { border-radius: inherit; background: #f9fafb; border: 1px solid rgba(148, 163, 184, 0.8); width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--text-muted); } .score-number { font-size: 1.35rem; font-weight: 700; color: #111827; line-height: 1; } .score-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; } .score-level { margin-top: 0.1rem; font-size: 0.7rem; color: var(--accent-strong); font-weight: 600; } .progress-bar-track { width: 100%; height: 6px; border-radius: 999px; background: #e5e7eb; overflow: hidden; border: 1px solid #d1d5db; } .progress-bar-fill { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient( 90deg, #22c55e, #22c55e, #a3e635, #0ea5e9 ); transition: width 260ms ease-out; } .game-questions { margin-top: 0.4rem; display: grid; gap: 0.65rem; } .question { border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.6); background: var(--card-soft); padding: 0.7rem 0.75rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; cursor: default; transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .question:hover { border-color: rgba(22, 163, 74, 0.7); background: #ffffff; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } .question-main { font-size: 0.82rem; color: #111827; } .question-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; } .question-actions { display: inline-flex; gap: 0.35rem; flex-shrink: 0; } .pill-btn { padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.85); background: #ffffff; color: #111827; font-size: 0.75rem; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .pill-btn:hover { border-color: rgba(22, 163, 74, 0.7); box-shadow: 0 0 12px rgba(22, 163, 74, 0.2); transform: translateY(-1px); } .pill-btn.active-yes { background: var(--accent-strong); border-color: rgba(21, 128, 61, 0.95); color: #f9fafb; box-shadow: 0 0 18px rgba(34, 197, 94, 0.6); } .pill-btn.active-no { background: #fee2e2; border-color: #f97373; color: #b91c1c; box-shadow: 0 0 14px rgba(248, 113, 113, 0.5); } .game-cta-row { margin-top: 0.6rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .primary-btn { flex: 1 1 auto; padding: 0.65rem 0.9rem; border-radius: 999px; border: none; font-size: 0.9rem; font-weight: 600; background: linear-gradient(135deg, #22c55e, #16a34a); color: #f9fafb; cursor: pointer; box-shadow: 0 10px 25px rgba(22, 163, 74, 0.55); display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out; } .primary-btn span { font-size: 1.1rem; } .primary-btn:hover { transform: translateY(-2px) translateZ(0); box-shadow: 0 18px 40px rgba(22, 163, 74, 0.7); filter: brightness(1.04); } .primary-btn:active { transform: translateY(0) scale(0.99); box-shadow: 0 10px 20px rgba(22, 163, 74, 0.6); filter: brightness(0.97); } .tiny-note { flex: 0 0 auto; font-size: 0.74rem; color: var(--text-muted); } .tiny-note strong { color: #111827; font-weight: 600; } .divider { height: 1px; border-radius: 999px; background: linear-gradient( 90deg, transparent, rgba(148, 163, 184, 0.9), transparent ); margin: 0.7rem 0; } .subscribe-block { display: flex; flex-direction: column; gap: 0.65rem; } .subscribe-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .subscribe-title { font-size: 0.98rem; font-weight: 600; color: #0f172a; } .subscribe-tag { font-size: 0.7rem; color: var(--text-muted); padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); background: #ffffff; white-space: nowrap; } .subscribe-subcopy { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; } /* CUSTOM MAILERLITE FORM (using your endpoint) */ .ml-custom-form { margin-top: 0.4rem; display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 0.5rem; align-items: center; } @media (max-width: 520px) { .ml-custom-form { grid-template-columns: minmax(0, 1fr); } } .ml-input-shell { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; } .ml-input-label { color: var(--text-muted); } .ml-input-label span { color: var(--accent-strong); margin-left: 0.12rem; } .ml-input { width: 100%; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.9); background: #ffffff; padding: 0.55rem 0.75rem; font-size: 0.84rem; color: #111827; outline: none; transition: border-color 140ms ease-out, box-shadow 140ms ease-out, background 140ms ease-out; } .ml-input::placeholder { color: rgba(148, 163, 184, 0.9); } .ml-input:focus { border-color: rgba(22, 163, 74, 0.9); box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.25); background: #f9fafb; } .ml-submit-btn { border-radius: 999px; border: none; background: linear-gradient(135deg, #22c55e, #16a34a); color: #f9fafb; padding: 0.6rem 1.1rem; font-size: 0.86rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; box-shadow: 0 8px 22px rgba(22, 163, 74, 0.5); transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out; white-space: nowrap; } .ml-submit-btn span { font-size: 1rem; } .ml-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(22, 163, 74, 0.7); filter: brightness(1.03); } .ml-submit-btn:active { transform: translateY(0); box-shadow: 0 8px 18px rgba(22, 163, 74, 0.55); filter: brightness(0.97); } .subscribe-helper { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; } .subscribe-helper span { color: var(--accent-strong); font-weight: 500; } .fine-print { margin-top: 0.15rem; font-size: 0.68rem; color: #9ca3af; } .fine-print a { color: #2563eb; text-decoration: none; border-bottom: 1px dotted rgba(37, 99, 235, 0.65); } .fine-print a:hover { opacity: 0.9; } .error-text { margin-top: 0.2rem; font-size: 0.72rem; color: var(--danger); display: none; } /* Toast */ .toast { position: fixed; right: 1.5rem; bottom: 1.5rem; border-radius: 999px; background: #022c22; color: #bbf7d0; padding: 0.55rem 0.9rem; font-size: 0.82rem; display: flex; align-items: center; gap: 0.55rem; border: 1px solid rgba(52, 211, 153, 0.7); box-shadow: 0 18px 35px rgba(15, 23, 42, 0.45); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 200ms ease-out, transform 200ms ease-out; z-index: 50; } .toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .toast-icon { width: 20px; height: 20px; border-radius: 999px; border: 1px solid rgba(34, 197, 94, 0.8); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; background: rgba(6, 95, 70, 0.9); } .toast-close { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; margin-left: 0.25rem; opacity: 0.7; } .toast-close:hover { opacity: 1; } @media (max-width: 520px) { .toast { left: 0.75rem; right: 0.75rem; border-radius: 1rem; } } ECOBUSINESSNEWS.COM Preview Climate-smart briefings for busy builders. A short, practical email on deals, tech, and policy reshaping green business — written for people who actually have to ship things, not just tweet about them. Every issue 3–5 moves that matter. No hype. No doom spiral. Built for execution Founders, investors, operators. “What do I do with this?” included. Global view US + emerging markets. Follow the capital, not the slogans. VC FD OP Curated with climate VCs & operators so you’re early to real signals, not late to Twitter threads. ⚡ Founding subscriber window — early perks inside. 🥇 Founding perks: Priority access to pilot & deal-flow spotlights. Invites to small-room founder & investor roundups. Your feedback shapes the format while the list is still small. 30-second eco check-in What’s your current impact score? Tap a few honest answers. We’ll show your score and nudge your first issues toward where you’re at. 42 eco score Curious My work touches climate / sustainability directly or indirectly. Founder, investor, operator, intrapreneur — it counts. Yes Not yet I want opportunities, not just feel-good green headlines. Signal over virtue signaling. Yes Meh I can give a sharp email at least 90 seconds most days. You don’t have to read everything — just the right things. Yes Barely ⚡ Reveal my eco score Skip the quiz? Just pop your email in below. Get the EcoBusinessNews briefing in your inbox. A tight, tactical read for people building in and around climate — free while we’re in the founding subscriber phase. ✅ Free • ❌ No spam Work email * Subscribe free → Let’s use a real email so we can actually send you the briefing. No noise. Two clicks to unsubscribe if it’s not for you. Powered by our email partner. By subscribing, you agree to our not-weird privacy policy. ⚡ Score saved. We’ll nudge your first issue to your level. × (function () { const answers = { 1: null, 2: null, 3: null }; const baseScore = 25; const scorePerYes = 25; const scorePerNo = 10; const scoreEl = document.getElementById("eco-score"); const scoreLevelEl = document.getElementById("eco-score-level"); const progressEl = document.getElementById("eco-progress"); const calcBtn = document.getElementById("calculate-score"); const questionsEl = document.getElementById("game-questions"); const toastEl = document.getElementById("toast"); const toastMessageEl = document.getElementById("toast-message"); const toastClose = toastEl.querySelector(".toast-close"); const formEl = document.getElementById("ml-custom-form"); const emailInput = document.getElementById("ml-email"); const emailError = document.getElementById("ml-error-text"); function updateProgress() { const answeredCount = Object.values(answers).filter(v => v !== null).length; const progressPercent = (answeredCount / 3) * 100; progressEl.style.width = progressPercent + "%"; } function computeScore() { let score = baseScore; Object.values(answers).forEach(ans => { if (ans === "yes") score += scorePerYes; else if (ans === "no") score += scorePerNo; }); return Math.max(0, Math.min(score, 100)); } function scoreToLevel(score) { if (score >= 85) return "Operator"; if (score >= 65) return "Builder"; if (score >= 45) return "Curious"; return "Getting started"; } function showToast(message) { toastMessageEl.textContent = message; toastEl.classList.add("show"); clearTimeout(showToast._timer); showToast._timer = setTimeout(() => { toastEl.classList.remove("show"); }, 4200); } toastClose.addEventListener("click", () => { toastEl.classList.remove("show"); }); questionsEl.addEventListener("click", (event) => { const btn = event.target.closest(".pill-btn"); if (!btn) return; const questionEl = btn.closest(".question"); const questionId = questionEl.getAttribute("data-question"); const answer = btn.getAttribute("data-answer"); answers[questionId] = answer; const siblingButtons = questionEl.querySelectorAll(".pill-btn"); siblingButtons.forEach((b) => { b.classList.remove("active-yes", "active-no"); }); if (answer === "yes") btn.classList.add("active-yes"); else btn.classList.add("active-no"); updateProgress(); }); calcBtn.addEventListener("click", () => { const score = computeScore(); const level = scoreToLevel(score); scoreEl.textContent = score; scoreLevelEl.textContent = level; const badge = scoreEl.closest(".score-badge"); badge.style.transform = "scale(1.06)"; setTimeout(() => { badge.style.transform = "scale(1)"; }, 140); showToast(`Your eco score: ${score} – “${level}”. We’ll tune your first issues to that.`); try { localStorage.setItem( "ebn-eco-score", JSON.stringify({ score, level, ts: Date.now() }) ); } catch (e) {} }); // simple email sanity check before hitting MailerLite function isValidEmail(value) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()); } formEl.addEventListener("submit", (e) => { emailError.style.display = "none"; const email = emailInput.value.trim(); if (!isValidEmail(email)) { e.preventDefault(); emailError.style.display = "block"; emailInput.focus(); return; } showToast("Subscribed (new tab may open). Welcome to the briefing."); }); // Restore score if they’ve been here before try { const stored = localStorage.getItem("ebn-eco-score"); if (stored) { const data = JSON.parse(stored); if (data && typeof data.score === "number") { const s = Math.max(0, Math.min(data.score, 100)); scoreEl.textContent = s; scoreLevelEl.textContent = data.level || scoreToLevel(s); progressEl.style.width = "100%"; } } } catch (e) {} })();
