From 602f8d4c965281aaa4fe662f6eeb002ef72172bd Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Fri, 24 Apr 2026 12:04:55 -0300
Subject: [PATCH] style: coffee palette, compact hero, chat widget, nav cleanup
 + Free Trial / Book Meeting CTAs

---
 index.html | 168 ++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 129 insertions(+), 39 deletions(-)

diff --git a/index.html b/index.html
index cd8b182..5f6b4af 100644
--- a/index.html
+++ b/index.html
@@ -54,19 +54,20 @@
 
             /* ── Design Tokens ── */
             :root {
-                --bg: #191920;
-                --surf1: #202028;
-                --card: #252530;
-                --lift: #2e2e3c;
-                --border: rgba(212, 170, 80, 0.22);
-                --grey: #68687a;
-                --silver: #ababbe;
-                --light: #d2d2e0;
-                --gold: #d6af52;
-                --gold-hi: #f2ce62;
-                --gold-lo: #8e6c30;
-                --gold-glow: rgba(212, 170, 80, 0.18);
-                --white: #eeeef4;
+                --bg: #18100a;
+                --surf1: #201408;
+                --card: #281c0c;
+                --lift: #342010;
+                --bg-deep: #0c0804;
+                --border: rgba(190, 120, 45, 0.22);
+                --grey: #7a6050;
+                --silver: #b89878;
+                --light: #d4b890;
+                --gold: #c87830;
+                --gold-hi: #e8983c;
+                --gold-lo: #784418;
+                --gold-glow: rgba(190, 120, 45, 0.18);
+                --white: #eed8b8;
             }
 
             /* ── Base ── */
@@ -95,7 +96,7 @@
                 top: 0;
                 z-index: 500;
                 height: 62px;
-                background: rgba(25, 25, 32, 0.97);
+                background: rgba(22, 14, 8, 0.97);
                 backdrop-filter: blur(20px);
                 -webkit-backdrop-filter: blur(20px);
                 border-bottom: 1px solid var(--border);
@@ -171,17 +172,17 @@
 
             /* ── HERO ── */
             .hero {
-                min-height: 100vh;
+                min-height: 55vh;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
                 text-align: center;
-                padding: 80px 8vw;
+                padding: 44px 6vw;
                 background:
                     radial-gradient(
                         ellipse 80% 50% at 50% 0%,
-                        #1e1e10 0%,
+                        #1c0e04 0%,
                         transparent 70%
                     ),
                     var(--bg);
@@ -201,12 +202,12 @@
 
             .hero h1 {
                 font-family: Georgia, "Times New Roman", serif;
-                font-size: 4.8rem;
+                font-size: 2.6rem;
                 font-weight: 700;
                 color: var(--white);
-                line-height: 1.12;
-                margin-bottom: 28px;
-                max-width: 820px;
+                line-height: 1.15;
+                margin-bottom: 18px;
+                max-width: 980px;
             }
             .hero h1 em {
                 font-style: italic;
@@ -215,17 +216,73 @@
 
             .hero-sub {
                 color: var(--silver);
-                font-size: 1.1rem;
-                max-width: 580px;
-                margin-bottom: 16px;
+                font-size: 0.92rem;
+                max-width: 680px;
+                margin-bottom: 12px;
                 line-height: 1.7;
             }
 
             .hero-tagline {
                 font-style: italic;
                 color: var(--grey);
-                font-size: 1rem;
-                margin-bottom: 40px;
+                font-size: 0.88rem;
+                margin-bottom: 20px;
+            }
+
+            /* ── HERO CHAT WIDGET ── */
+            .hero-chat {
+                position: relative;
+                display: flex;
+                align-items: stretch;
+                width: 100%;
+                max-width: 540px;
+                margin-bottom: 28px;
+                background: var(--card);
+                border: 1px solid var(--border);
+                border-radius: 6px;
+                transition:
+                    border-color 0.25s,
+                    box-shadow 0.25s;
+            }
+            .hero-chat:focus-within {
+                border-color: var(--gold);
+                box-shadow: 0 0 0 3px var(--gold-glow);
+            }
+            .hero-chat-input {
+                flex: 1;
+                background: transparent;
+                border: none;
+                outline: none;
+                padding: 13px 16px;
+                font-size: 0.88rem;
+                font-family: "Segoe UI", system-ui, sans-serif;
+                color: var(--white);
+                min-width: 0;
+            }
+            .hero-chat-input::placeholder {
+                color: var(--grey);
+                font-style: italic;
+            }
+            .hero-chat-send {
+                flex-shrink: 0;
+                background: none;
+                border: none;
+                border-left: 1px solid var(--border);
+                padding: 0 18px;
+                color: var(--gold);
+                font-size: 1.05rem;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition:
+                    color 0.2s,
+                    background 0.2s;
+                border-radius: 0 6px 6px 0;
+            }
+            .hero-chat-send:hover {
+                color: var(--gold-hi);
+                background: var(--lift);
             }
 
             .hero-actions {
@@ -263,7 +320,7 @@
             .btn-primary:hover {
                 opacity: 0.9;
                 transform: translateY(-1px);
-                box-shadow: 0 8px 28px rgba(212, 170, 80, 0.32);
+                box-shadow: 0 8px 28px rgba(190, 120, 45, 0.32);
             }
 
             .btn-secondary {
@@ -284,6 +341,24 @@
                 color: var(--gold);
             }
 
+            /* ── NAV BOOK MEETING CTA ── */
+            .nav-links li a.nav-cta-book {
+                border: 1px solid rgba(190, 120, 45, 0.38);
+                color: var(--silver);
+                -webkit-text-fill-color: var(--silver);
+                padding: 7px 18px;
+                border-radius: 2px;
+                transition:
+                    border-color 0.2s,
+                    color 0.2s,
+                    -webkit-text-fill-color 0.2s;
+            }
+            .nav-links li a.nav-cta-book:hover {
+                border-color: var(--gold);
+                color: var(--gold);
+                -webkit-text-fill-color: var(--gold);
+            }
+
             .hero-trust {
                 font-size: 0.78rem;
                 color: var(--grey);
@@ -695,7 +770,7 @@
 
             /* ── FOOTER ── */
             footer {
-                background: #0e0e14;
+                background: var(--bg-deep);
                 border-top: 3px solid var(--gold);
                 padding: 72px 8vw 40px;
             }
@@ -961,7 +1036,7 @@
             /* ── Responsive ── */
             @media (max-width: 768px) {
                 .hero h1 {
-                    font-size: 2.8rem;
+                    font-size: 1.9rem;
                 }
                 .nav-links {
                     gap: 14px;
@@ -978,7 +1053,7 @@
             }
             @media (max-width: 480px) {
                 .hero h1 {
-                    font-size: 2.1rem;
+                    font-size: 1.5rem;
                 }
                 nav {
                     padding: 0 5vw;
@@ -1009,12 +1084,11 @@
         <nav>
             <a class="nav-logo" href="#">my-biz<span>.app</span></a>
             <ul class="nav-links">
-                <li><a href="#verticals">Verticals</a></li>
-                <li><a href="#news">News</a></li>
-                <li><a href="#pricing">Pricing</a></li>
-                <li><a href="#customization">Customization</a></li>
                 <li>
-                    <a class="nav-cta" id="open-modal" href="#">Get Started</a>
+                    <a class="nav-cta-book" href="#">Book Meeting</a>
+                </li>
+                <li>
+                    <a class="nav-cta" id="open-modal" href="#">Free Trial</a>
                 </li>
             </ul>
         </nav>
@@ -1067,6 +1141,24 @@
                     ><span>No expensive surprises.</span></span
                 >
             </p>
+            <div
+                class="hero-chat"
+                data-mf-animation="fade-up"
+                data-mf-animation-duration="700"
+                data-mf-animation-delay="320"
+                data-mf-animation-distance="20"
+                data-mf-animation-once="true"
+            >
+                <input
+                    type="text"
+                    class="hero-chat-input"
+                    placeholder="Your Sales Agent"
+                    aria-label="Ask your AI sales agent"
+                />
+                <button class="hero-chat-send" aria-label="Send message">
+                    &#10148;
+                </button>
+            </div>
             <div
                 class="hero-actions"
                 data-mf-animation="fade-up"
@@ -1076,11 +1168,9 @@
                 data-mf-animation-once="true"
             >
                 <a class="btn-primary" id="open-modal-hero" href="#"
-                    >See Plans &amp; Pricing</a
-                >
-                <a class="btn-secondary" href="#verticals"
-                    >Find Your Vertical</a
+                    >Free Trial</a
                 >
+                <a class="btn-secondary" href="#">Book Meeting</a>
             </div>
             <p
                 class="hero-trust"