From 15d85141aceb6465721f3b9a16ac743257b7117f Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Fri, 24 Apr 2026 12:12:32 -0300
Subject: [PATCH] feat: nav chat widget, lighter coffee palette, hero parallax
 bg image

---
 index.html | 165 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 99 insertions(+), 66 deletions(-)

diff --git a/index.html b/index.html
index 5f6b4af..3e0bde5 100644
--- a/index.html
+++ b/index.html
@@ -54,20 +54,20 @@
 
             /* ── Design Tokens ── */
             :root {
-                --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;
+                --bg: #3a2416;
+                --surf1: #44301a;
+                --card: #50381e;
+                --lift: #5e4426;
+                --bg-deep: #241810;
+                --border: rgba(210, 140, 60, 0.28);
+                --grey: #9e8060;
+                --silver: #c8a882;
+                --light: #e4cca4;
+                --gold: #d88c3c;
+                --gold-hi: #f0a850;
+                --gold-lo: #8a5422;
+                --gold-glow: rgba(210, 140, 60, 0.22);
+                --white: #f8e8c8;
             }
 
             /* ── Base ── */
@@ -96,7 +96,7 @@
                 top: 0;
                 z-index: 500;
                 height: 62px;
-                background: rgba(22, 14, 8, 0.97);
+                background: rgba(48, 30, 16, 0.97);
                 backdrop-filter: blur(20px);
                 -webkit-backdrop-filter: blur(20px);
                 border-bottom: 1px solid var(--border);
@@ -179,13 +179,9 @@
                 justify-content: center;
                 text-align: center;
                 padding: 44px 6vw;
-                background:
-                    radial-gradient(
-                        ellipse 80% 50% at 50% 0%,
-                        #1c0e04 0%,
-                        transparent 70%
-                    ),
-                    var(--bg);
+                position: relative;
+                overflow: hidden;
+                background: var(--bg);
             }
 
             .hero-eyebrow {
@@ -229,60 +225,85 @@
                 margin-bottom: 20px;
             }
 
-            /* ── HERO CHAT WIDGET ── */
-            .hero-chat {
-                position: relative;
-                display: flex;
-                align-items: stretch;
+            /* ── HERO PARALLAX BACKGROUND ── */
+            .hero-bg-wrap {
+                position: absolute;
+                inset: -30% 0;
+                z-index: 0;
+                pointer-events: none;
+            }
+            .hero-bg-img {
                 width: 100%;
-                max-width: 540px;
-                margin-bottom: 28px;
-                background: var(--card);
+                height: 100%;
+                object-fit: cover;
+                object-position: center 30%;
+                display: block;
+                opacity: 0.28;
+            }
+            .hero-bg-wrap::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background: linear-gradient(
+                    160deg,
+                    rgba(58, 36, 20, 0.7) 0%,
+                    rgba(44, 26, 12, 0.48) 50%,
+                    rgba(58, 36, 20, 0.8) 100%
+                );
+            }
+            .hero > *:not(.hero-bg-wrap) {
+                position: relative;
+                z-index: 1;
+            }
+
+            /* ── NAV CHAT WIDGET ── */
+            .nav-chat {
+                display: flex;
+                align-items: center;
+                background: rgba(80, 56, 30, 0.55);
                 border: 1px solid var(--border);
-                border-radius: 6px;
+                border-radius: 4px;
+                height: 34px;
+                width: 220px;
                 transition:
                     border-color 0.25s,
                     box-shadow 0.25s;
             }
-            .hero-chat:focus-within {
+            .nav-chat:focus-within {
                 border-color: var(--gold);
-                box-shadow: 0 0 0 3px var(--gold-glow);
+                box-shadow: 0 0 0 2px var(--gold-glow);
             }
-            .hero-chat-input {
+            .nav-chat-input {
                 flex: 1;
                 background: transparent;
                 border: none;
                 outline: none;
-                padding: 13px 16px;
-                font-size: 0.88rem;
+                padding: 0 10px;
+                font-size: 0.78rem;
                 font-family: "Segoe UI", system-ui, sans-serif;
                 color: var(--white);
                 min-width: 0;
+                height: 100%;
             }
-            .hero-chat-input::placeholder {
+            .nav-chat-input::placeholder {
                 color: var(--grey);
                 font-style: italic;
             }
-            .hero-chat-send {
-                flex-shrink: 0;
+            .nav-chat-send {
                 background: none;
                 border: none;
                 border-left: 1px solid var(--border);
-                padding: 0 18px;
+                padding: 0 10px;
                 color: var(--gold);
-                font-size: 1.05rem;
+                font-size: 0.85rem;
                 cursor: pointer;
+                height: 100%;
                 display: flex;
                 align-items: center;
-                justify-content: center;
-                transition:
-                    color 0.2s,
-                    background 0.2s;
-                border-radius: 0 6px 6px 0;
+                transition: color 0.2s;
             }
-            .hero-chat-send:hover {
+            .nav-chat-send:hover {
                 color: var(--gold-hi);
-                background: var(--lift);
             }
 
             .hero-actions {
@@ -1038,6 +1059,9 @@
                 .hero h1 {
                     font-size: 1.9rem;
                 }
+                .nav-chat {
+                    display: none;
+                }
                 .nav-links {
                     gap: 14px;
                 }
@@ -1084,6 +1108,19 @@
         <nav>
             <a class="nav-logo" href="#">my-biz<span>.app</span></a>
             <ul class="nav-links">
+                <li>
+                    <div class="nav-chat">
+                        <input
+                            type="text"
+                            class="nav-chat-input"
+                            placeholder="Your Sales Agent"
+                            aria-label="Ask your AI sales agent"
+                        />
+                        <button class="nav-chat-send" aria-label="Send message">
+                            &#10148;
+                        </button>
+                    </div>
+                </li>
                 <li>
                     <a class="nav-cta-book" href="#">Book Meeting</a>
                 </li>
@@ -1095,6 +1132,19 @@
 
         <!-- HERO -->
         <section class="hero" id="home">
+            <!-- Parallax background -->
+            <div class="hero-bg-wrap">
+                <img
+                    class="hero-bg-img"
+                    src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80&auto=format&fit=crop"
+                    alt=""
+                    aria-hidden="true"
+                    data-mf-parallax
+                    data-mf-parallax-speed="0.4"
+                    data-mf-parallax-speed-tablet="0"
+                    data-mf-parallax-speed-mobile="0"
+                />
+            </div>
             <div
                 class="hero-eyebrow"
                 data-mf-animation="fade-up"
@@ -1141,24 +1191,7 @@
                     ><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"