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

style: coffee palette, compact hero, chat widget, nav cleanup + Free Trial / Book Meeting CTAs

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