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

style: official coffee palette (dark-roast/latte/burnt-orange), fix all contrast & hardcoded values

Browse Source
This commit is contained in:
oliver
2026-04-24 12:34:51 -03:00
parent 8b618284ef
commit cb08e72ba0
1 changed files with 34 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+34 -32
View File
@@ -54,20 +54,20 @@
/* ── Design Tokens ── */ /* ── Design Tokens ── */
:root { :root {
--bg: #3a2416; --bg: #efebe9;
--surf1: #44301a; --surf1: #e8e0da;
--card: #50381e; --card: #fff3e0;
--lift: #5e4426; --lift: #f5ece4;
--bg-deep: #241810; --bg-deep: #3e2723;
--border: rgba(210, 140, 60, 0.28); --border: rgba(93, 64, 55, 0.25);
--grey: #9e8060; --grey: #a1887f;
--silver: #c8a882; --silver: #6d4c41;
--light: #e4cca4; --light: #5d4037;
--gold: #d88c3c; --gold: #e65100;
--gold-hi: #f0a850; --gold-hi: #fb8c00;
--gold-lo: #8a5422; --gold-lo: #bf360c;
--gold-glow: rgba(210, 140, 60, 0.22); --gold-glow: rgba(230, 81, 0, 0.18);
--white: #f8e8c8; --white: #3e2723;
} }
/* ── Base ── */ /* ── Base ── */
@@ -96,7 +96,7 @@
top: 0; top: 0;
z-index: 500; z-index: 500;
height: 62px; height: 62px;
background: rgba(48, 30, 16, 0.97); background: rgba(62, 39, 35, 0.97);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
@@ -250,9 +250,9 @@
inset: 0; inset: 0;
background: linear-gradient( background: linear-gradient(
160deg, 160deg,
rgba(58, 36, 20, 0.7) 0%, rgba(239, 235, 233, 0.72) 0%,
rgba(44, 26, 12, 0.48) 50%, rgba(239, 235, 233, 0.52) 50%,
rgba(58, 36, 20, 0.8) 100% rgba(239, 235, 233, 0.8) 100%
); );
} }
.hero > *:not(.hero-bg-wrap) { .hero > *:not(.hero-bg-wrap) {
@@ -269,6 +269,7 @@
border-radius: 4px; border-radius: 4px;
height: 34px; height: 34px;
width: 440px; width: 440px;
overflow: hidden;
transition: transition:
border-color 0.25s, border-color 0.25s,
box-shadow 0.25s; box-shadow 0.25s;
@@ -285,13 +286,14 @@
padding: 0 10px; padding: 0 10px;
font-size: 0.78rem; font-size: 0.78rem;
font-family: "Segoe UI", system-ui, sans-serif; font-family: "Segoe UI", system-ui, sans-serif;
color: var(--white); color: var(--card);
min-width: 0; min-width: 0;
height: 100%; height: 100%;
} }
.nav-chat-input::placeholder { .nav-chat-input::placeholder {
color: var(--grey); color: var(--grey);
font-style: italic; font-style: italic;
opacity: 0.8;
} }
.nav-chat-send { .nav-chat-send {
background: none; background: none;
@@ -400,9 +402,9 @@
/* ── NAV BOOK MEETING CTA ── */ /* ── NAV BOOK MEETING CTA ── */
.nav-cta-book { .nav-cta-book {
border: 1px solid rgba(210, 140, 60, 0.38); border: 1px solid rgba(161, 136, 127, 0.55);
color: var(--silver); color: var(--grey);
-webkit-text-fill-color: var(--silver); -webkit-text-fill-color: var(--grey);
padding: 7px 18px; padding: 7px 18px;
border-radius: 2px; border-radius: 2px;
font-size: 0.8rem; font-size: 0.8rem;
@@ -414,9 +416,9 @@
-webkit-text-fill-color 0.2s; -webkit-text-fill-color 0.2s;
} }
.nav-cta-book:hover { .nav-cta-book:hover {
border-color: var(--gold); border-color: var(--gold-hi);
color: var(--gold); color: var(--gold-hi);
-webkit-text-fill-color: var(--gold); -webkit-text-fill-color: var(--gold-hi);
} }
/* ── CHAT PANEL ── */ /* ── CHAT PANEL ── */
@@ -526,8 +528,8 @@
border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px;
} }
.chat-msg.user .chat-bubble { .chat-msg.user .chat-bubble {
background: var(--gold-lo); background: var(--gold);
color: var(--white); color: var(--card);
border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px;
} }
.chat-thinking .chat-bubble { .chat-thinking .chat-bubble {
@@ -1091,7 +1093,7 @@
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 9000; z-index: 9000;
background: rgba(14, 14, 20, 0.88); background: rgba(62, 39, 35, 0.85);
backdrop-filter: blur(14px); backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
display: none; display: none;
@@ -1102,7 +1104,7 @@
#modal-box { #modal-box {
background: var(--card); background: var(--card);
border: 1px solid rgba(212, 170, 80, 0.35); border: 1px solid rgba(230, 81, 0, 0.25);
border-top: 3px solid var(--gold); border-top: 3px solid var(--gold);
max-width: 480px; max-width: 480px;
width: 100%; width: 100%;
@@ -1168,8 +1170,8 @@
.modal-field { .modal-field {
width: 100%; width: 100%;
padding: 13px 16px; padding: 13px 16px;
background: rgba(10, 10, 16, 0.7); background: rgba(62, 39, 35, 0.07);
border: 1px solid rgba(212, 170, 80, 0.25); border: 1px solid rgba(230, 81, 0, 0.28);
color: var(--white); color: var(--white);
font-size: 0.9rem; font-size: 0.9rem;
border-radius: 2px; border-radius: 2px;
@@ -1184,7 +1186,7 @@
} }
select.modal-field { select.modal-field {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23D6AF52' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23E65100' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 14px center; background-position: right 14px center;
padding-right: 40px; padding-right: 40px;