will.anderson
c72127032e
Dev — Build & local smoke test / build-smoke (pull_request) Successful in 1m18s
- checkout.el: swap stripe_el_script before auth_script so initStripe is defined when Supabase auth fires onAuthStateChange on page load - main.el: fix Stripe webhook email extraction for checkout.session.completed (subscription) events — customer_details is nested at data.object level, not at root; previous code only worked for payment_intent.succeeded - page_close.c: replace <input type="text"> with <textarea rows="1"> in the chat widget input row so long questions are visible as you type - page_css.c: update #neuron-demo-text CSS for textarea (resize:none, overflow:hidden, min/max-height, align-items:flex-end on row) - chat-widget.el: add auto-resize event listener (grows up to ~4 lines), reset height to auto on send
1923 lines
79 KiB
C
1923 lines
79 KiB
C
#include <stdint.h>
|
|
#include <stdlib.h>
|
|
#include "el_runtime.h"
|
|
|
|
el_val_t page_css(void);
|
|
|
|
el_val_t page_css(void) {
|
|
el_val_t result = EL_STR("<style>\n"
|
|
" *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n"
|
|
"\n"
|
|
" :root {\n"
|
|
" --bg: #FAFAF8;\n"
|
|
" --bg2: #F0F0EC;\n"
|
|
" --card: #FFFFFF;\n"
|
|
" --navy: #0052A0;\n"
|
|
" --navy-d: rgba(0,82,160,.06);\n"
|
|
" --navy-m: rgba(0,82,160,.12);\n"
|
|
" --navy-b: rgba(0,82,160,.20);\n"
|
|
" --navy-65: rgba(0,82,160,.65);\n"
|
|
" --navy-85: rgba(0,82,160,.85);\n"
|
|
" --t1: #0D0D14;\n"
|
|
" --t2: #3A3A4A;\n"
|
|
" --t3: #6B6B7E;\n"
|
|
" --t4: rgba(13,13,20,.35);\n"
|
|
" --border: rgba(0,0,0,.07);\n"
|
|
" --border2: rgba(0,0,0,.13);\n"
|
|
" --head: 'Playfair Display', Georgia, serif;\n"
|
|
" --body: 'IBM Plex Sans', system-ui, sans-serif;\n"
|
|
" }\n"
|
|
"\n"
|
|
" html { scroll-behavior: smooth; }\n"
|
|
" html, body {\n"
|
|
" background: var(--bg);\n"
|
|
" color: var(--t1);\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 400;\n"
|
|
" -webkit-font-smoothing: antialiased;\n"
|
|
" overflow-x: hidden;\n"
|
|
" }\n"
|
|
"\n"
|
|
" body::before {\n"
|
|
" content: '';\n"
|
|
" position: fixed;\n"
|
|
" inset: 0;\n"
|
|
" pointer-events: none;\n"
|
|
" z-index: 0;\n"
|
|
" background-image:\n"
|
|
" linear-gradient(rgba(0,0,0,.022) 1px, transparent 1px),\n"
|
|
" linear-gradient(90deg, rgba(0,0,0,.022) 1px, transparent 1px);\n"
|
|
" background-size: 48px 48px;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .container { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }\n"
|
|
" .container-md { max-width: 900px; margin: 0 auto; padding: 0 2.5rem; }\n"
|
|
" .container-lg { max-width: 1100px; margin: 0 auto; padding: 0 2.5rem; }\n"
|
|
" @media (max-width: 480px) {\n"
|
|
" .container, .container-md, .container-lg { padding: 0 1.25rem; }\n"
|
|
" }\n"
|
|
"\n"
|
|
" section { position: relative; z-index: 1; overflow-x: clip; }\n"
|
|
"\n"
|
|
" .label {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.2em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--navy-65);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .display-xl {\n"
|
|
" font-family: var(--head);\n"
|
|
" font-size: clamp(2.8rem, 6vw, 5rem);\n"
|
|
" font-weight: 600;\n"
|
|
" line-height: 1.06;\n"
|
|
" letter-spacing: -0.02em;\n"
|
|
" color: var(--t1);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .display-lg {\n"
|
|
" font-family: var(--head);\n"
|
|
" font-size: clamp(2rem, 4vw, 3.25rem);\n"
|
|
" font-weight: 600;\n"
|
|
" line-height: 1.1;\n"
|
|
" letter-spacing: -0.02em;\n"
|
|
" color: var(--t1);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .display-md {\n"
|
|
" font-family: var(--head);\n"
|
|
" font-size: clamp(1.4rem, 2.5vw, 1.875rem);\n"
|
|
" font-weight: 600;\n"
|
|
" line-height: 1.15;\n"
|
|
" color: var(--t1);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .gold {\n"
|
|
" background: linear-gradient(135deg, #003d7a 0%, #0078D4 50%, #0052A0 100%);\n"
|
|
" -webkit-background-clip: text;\n"
|
|
" -webkit-text-fill-color: transparent;\n"
|
|
" background-clip: text;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .ink-muted { color: var(--t2); }\n"
|
|
" .ink-faint { color: var(--t3); }\n"
|
|
"\n"
|
|
" .navy-line {\n"
|
|
);
|
|
result = el_str_concat(result, EL_STR( " height: 1px;\n"
|
|
" background: linear-gradient(90deg, rgba(0,82,160,.30) 0%, rgba(0,82,160,.08) 100%);\n"
|
|
" }\n"
|
|
" .navy-line-center {\n"
|
|
" height: 1px;\n"
|
|
" background: linear-gradient(90deg, transparent 0%, rgba(0,82,160,.35) 50%, transparent 100%);\n"
|
|
" }\n"
|
|
" .navy-line-left {\n"
|
|
" height: 1px;\n"
|
|
" background: linear-gradient(90deg, rgba(0,82,160,.40), transparent);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .card-dark {\n"
|
|
" background: var(--card);\n"
|
|
" border: 1px solid rgba(0,0,0,.07);\n"
|
|
" box-shadow: 0 2px 12px rgba(13,13,20,.04);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .btn-primary {\n"
|
|
" display: inline-flex;\n"
|
|
" align-items: center;\n"
|
|
" gap: 0.75rem;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" text-decoration: none;\n"
|
|
" color: #fff;\n"
|
|
" background: var(--navy);\n"
|
|
" padding: 1rem 2rem;\n"
|
|
" border: none;\n"
|
|
" cursor: pointer;\n"
|
|
" transition: background 300ms, box-shadow 300ms;\n"
|
|
" box-shadow: 0 2px 16px rgba(0,82,160,.20);\n"
|
|
" }\n"
|
|
" .btn-primary:hover { background: #0078D4; }\n"
|
|
"\n"
|
|
" .btn-ghost {\n"
|
|
" display: inline-flex;\n"
|
|
" align-items: center;\n"
|
|
" gap: 0.75rem;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 400;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" text-decoration: none;\n"
|
|
" color: var(--t2);\n"
|
|
" background: transparent;\n"
|
|
" padding: 1rem 2rem;\n"
|
|
" border: 1px solid var(--border2);\n"
|
|
" cursor: pointer;\n"
|
|
" transition: border-color 300ms, color 300ms;\n"
|
|
" }\n"
|
|
" .btn-ghost:hover { border-color: rgba(0,82,160,.35); color: var(--t1); }\n"
|
|
"\n"
|
|
" /* Scroll reveal - elements start invisible; JS adds .visible */\n"
|
|
" .reveal {\n"
|
|
" opacity: 0;\n"
|
|
" transform: translateY(28px);\n"
|
|
" transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);\n"
|
|
" }\n"
|
|
" .reveal.visible { opacity: 1; transform: translateY(0); }\n"
|
|
" /* Noscript fallback: make everything visible when JS is unavailable */\n"
|
|
" @media (prefers-reduced-motion: reduce) {\n"
|
|
" .reveal { opacity: 1; transform: none; transition: none; }\n"
|
|
" }\n"
|
|
"\n"
|
|
" /* ── NAV ─────────────────────────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #nav {\n"
|
|
" position: fixed;\n"
|
|
" top: 0; left: 0; right: 0;\n"
|
|
" z-index: 100;\n"
|
|
" transition: background 500ms, border-color 500ms;\n"
|
|
" }\n"
|
|
" #nav.scrolled {\n"
|
|
" background: rgba(250,250,248,.95);\n"
|
|
" backdrop-filter: blur(12px);\n"
|
|
" -webkit-backdrop-filter: blur(12px);\n"
|
|
" border-bottom: 1px solid var(--border);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .nav-inner {\n"
|
|
" max-width: 1280px;\n"
|
|
" margin: 0 auto;\n"
|
|
" padding: 0 2rem;\n"
|
|
" height: 4rem;\n"
|
|
" display: flex;\n"
|
|
" align-items: center;\n"
|
|
" justify-content: space-between;\n"
|
|
" position: relative;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .nav-logo img { height: 2rem; width: auto; display: block; }\n"
|
|
"\n"
|
|
" /* ── Desktop links ───────────────────────────────────────────── */\n"
|
|
" .nav-links {\n"
|
|
" display: flex;\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " align-items: center;\n"
|
|
" gap: 1.25rem;\n"
|
|
" flex-wrap: nowrap;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .nav-link {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.675rem;\n"
|
|
" font-weight: 400;\n"
|
|
" letter-spacing: 0.16em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--t3);\n"
|
|
" text-decoration: none;\n"
|
|
" white-space: nowrap;\n"
|
|
" transition: color 200ms;\n"
|
|
" }\n"
|
|
" .nav-link:hover { color: var(--t1); }\n"
|
|
" .nav-link.cta { color: var(--navy); }\n"
|
|
" .nav-link.cta:hover { color: #0078D4; }\n"
|
|
"\n"
|
|
" /* ── Nav dropdown ─────────────────────────────────────────────────────── */\n"
|
|
" .nav-dropdown { position: relative; display: flex; align-items: center; }\n"
|
|
" .nav-dropdown-btn {\n"
|
|
" background: none; border: none; cursor: pointer; padding: 0;\n"
|
|
" font-family: var(--body); font-size: 0.8125rem; font-weight: 400;\n"
|
|
" letter-spacing: 0.02em; color: var(--t2); transition: color 200ms;\n"
|
|
" }\n"
|
|
" .nav-dropdown-btn:hover { color: var(--t1); }\n"
|
|
" .nav-dropdown-menu {\n"
|
|
" display: none; position: absolute; top: calc(100% + 0.75rem); left: 50%;\n"
|
|
" transform: translateX(-50%); background: #fff;\n"
|
|
" border: 1px solid var(--border2); box-shadow: 0 8px 32px rgba(0,0,0,.10);\n"
|
|
" min-width: 160px; flex-direction: column; z-index: 200; padding: 0.375rem 0;\n"
|
|
" }\n"
|
|
" .nav-dropdown.open .nav-dropdown-menu { display: flex; }\n"
|
|
" .nav-dropdown-item {\n"
|
|
" font-family: var(--body); font-size: 0.8125rem; font-weight: 400;\n"
|
|
" color: var(--t2); text-decoration: none; padding: 0.5rem 1.25rem;\n"
|
|
" transition: background 150ms, color 150ms; white-space: nowrap;\n"
|
|
" }\n"
|
|
" .nav-dropdown-item:hover { background: var(--bg2); color: var(--t1); }\n"
|
|
"\n"
|
|
" .nav-cta {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.675rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: #fff;\n"
|
|
" background: var(--navy);\n"
|
|
" text-decoration: none;\n"
|
|
" padding: 0.575rem 1.1rem;\n"
|
|
" white-space: nowrap;\n"
|
|
" box-shadow: 0 2px 12px rgba(0,82,160,.20);\n"
|
|
" transition: background 300ms;\n"
|
|
" }\n"
|
|
" .nav-cta:hover { background: #0078D4; }\n"
|
|
"\n"
|
|
" /* ── Hamburger button ────────────────────────────────────────── */\n"
|
|
" .nav-hamburger {\n"
|
|
" display: none;\n"
|
|
" flex-direction: column;\n"
|
|
" justify-content: center;\n"
|
|
" gap: 5px;\n"
|
|
" background: none;\n"
|
|
" border: none;\n"
|
|
" cursor: pointer;\n"
|
|
" padding: 6px 4px;\n"
|
|
" z-index: 101;\n"
|
|
" -webkit-tap-highlight-color: transparent;\n"
|
|
" }\n"
|
|
" .nav-hamburger span {\n"
|
|
" display: block;\n"
|
|
" width: 22px;\n"
|
|
" height: 2px;\n"
|
|
" background: var(--t1);\n"
|
|
" border-radius: 1px;\n"
|
|
" transition: transform 280ms ease, opacity 200ms ease;\n"
|
|
" transform-origin: center;\n"
|
|
" }\n"
|
|
" .nav-hamburger[aria-expanded=\"true\"] span:nth-child(1) {\n"
|
|
" transform: translateY(7px) rotate(45deg);\n"
|
|
" }\n"
|
|
" .nav-hamburger[aria-expanded=\"true\"] span:nth-child(2) {\n"
|
|
" opacity: 0;\n"
|
|
" transform: scaleX(0);\n"
|
|
" }\n"
|
|
" .nav-hamburger[aria-expanded=\"true\"] span:nth-child(3) {\n"
|
|
" transform: translateY(-7px) rotate(-45deg);\n"
|
|
" }\n"
|
|
"\n"
|
|
" /* ── Mobile menu ─────────────────────────────────────────────── */\n"
|
|
" .nav-mobile {\n"
|
|
" display: none;\n"
|
|
" position: absolute;\n"
|
|
" top: 4rem;\n"
|
|
" left: 0; right: 0;\n"
|
|
" background: rgba(250,250,248,.98);\n"
|
|
" backdrop-filter: blur(16px);\n"
|
|
" -webkit-backdrop-filter: blur(16px);\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " border-bottom: 1px solid var(--border);\n"
|
|
" padding: 0.5rem 0 1.5rem;\n"
|
|
" flex-direction: column;\n"
|
|
" box-shadow: 0 8px 32px rgba(0,0,0,.08);\n"
|
|
" }\n"
|
|
" .nav-mobile.open { display: flex; }\n"
|
|
" .nav-mobile-link {\n"
|
|
" display: block;\n"
|
|
" padding: 0.875rem 2rem;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 400;\n"
|
|
" letter-spacing: 0.16em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--t2);\n"
|
|
" text-decoration: none;\n"
|
|
" border-bottom: 1px solid rgba(0,0,0,.05);\n"
|
|
" transition: color 150ms, background 150ms;\n"
|
|
" }\n"
|
|
" .nav-mobile-link:last-child { border-bottom: none; }\n"
|
|
" .nav-mobile-link:hover { color: var(--t1); background: rgba(0,82,160,.03); }\n"
|
|
" .nav-mobile-link.cta { color: var(--navy); }\n"
|
|
" .nav-mobile-cta {\n"
|
|
" display: block;\n"
|
|
" margin: 1rem 2rem 0;\n"
|
|
" padding: 0.8rem 1.5rem;\n"
|
|
" text-align: center;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: #fff;\n"
|
|
" background: var(--navy);\n"
|
|
" text-decoration: none;\n"
|
|
" }\n"
|
|
"\n"
|
|
" /* ── Responsive breakpoints ──────────────────────────────────── */\n"
|
|
" @media (max-width: 1060px) {\n"
|
|
" .nav-links { display: none; }\n"
|
|
" .nav-hamburger { display: flex; }\n"
|
|
" }\n"
|
|
" @media (min-width: 1061px) {\n"
|
|
" .nav-mobile { display: none !important; }\n"
|
|
" .nav-hamburger { display: none !important; }\n"
|
|
" }\n"
|
|
"\n"
|
|
" /* ── HERO ───────────────────────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #hero {\n"
|
|
" padding: clamp(7rem, 18vh, 11rem) clamp(1.25rem, 5vw, 2.5rem) clamp(5rem, 12vh, 8rem);\n"
|
|
" display: flex;\n"
|
|
" flex-direction: column;\n"
|
|
" align-items: center;\n"
|
|
" text-align: center;\n"
|
|
" overflow: hidden;\n"
|
|
" }\n"
|
|
"\n"
|
|
" #hero .glow-tl {\n"
|
|
" position: absolute;\n"
|
|
" top: -10%; left: -5%;\n"
|
|
" width: 60%; height: 70%;\n"
|
|
" background: radial-gradient(circle, rgba(0,82,160,.07) 0%, transparent 70%);\n"
|
|
" pointer-events: none;\n"
|
|
" }\n"
|
|
" #hero .glow-br {\n"
|
|
" position: absolute;\n"
|
|
" bottom: -10%; right: -5%;\n"
|
|
" width: 55%; height: 65%;\n"
|
|
" background: radial-gradient(circle, rgba(0,120,212,.06) 0%, transparent 70%);\n"
|
|
" pointer-events: none;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .hero-label { margin-bottom: 2rem; }\n"
|
|
" .hero-headline { max-width: 56rem; margin-bottom: 1.5rem; }\n"
|
|
" .hero-sub {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 300;\n"
|
|
" font-size: clamp(1rem, 2vw, 1.25rem);\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.7;\n"
|
|
" max-width: 36rem;\n"
|
|
" margin-bottom: 3rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .hero-ctas { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; }\n"
|
|
"\n"
|
|
" .hero-scroll {\n"
|
|
" display: flex;\n"
|
|
" flex-direction: column;\n"
|
|
" align-items: center;\n"
|
|
" gap: 0.5rem;\n"
|
|
" margin-top: 4rem;\n"
|
|
" opacity: 0;\n"
|
|
" animation: fadeIn 600ms ease 700ms forwards;\n"
|
|
" }\n"
|
|
" .hero-scroll span {\n"
|
|
" font-size: 0.65rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.2em;\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " text-transform: uppercase;\n"
|
|
" color: var(--t3);\n"
|
|
" }\n"
|
|
" .hero-scroll-line {\n"
|
|
" width: 1px; height: 2.5rem;\n"
|
|
" background: linear-gradient(to bottom, var(--t3), transparent);\n"
|
|
" }\n"
|
|
"\n"
|
|
" @keyframes fadeIn { to { opacity: 1; } }\n"
|
|
" @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }\n"
|
|
" .animate-up-1 { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.1s both; }\n"
|
|
" .animate-up-2 { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s both; }\n"
|
|
" .animate-up-3 { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.3s both; }\n"
|
|
" .animate-up-5 { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.5s both; }\n"
|
|
"\n"
|
|
" /* ── PILLARS ─────────────────────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #pillars {\n"
|
|
" padding: 8rem 2.5rem;\n"
|
|
" background: var(--bg2);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .pillars-label { margin-bottom: 4rem; display: flex; align-items: center; gap: 1.5rem; }\n"
|
|
" .pillars-grid {\n"
|
|
" display: grid;\n"
|
|
" grid-template-columns: repeat(3, 1fr);\n"
|
|
" gap: 1.5rem;\n"
|
|
" }\n"
|
|
" @media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr; } }\n"
|
|
"\n"
|
|
" .pillar-card {\n"
|
|
" padding: 2.5rem 3rem;\n"
|
|
" display: flex;\n"
|
|
" flex-direction: column;\n"
|
|
" }\n"
|
|
" .pillar-numeral {\n"
|
|
" font-family: var(--head);\n"
|
|
" font-size: 3rem;\n"
|
|
" font-weight: 600;\n"
|
|
" color: rgba(0,82,160,.22);\n"
|
|
" display: block;\n"
|
|
" margin-bottom: 2rem;\n"
|
|
" }\n"
|
|
" .pillar-title { margin-bottom: 1.25rem; }\n"
|
|
" .pillar-rule {\n"
|
|
" width: 3rem; height: 1px;\n"
|
|
" background: rgba(0,82,160,.30);\n"
|
|
" margin-bottom: 1.5rem;\n"
|
|
" transition: width 700ms ease;\n"
|
|
" }\n"
|
|
" .pillar-card:hover .pillar-rule { width: 100%; }\n"
|
|
" .pillar-body {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 300;\n"
|
|
" font-size: 0.95rem;\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.75;\n"
|
|
" flex: 1;\n"
|
|
" }\n"
|
|
" .pillar-detail {\n"
|
|
" margin-top: 2rem;\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: rgba(0,82,160,.45);\n"
|
|
" }\n"
|
|
"\n"
|
|
" /* ── HOW IT WORKS ─────────────────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #how-it-works {\n"
|
|
" padding: 8rem 2.5rem 4rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .hiw-header { margin-bottom: 5rem; }\n"
|
|
" .hiw-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }\n"
|
|
"\n"
|
|
" .steps-grid {\n"
|
|
" display: grid;\n"
|
|
" grid-template-columns: repeat(3, 1fr);\n"
|
|
" gap: 3rem 2rem;\n"
|
|
" position: relative;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .steps-grid::before {\n"
|
|
" content: '';\n"
|
|
" position: absolute;\n"
|
|
" top: 1.5rem;\n"
|
|
" left: 2rem; right: 2rem;\n"
|
|
" height: 1px;\n"
|
|
" background: linear-gradient(90deg, transparent, rgba(0,82,160,.15) 10%, rgba(0,82,160,.25) 50%, rgba(0,82,160,.15) 90%, transparent);\n"
|
|
" pointer-events: none;\n"
|
|
" }\n"
|
|
" @media (max-width: 900px) {\n"
|
|
" .steps-grid { grid-template-columns: 1fr; }\n"
|
|
" .steps-grid::before { display: none; }\n"
|
|
" }\n"
|
|
"\n"
|
|
" .step-circle-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }\n"
|
|
" .step-circle {\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " width: 3rem; height: 3rem; border-radius: 50%;\n"
|
|
" border: 1.5px solid rgba(0,82,160,.45);\n"
|
|
" background: var(--bg);\n"
|
|
" display: flex; align-items: center; justify-content: center;\n"
|
|
" position: relative; z-index: 1;\n"
|
|
" flex-shrink: 0;\n"
|
|
" }\n"
|
|
" .step-num {\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 600;\n"
|
|
" letter-spacing: 0.12em;\n"
|
|
" color: rgba(0,82,160,.80);\n"
|
|
" }\n"
|
|
" .step-aside {\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 600;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: rgba(0,82,160,.80);\n"
|
|
" }\n"
|
|
" .step-title { margin-bottom: 1rem; }\n"
|
|
" .step-body {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 300;\n"
|
|
" font-size: 0.95rem;\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.75;\n"
|
|
" }\n"
|
|
"\n"
|
|
" /* ── INFERENCE ───────────────────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #inference {\n"
|
|
" padding: 4rem 2.5rem 6rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .inference-grid {\n"
|
|
" display: grid;\n"
|
|
" grid-template-columns: 1fr 1fr;\n"
|
|
" gap: 6rem;\n"
|
|
" align-items: center;\n"
|
|
" }\n"
|
|
" @media (max-width: 900px) { .inference-grid { grid-template-columns: 1fr; gap: 3rem; } }\n"
|
|
"\n"
|
|
" .inference-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }\n"
|
|
" .inference-headline { margin-bottom: 1.5rem; }\n"
|
|
" .inference-body {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 300;\n"
|
|
" font-size: 1rem;\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.8;\n"
|
|
" margin-bottom: 1.5rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .stat-row {\n"
|
|
" border-top: 1px solid rgba(0,82,160,.15);\n"
|
|
" padding: 1.5rem 0;\n"
|
|
" }\n"
|
|
" .stat-row:last-child { border-bottom: 1px solid rgba(0,82,160,.15); }\n"
|
|
" .stat-row-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }\n"
|
|
" .stat-num {\n"
|
|
" font-family: var(--head);\n"
|
|
" font-size: 1.5rem;\n"
|
|
" font-weight: 600;\n"
|
|
" color: var(--navy);\n"
|
|
" }\n"
|
|
" .stat-label {\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 700;\n"
|
|
" letter-spacing: 0.13em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--navy);\n"
|
|
" }\n"
|
|
" .stat-body {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 300;\n"
|
|
" font-size: 0.875rem;\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.7;\n"
|
|
" }\n"
|
|
"\n"
|
|
" /* ── EFFICIENCY ──────────────────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #efficiency {\n"
|
|
" padding: 5rem 2.5rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .efficiency-header { margin-bottom: 4rem; }\n"
|
|
" .efficiency-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }\n"
|
|
" .efficiency-sub {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 300;\n"
|
|
" font-size: 1rem;\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.75;\n"
|
|
" max-width: 36rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .efficiency-grid {\n"
|
|
" display: grid;\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " grid-template-columns: repeat(3, 1fr);\n"
|
|
" gap: 1.5rem;\n"
|
|
" margin-bottom: 3.5rem;\n"
|
|
" }\n"
|
|
" @media (max-width: 900px) { .efficiency-grid { grid-template-columns: 1fr; } }\n"
|
|
"\n"
|
|
" .efficiency-card {\n"
|
|
" padding: 2.5rem;\n"
|
|
" text-align: center;\n"
|
|
" }\n"
|
|
" .efficiency-icon {\n"
|
|
" width: 4rem; height: 4rem;\n"
|
|
" border-radius: 50%;\n"
|
|
" border: 1.5px solid rgba(0,82,160,.20);\n"
|
|
" background: rgba(0,82,160,.04);\n"
|
|
" color: rgba(0,82,160,.70);\n"
|
|
" display: flex; align-items: center; justify-content: center;\n"
|
|
" margin: 0 auto 2rem;\n"
|
|
" }\n"
|
|
" .efficiency-stat {\n"
|
|
" font-family: var(--head);\n"
|
|
" font-size: 1.75rem;\n"
|
|
" font-weight: 600;\n"
|
|
" color: var(--navy);\n"
|
|
" margin-bottom: 0.75rem;\n"
|
|
" }\n"
|
|
" .efficiency-title {\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 700;\n"
|
|
" letter-spacing: 0.13em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--navy);\n"
|
|
" margin-bottom: 1.25rem;\n"
|
|
" }\n"
|
|
" .efficiency-rule {\n"
|
|
" width: 2.5rem; height: 1px;\n"
|
|
" background: rgba(0,82,160,.25);\n"
|
|
" margin: 0 auto 1.5rem;\n"
|
|
" transition: width 700ms ease;\n"
|
|
" }\n"
|
|
" .efficiency-card:hover .efficiency-rule { width: 60%; }\n"
|
|
" .efficiency-body {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 300;\n"
|
|
" font-size: 0.875rem;\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.75;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .efficiency-pullquote {\n"
|
|
" border-left: 2px solid rgba(0,82,160,.25);\n"
|
|
" padding: 0.25rem 0 0.25rem 1.5rem;\n"
|
|
" max-width: 40rem;\n"
|
|
" }\n"
|
|
" .efficiency-pullquote p {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 400;\n"
|
|
" font-size: 0.875rem;\n"
|
|
" color: rgba(0,82,160,.65);\n"
|
|
" line-height: 1.75;\n"
|
|
" }\n"
|
|
"\n"
|
|
" /* ── ENTERPRISE ──────────────────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #enterprise {\n"
|
|
" padding: 8rem 2.5rem;\n"
|
|
" background: var(--bg2);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .enterprise-header { margin-bottom: 4rem; }\n"
|
|
" .enterprise-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }\n"
|
|
" .enterprise-head-row {\n"
|
|
" display: flex; flex-wrap: wrap;\n"
|
|
" align-items: flex-end; justify-content: space-between;\n"
|
|
" gap: 2rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .enterprise-grid {\n"
|
|
" display: grid;\n"
|
|
" grid-template-columns: 1fr 1fr;\n"
|
|
" gap: 1.5rem;\n"
|
|
" margin-bottom: 2.5rem;\n"
|
|
" }\n"
|
|
" @media (max-width: 768px) { .enterprise-grid { grid-template-columns: 1fr; } }\n"
|
|
"\n"
|
|
" .enterprise-cap {\n"
|
|
" padding: 2.5rem;\n"
|
|
" }\n"
|
|
" .enterprise-cap h3 { margin-bottom: 1.25rem; }\n"
|
|
" .enterprise-cap-rule {\n"
|
|
" width: 3rem; height: 1px;\n"
|
|
" background: rgba(0,82,160,.30);\n"
|
|
" margin-bottom: 1.5rem;\n"
|
|
" transition: width 700ms ease;\n"
|
|
" }\n"
|
|
" .enterprise-cap:hover .enterprise-cap-rule { width: 100%; }\n"
|
|
" .enterprise-cap-body {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 300;\n"
|
|
" font-size: 0.9rem;\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " color: var(--t2);\n"
|
|
" line-height: 1.75;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .enterprise-box {\n"
|
|
" border-top: 2px solid rgba(0,82,160,.15);\n"
|
|
" background: rgba(0,82,160,.03);\n"
|
|
" padding: clamp(1.5rem, 4vw, 3rem);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .ent-who-label {\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.18em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: rgba(0,82,160,.65);\n"
|
|
" margin-bottom: 1rem;\n"
|
|
" }\n"
|
|
" .ent-who-body {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 300;\n"
|
|
" font-size: 0.9375rem;\n"
|
|
" color: var(--t1);\n"
|
|
" line-height: 1.75;\n"
|
|
" margin-bottom: 0.75rem;\n"
|
|
" }\n"
|
|
" .ent-who-note {\n"
|
|
" font-size: 0.875rem;\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.6;\n"
|
|
" margin-bottom: 2.5rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .ent-how-row { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; }\n"
|
|
" .ent-how-label { flex-shrink: 0; width: 10rem; }\n"
|
|
" .ent-steps { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }\n"
|
|
" @media (max-width: 768px) { .ent-steps { grid-template-columns: 1fr; } }\n"
|
|
" .ent-step-num { font-family: monospace; font-size: 0.75rem; color: rgba(0,82,160,.40); margin-bottom: 0.75rem; }\n"
|
|
" .ent-step-title { font-size: 0.875rem; font-weight: 500; color: var(--t1); margin-bottom: 0.5rem; }\n"
|
|
" .ent-step-body { font-family: var(--body); font-weight: 300; font-size: 0.875rem; color: var(--t2); line-height: 1.7; }\n"
|
|
"\n"
|
|
" .ent-terms-row {\n"
|
|
" border-top: 1px solid rgba(0,82,160,.10);\n"
|
|
" margin-top: 2.5rem;\n"
|
|
" padding-top: 2rem;\n"
|
|
" display: flex; flex-wrap: wrap;\n"
|
|
" align-items: center; justify-content: space-between;\n"
|
|
" gap: 1rem;\n"
|
|
" }\n"
|
|
" .ent-terms-text { font-size: 0.875rem; color: var(--t2); max-width: 32rem; }\n"
|
|
" .ent-terms-link {\n"
|
|
" font-size: 0.75rem;\n"
|
|
" letter-spacing: 0.12em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: rgba(0,82,160,.70);\n"
|
|
" text-decoration: none;\n"
|
|
" transition: color 200ms;\n"
|
|
" white-space: nowrap;\n"
|
|
" }\n"
|
|
" .ent-terms-link:hover { color: var(--navy); }\n"
|
|
"\n"
|
|
" .ent-badge {\n"
|
|
" display: inline-flex;\n"
|
|
" align-items: center; gap: 0.5rem;\n"
|
|
" border: 1px solid rgba(0,82,160,.20);\n"
|
|
" background: rgba(0,82,160,.04);\n"
|
|
" padding: 0.5rem 1rem;\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: rgba(0,82,160,.75);\n"
|
|
" margin-bottom: 0.75rem;\n"
|
|
" }\n"
|
|
" .ent-badge-dot {\n"
|
|
" width: 6px; height: 6px;\n"
|
|
" border-radius: 50%;\n"
|
|
" background: var(--navy);\n"
|
|
" opacity: 0.6;\n"
|
|
" flex-shrink: 0;\n"
|
|
" }\n"
|
|
"\n"
|
|
" /* ── MISSION ─────────────────────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #mission {\n"
|
|
" padding: 8rem 2.5rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .mission-origin { max-width: 48rem; margin: 0 auto 5rem; text-align: center; }\n"
|
|
" .mission-label-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }\n"
|
|
" .mission-headline { margin-bottom: 3rem; }\n"
|
|
" .mission-body-para {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 400;\n"
|
|
" font-size: clamp(0.9rem, 1.5vw, 1.0625rem);\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.9;\n"
|
|
" margin-bottom: 1.5rem;\n"
|
|
" }\n"
|
|
" .mission-body-emphasis strong { color: var(--t1); }\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( "\n"
|
|
" .mission-bigtech {\n"
|
|
" max-width: 48rem;\n"
|
|
" margin: 0 auto 6rem;\n"
|
|
" border-left: 3px solid var(--navy);\n"
|
|
" padding-left: 1.5rem;\n"
|
|
" }\n"
|
|
" .mission-bigtech-label {\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.2em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: rgba(0,82,160,.65);\n"
|
|
" margin-bottom: 1rem;\n"
|
|
" }\n"
|
|
" .mission-bigtech p {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 400;\n"
|
|
" font-size: 0.9375rem;\n"
|
|
" line-height: 1.8;\n"
|
|
" margin-bottom: 1rem;\n"
|
|
" color: var(--t1);\n"
|
|
" }\n"
|
|
" .mission-bigtech p.muted { color: var(--t2); }\n"
|
|
" .mission-bigtech a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }\n"
|
|
"\n"
|
|
" .mission-problems { max-width: 64rem; margin: 0 auto; }\n"
|
|
" .mission-sub-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 3.5rem; }\n"
|
|
" .mission-sub-line { height: 1px; width: 3rem; background: rgba(0,82,160,.40); }\n"
|
|
"\n"
|
|
" .problems-grid {\n"
|
|
" display: grid;\n"
|
|
" grid-template-columns: 1fr 1fr;\n"
|
|
" gap: 0;\n"
|
|
" }\n"
|
|
" @media (max-width: 768px) { .problems-grid { grid-template-columns: 1fr; } }\n"
|
|
"\n"
|
|
" .problem-item {\n"
|
|
" border-top: 1px solid rgba(0,82,160,.15);\n"
|
|
" padding: 2rem 3rem 2rem 0;\n"
|
|
" }\n"
|
|
" .problem-item:nth-child(even) {\n"
|
|
" padding: 2rem 0 2rem 3rem;\n"
|
|
" border-left: 1px solid rgba(0,82,160,.10);\n"
|
|
" }\n"
|
|
" @media (max-width: 768px) {\n"
|
|
" .problem-item { padding: 2rem 0; }\n"
|
|
" .problem-item:nth-child(even) { padding: 2rem 0; border-left: none; }\n"
|
|
" }\n"
|
|
" .problems-grid-bottom { border-top: 1px solid rgba(0,82,160,.15); grid-column: 1 / -1; }\n"
|
|
" .problem-label {\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 600;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--navy);\n"
|
|
" margin-bottom: 0.75rem;\n"
|
|
" }\n"
|
|
" .problem-body {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 400;\n"
|
|
" font-size: 0.875rem;\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.75;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .mission-closer {\n"
|
|
" text-align: center;\n"
|
|
" margin-top: 4rem;\n"
|
|
" max-width: 40rem;\n"
|
|
" margin-left: auto;\n"
|
|
" margin-right: auto;\n"
|
|
" }\n"
|
|
" .mission-closer p {\n"
|
|
" font-family: var(--head);\n"
|
|
" font-size: clamp(1.25rem, 2.5vw, 1.75rem);\n"
|
|
" font-weight: 600;\n"
|
|
" color: var(--t1);\n"
|
|
" line-height: 1.35;\n"
|
|
" }\n"
|
|
" .mission-closer span { color: var(--navy); }\n"
|
|
"\n"
|
|
" /* ── LOCAL FIRST ─────────────────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #local-first {\n"
|
|
" padding: 8rem 2.5rem 5rem;\n"
|
|
" background: var(--bg2);\n"
|
|
" position: relative;\n"
|
|
" }\n"
|
|
" #local-first::before {\n"
|
|
" content: '';\n"
|
|
" position: absolute;\n"
|
|
" top: 0; left: 0; right: 0; height: 3px;\n"
|
|
" background: linear-gradient(90deg, var(--navy) 0%, rgba(0,82,160,.20) 60%, transparent 100%);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .lf-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 4rem; }\n"
|
|
"\n"
|
|
" .lf-grid {\n"
|
|
" display: grid;\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " grid-template-columns: 1fr 1fr;\n"
|
|
" gap: 6rem;\n"
|
|
" align-items: start;\n"
|
|
" }\n"
|
|
" @media (max-width: 900px) { .lf-grid { grid-template-columns: 1fr; gap: 3rem; } }\n"
|
|
"\n"
|
|
" .lf-headline { margin-bottom: 2rem; }\n"
|
|
" .lf-manifesto-para {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 300;\n"
|
|
" font-size: 0.9375rem;\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.85;\n"
|
|
" margin-bottom: 1.25rem;\n"
|
|
" }\n"
|
|
" .lf-manifesto-closer {\n"
|
|
" border-left: 2px solid var(--navy);\n"
|
|
" padding-left: 1.25rem;\n"
|
|
" margin-top: 2rem;\n"
|
|
" }\n"
|
|
" .lf-manifesto-closer p {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 400;\n"
|
|
" font-size: 0.9375rem;\n"
|
|
" color: var(--t1);\n"
|
|
" line-height: 1.8;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .lf-principles { position: sticky; top: 6rem; }\n"
|
|
" .lf-principle {\n"
|
|
" border-top: 1px solid rgba(0,82,160,.15);\n"
|
|
" padding: 1.75rem 0;\n"
|
|
" }\n"
|
|
" .lf-principle:last-child { border-bottom: 1px solid rgba(0,82,160,.15); }\n"
|
|
" .lf-principle-label {\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--navy);\n"
|
|
" margin-bottom: 0.5rem;\n"
|
|
" }\n"
|
|
" .lf-principle-body {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 400;\n"
|
|
" font-size: 0.875rem;\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.7;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .lf-callout {\n"
|
|
" border-top: 1px solid rgba(0,82,160,.15);\n"
|
|
" margin-top: 4rem;\n"
|
|
" padding-top: 2.5rem;\n"
|
|
" text-align: center;\n"
|
|
" }\n"
|
|
" .lf-callout-h {\n"
|
|
" font-family: var(--head);\n"
|
|
" font-size: clamp(1.5rem, 3vw, 2.25rem);\n"
|
|
" font-weight: 600;\n"
|
|
" color: var(--t1);\n"
|
|
" margin-bottom: 0.5rem;\n"
|
|
" }\n"
|
|
" .lf-callout-h2 {\n"
|
|
" font-family: var(--head);\n"
|
|
" font-size: clamp(1.5rem, 3vw, 2.25rem);\n"
|
|
" font-weight: 600;\n"
|
|
" color: var(--navy);\n"
|
|
" margin-bottom: 1rem;\n"
|
|
" }\n"
|
|
" .lf-callout-sub {\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.2em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--t3);\n"
|
|
" }\n"
|
|
"\n"
|
|
" /* ── PRICING ─────────────────────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #pricing {\n"
|
|
" padding: 8rem 2.5rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .pricing-label-row {\n"
|
|
" display: flex; align-items: center; justify-content: center; gap: 1.5rem;\n"
|
|
" margin-bottom: 1.25rem;\n"
|
|
" }\n"
|
|
" .pricing-header { text-align: center; margin-bottom: 4rem; }\n"
|
|
" .pricing-headline { margin-bottom: 1rem; }\n"
|
|
" .pricing-sub {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-weight: 300;\n"
|
|
" font-size: 1rem;\n"
|
|
" color: var(--t2);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .pricing-grid {\n"
|
|
" display: grid;\n"
|
|
" grid-template-columns: repeat(3, 1fr);\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " gap: 1.5rem;\n"
|
|
" max-width: 68rem;\n"
|
|
" margin: 0 auto 2.5rem;\n"
|
|
" }\n"
|
|
" @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }\n"
|
|
"\n"
|
|
" .pricing-card {\n"
|
|
" padding: 2.5rem;\n"
|
|
" display: flex;\n"
|
|
" flex-direction: column;\n"
|
|
" }\n"
|
|
" .pricing-card.featured {\n"
|
|
" background: var(--card);\n"
|
|
" border: 1px solid rgba(0,82,160,.35);\n"
|
|
" box-shadow: 0 4px 24px rgba(0,82,160,.10);\n"
|
|
" position: relative;\n"
|
|
" }\n"
|
|
" .pricing-card.featured::before {\n"
|
|
" content: '';\n"
|
|
" position: absolute;\n"
|
|
" top: 0; left: 0; right: 0; height: 1px;\n"
|
|
" background: linear-gradient(90deg, transparent, rgba(0,82,160,.5) 30%, rgba(0,82,160,.8) 50%, rgba(0,82,160,.5) 70%, transparent);\n"
|
|
" }\n"
|
|
" .pricing-card.featured::after {\n"
|
|
" content: '';\n"
|
|
" position: absolute;\n"
|
|
" inset: 0;\n"
|
|
" pointer-events: none;\n"
|
|
" background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,82,160,.07) 0%, transparent 70%);\n"
|
|
" }\n"
|
|
" .pricing-tier {\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.18em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--t2);\n"
|
|
" margin-bottom: 0.75rem;\n"
|
|
" }\n"
|
|
" .pricing-card.featured .pricing-tier { color: var(--navy); }\n"
|
|
" .pricing-price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }\n"
|
|
" .pricing-price {\n"
|
|
" font-family: var(--head);\n"
|
|
" font-size: clamp(2.5rem, 5vw, 3.75rem);\n"
|
|
" font-weight: 600;\n"
|
|
" color: var(--t1);\n"
|
|
" }\n"
|
|
" .pricing-cadence { font-size: 0.875rem; color: var(--t3); }\n"
|
|
" .pricing-tagline {\n"
|
|
" font-size: 0.8125rem;\n"
|
|
" color: var(--t3);\n"
|
|
" margin-bottom: 2.5rem;\n"
|
|
" line-height: 1.5;\n"
|
|
" }\n"
|
|
" .pricing-card.featured .pricing-tagline { color: rgba(0,82,160,.55); }\n"
|
|
"\n"
|
|
" .pricing-features { list-style: none; flex: 1; }\n"
|
|
" .pricing-features li {\n"
|
|
" display: flex;\n"
|
|
" align-items: flex-start;\n"
|
|
" gap: 0.75rem;\n"
|
|
" margin-bottom: 1rem;\n"
|
|
" }\n"
|
|
" .pricing-features li .dash { color: rgba(0,82,160,.30); flex-shrink: 0; margin-top: 0.05rem; }\n"
|
|
" .pricing-card.featured .pricing-features li .dash { color: var(--navy); }\n"
|
|
" .pricing-features li span { font-size: 0.875rem; color: var(--t2); line-height: 1.5; }\n"
|
|
"\n"
|
|
" .pricing-cta { margin-top: 1.5rem; }\n"
|
|
" .pricing-cta a {\n"
|
|
" display: flex;\n"
|
|
" width: 100%;\n"
|
|
" align-items: center;\n"
|
|
" justify-content: center;\n"
|
|
" gap: 0.75rem;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" text-decoration: none;\n"
|
|
" padding: 1rem;\n"
|
|
" transition: background 300ms, color 300ms, border-color 300ms;\n"
|
|
" }\n"
|
|
" .pricing-cta-ghost a {\n"
|
|
" border: 1px solid var(--border2);\n"
|
|
" color: var(--t2);\n"
|
|
" background: transparent;\n"
|
|
" }\n"
|
|
" .pricing-cta-ghost a:hover { border-color: rgba(0,82,160,.30); color: var(--navy); }\n"
|
|
" .pricing-cta-navy a {\n"
|
|
" border: 1px solid rgba(0,82,160,.30);\n"
|
|
" color: var(--navy);\n"
|
|
" background: transparent;\n"
|
|
" }\n"
|
|
" .pricing-cta-navy a:hover { background: var(--navy); color: #fff; }\n"
|
|
" .pricing-cta-solid a {\n"
|
|
" background: var(--navy);\n"
|
|
" color: #fff;\n"
|
|
" box-shadow: 0 2px 16px rgba(0,82,160,.25);\n"
|
|
" }\n"
|
|
" .pricing-cta-solid a:hover { background: #0078D4; }\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( "\n"
|
|
" .founding-spots {\n"
|
|
" margin-bottom: 1.5rem;\n"
|
|
" }\n"
|
|
" .founding-spots-label {\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 600;\n"
|
|
" letter-spacing: 0.14em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--navy);\n"
|
|
" }\n"
|
|
" .founding-spots-bar {\n"
|
|
" margin-top: 0.5rem;\n"
|
|
" height: 4px;\n"
|
|
" background: rgba(0,82,160,.10);\n"
|
|
" overflow: hidden;\n"
|
|
" }\n"
|
|
" .founding-spots-fill {\n"
|
|
" height: 100%;\n"
|
|
" background: var(--navy);\n"
|
|
" transition: width 1000ms ease;\n"
|
|
" }\n"
|
|
" .founding-spots-sub {\n"
|
|
" margin-top: 0.25rem;\n"
|
|
" font-size: 0.6875rem;\n"
|
|
" color: var(--t4);\n"
|
|
" letter-spacing: 0.04em;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .pricing-fine {\n"
|
|
" text-align: center;\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--t3);\n"
|
|
" max-width: 68rem;\n"
|
|
" margin: 0 auto;\n"
|
|
" overflow-wrap: break-word;\n"
|
|
" word-break: break-word;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .founding-banner {\n"
|
|
" max-width: 64rem;\n"
|
|
" margin: 2.5rem auto 0;\n"
|
|
" display: flex;\n"
|
|
" align-items: center;\n"
|
|
" justify-content: space-between;\n"
|
|
" gap: 1.5rem;\n"
|
|
" padding: 1.5rem 2rem;\n"
|
|
" background: rgba(0,82,160,.04);\n"
|
|
" border: 1px solid rgba(0,82,160,.18);\n"
|
|
" }\n"
|
|
" @media (max-width: 600px) { .founding-banner { flex-direction: column; align-items: flex-start; } }\n"
|
|
"\n"
|
|
" .founding-banner-label {\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.16em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--navy);\n"
|
|
" margin-bottom: 0.25rem;\n"
|
|
" }\n"
|
|
" .founding-banner-count {\n"
|
|
" font-family: var(--head);\n"
|
|
" font-size: 2rem;\n"
|
|
" font-weight: 600;\n"
|
|
" color: var(--t1);\n"
|
|
" }\n"
|
|
" .founding-banner-sub { font-size: 0.875rem; color: var(--t3); }\n"
|
|
" .founding-banner-bar {\n"
|
|
" margin-top: 0.5rem;\n"
|
|
" height: 6px;\n"
|
|
" width: 12rem;\n"
|
|
" background: rgba(0,0,0,.07);\n"
|
|
" border-radius: 9999px;\n"
|
|
" overflow: hidden;\n"
|
|
" }\n"
|
|
" .founding-banner-fill {\n"
|
|
" height: 100%;\n"
|
|
" border-radius: 9999px;\n"
|
|
" background: var(--navy);\n"
|
|
" transition: width 800ms ease;\n"
|
|
" }\n"
|
|
"\n"
|
|
" /* ── SHARE ───────────────────────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #share {\n"
|
|
" padding: 8rem 2.5rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .share-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }\n"
|
|
" .share-headline { margin-bottom: 4rem; }\n"
|
|
"\n"
|
|
" .share-grid {\n"
|
|
" display: grid;\n"
|
|
" grid-template-columns: 1fr 1fr;\n"
|
|
" gap: 2rem;\n"
|
|
" max-width: 56rem;\n"
|
|
" margin: 0 auto;\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " }\n"
|
|
" @media (max-width: 768px) { .share-grid { grid-template-columns: 1fr; } }\n"
|
|
"\n"
|
|
" .share-card {\n"
|
|
" padding: 2rem;\n"
|
|
" }\n"
|
|
" .share-card-label {\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.18em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--navy);\n"
|
|
" margin-bottom: 0.5rem;\n"
|
|
" }\n"
|
|
" .share-card-body {\n"
|
|
" font-size: 0.875rem;\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.6;\n"
|
|
" margin-bottom: 1.5rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .hook-item {\n"
|
|
" border: 1px solid rgba(0,82,160,.12);\n"
|
|
" background: var(--bg);\n"
|
|
" padding: 1rem;\n"
|
|
" margin-bottom: 0.75rem;\n"
|
|
" position: relative;\n"
|
|
" }\n"
|
|
" .hook-text {\n"
|
|
" font-size: 0.875rem;\n"
|
|
" color: var(--t2);\n"
|
|
" line-height: 1.6;\n"
|
|
" padding-right: 5rem;\n"
|
|
" }\n"
|
|
" .hook-actions {\n"
|
|
" position: absolute;\n"
|
|
" top: 0.75rem; right: 0.75rem;\n"
|
|
" display: flex; gap: 0.25rem;\n"
|
|
" }\n"
|
|
" .hook-btn {\n"
|
|
" font-size: 0.6rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.12em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: rgba(0,82,160,.55);\n"
|
|
" border: 1px solid rgba(0,82,160,.20);\n"
|
|
" background: transparent;\n"
|
|
" padding: 0.25rem 0.625rem;\n"
|
|
" cursor: pointer;\n"
|
|
" transition: color 200ms, border-color 200ms, background 200ms;\n"
|
|
" text-decoration: none;\n"
|
|
" }\n"
|
|
" .hook-btn:hover { color: var(--navy); border-color: rgba(0,82,160,.50); background: var(--navy-d); }\n"
|
|
"\n"
|
|
" .invite-form { display: flex; gap: 0; }\n"
|
|
" .invite-input {\n"
|
|
" flex: 1;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.875rem;\n"
|
|
" color: var(--t1);\n"
|
|
" background: var(--card);\n"
|
|
" border: 1px solid rgba(0,82,160,.18);\n"
|
|
" border-right: none;\n"
|
|
" padding: 0.75rem 1rem;\n"
|
|
" outline: none;\n"
|
|
" transition: border-color 200ms;\n"
|
|
" }\n"
|
|
" .invite-input:focus { border-color: rgba(0,82,160,.50); }\n"
|
|
" .invite-input::placeholder { color: var(--t3); }\n"
|
|
" .invite-submit {\n"
|
|
" flex-shrink: 0;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.12em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: #fff;\n"
|
|
" background: var(--navy);\n"
|
|
" border: none;\n"
|
|
" padding: 0.75rem 1.25rem;\n"
|
|
" cursor: pointer;\n"
|
|
" transition: background 300ms;\n"
|
|
" min-width: 6rem;\n"
|
|
" }\n"
|
|
" .invite-submit:hover { background: #0078D4; }\n"
|
|
" .invite-note { font-size: 0.625rem; color: var(--t3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.5rem; }\n"
|
|
"\n"
|
|
" .linkedin-share-btn {\n"
|
|
" display: flex;\n"
|
|
" align-items: center;\n"
|
|
" justify-content: center;\n"
|
|
" gap: 0.625rem;\n"
|
|
" width: 100%;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.12em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: rgba(0,82,160,.70);\n"
|
|
" border: 1px solid rgba(0,82,160,.20);\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " background: transparent;\n"
|
|
" padding: 0.75rem;\n"
|
|
" cursor: pointer;\n"
|
|
" transition: border-color 300ms, color 300ms, background 300ms;\n"
|
|
" margin-top: 1rem;\n"
|
|
" text-decoration: none;\n"
|
|
" }\n"
|
|
" .linkedin-share-btn:hover {\n"
|
|
" border-color: rgba(0,82,160,.50);\n"
|
|
" color: var(--navy);\n"
|
|
" background: rgba(0,82,160,.04);\n"
|
|
" }\n"
|
|
"\n"
|
|
" /* ── FOOTER ──────────────────────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #footer {\n"
|
|
" padding: 5rem 2.5rem 2.5rem;\n"
|
|
" border-top: 1px solid var(--border);\n"
|
|
" }\n"
|
|
"\n"
|
|
" .footer-inner {\n"
|
|
" display: flex;\n"
|
|
" flex-wrap: wrap;\n"
|
|
" align-items: flex-end;\n"
|
|
" justify-content: space-between;\n"
|
|
" gap: 2.5rem;\n"
|
|
" margin-bottom: 3rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .footer-brand { text-decoration: none; }\n"
|
|
" .footer-brand-name {\n"
|
|
" font-family: var(--head);\n"
|
|
" font-size: 1.5rem;\n"
|
|
" font-weight: 600;\n"
|
|
" color: var(--t1);\n"
|
|
" letter-spacing: -0.02em;\n"
|
|
" }\n"
|
|
" .footer-brand-tagline {\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--t3);\n"
|
|
" margin-top: 0.25rem;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .footer-center { flex: 1; min-width: 6rem; }\n"
|
|
"\n"
|
|
" .footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }\n"
|
|
" .footer-domain { font-size: 0.875rem; color: var(--t2); letter-spacing: 0.04em; }\n"
|
|
" .footer-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }\n"
|
|
" .footer-nav a {\n"
|
|
" font-size: 0.65rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.15em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" color: var(--t3);\n"
|
|
" text-decoration: none;\n"
|
|
" transition: color 200ms;\n"
|
|
" }\n"
|
|
" .footer-nav a:hover { color: var(--navy); }\n"
|
|
"\n"
|
|
" .footer-bottom {\n"
|
|
" border-top: 1px solid var(--border);\n"
|
|
" padding-top: 2rem;\n"
|
|
" display: flex;\n"
|
|
" flex-wrap: wrap;\n"
|
|
" align-items: center;\n"
|
|
" justify-content: space-between;\n"
|
|
" gap: 1rem;\n"
|
|
" }\n"
|
|
" .footer-copy { font-size: 0.75rem; color: var(--t3); }\n"
|
|
" .footer-tagline-bottom { font-size: 0.75rem; color: var(--t3); }\n"
|
|
"\n"
|
|
"\n"
|
|
" ::-webkit-scrollbar { width: 4px; height: 4px; }\n"
|
|
" ::-webkit-scrollbar-track { background: transparent; }\n"
|
|
" ::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 2px; }\n"
|
|
" ::-webkit-scrollbar-thumb:hover { background: #0078D4; }\n"
|
|
"\n"
|
|
" .delay-100 { transition-delay: 100ms !important; }\n"
|
|
" .delay-200 { transition-delay: 200ms !important; }\n"
|
|
" .delay-300 { transition-delay: 300ms !important; }\n"
|
|
" .delay-400 { transition-delay: 400ms !important; }\n"
|
|
" .delay-500 { transition-delay: 500ms !important; }\n"
|
|
" .delay-600 { transition-delay: 600ms !important; }\n"
|
|
" .delay-700 { transition-delay: 700ms !important; }\n"
|
|
" .delay-800 { transition-delay: 800ms !important; }\n"
|
|
"\n"
|
|
" /* ── NEURON DEMO CHAT WIDGET ────────────────────────────────────────────── */\n"
|
|
"\n"
|
|
" #neuron-demo-btn {\n"
|
|
" position: fixed;\n"
|
|
" bottom: 2rem;\n"
|
|
" right: 2rem;\n"
|
|
" z-index: 9999;\n"
|
|
" }\n"
|
|
" #neuron-demo-btn button {\n"
|
|
" display: flex;\n"
|
|
" align-items: center;\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " gap: 0.625rem;\n"
|
|
" background: var(--navy);\n"
|
|
" color: #fff;\n"
|
|
" border: none;\n"
|
|
" cursor: pointer;\n"
|
|
" padding: 0.875rem 1.5rem;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.75rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.14em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" box-shadow: 0 4px 24px rgba(0,82,160,.35);\n"
|
|
" transition: background 300ms, box-shadow 300ms, transform 200ms;\n"
|
|
" }\n"
|
|
" #neuron-demo-btn button:hover {\n"
|
|
" background: #0078D4;\n"
|
|
" box-shadow: 0 6px 32px rgba(0,82,160,.45);\n"
|
|
" transform: translateY(-1px);\n"
|
|
" }\n"
|
|
" #neuron-demo-btn img {\n"
|
|
" width: 20px;\n"
|
|
" height: 20px;\n"
|
|
" object-fit: contain;\n"
|
|
" filter: brightness(0) invert(1);\n"
|
|
" }\n"
|
|
"\n"
|
|
" #neuron-demo-panel {\n"
|
|
" position: fixed;\n"
|
|
" bottom: 5.5rem;\n"
|
|
" right: 2rem;\n"
|
|
" z-index: 9998;\n"
|
|
" width: 32rem;\n"
|
|
" max-width: calc(100vw - 2rem);\n"
|
|
" background: var(--card);\n"
|
|
" border: 1px solid rgba(0,82,160,.20);\n"
|
|
" border-radius: 1rem;\n"
|
|
" box-shadow: 0 16px 64px rgba(0,0,0,.15), 0 4px 16px rgba(0,82,160,.12);\n"
|
|
" display: flex;\n"
|
|
" flex-direction: column;\n"
|
|
" max-height: 70vh;\n"
|
|
" overflow: hidden;\n"
|
|
" animation: demoSlideIn 200ms cubic-bezier(0.16,1,0.3,1) both;\n"
|
|
" }\n"
|
|
" @media (max-width: 600px) {\n"
|
|
" #neuron-demo-panel {\n"
|
|
" right: 0;\n"
|
|
" left: 0;\n"
|
|
" bottom: 0;\n"
|
|
" width: 100%;\n"
|
|
" max-width: 100%;\n"
|
|
" max-height: 88vh;\n"
|
|
" border-left: none;\n"
|
|
" border-right: none;\n"
|
|
" border-bottom: none;\n"
|
|
" border-radius: 1.25rem 1.25rem 0 0;\n"
|
|
" box-shadow: 0 -8px 40px rgba(0,0,0,.18);\n"
|
|
" }\n"
|
|
" #neuron-demo-btn {\n"
|
|
" bottom: 1rem;\n"
|
|
" right: 1rem;\n"
|
|
" }\n"
|
|
" }\n"
|
|
" @keyframes demoSlideIn {\n"
|
|
" from { opacity: 0; transform: translateY(16px) scale(0.97); }\n"
|
|
" to { opacity: 1; transform: translateY(0) scale(1); }\n"
|
|
" }\n"
|
|
"\n"
|
|
" #neuron-demo-header {\n"
|
|
" display: flex;\n"
|
|
" align-items: center;\n"
|
|
" justify-content: space-between;\n"
|
|
" padding: 1rem 1.25rem;\n"
|
|
" background: var(--navy);\n"
|
|
" color: #fff;\n"
|
|
" flex-shrink: 0;\n"
|
|
" border-radius: 1rem 1rem 0 0;\n"
|
|
" }\n"
|
|
" #neuron-demo-header-left {\n"
|
|
" display: flex;\n"
|
|
" align-items: center;\n"
|
|
" gap: 0.625rem;\n"
|
|
" }\n"
|
|
" #neuron-demo-header-left img {\n"
|
|
" width: 18px;\n"
|
|
" height: 18px;\n"
|
|
" object-fit: contain;\n"
|
|
" filter: brightness(0) invert(1);\n"
|
|
" opacity: 0.9;\n"
|
|
" }\n"
|
|
" #neuron-demo-header span {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 1rem;\n"
|
|
" font-weight: 700;\n"
|
|
" color: #fff;\n"
|
|
" letter-spacing: 0;\n"
|
|
" text-transform: none;\n"
|
|
" }\n"
|
|
" #neuron-demo-header-sub { display: none; }\n"
|
|
" #neuron-demo-close {\n"
|
|
" background: none;\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " border: none;\n"
|
|
" cursor: pointer;\n"
|
|
" padding: 0.375rem;\n"
|
|
" display: flex;\n"
|
|
" align-items: center;\n"
|
|
" justify-content: center;\n"
|
|
" flex-shrink: 0;\n"
|
|
" opacity: 0.65;\n"
|
|
" transition: opacity 200ms;\n"
|
|
" }\n"
|
|
" #neuron-demo-close:hover { opacity: 1; }\n"
|
|
" #neuron-demo-close svg { display: block; }\n"
|
|
"\n"
|
|
" #neuron-demo-messages {\n"
|
|
" flex: 1;\n"
|
|
" overflow-y: auto;\n"
|
|
" padding: 1.25rem 1.5rem;\n"
|
|
" display: flex;\n"
|
|
" flex-direction: column;\n"
|
|
" gap: 1rem;\n"
|
|
" min-height: 12rem;\n"
|
|
" max-height: 30rem;\n"
|
|
" scrollbar-width: thin;\n"
|
|
" }\n"
|
|
"\n"
|
|
" .demo-msg {\n"
|
|
" display: flex;\n"
|
|
" flex-direction: row;\n"
|
|
" align-items: flex-start;\n"
|
|
" gap: 0.5rem;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.875rem;\n"
|
|
" line-height: 1.6;\n"
|
|
" background: none;\n"
|
|
" padding: 0;\n"
|
|
" border: none;\n"
|
|
" }\n"
|
|
" .demo-msg-user { align-self: flex-end; flex-direction: row-reverse; }\n"
|
|
" .demo-msg-ai { align-self: flex-start; width: 100%; }\n"
|
|
" .demo-msg-ai-body { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }\n"
|
|
" .demo-msg-bubble { width: fit-content; }\n"
|
|
" .demo-msg-avatar {\n"
|
|
" width: 2rem;\n"
|
|
" height: 2rem;\n"
|
|
" border-radius: 50%;\n"
|
|
" flex-shrink: 0;\n"
|
|
" display: flex;\n"
|
|
" align-items: center;\n"
|
|
" justify-content: center;\n"
|
|
" margin-top: 0.1rem;\n"
|
|
" }\n"
|
|
" .demo-msg-ai .demo-msg-avatar { background: #fff; border: 1px solid var(--border); }\n"
|
|
" .demo-msg-ai .demo-msg-avatar img { width: 1.125rem; height: 1.125rem; display: block; object-fit: contain; }\n"
|
|
" .demo-msg-user .demo-msg-avatar { background: var(--bg2); border: 1px solid var(--border); }\n"
|
|
" .demo-msg-user .demo-msg-avatar svg { color: var(--t3); }\n"
|
|
" .demo-msg-bubble {\n"
|
|
" max-width: calc(100% - 2.25rem);\n"
|
|
" padding: 0.625rem 0.875rem;\n"
|
|
" border-radius: 1rem;\n"
|
|
" }\n"
|
|
" .demo-msg-ai .demo-msg-bubble {\n"
|
|
" background: var(--bg2);\n"
|
|
" color: var(--t1);\n"
|
|
" border-radius: 0.25rem 1rem 1rem 1rem;\n"
|
|
" }\n"
|
|
" .demo-msg-user .demo-msg-bubble {\n"
|
|
" background: var(--navy);\n"
|
|
" color: #fff;\n"
|
|
" border-radius: 1rem 0.25rem 1rem 1rem;\n"
|
|
" }\n"
|
|
" .demo-msg-ai .demo-msg-bubble p { margin: 0; }\n"
|
|
" .demo-msg-ai .demo-msg-bubble p + p { margin-top: 0.75rem; }\n"
|
|
" .demo-msg-ai .demo-msg-bubble ul, .demo-msg-ai .demo-msg-bubble ol { margin: 0.5rem 0 0.5rem 1.25rem; }\n"
|
|
" .demo-msg-ai .demo-msg-bubble li + li { margin-top: 0.25rem; }\n"
|
|
" .demo-msg-ai .demo-msg-bubble strong { font-weight: 600; }\n"
|
|
" .demo-msg-ai .demo-msg-bubble em { font-style: italic; }\n"
|
|
" .demo-msg-ai .demo-msg-bubble a { color: var(--navy); text-decoration: underline; }\n"
|
|
" /* Code: marked.js emits <code> for inline backticks and <pre><code> for\n"
|
|
" fenced blocks. Without these rules they render as unstyled inline\n"
|
|
" text and the user can't tell where the code starts and stops. */\n"
|
|
" .demo-msg-ai .demo-msg-bubble code {\n"
|
|
" font-family: 'IBM Plex Mono', Menlo, Consolas, monospace;\n"
|
|
" font-size: 0.85em;\n"
|
|
" background: rgba(0, 0, 0, 0.06);\n"
|
|
" padding: 1px 4px;\n"
|
|
" border-radius: 3px;\n"
|
|
" word-break: break-word;\n"
|
|
" }\n"
|
|
" .demo-msg-ai .demo-msg-bubble pre {\n"
|
|
" background: rgba(0, 0, 0, 0.06);\n"
|
|
" padding: 0.75rem;\n"
|
|
" border-radius: 6px;\n"
|
|
" overflow-x: auto;\n"
|
|
" font-size: 0.85em;\n"
|
|
" line-height: 1.5;\n"
|
|
" margin: 0.5rem 0;\n"
|
|
" max-width: 100%;\n"
|
|
" white-space: pre;\n"
|
|
" }\n"
|
|
" .demo-msg-ai .demo-msg-bubble pre code {\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " background: none;\n"
|
|
" padding: 0;\n"
|
|
" font-size: inherit;\n"
|
|
" word-break: normal;\n"
|
|
" }\n"
|
|
" .demo-msg-ai .demo-msg-bubble blockquote {\n"
|
|
" border-left: 3px solid var(--border);\n"
|
|
" margin: 0.5rem 0;\n"
|
|
" padding: 0.25rem 0 0.25rem 0.75rem;\n"
|
|
" color: var(--t2);\n"
|
|
" }\n"
|
|
" .demo-msg-ai .demo-msg-bubble h1,\n"
|
|
" .demo-msg-ai .demo-msg-bubble h2,\n"
|
|
" .demo-msg-ai .demo-msg-bubble h3,\n"
|
|
" .demo-msg-ai .demo-msg-bubble h4 {\n"
|
|
" font-weight: 600;\n"
|
|
" margin: 0.5rem 0 0.25rem;\n"
|
|
" }\n"
|
|
" .demo-msg-ai .demo-msg-bubble h1 { font-size: 1.05em; }\n"
|
|
" .demo-msg-ai .demo-msg-bubble h2 { font-size: 1em; }\n"
|
|
" .demo-msg-ai .demo-msg-bubble h3 { font-size: 0.95em; }\n"
|
|
" .demo-msg-ai .demo-msg-bubble h4 { font-size: 0.9em; }\n"
|
|
" .demo-msg-share {\n"
|
|
" position: relative;\n"
|
|
" margin-top: 0.375rem;\n"
|
|
" align-self: flex-start;\n"
|
|
" margin-left: 2.5rem;\n"
|
|
" }\n"
|
|
" .demo-msg-share-btn {\n"
|
|
" background: none;\n"
|
|
" border: none;\n"
|
|
" cursor: pointer;\n"
|
|
" color: var(--t3);\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.65rem;\n"
|
|
" letter-spacing: 0.06em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" padding: 0.2rem 0.4rem;\n"
|
|
" transition: color 0.2s;\n"
|
|
" display: flex;\n"
|
|
" align-items: center;\n"
|
|
" gap: 0.3rem;\n"
|
|
" }\n"
|
|
" .demo-msg-share-btn:hover { color: var(--navy); }\n"
|
|
" .demo-share-menu {\n"
|
|
" position: absolute;\n"
|
|
" bottom: 100%;\n"
|
|
" left: 0;\n"
|
|
" background: #fff;\n"
|
|
" border: 1px solid var(--border2);\n"
|
|
" box-shadow: 0 4px 20px rgba(0,0,0,.12);\n"
|
|
" padding: 0.5rem;\n"
|
|
" display: none;\n"
|
|
" gap: 0.25rem;\n"
|
|
" flex-direction: column;\n"
|
|
" min-width: 160px;\n"
|
|
" z-index: 9999;\n"
|
|
" }\n"
|
|
" .demo-share-menu.open { display: flex; }\n"
|
|
" .demo-share-item {\n"
|
|
" display: flex;\n"
|
|
" align-items: center;\n"
|
|
" gap: 0.5rem;\n"
|
|
" padding: 0.5rem 0.75rem;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.8125rem;\n"
|
|
" color: var(--t1);\n"
|
|
" cursor: pointer;\n"
|
|
" background: none;\n"
|
|
" border: none;\n"
|
|
" text-align: left;\n"
|
|
" width: 100%;\n"
|
|
" transition: background 0.15s;\n"
|
|
" text-decoration: none;\n"
|
|
" }\n"
|
|
" .demo-share-item:hover { background: var(--bg2); }\n"
|
|
" .demo-msg-thinking {\n"
|
|
" align-self: flex-start;\n"
|
|
" color: var(--t3);\n"
|
|
" font-size: 0.8rem;\n"
|
|
" letter-spacing: 0.04em;\n"
|
|
" display: flex;\n"
|
|
" align-items: center;\n"
|
|
" gap: 0.625rem;\n"
|
|
" padding: 0.25rem 0;\n"
|
|
" }\n"
|
|
" .demo-msg-thinking .demo-msg-avatar {\n"
|
|
" width: 1.75rem;\n"
|
|
" height: 1.75rem;\n"
|
|
" flex-shrink: 0;\n"
|
|
" }\n"
|
|
" .demo-msg-thinking .demo-msg-avatar img {\n"
|
|
" width: 1.125rem;\n"
|
|
" height: 1.125rem;\n"
|
|
" animation: brainPulse 1.4s ease-in-out infinite;\n"
|
|
" }\n"
|
|
" .demo-msg-thinking-dots { display: inline-flex; gap: 3px; }\n"
|
|
" .demo-msg-thinking-dots span {\n"
|
|
" width: 5px; height: 5px; border-radius: 50%;\n"
|
|
" background: rgba(0,82,160,0.55);\n"
|
|
));
|
|
result = el_str_concat(result, EL_STR( " animation: thinkDot 1.2s ease-in-out infinite;\n"
|
|
" }\n"
|
|
" .demo-msg-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }\n"
|
|
" .demo-msg-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }\n"
|
|
" @keyframes thinkDot {\n"
|
|
" 0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }\n"
|
|
" 40% { opacity: 1; transform: scale(1); }\n"
|
|
" }\n"
|
|
" @keyframes brainPulse {\n"
|
|
" 0%, 100% { opacity: 0.55; transform: scale(0.92); }\n"
|
|
" 50% { opacity: 1; transform: scale(1.05); }\n"
|
|
" }\n"
|
|
" .demo-share-pill {\n"
|
|
" background: rgba(0,82,160,0.07);\n"
|
|
" border: 1px solid rgba(0,82,160,0.22);\n"
|
|
" color: var(--navy);\n"
|
|
" cursor: pointer;\n"
|
|
" padding: 0.4rem 0.75rem;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 600;\n"
|
|
" letter-spacing: 0.08em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" display: inline-flex;\n"
|
|
" align-items: center;\n"
|
|
" gap: 0.4rem;\n"
|
|
" margin-top: 0.5rem;\n"
|
|
" margin-left: 0;\n"
|
|
" align-self: flex-start;\n"
|
|
" transition: background 0.15s, border-color 0.15s, transform 0.1s;\n"
|
|
" line-height: 1;\n"
|
|
" border-radius: 6px;\n"
|
|
" }\n"
|
|
" .demo-share-pill:hover {\n"
|
|
" background: rgba(0,82,160,0.14);\n"
|
|
" border-color: rgba(0,82,160,0.45);\n"
|
|
" }\n"
|
|
" .demo-share-pill:active { transform: scale(0.97); }\n"
|
|
" .demo-share-pill svg { width: 11px; height: 11px; }\n"
|
|
"\n"
|
|
" #neuron-demo-input-row {\n"
|
|
" display: flex;\n"
|
|
" align-items: flex-end;\n"
|
|
" border-top: 1px solid var(--border);\n"
|
|
" flex-shrink: 0;\n"
|
|
" }\n"
|
|
" #neuron-demo-text {\n"
|
|
" flex: 1;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.875rem;\n"
|
|
" line-height: 1.5;\n"
|
|
" color: var(--t1);\n"
|
|
" background: var(--bg);\n"
|
|
" border: none;\n"
|
|
" outline: none;\n"
|
|
" padding: 0.875rem 1rem;\n"
|
|
" resize: none;\n"
|
|
" overflow: hidden;\n"
|
|
" min-height: 2.75rem;\n"
|
|
" max-height: 7.5rem;\n"
|
|
" }\n"
|
|
" #neuron-demo-text::placeholder { color: var(--t3); }\n"
|
|
" #neuron-demo-send {\n"
|
|
" flex-shrink: 0;\n"
|
|
" background: var(--navy);\n"
|
|
" color: #fff;\n"
|
|
" border: none;\n"
|
|
" cursor: pointer;\n"
|
|
" padding: 0.875rem 1.25rem;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.7rem;\n"
|
|
" font-weight: 500;\n"
|
|
" letter-spacing: 0.12em;\n"
|
|
" text-transform: uppercase;\n"
|
|
" transition: background 200ms;\n"
|
|
" }\n"
|
|
" #neuron-demo-send:hover { background: #0078D4; }\n"
|
|
" #neuron-demo-send:disabled { opacity: 0.5; cursor: not-allowed; }\n"
|
|
" #neuron-demo-auth {\n"
|
|
" flex-direction: column;\n"
|
|
" align-items: center;\n"
|
|
" gap: 0.75rem;\n"
|
|
" padding: 1.5rem 1.25rem;\n"
|
|
" flex: 1;\n"
|
|
" }\n"
|
|
" .demo-auth-heading {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.85rem;\n"
|
|
" font-weight: 600;\n"
|
|
" color: var(--t1);\n"
|
|
" text-align: center;\n"
|
|
" margin: 0 0 0.25rem;\n"
|
|
" }\n"
|
|
" .demo-auth-google-btn {\n"
|
|
" display: flex;\n"
|
|
" align-items: center;\n"
|
|
" gap: 0.6rem;\n"
|
|
" width: 100%;\n"
|
|
" padding: 0.65rem 1rem;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.82rem;\n"
|
|
" font-weight: 500;\n"
|
|
" color: var(--t1);\n"
|
|
" background: #fff;\n"
|
|
" border: 1px solid var(--border);\n"
|
|
" border-radius: 6px;\n"
|
|
" cursor: pointer;\n"
|
|
" justify-content: center;\n"
|
|
" transition: border-color 180ms, box-shadow 180ms;\n"
|
|
" }\n"
|
|
" .demo-auth-google-btn:hover {\n"
|
|
" border-color: rgba(0,82,160,0.45);\n"
|
|
" box-shadow: 0 0 0 3px rgba(0,82,160,0.08);\n"
|
|
" }\n"
|
|
" .demo-auth-email-toggle {\n"
|
|
" background: none;\n"
|
|
" border: none;\n"
|
|
" cursor: pointer;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.78rem;\n"
|
|
" color: var(--t3);\n"
|
|
" text-decoration: underline;\n"
|
|
" padding: 0;\n"
|
|
" }\n"
|
|
" .demo-auth-email-form {\n"
|
|
" display: none;\n"
|
|
" flex-direction: column;\n"
|
|
" gap: 0.5rem;\n"
|
|
" width: 100%;\n"
|
|
" }\n"
|
|
" .demo-auth-email-form input {\n"
|
|
" width: 100%;\n"
|
|
" padding: 0.6rem 0.75rem;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.82rem;\n"
|
|
" color: var(--t1);\n"
|
|
" background: var(--bg);\n"
|
|
" border: 1px solid var(--border);\n"
|
|
" border-radius: 6px;\n"
|
|
" outline: none;\n"
|
|
" }\n"
|
|
" .demo-auth-email-form input:focus { border-color: var(--navy); }\n"
|
|
" .demo-auth-submit-btn {\n"
|
|
" width: 100%;\n"
|
|
" padding: 0.6rem 1rem;\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.82rem;\n"
|
|
" font-weight: 600;\n"
|
|
" color: #fff;\n"
|
|
" background: var(--navy);\n"
|
|
" border: none;\n"
|
|
" border-radius: 6px;\n"
|
|
" cursor: pointer;\n"
|
|
" transition: background 180ms;\n"
|
|
" }\n"
|
|
" .demo-auth-submit-btn:hover { background: #0078D4; }\n"
|
|
" .demo-auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n"
|
|
" .demo-auth-msg {\n"
|
|
" font-family: var(--body);\n"
|
|
" font-size: 0.75rem;\n"
|
|
" margin: 0;\n"
|
|
" text-align: center;\n"
|
|
" }\n"
|
|
" @media (max-width: 600px) {\n"
|
|
" #neuron-demo-text { font-size: 1rem; padding: 1rem; }\n"
|
|
" #neuron-demo-send { padding: 1rem 1.25rem; min-width: 64px; }\n"
|
|
" #neuron-demo-messages { padding: .75rem 1rem; }\n"
|
|
" }\n"
|
|
"\n"
|
|
" .text-gradient-gold {\n"
|
|
" background: linear-gradient(135deg, #003d7a 0%, #0078D4 50%, #0052A0 100%);\n"
|
|
" -webkit-background-clip: text;\n"
|
|
" -webkit-text-fill-color: transparent;\n"
|
|
" background-clip: text;\n"
|
|
" }\n"
|
|
"\n"
|
|
" button.pricing-cta-navy, button.pricing-cta-solid, button.pricing-cta-ghost {\n"
|
|
" width: 100%;\n"
|
|
" border: none;\n"
|
|
" cursor: pointer;\n"
|
|
" font-family: inherit;\n"
|
|
" font-size: inherit;\n"
|
|
" letter-spacing: inherit;\n"
|
|
" text-transform: inherit;\n"
|
|
" text-align: center;\n"
|
|
" padding: 0.875rem 1.5rem;\n"
|
|
" transition: background 300ms, opacity 300ms;\n"
|
|
" background: var(--navy);\n"
|
|
" color: #fff;\n"
|
|
" box-shadow: 0 2px 16px rgba(0,82,160,.25);\n"
|
|
" }\n"
|
|
" button.pricing-cta-navy:hover, button.pricing-cta-solid:hover, button.pricing-cta-ghost:hover { background: #0078D4; }\n"
|
|
" button[disabled] { opacity: 0.6; cursor: not-allowed; }\n"
|
|
"\n"
|
|
" \n</style>"
|
|
));
|
|
return result;
|
|
}
|