/* * movylo-alex.css — stili SOLO per l'embed "Meet Alex". * Versione ripulita da demo.css: NESSUN reset globale su html/body/*, * cosi' non interferisce con lo stile dell'app Lovable. * Va in: public/movylo-alex.css */ :root { --alex-navy: #0c2347; --alex-blue: #1f7aec; --alex-blue-soft: #e8f4ff; --alex-text-muted: #5c6b7a; --alex-card-shadow: 0 4px 24px rgba(12, 35, 71, 0.08); --alex-radius-lg: 22px; --alex-radius-md: 14px; } /* ----- Search card ----- */ .movylo-alex-search-card { text-align: left; /* Allineata al report che compare sotto (max-w-2xl = 42rem), centrata. */ max-width: 42rem; margin-left: auto; margin-right: auto; padding: 16px; background: #fff; border-radius: var(--alex-radius-lg); box-shadow: var(--alex-card-shadow); border: 1px solid rgba(216, 224, 232, 0.6); } .movylo-alex-input-wrap { position: relative; display: flex; align-items: center; } .movylo-alex-pin { position: absolute; left: 18px; width: 20px; height: 20px; color: var(--alex-blue); pointer-events: none; } .movylo-alex-search { width: 100%; padding: 16px 16px 16px 48px; font-size: 1rem; font-family: inherit; border: 1px solid #c8d8ea; border-radius: 999px; outline: none; background: #fafbfc; color: var(--alex-navy); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .movylo-alex-search::placeholder { color: #8a97a5; } .movylo-alex-search:focus { border-color: #a0c4ff; background: #fff; box-shadow: 0 0 0 3px rgba(160, 196, 255, 0.45); } /* ----- Result card ----- */ .movylo-alex-card { margin-top: 20px; background: #fff; border-radius: var(--alex-radius-lg); border: 1px solid rgba(216, 224, 232, 0.85); box-shadow: var(--alex-card-shadow); text-align: left; overflow: hidden; } .movylo-alex-card-surface { padding: 22px 22px 20px; } .movylo-alex-card-found { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.45; color: var(--alex-navy); } .movylo-alex-card-found-lead { font-weight: 600; } .movylo-alex-card-found strong { font-weight: 800; color: var(--alex-navy); } .movylo-alex-card-address { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 18px; font-size: 0.9375rem; line-height: 1.5; color: #64748b; } .movylo-alex-card-inner { padding: 18px 20px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 14px; margin-bottom: 18px; } .movylo-alex-card-title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: #1e293b; line-height: 1.25; } .movylo-alex-card-line { margin: 0 0 6px; font-size: 0.9375rem; color: #64748b; line-height: 1.45; } .movylo-alex-card-line:last-child { margin-bottom: 0; } .movylo-alex-card-line--rating { margin-top: 4px; margin-bottom: 0; } .movylo-alex-card-rating-star { color: #eab308; margin-right: 2px; } .movylo-alex-card-media { display: flex; gap: 14px; align-items: stretch; margin-bottom: 18px; } .movylo-alex-card-photo-wrap { flex-shrink: 0; width: 108px; height: 108px; border-radius: 12px; overflow: hidden; background: #e2e8f0; } .movylo-alex-card-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .movylo-alex-card-speak-hint { margin: 0; } .movylo-alex-card-speak-pill { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: none; border-radius: 999px; background: #0c2347; color: #fff; font-size: 0.98rem; font-weight: 600; font-family: inherit; line-height: 1.25; cursor: pointer; text-align: left; transition: background 0.2s ease, opacity 0.2s ease; } .movylo-alex-card-speak-pill:hover:not(:disabled) { background: #153a66; } /* ----- Widget ElevenLabs (creato su ) ----- */ elevenlabs-convai#movylo-alex-widget[style*="block"] { margin-top: 24px; } /* ----- Dropdown Google Places (.pac-*) ----- */ .pac-container { z-index: 999999 !important; margin-top: 8px !important; padding: 0 !important; border: 1px solid rgba(160, 196, 255, 0.65) !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 12px 40px rgba(12, 35, 71, 0.12), 0 4px 12px rgba(12, 35, 71, 0.06) !important; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; max-height: min(380px, 52vh) !important; overflow-x: hidden !important; overflow-y: auto !important; } .pac-item { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 0 10px !important; padding: 14px 38px 14px 16px !important; margin: 0 !important; border: none !important; border-bottom: 1px solid #eef1f4 !important; cursor: pointer !important; line-height: 1.4 !important; font-size: 13px !important; color: #5c6b7a !important; background: #fff !important; position: relative !important; } .pac-item:hover, .pac-item-selected { background: #f4f8fc !important; } .pac-item::after { content: "\2192"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; color: #b8c4d0; pointer-events: none; } .pac-icon { display: none !important; } .pac-item-query { flex: 1 1 calc(100% - 36px) !important; min-width: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: #0c2347 !important; letter-spacing: -0.01em !important; } .pac-matched { font-weight: 700 !important; color: var(--alex-blue) !important; } .pac-item > span:not(.pac-icon):not(.pac-item-query) { flex: 1 1 100% !important; margin: 5px 0 0 0 !important; font-size: 13px !important; font-weight: 400 !important; color: #6b7785 !important; line-height: 1.45 !important; } .pac-container:empty { display: none !important; } @media (max-width: 540px) { .movylo-alex-search-card { padding-left: 20px; padding-right: 20px; } .movylo-alex-card-media { flex-direction: column; } .movylo-alex-card-photo-wrap { width: 100%; height: 160px; } .movylo-alex-card-surface { padding-left: 18px; padding-right: 18px; } }