@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Instrument+Sans:wght@400;500;600;700&display=swap'); /* ============================================================================ Sofia widget — standalone stylesheet for embedding on a host site (e.g. WordPress). Contains ONLY the widget's styles + the design tokens it needs, so it won't drag in a full site theme or clash with the host. Elements are appended to by sofia.js; z-index is set very high to sit above sticky headers. ========================================================================== */ :root { --ground: #FBFAF6; /* GEF brand palette (matches gefinance.com): espresso near-black + gold accent, no green/navy. */ --ink: #2C1D0E; --green: #E3BC4F; --green-hover: #CBA233; --green-lift: #E3BC4F; --green-text: #8A6D1A; --green-tint: #FBF3DD; --muted: #8B99AB; --card-border: #ECE9E1; --input-border: #DDE3EA; --on-navy-p: #A8BACC; --on-navy-link: #C8D4E0; --text-2: #5E7189; --r-pill: 999px; --r-band: 28px; --r-inner: 18px; --r-input: 12px; --font-head: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif; --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --ease: 150ms ease; } /* Defensive resets so the host theme can't distort the widget. */ .sofia-launcher, .sofia-backdrop, .sofia-panel, .sofia-panel *, .sofia-launcher * { box-sizing: border-box; } .sofia-panel { font-family: var(--font-body); line-height: 1.4; color: var(--ink); } .sofia-panel button, .sofia-launcher { text-transform: none; letter-spacing: normal; } .sofia-panel [hidden] { display: none !important; } .sofia-backdrop { position: fixed; inset: 0; z-index: 2147483000; background: rgba(16,49,79,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--ease); } .sofia-backdrop.is-show { opacity: 1; pointer-events: auto; } .sofia-launcher { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; border: 0; border-radius: var(--r-pill); background: var(--green); color: #fff; cursor: pointer; font-family: var(--font-body); font-size: 15px; font-weight: 600; box-shadow: 0 10px 30px rgba(16,49,79,.28); transition: background-color var(--ease), transform var(--ease); } .sofia-launcher:hover { background: var(--green-hover); } .sofia-launcher:active { transform: translateY(1px); } .sofia-launcher svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sofia-launcher.is-hidden { display: none; } .sofia-launcher-label { color: #fff; font-weight: 600; letter-spacing: 0; text-transform: none; } .sofia-panel { position: fixed; right: 20px; bottom: 20px; z-index: 2147483001; display: none; flex-direction: column; overflow: hidden; width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 40px)); background: #fff; border-radius: var(--r-band); border: 1px solid var(--card-border); box-shadow: 0 24px 60px rgba(16,49,79,.35); } .sofia-panel.is-open { display: flex; } .sofia-panel.is-center { right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); height: min(680px, calc(100vh - 48px)); } .sofia-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--ink); color: #fff; } .sofia-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 19px; flex: none; } .sofia-id { flex: 1; min-width: 0; } .sofia-id .name { font-family: var(--font-head); font-weight: 700; font-size: 16px; } .sofia-id .role { font-size: 12.5px; color: var(--on-navy-p); } .sofia-id .role::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green-lift); margin-right: 6px; vertical-align: 1px; } .sofia-close { border: 0; background: transparent; color: #fff; cursor: pointer; padding: 6px; border-radius: var(--r-input); line-height: 0; } .sofia-close:hover { background: rgba(255,255,255,.12); } .sofia-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } .sofia-confirm { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 22px; background: rgba(16,49,79,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .sofia-confirm[hidden] { display: none; } .sofia-confirm-card { width: 100%; max-width: 300px; background: #fff; border: 1px solid var(--card-border); border-radius: var(--r-band); box-shadow: 0 20px 44px rgba(16,49,79,.3); padding: 22px 20px; text-align: center; } .sofia-confirm-title { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--ink); } .sofia-confirm-text { margin: 8px 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted); } .sofia-confirm-actions { display: flex; flex-direction: column; gap: 8px; } .sofia-confirm-keep, .sofia-confirm-end { width: 100%; padding: 11px 14px; border-radius: var(--r-input); font-family: var(--font-body); font-size: 14.5px; font-weight: 600; cursor: pointer; } .sofia-confirm-keep { border: 1.5px solid var(--input-border); background: #fff; color: var(--ink); } .sofia-confirm-keep:hover { background: var(--ground); } .sofia-confirm-end { border: 0; background: var(--ink); color: #fff; } .sofia-confirm-end:hover { background: var(--green-hover); } /* Consent gate — SMS / phone opt-in (on-demand via "Manage contact preferences"). */ .sofia-cm { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; background: rgba(16,49,79,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .sofia-cm[hidden] { display: none; } .sofia-cm-card { width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto; background: #fff; border: 1px solid var(--card-border); border-radius: var(--r-band); box-shadow: 0 20px 44px rgba(16,49,79,.3); padding: 20px 18px; } .sofia-cm-title { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--ink); } .sofia-cm-lead { margin: 8px 0 4px; font-size: 12px; line-height: 1.5; color: var(--muted); } .sofia-cm-lead a { color: var(--green-text); text-decoration: underline; text-underline-offset: 2px; } .sofia-cm-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--card-border); margin-top: 14px; } .sofia-cm-row + .sofia-cm-row { margin-top: 0; } .sofia-cm-copy { flex: 1; min-width: 0; } .sofia-cm-h { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; } .sofia-cm-copy p { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0; } .sofia-toggle { flex: none; width: 46px; height: 26px; margin-top: 2px; border: 0; border-radius: var(--r-pill); background: var(--input-border); position: relative; cursor: pointer; transition: background var(--ease); } .sofia-toggle[aria-checked="true"] { background: var(--green); } .sofia-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--ease); box-shadow: 0 1px 3px rgba(16,49,79,.35); } .sofia-toggle[aria-checked="true"] .sofia-toggle-knob { transform: translateX(20px); } .sofia-cm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; border-top: 1px solid var(--card-border); padding-top: 16px; } .sofia-cm-actions button { flex: 1; min-width: 120px; padding: 11px 12px; border-radius: var(--r-input); font-family: var(--font-body); font-size: 14.5px; font-weight: 600; cursor: pointer; } .sofia-cm-save, .sofia-cm-reject { border: 1.5px solid var(--input-border); background: #fff; color: var(--ink); } .sofia-cm-save:hover, .sofia-cm-reject:hover { background: var(--ground); } .sofia-cm-accept { border: 0; background: var(--green); color: #fff; } .sofia-cm-accept:hover { background: var(--green-hover); } .sofia-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--ground); scroll-behavior: smooth; } .sofia-msg { max-width: 82%; padding: 11px 15px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .sofia-msg.bot { align-self: flex-start; background: #fff; color: var(--ink); border: 1px solid var(--card-border); border-radius: var(--r-inner); } .sofia-msg.me { align-self: flex-end; background: var(--green); color: #fff; border-radius: var(--r-inner); } .sofia-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 14px 16px; background: #fff; border: 1px solid var(--card-border); border-radius: var(--r-inner); } .sofia-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: sofia-pulse 1.2s infinite ease-in-out; } .sofia-typing span:nth-child(2) { animation-delay: .18s; } .sofia-typing span:nth-child(3) { animation-delay: .36s; } @keyframes sofia-pulse { 0%, 70%, 100% { opacity: .3; } 35% { opacity: 1; } } .sofia-foot { border-top: 1px solid var(--card-border); padding: 12px 14px; background: #fff; } .sofia-form { display: flex; align-items: flex-end; gap: 8px; } .sofia-input { flex: 1; resize: none; border: 1.5px solid var(--input-border); border-radius: var(--r-input); padding: 10px 12px; font-family: var(--font-body); font-size: 15px; line-height: 1.4; max-height: 96px; background: var(--ground); color: var(--ink); } .sofia-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); } .sofia-send { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--green); color: #fff; cursor: pointer; display: grid; place-items: center; } .sofia-send:hover { background: var(--green-hover); } .sofia-send:disabled { opacity: .45; cursor: default; } .sofia-send svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .sofia-consent { margin: 8px 2px 0; font-size: 12px; line-height: 1.45; color: var(--muted); text-align: center; } .sofia-consent a, .sofia-consent-manage { color: var(--green-text); text-decoration: underline; text-underline-offset: 2px; } .sofia-consent-manage { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; } @media (max-width: 640px) { .sofia-panel.is-center { left: 0; top: 0; transform: none; width: 100vw; height: 100dvh; border-radius: 0; border: 0; } } @media (max-width: 460px) { .sofia-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; } .sofia-launcher { right: 14px; bottom: 14px; padding: 14px; } .sofia-launcher-label { display: none; } } /* ============================================================================ "Meet Sofia" homepage hero — embedded in the gefinance.com WordPress hero row (via a vc_raw_html block). Scoped under .gef-hero so it can't touch the theme or the widget. Reuses the MMG hero-chat look. ========================================================================== */ .gef-hero { background: linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)), url("https://geqfinance.com/clients/7850/uploads/2020/03/134743988.jpg") center/cover no-repeat; color: var(--ink); text-align: center; padding: 160px 20px 96px; min-height: clamp(600px, 72vh, 760px); display: flex; flex-direction: column; align-items: center; justify-content: center; } .gef-hero-inner { width: 100%; max-width: 760px; margin: 0 auto; } .gef-hero h1.gef-hero-h { font-family: var(--font-head); font-size: 52px; font-weight: 700; letter-spacing: -.03em; line-height: 1.04; margin: 0 0 16px; color: #111; text-wrap: balance; } .gef-hero .hero-sofia { color: #E3BC4F; text-shadow: 0 1px 3px rgba(0,0,0,.30); } .gef-hero-lead { font-size: 19px; line-height: 1.6; color: #4A4A4A; max-width: 46ch; margin: 0 auto 28px; } .gef-hero .hero-chat { width: min(640px, 100%); margin: 0 auto 20px; text-align: left; background: #fff; border-radius: var(--r-band); padding: 8px; box-shadow: 0 24px 60px rgba(16,49,79,.4); } .gef-hero .hero-chat-form { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; } .gef-hero .hero-chat-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 16px; } .gef-hero .hero-chat-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--ink); } .gef-hero .hero-chat-input::placeholder { color: var(--text-2); } .gef-hero .hero-chat-send { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--green); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background-color var(--ease); } .gef-hero .hero-chat-send:hover { background: var(--green-hover); } .gef-hero .hero-chat-send svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .gef-hero .hero-chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 8px 6px; border-top: 1px solid var(--card-border); margin-top: 4px; } .gef-hero .hero-chip { border: 1.5px solid var(--input-border); background: #fff; color: var(--ink); border-radius: var(--r-pill); padding: 8px 16px; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color var(--ease), background-color var(--ease); } .gef-hero .hero-chip:hover { border-color: var(--green); background: var(--green-tint); color: var(--green-text); } .gef-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 22px; } .gef-hero-cta { display: inline-flex; align-items: center; padding: 14px 28px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; } .gef-hero-cta.primary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); } .gef-hero-cta.primary:hover { background: var(--ink); color: #fff; } .gef-hero-cta.ghost { background: var(--green); color: var(--ink); border: 0; } .gef-hero-cta.ghost:hover { background: var(--green-hover); } @media (max-width: 600px) { .gef-hero { padding: 112px 16px 56px; min-height: auto; justify-content: flex-start; } .gef-hero h1.gef-hero-h { font-size: 34px; } .gef-hero-ctas { flex-direction: column; } } /* ---- GEF palette: the accent is a light gold, so put DARK text/icons on it (not white) ---- */ .sofia-launcher, .sofia-launcher-label { color: var(--ink); } .sofia-launcher svg { stroke: var(--ink); } .sofia-avatar, .hero-chat-avatar { color: var(--ink); } .sofia-send svg, .hero-chat-send svg { stroke: var(--ink); } .sofia-msg.me { color: var(--ink); } .sofia-cm-accept { color: var(--ink); } /* Remove WPBakery's default 35px bottom margin on the raw-HTML block that wraps the hero, so the hero photo meets the next section with no white gap. */ .wpb_raw_html:has(.gef-hero) { margin-bottom: 0 !important; } /* The hero CTAs are now leadPops funnel links; the host theme's global link color (blue) was overriding them. Pin the button look: dark text, no underline. */ .gef-hero a.gef-hero-cta, .gef-hero a.gef-hero-cta:visited, .gef-hero a.gef-hero-cta:focus { color: var(--ink) !important; text-decoration: none !important; } .gef-hero a.gef-hero-cta.primary:hover { background: var(--ink); color: #fff !important; } .gef-hero a.gef-hero-cta.ghost, .gef-hero a.gef-hero-cta.ghost:hover { color: var(--ink) !important; }