Oliver/my-biz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: nav chat widget, lighter coffee palette, hero parallax bg image

Browse Source
This commit is contained in:
oliver
2026-04-24 12:12:32 -03:00
parent 602f8d4c96
commit 15d85141ac
1 changed files with 99 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+99 -66
View File
@@ -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"