diff --git a/index.html b/index.html index 3e0bde5..2266d85 100644 --- a/index.html +++ b/index.html @@ -100,9 +100,10 @@ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); - display: flex; + display: grid; + grid-template-columns: 1fr auto 1fr; align-items: center; - justify-content: space-between; + gap: 24px; padding: 0 8vw; } @@ -153,18 +154,21 @@ color: var(--gold); } - .nav-links li a.nav-cta { + .nav-cta { border: 1px solid var(--gold); color: var(--gold); -webkit-text-fill-color: var(--gold); padding: 7px 18px; border-radius: 2px; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.08em; transition: background 0.2s, color 0.2s, -webkit-text-fill-color 0.2s; } - .nav-links li a.nav-cta:hover { + .nav-cta:hover { background: var(--gold); color: var(--bg); -webkit-text-fill-color: var(--bg); @@ -264,7 +268,7 @@ border: 1px solid var(--border); border-radius: 4px; height: 34px; - width: 220px; + width: 440px; transition: border-color 0.25s, box-shadow 0.25s; @@ -305,6 +309,38 @@ .nav-chat-send:hover { color: var(--gold-hi); } + .nav-chat-toggle { + flex-shrink: 0; + background: none; + border: none; + border-right: 1px solid var(--border); + padding: 0 10px; + color: var(--gold); + font-size: 0.9rem; + cursor: pointer; + height: 100%; + display: flex; + align-items: center; + transition: color 0.2s; + } + .nav-chat-toggle:hover { + color: var(--gold-hi); + } + .nav-center { + display: flex; + align-items: center; + gap: 12px; + justify-content: center; + } + .nav-right { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 12px; + } + .nav-cta-sm { + display: none; + } .hero-actions { display: flex; @@ -363,23 +399,179 @@ } /* ── NAV BOOK MEETING CTA ── */ - .nav-links li a.nav-cta-book { - border: 1px solid rgba(190, 120, 45, 0.38); + .nav-cta-book { + border: 1px solid rgba(210, 140, 60, 0.38); color: var(--silver); -webkit-text-fill-color: var(--silver); padding: 7px 18px; border-radius: 2px; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.08em; transition: border-color 0.2s, color 0.2s, -webkit-text-fill-color 0.2s; } - .nav-links li a.nav-cta-book:hover { + .nav-cta-book:hover { border-color: var(--gold); color: var(--gold); -webkit-text-fill-color: var(--gold); } + /* ── CHAT PANEL ── */ + .chat-panel { + position: fixed; + top: 62px; + right: 8vw; + width: 440px; + background: var(--card); + border: 1px solid var(--border); + border-top: 2px solid var(--gold); + border-radius: 0 0 8px 8px; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); + display: flex; + flex-direction: column; + z-index: 498; + visibility: hidden; + opacity: 0; + transform: translateY(-8px); + transition: + opacity 0.22s ease, + visibility 0.22s ease, + transform 0.22s ease; + overflow: hidden; + } + .chat-panel.open { + visibility: visible; + opacity: 1; + transform: translateY(0); + } + .chat-panel-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; + background: var(--lift); + border-bottom: 1px solid var(--border); + flex-shrink: 0; + } + .chat-panel-title { + font-size: 0.75rem; + font-weight: 700; + color: var(--gold); + text-transform: uppercase; + letter-spacing: 0.08em; + } + .chat-panel-close { + background: none; + border: none; + color: var(--grey); + cursor: pointer; + font-size: 0.9rem; + line-height: 1; + padding: 2px 6px; + transition: color 0.2s; + } + .chat-panel-close:hover { + color: var(--gold); + } + .chat-history { + flex: 1; + height: 240px; + overflow-y: auto; + padding: 12px 14px; + display: flex; + flex-direction: column; + gap: 10px; + scroll-behavior: smooth; + } + .chat-history::-webkit-scrollbar { + width: 4px; + } + .chat-history::-webkit-scrollbar-track { + background: var(--bg); + } + .chat-history::-webkit-scrollbar-thumb { + background: var(--border); + border-radius: 2px; + } + .chat-msg { + display: flex; + flex-direction: column; + gap: 3px; + } + .chat-msg.user { + align-items: flex-end; + } + .chat-msg.agent { + align-items: flex-start; + } + .chat-label { + font-size: 0.6rem; + color: var(--grey); + text-transform: uppercase; + letter-spacing: 0.07em; + } + .chat-bubble { + max-width: 82%; + padding: 8px 12px; + font-size: 0.82rem; + line-height: 1.55; + font-family: "Segoe UI", system-ui, sans-serif; + } + .chat-msg.agent .chat-bubble { + background: var(--lift); + color: var(--light); + border-radius: 0 6px 6px 6px; + } + .chat-msg.user .chat-bubble { + background: var(--gold-lo); + color: var(--white); + border-radius: 6px 0 6px 6px; + } + .chat-thinking .chat-bubble { + color: var(--grey); + font-style: italic; + } + .chat-input-row { + display: flex; + align-items: center; + border-top: 1px solid var(--border); + background: var(--bg); + flex-shrink: 0; + } + .chat-input-field { + flex: 1; + background: transparent; + border: none; + outline: none; + padding: 12px 14px; + font-size: 0.85rem; + font-family: "Segoe UI", system-ui, sans-serif; + color: var(--white); + min-width: 0; + } + .chat-input-field::placeholder { + color: var(--grey); + } + .chat-input-send { + background: none; + border: none; + border-left: 1px solid var(--border); + padding: 0 14px; + color: var(--gold); + font-size: 0.9rem; + cursor: pointer; + height: 44px; + display: flex; + align-items: center; + transition: color 0.2s; + } + .chat-input-send:hover { + color: var(--gold-hi); + } + .hero-trust { font-size: 0.78rem; color: var(--grey); @@ -1059,11 +1251,21 @@ .hero h1 { font-size: 1.9rem; } + nav { + grid-template-columns: 1fr auto; + gap: 12px; + } + .nav-center { + display: none; + } .nav-chat { display: none; } - .nav-links { - gap: 14px; + .nav-cta-sm { + display: inline-block; + } + .chat-panel { + display: none !important; } .footer-top { gap: 36px; @@ -1088,12 +1290,6 @@ footer { padding: 52px 5vw 32px; } - .nav-links { - gap: 10px; - } - .nav-links li:not(:last-child) { - display: none; - } #modal-box { padding: 36px 20px; } @@ -1107,29 +1303,69 @@ + + +
@@ -1692,6 +1928,174 @@ + + +