From 80990b70f34cbd80a9b30d80b191eb6c46fd73e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mark=20Poljan=C5=A1ek?= Date: Sun, 28 Sep 2025 09:24:11 -0400 Subject: [PATCH] sprememba strani in mobilna optimizacija --- chatbot.js | 253 ++++++++++------ index.html | 265 +++++++--------- style.css | 875 +++++++++++++++++++++++++---------------------------- 3 files changed, 682 insertions(+), 711 deletions(-) diff --git a/chatbot.js b/chatbot.js index ee34f3f..db4bba7 100644 --- a/chatbot.js +++ b/chatbot.js @@ -1,134 +1,193 @@ /* DEDICATED JAVASCRIPT FOR AIMOJSTER.SI CHATBOT WIDGET - Last Updated: 16. September 2025 (v8.0 - Final Production Version) + Last Updated: 16. September 2025 (v15.0 - Relaunch with Demo Center) Author: Gemini AI for AIMojster.si - This is the final, clean production version of the chatbot script. - It reliably creates, stores (per session), and sends a unique session ID with every user message, - ensuring that the n8n workflow functions correctly. + This script powers the interactive demo center on the redesigned website. + It includes logic to launch specific demo bots directly from the main page content, + ensuring a seamless and engaging user experience. */ document.addEventListener('DOMContentLoaded', function() { - // --- DOM ELEMENTI --- + //====================================================================== + // 1. KONFIGURACIJA IN IZBIRA DOM ELEMENTOV + //====================================================================== + const chatWidgetButton = document.getElementById('chat-widget-button'); const chatContainer = document.getElementById('chat-widget-container'); const closeChatBtn = document.getElementById('close-chat-btn'); + const chatHeaderTitle = document.getElementById('chat-header-title'); const chatMessagesContainer = document.getElementById('chat-messages'); const chatInputForm = document.getElementById('chat-input-form'); const chatInputField = document.getElementById('chat-input'); - - // --- KONFIGURACIJA --- - const N8N_WEBHOOK_URL = 'https://n8n.spletnimojster.si/webhook/joze/chat'; + const chatResetBtn = document.getElementById('chat-reset-btn'); + const demoLaunchButtons = document.querySelectorAll('.launch-demo-btn'); // NOVO: Gumbi v demo centru - // Preverimo, ali obstajajo vsi potrebni HTML elementi za delovanje. - if (!chatWidgetButton || !chatContainer || !chatInputForm) { - console.error("Chatbot HTML elements could not be found. The script will not initialize."); + if (!chatWidgetButton || !chatContainer || !chatInputForm || !chatHeaderTitle || !chatResetBtn) { + console.error("Critical chatbot HTML elements are missing. The script will not initialize."); return; } - // ====================================================================== // - // === UPRAVLJANJE S SEJO (SESSION ID MANAGEMENT) === // - // ====================================================================== // + const bots = { + main: { + name: "AI Mojster Asistent", + url: 'https://n8n.spletnimojster.si/webhook/013f5fb3-52bd-44bb-bc0a-41027d9916af/chat', + greeting: "Pozdravljeni! Sem AI asistent podjetja AIMojster. 🤖 Tukaj sem, da vam v živo pokažem, kaj zmorejo naši pametni boti. Izberite enega od spodnjih primerov in ga preizkusite!" + }, + rag: { + name: "Demo: Pekarna Novak", + url: 'https://n8n.spletnimojster.si/webhook/joze/chat', + greeting: "Dober dan in dobrodošli v Pekarni Novak! 🥐 Diši po sveže pečenem, kajne? Sem vaš virtualni pomočnik in poznam celotno našo ponudbo. Vprašajte me, kaj imamo danes dobrega, ali preverite alergene za kateri koli izdelek." + }, + calendar: { + name: "Demo: Potovalni Svetovalec", + url: 'https://n8n.spletnimojster.si/webhook/d0b3a15a-8d1c-437c-8523-00e108af14a4/chat', + greeting: "Pozdravljeni v agenciji Sončni Pobegi! ☀️ Pripravljeni na sanjsko potovanje? Povejte mi svoje želje – iščete sprostitev na plaži, aktivne počitnice v gorah ali raziskovanje mest? Skupaj bova našla popolno destinacijo za vas!" + }, + sales: { + name: "Demo: Fitnes Svetovalec", + url: 'https://n8n.spletnimojster.si/webhook/63f6f29f-54a2-4a6c-bf5e-0767a590a2a8/chat', + greeting: "Živjo, bodoči član! 💪 Sem vaš osebni AI svetovalec v fitnes centru FitLife. Tukaj sem, da vam pomagam najti popoln paket članstva. Pripravljeni, da začneva vašo fitnes pot?" + } + }; + + let activeBotKey = 'main'; + + // ====================================================================== + // 2. UPRAVLJANJE STANJA IN Vmesnika (UI) + // ====================================================================== + + function startConversation() { + chatContainer.classList.remove('hidden'); + activeBotKey = 'main'; + updateChatHeader(); + chatMessagesContainer.innerHTML = ''; + + showTypingIndicator(); + setTimeout(() => { + hideTypingIndicator(); + addMessageToUI(bots.main.greeting, 'bot'); + showBotSelectionButtons(); + }, 1200); + + chatResetBtn.classList.remove('visible'); + chatInputForm.classList.remove('hidden'); + chatInputField.focus(); + } + + function switchBot(botKey) { + if (!bots[botKey]) { + console.error(`Bot with key "${botKey}" does not exist.`); + return; + } + activeBotKey = botKey; + updateChatHeader(); + chatMessagesContainer.innerHTML = ''; + + showTypingIndicator(); + setTimeout(() => { + hideTypingIndicator(); + addMessageToUI(bots[activeBotKey].greeting, 'bot'); + }, 1200); + + chatResetBtn.classList.add('visible'); + chatInputForm.classList.remove('hidden'); + chatInputField.focus(); + } + + function updateChatHeader() { + chatHeaderTitle.textContent = bots[activeBotKey].name; + } + + function showBotSelectionButtons() { + const container = document.createElement('div'); + container.className = 'bot-selection-container'; + const buttonsToShow = [ + { key: 'rag', text: 'Preizkusi Bota za Pekarno' }, + { key: 'calendar', text: 'Preizkusi Potovalnega Agenta' }, + { key: 'sales', text: 'Preizkusi Fitnes Svetovalca' } + ]; + buttonsToShow.forEach(btnInfo => { + const button = document.createElement('button'); + button.className = 'bot-selection-btn'; + button.textContent = btnInfo.text; + button.addEventListener('click', () => switchBot(btnInfo.key)); + container.appendChild(button); + }); + chatMessagesContainer.appendChild(container); + } + + // ====================================================================== + // 3. UPRAVLJANJE S SEJO IN KOMUNIKACIJA Z N8N + // ====================================================================== - /** - * Zanesljivo pridobi ali ustvari unikaten Session ID za trenutni pogovor. - * Uporablja `sessionStorage`, kar pomeni, da ID obstane med osveževanjem strani, - * a se ponastavi, ko uporabnik zapre zavihek brskalnika. - * @returns {string} The unique session ID for the current chat session. - */ function getSessionId() { - const SESSION_KEY = 'aimojster_chatbot_session_id'; // Uporabimo unikatno ime ključa - let sessionId = sessionStorage.getItem(SESSION_KEY); - + let sessionId = sessionStorage.getItem('aimojster_multibot_session_id'); if (!sessionId) { - // crypto.randomUUID() je moderen, varen in standarden način za generiranje UUID-jev. sessionId = crypto.randomUUID(); - sessionStorage.setItem(SESSION_KEY, sessionId); + sessionStorage.setItem('aimojster_multibot_session_id', sessionId); } return sessionId; } - // ====================================================================== // - // === KOMUNIKACIJA Z N8N === // - // ====================================================================== // - - /** - * Sestavi in pošlje uporabnikovo sporočilo skupaj s session ID-jem na n8n webhook. - * @param {string} userMessage - Sporočilo, ki ga je vnesel uporabnik. - */ async function sendMessageToBot(userMessage) { showTypingIndicator(); - - // Pridobimo ali ustvarimo session ID za to sejo. - const currentSessionId = getSessionId(); - - // Sestavimo pravilen objekt (payload), ki ga n8n pričakuje. - const payload = { - sessionId: currentSessionId, - chatInput: userMessage, - action: "sendMessage" - }; + const currentBot = bots[activeBotKey]; + const webhookUrl = currentBot.url; + const sessionId = getSessionId(); + const payload = { sessionId, chatInput: userMessage, action: "sendMessage" }; try { - const response = await fetch(N8N_WEBHOOK_URL, { + const response = await fetch(webhookUrl, { method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, + headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); - - if (!response.ok) { - throw new Error(`Server returned status: ${response.status}`); - } - + if (!response.ok) throw new Error(`Server returned status: ${response.status}`); const data = await response.json(); const botReply = data.output; - + + hideTypingIndicator(); if (botReply) { - addBotMessageToUI(botReply); + addMessageToUI(botReply, 'bot'); } else { - // To se zgodi, če n8n vrne prazen odgovor ali napačno strukturo. - console.error("Response from bot was empty or in a malformed structure.", data); throw new Error("Malformed response from server."); } - } catch (error) { - console.error('Error communicating with the chatbot API:', error); - addBotMessageToUI("Oprostite, prišlo je do tehnične napake. Poskusite znova kasneje."); + console.error(`Error communicating with bot "${activeBotKey}":`, error); + hideTypingIndicator(); + addMessageToUI("Oprostite, prišlo je do tehnične napake. Poskusite znova kasneje.", 'bot'); } } - // ====================================================================== // - // === UPRAVLJANJE Z UI IN DOGODKI === // - // ====================================================================== // + // ====================================================================== + // 4. UI POMOČNIKI IN EVENT LISTENERS + // ====================================================================== - // --- Pomožne UI funkcije --- - function openChatWidget() { - chatContainer.classList.remove('hidden'); - chatInputField.focus(); - } - - function closeChatWidget() { - chatContainer.classList.add('hidden'); - } - function addMessageToUI(text, sender) { const messageElement = document.createElement('div'); messageElement.classList.add('chat-message', `${sender}-message`); - messageElement.textContent = text; + if (sender === 'bot') { + if (typeof marked !== 'undefined') { + messageElement.innerHTML = marked.parse(text); + } else { + messageElement.textContent = text; + } + } else { + messageElement.textContent = text; + } chatMessagesContainer.appendChild(messageElement); - chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight; + scrollToBottom(); } function showTypingIndicator() { if (chatMessagesContainer.querySelector('.typing-indicator')) return; const indicator = document.createElement('div'); indicator.classList.add('chat-message', 'bot-message', 'typing-indicator'); - indicator.innerHTML = '...'; + indicator.innerHTML = ''; chatMessagesContainer.appendChild(indicator); - chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight; + scrollToBottom(); } function hideTypingIndicator() { @@ -136,27 +195,45 @@ document.addEventListener('DOMContentLoaded', function() { if (indicator) indicator.remove(); } - const addUserMessageToUI = (message) => addMessageToUI(message, 'user'); - const addBotMessageToUI = (message) => { - hideTypingIndicator(); - addMessageToUI(message, 'bot'); - }; + function scrollToBottom() { + chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight; + } - // --- Glavni Event Listener za oddajo sporočila --- chatInputForm.addEventListener('submit', function(event) { event.preventDefault(); const userMessage = chatInputField.value.trim(); - if (userMessage) { - addUserMessageToUI(userMessage); + const selectionContainer = chatMessagesContainer.querySelector('.bot-selection-container'); + if (selectionContainer) { + selectionContainer.remove(); + } + addMessageToUI(userMessage, 'user'); sendMessageToBot(userMessage); chatInputField.value = ''; } }); - // --- Event Listenerji za odpiranje in zapiranje okna --- - chatWidgetButton.addEventListener('click', openChatWidget); - closeChatBtn.addEventListener('click', closeChatWidget); + // --- Glavni Event Listenerji --- - console.log("Chatbot v8.0 (Final Production) initialized successfully."); + // 1. Klik na plavajoči gumb (odpre glavnega bota) + chatWidgetButton.addEventListener('click', startConversation); + + // 2. Klik na gumb za zapiranje + closeChatBtn.addEventListener('click', () => chatContainer.classList.add('hidden')); + + // 3. Klik na gumb za vrnitev v glavni meni + chatResetBtn.addEventListener('click', startConversation); + + // 4. NOVO: Klik na gumbe v "Demo Centru" na strani + demoLaunchButtons.forEach(button => { + button.addEventListener('click', function() { + const botKey = this.dataset.botKey; // Preberemo ključ bota (npr. 'rag') + if (botKey) { + chatContainer.classList.remove('hidden'); // Najprej odpremo okno + switchBot(botKey); // Nato zaženemo izbranega bota + } + }); + }); + + console.log("Multi-Bot Demo Center (v15.0 - Relaunch) initialized successfully."); }); \ No newline at end of file diff --git a/index.html b/index.html index f3bc894..fff55ab 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ AI Mojster - AI Chatboti in Avtomatizacija za Vaše Podjetje - + @@ -45,7 +45,7 @@ - +
@@ -59,11 +59,10 @@
- Rešitve - Paketi + Demo Boti Prednosti + Paketi Postopek - O nas Kontakt 040 654 730 EN @@ -75,146 +74,91 @@

Preobrazite Svoje Poslovanje z Močjo Umetne Inteligence

Nudimo napredne AI chatbote in avtomatizacijo po meri, ki znižujejo stroške, povečujejo prodajo in zagotavljajo podporo 24/7.

-
-
- - Podpora 24/7 -
-
- - Povečana Prodaja -
-
- - Avtomatizacija Procesov -
-
- - Znižanje Stroškov -
-
- Odkrijte Svojo AI Rešitev + Preizkusite Demo Bote v Živo
-
+ +
-

Naše Rešitve za Vaš Uspeh

-

Specializirani smo za dve ključni področji, ki prinašata takojšnje in merljive rezultate za vaše podjetje.

-
-
-

AI Chatboti po Meri

-

Pozabite na generične odgovore. Razvijemo inteligentne chatbote, ki razumejo vaše stranke, odgovarjajo na njihova vprašanja v realnem času, zbirajo povpraševanja in jih vodijo skozi nakupni proces. Izboljšajte uporabniško izkušnjo in pretvorite obiskovalce v zveste stranke.

+

Doživite Moč AI v Akciji

+

Ne verjemite nam na besedo. Preizkusite naše demo bote in se sami prepričajte, kako lahko AI pomaga vašemu poslu.

+
+ +
+
+

Bot za Pekarno (RAG)

+
+ Za kaj gre? +

Avtomatsko odgovarja na vprašanja strank o ponudbi, cenah in alergenih, 24/7, na podlagi vaše baze znanja.

+ Kako deluje? +

Bot se nauči vse informacije iz dokumenta, ki nam ga posredujete. Ko stranka postavi vprašanje, bot v trenutku poišče in postreže z najbolj relevantnim odgovorom.

+
+
-
-

AI Avtomatizacija Procesov

-

Osvobodite svojo ekipo ponavljajočih se nalog. Povežemo vaše aplikacije (CRM, e-pošta, socialna omrežja) v pametne delovne tokove, ki delujejo samodejno. Od avtomatiziranega pošiljanja ponudb do sinhronizacije podatkov – prihranite čas, zmanjšajte napake in se osredotočite na rast.

-
-
-
-
-
-

Izberite Paket, ki Poganja Vašo Rast

-

Pregledne cene, brez skritih stroškov. Naložba v AI se vam bo večkratno povrnila.

-
- Mesečni najem - - Letni najem Prihranite do 20% -
-
-
-

AI Asistent

-

Za podjetja, ki želijo avtomatizirati podporo in zbirati kontakte.

-
-
39 €/mesec
- 47,58 € z DDV + +
+
+

Potovalni Svetovalec

+
+ Za kaj gre? +

Interaktivno svetuje uporabnikom in jim pomaga najti popolno potovalno destinacijo glede na njihove želje, proračun in interese.

+ Kako deluje? +

Bot skozi pogovor zbira ključne informacije (tip oddiha, cena, trajanje) in na podlagi tega iz baze znanja priporoči najboljše možnosti, kot bi to storil pravi agent.

+
+
-
    -
  • Chatbot z odgovori na pogosta vprašanja
    • -
  • Zbiranje kontaktnih podatkov (leadov)
    • -
  • Namestitev na vašo spletno stran
    • -
  • Osnovno poročanje o pogovorih
    • -
  • E-mail podpora
    • -
- Izberi Asistenta -
-
-
Najbolj priljubljen
-

AI Strateški Partner

-

Za podjetja, ki želijo integracijo, personalizacijo in večjo prodajo.

-
-
89 €/mesec
- 108,58 € z DDV + +
+
+

Fitnes Svetovalec

+
+ Za kaj gre? +

Pomaga potencialnim članom izbrati pravi fitnes paket in na koncu zbere njihov kontakt za pošiljanje personalizirane ponudbe.

+ Kako deluje? +

Bot skozi nekaj ciljanih vprašanj o urniku in interesih uporabnika kvalificira in mu priporoči enega od treh paketov. Na koncu uporabi orodje za pošiljanje e-maila.

+
+
-
    -
  • Vse iz paketa AI Asistent
    • -
  • Integracija s CRM sistemom
    • -
  • Napredni pogovorni scenariji
    • -
  • Kvalifikacija potencialnih strank
    • -
  • Možnost večjezične podpore
    • -
  • Telefonska podpora
    • -
- Izberi Partnerja -
- -
-

AI Avtomatizacija

-

Za podjetja, ki želijo celovito avtomatizacijo internih in zunanjih procesov.

-
-
149 €/mesec
- 181,78 € z DDV -
-
    -
  • Vse iz paketa AI Partner
    • -
  • Kompleksni avtomatizacijski tokovi (n8n)
    • -
  • API integracije po meri
    • -
  • Povezava z e-poštnimi orodji
    • -
  • Avtomatizirano upravljanje s podatki
    • -
  • Prioritetna tehnična podpora
    • -
- Izberi Avtomatizacijo
-

Prednosti Umetne Inteligence za Vas

-

To niso le tehnične rešitve. To so konkretne koristi, ki jih bo vaše podjetje občutilo takoj.

+

Kaj To Pomeni za Vas?

+

To niso le tehnične rešitve. To so konkretne poslovne koristi, ki jih boste občutili takoj.

Neprekinjena Dosegljivost 24/7

-

Vaš AI asistent nikoli ne spi. Strankam je na voljo podnevi in ponoči, med vikendi in prazniki, kar zagotavlja takojšnjo podporo in večje zadovoljstvo.

+

Kot ste videli pri Botu za Pekarno, vaš AI asistent nikoli ne spi. Strankam je na voljo podnevi in ponoči, kar zagotavlja takojšnjo podporo in večje zadovoljstvo.

Takojšnji Prihranki

-

Zmanjšajte stroške za podporo strankam za do 30%. Avtomatizirajte odgovore na ponavljajoča se vprašanja in sprostite svojo ekipo za naloge, ki prinašajo večjo vrednost.

+

Avtomatizirajte odgovore na ponavljajoča se vprašanja in sprostite svojo ekipo za naloge, ki prinašajo večjo vrednost – zmanjšajte stroške za podporo strankam za do 30%.

Povečana Prodaja in Leadi

-

AI chatbot aktivno nagovarja obiskovalce, jih kvalificira in zbira njihove podatke. Nikoli več ne zamudite priložnosti za posel, tudi ko niste na voljo.

+

Fitnes Svetovalec je odličen primer, kako AI aktivno nagovarja obiskovalce, jih kvalificira in zbira njihove podatke. Nikoli več ne zamudite priložnosti za posel.

-

Inteligentno Zbiranje Podatkov

-

Spoznajte svoje stranke bolje kot kdajkoli prej. Chatbot zbira ključne informacije o njihovih željah in težavah, kar vam omogoča sprejemanje pametnejših poslovnih odločitev.

+

Inteligentno Svetovanje

+

Potovalni Agent dokazuje, da bot ni le za odgovore, ampak lahko uporabnike vodi skozi kompleksne odločitve in jim ponudi personalizirane rešitve, ki povečajo konverzije.

Nič Več Ponavljajočega Dela

-

Ročno prepisovanje podatkov, pošiljanje istih e-mailov in ostala dolgočasna opravila postanejo preteklost. Osredotočite se na tisto, kar je resnično pomembno – rast vašega posla.

+

Ročno prepisovanje podatkov in pošiljanje istih e-mailov postaneta preteklost. Osredotočite se na tisto, kar je resnično pomembno – rast vašega posla.

Izjemna Uporabniška Izkušnja

-

Stranke cenijo hitre in natančne odgovore. Z AI zagotovite dosledno in profesionalno komunikacijo, ki gradi zaupanje in lojalnost vaši blagovni znamki.

+

Stranke cenijo hitre, natančne in personalizirane odgovore. Z AI zagotovite dosledno in profesionalno komunikacijo, ki gradi zaupanje in lojalnost.

@@ -222,7 +166,7 @@
-

Od Ideje do Rezultatov v 4 Korakih

+

Kako Deluje? Naš Proces v 4 Korakih

Naš proces je preprost, pregleden in osredotočen na doseganje vaših ciljev.

@@ -249,23 +193,54 @@
-
+
+

Izberite Paket, ki Poganja Vašo Rast

+

Pregledne cene, brez skritih stroškov. Naložba v AI se vam bo večkratno povrnila.

+
+
+

AI Asistent

+

Za podjetja, ki želijo avtomatizirati podporo in zbirati kontakte.

+
    +
  • Chatbot z odgovori na pogosta vprašanja (RAG)
    • +
  • Zbiranje kontaktnih podatkov (leadov)
    • +
  • Namestitev na vašo spletno stran
    • +
+
+
+
Najbolj priljubljen
+

AI Strateški Partner

+

Za podjetja, ki želijo integracijo, personalizacijo in večjo prodajo.

+
    +
  • Vse iz paketa AI Asistent
    • +
  • Integracija s CRM sistemom ali koledarjem
    • +
  • Napredni pogovorni scenariji in prodajni lijaki
    • +
+
+
+

AI Avtomatizacija

+

Za podjetja, ki želijo celovito avtomatizacijo procesov.

+
    +
  • Vse iz paketa AI Partner
    • +
  • Kompleksni avtomatizacijski tokovi (n8n)
    • +
  • API integracije po meri in povezava z več sistemi
    • +
+
+
+
+

Cene so odvisne od kompleksnosti. Za personalizirano ponudbo nas kontaktirajte.

+ Pridobi Ponudbo +
+
+
+ +
+

Kdo Smo?

Vaši Strokovnjaki za Umetno Inteligenco

Smo ekipa navdušencev nad tehnologijo, ki verjame, da umetna inteligenca ni več prihodnost, ampak sedanjost. Naše poslanstvo je, da napredne AI rešitve približamo podjetjem vseh velikosti in jim pomagamo postati učinkovitejši, bolj konkurenčni in uspešnejši.

- -

Zaupajo nam uspešni:

- - - Naredimo korak naprej skupaj!
@@ -278,11 +253,6 @@

Razvoj po Meri

Vsak chatbot in avtomatizacija sta 100% prilagojena vašemu poslu in ciljem.

-
- -

Zanesljiva Podpora

-

Smo vaš dolgoročni partner. Nudimo redno vzdrževanje, optimizacijo in tehnično podporo.

-
@@ -305,15 +275,6 @@
-
- - -
@@ -335,9 +296,10 @@

Navigacija

- Rešitve - Paketi + Demo Boti Prednosti + Paketi + Postopek O nas Kontakt
@@ -363,35 +325,28 @@ + - + - \ No newline at end of file + diff --git a/style.css b/style.css index 12c7a04..df27ca2 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,6 @@ /* STYLESHEET FOR AIMOJSTER.SI - Last Updated: 16. September 2025 + Last Updated: 16. September 2025 (v2.1 - Full Styles & Fixes) Author: Gemini AI for AIMojster.si */ @@ -30,6 +30,11 @@ box-sizing: border-box; } +html, +body { + overflow-x: hidden; +} + html { scroll-behavior: smooth; } @@ -60,27 +65,27 @@ body { align-items: center; } -.logo { - height: 20px; +.logo-header { + height: 20px; /* POPRAVEK: Velikost logotipa v glavi */ display: flex; align-items: center; } -.logo a { +.logo-header a { height: 100%; display: flex; align-items: center; text-decoration: none; } -.logo img { +.logo-header img { height: 100%; width: auto; } .nav-links { display: flex; - gap: 2rem; + gap: clamp(1.25rem, 2.5vw, 2rem); align-items: center; } @@ -144,91 +149,64 @@ body { box-shadow: var(--shadow); } +/* --- Mobile Menu & Responsive --- */ +.menu-toggle { + display: none; + font-size: 1.5rem; + color: var(--text-color); + cursor: pointer; + z-index: 1001; +} + /* --- Hero Section --- */ .hero { - padding: 8rem 1rem 4rem; + padding: clamp(6rem, 12vw, 8rem) 1.5rem clamp(3rem, 6vw, 4rem); text-align: center; background: linear-gradient(rgba(29, 43, 72, 0.7), rgba(29, 43, 72, 0.6)), url('images/hero-bg-ai.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; - min-height: 90vh; + min-height: 85vh; display: flex; flex-direction: column; justify-content: center; align-items: center; - gap: 2.5rem; + gap: clamp(1.5rem, 4vw, 2.5rem); position: relative; overflow: hidden; } .hero h1 { - font-size: 4.5rem; + font-size: clamp(2.6rem, 5.5vw, 4.5rem); max-width: 900px; margin: 0 auto; - line-height: 1.2; + line-height: 1.15; color: white; font-weight: 800; - letter-spacing: -1px; - animation: fadeInUp 1s ease-out; + letter-spacing: -0.5px; } .hero-text { max-width: 800px; margin: 0 auto; - font-size: 1.5rem; + font-size: clamp(1.05rem, 2.25vw, 1.5rem); color: rgba(255, 255, 255, 0.9); line-height: 1.8; font-weight: 400; - animation: fadeInUp 1s ease-out 0.2s backwards; -} - -.hero-features { - display: flex; - gap: 2rem; - margin-top: 2rem; - flex-wrap: wrap; - justify-content: center; - animation: fadeInUp 1s ease-out 0.6s backwards; -} - -.hero-feature { - display: flex; - align-items: center; - gap: 0.75rem; - color: var(--text-color); - font-weight: 500; - padding: 0.75rem 1.5rem; - background: rgba(255, 255, 255, 0.95); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 1rem; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(10px); - transition: all 0.3s ease; -} - -.hero-feature:hover { - transform: translateY(-5px) scale(1.05); - box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15); -} - -.hero-feature i { - color: var(--primary-color); - font-size: 1.5rem; } .hero .cta-button { - font-size: 1.2rem; - padding: 1.2rem 3.5rem; + font-size: clamp(1rem, 2.2vw, 1.2rem); + padding: clamp(1rem, 2.5vw, 1.2rem) clamp(2.5rem, 6vw, 3.5rem); border-radius: 50px; background: var(--gradient-primary); color: white; text-decoration: none; box-shadow: var(--shadow); - animation: fadeInUp 1s ease-out 0.4s backwards; transition: all 0.3s ease; border: none; font-weight: 600; + margin-top: 1rem; } .hero .cta-button:hover { @@ -240,7 +218,7 @@ body { /* --- General Section Styling --- */ section { - padding: 6rem 1.5rem; + padding: clamp(4rem, 7vw, 6rem) 1.5rem; } .container { @@ -250,8 +228,8 @@ section { h2 { text-align: center; - margin-bottom: 1.5rem; - font-size: 2.8rem; + margin-bottom: clamp(1rem, 2.5vw, 1.5rem); + font-size: clamp(2rem, 4vw, 2.8rem); color: var(--text-color); font-weight: 700; } @@ -259,87 +237,18 @@ h2 { .section-subtitle { text-align: center; color: var(--light-text); - font-size: 1.2rem; + font-size: clamp(1rem, 2vw, 1.2rem); max-width: 700px; - margin: 0 auto 4rem; + margin: 0 auto clamp(2rem, 5vw, 4rem); line-height: 1.6; } - -/* --- Packages Section --- */ -.packages { - background: var(--light-background); +/* --- NOVO: Demo Center Section --- */ +.demos { + background-color: var(--background); } -.billing-toggle { - text-align: center; - margin-bottom: 3rem; - display: flex; - align-items: center; - justify-content: center; - gap: 1rem; -} - -.billing-toggle span { - font-weight: 500; -} - -.toggle-switch { - position: relative; - display: inline-block; - width: 60px; - height: 30px; -} - -.toggle-switch input { - opacity: 0; - width: 0; - height: 0; -} - -.toggle-slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: var(--secondary-color); - transition: .4s; - border-radius: 34px; -} - -.toggle-slider:before { - position: absolute; - content: ""; - height: 22px; - width: 22px; - left: 4px; - bottom: 4px; - background-color: white; - transition: .4s; - border-radius: 50%; -} - -input:checked + .toggle-slider { - background: var(--gradient-accent); -} - -input:checked + .toggle-slider:before { - transform: translateX(30px); -} - -.yearly-discount { - background: var(--gradient-accent); - color: var(--text-color); - padding: 0.4rem 1rem; - border-radius: 1rem; - font-size: 0.8rem; - margin-left: 0.5rem; - font-weight: 600; -} - -.package-grid { +.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; @@ -347,91 +256,56 @@ input:checked + .toggle-slider:before { margin: 0 auto; } -.package-card { - background: white; +.demo-card { + background: var(--light-background); border: 1px solid var(--border-color); border-radius: 1.5rem; padding: 2.5rem 2rem; text-align: center; - position: relative; - transition: all 0.3s ease; display: flex; flex-direction: column; + transition: all 0.3s ease-in-out; box-shadow: var(--shadow); } -.package-card:hover { +.demo-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: var(--primary-color); } -.package-card h3 { - font-size: 1.8rem; +.demo-card-icon { + font-size: 3rem; + color: var(--primary-color); + margin-bottom: 1.5rem; + height: 48px; +} + +.demo-card h3 { + font-size: 1.6rem; + margin-bottom: 1rem; color: var(--text-color); } -.package-card .subtitle { - font-size: 1.1rem; - color: var(--light-text); - margin: 0.5rem 0 1rem; - min-height: 44px; /* Align heights */ -} - -.price-period { - margin: 1rem 0; -} - -.price { - font-size: 3.5rem; - font-weight: 700; - color: var(--primary-color); - line-height: 1; -} - -.price span { - font-size: 1.2rem; - color: var(--light-text); - margin-left: 0.3rem; - font-weight: 400; -} - -.vat-price { - font-size: 0.9rem; - color: var(--light-text); - display: block; - margin-top: 0.5rem; -} - -.package-card ul { - list-style: none; - margin: 1.5rem 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 1rem; - text-align: left; +.demo-description { flex-grow: 1; } -.package-card li { - font-size: 1rem; +.demo-description .description-title { + font-weight: 600; color: var(--text-color); - display: flex; - align-items: flex-start; - gap: 0.75rem; - line-height: 1.4; + margin-top: 1rem; + margin-bottom: 0.5rem; + display: block; } -.package-card li::before { - content: "✓"; - color: var(--success-color); - font-weight: bold; - font-size: 1.2rem; - min-width: 20px; +.demo-description p { + color: var(--light-text); + font-size: 1rem; + line-height: 1.6; } -.package-button { +.launch-demo-btn { display: inline-block; padding: 1rem 2.5rem; background: var(--gradient-primary); @@ -441,71 +315,46 @@ input:checked + .toggle-slider:before { font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; - margin-top: auto; + margin-top: 2rem; border: none; + cursor: pointer; } -.package-button:hover { +.launch-demo-btn:hover { background: var(--gradient-accent); color: var(--text-color); transform: translateY(-2px); box-shadow: var(--shadow); } -.package-card.featured { - border: 2px solid var(--primary-color); - transform: scale(1.05); - z-index: 2; -} - -.package-card.featured .package-button { - background: var(--gradient-primary); -} - -.popular-badge { - position: absolute; - top: -15px; - left: 50%; - transform: translateX(-50%); - background: var(--gradient-primary); - color: white; - padding: 0.7rem 2rem; - border-radius: 50px; - font-size: 1rem; - font-weight: 600; - white-space: nowrap; - box-shadow: var(--shadow); -} - -/* --- Why Us / Benefits Section --- */ +/* --- Benefits Section ("Why Us") --- */ .why-us { - background: var(--background); + background: var(--light-background); } .benefits-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 2rem; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: clamp(1.5rem, 3vw, 2rem); } .benefit-card { - background: var(--light-background); + background: white; border: 1px solid var(--border-color); border-radius: 1.5rem; - padding: 2rem; + padding: clamp(1.75rem, 3vw, 2rem); transition: all 0.3s ease; } .benefit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); - background: white; } .benefit-icon { width: 70px; height: 70px; - background: white; + background: var(--light-background); border-radius: 50%; display: flex; align-items: center; @@ -533,7 +382,7 @@ input:checked + .toggle-slider:before { /* --- Process Section --- */ .process { - background: var(--light-background); + background: var(--background); } .process-steps { @@ -579,6 +428,82 @@ input:checked + .toggle-slider:before { color: var(--light-text); } +/* --- Packages Section --- */ +.packages { + background: var(--light-background); +} + +.package-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.package-card { + background: white; + border: 1px solid var(--border-color); + border-radius: 1.5rem; + padding: 2.5rem 2rem; + text-align: center; + position: relative; + transition: all 0.3s ease; + display: flex; + flex-direction: column; + box-shadow: var(--shadow); +} + +.package-card:hover { + transform: translateY(-10px); + box-shadow: var(--shadow-lg); + border-color: var(--primary-color); +} + +.package-card h3 { + font-size: 1.8rem; + color: var(--text-color); +} + +.package-card .subtitle { + font-size: 1.1rem; + color: var(--light-text); + margin: 0.5rem 0 1rem; + min-height: 44px; /* Align heights */ +} + +.package-features { + list-style: none; + padding: 0; + margin: 1.5rem 0; + text-align: left; + flex-grow: 1; +} + +.package-features li { + margin-bottom: 0.75rem; + display: flex; + align-items: flex-start; + gap: 0.75rem; +} + +.package-features li::before { + content: "✓"; + color: var(--success-color); + font-weight: bold; + margin-top: 2px; +} + +.contact-for-price { + text-align: center; + margin-top: 3rem; +} + +.contact-for-price p { + color: var(--light-text); + margin-bottom: 1.5rem; +} + /* --- About Section --- */ .about { background: white; @@ -604,38 +529,26 @@ input:checked + .toggle-slider:before { margin-bottom: 1.5rem; } -.client-list { - list-style: none; - padding: 0; - margin-top: 2rem; +.about-features { + display: grid; + gap: 1.5rem; } -.client-list li { - margin-bottom: 1rem; - font-size: 1.1rem; +.about-feature { + background-color: var(--light-background); + padding: 1.5rem; + border-radius: 1rem; } -.client-list a { +.about-feature i { + font-size: 2rem; color: var(--primary-color); - text-decoration: none; - font-weight: 600; + margin-bottom: 1rem; } -.about-cta { - display: inline-block; - margin-top: 1.5rem; - padding: 1rem 2rem; - background: var(--gradient-primary); - color: white; - text-decoration: none; - border-radius: 50px; - font-weight: 600; - transition: all 0.3s ease; -} - -.about-cta:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-lg); +.about-feature h4 { + font-size: 1.2rem; + margin-bottom: 0.5rem; } /* --- Contact Section --- */ @@ -643,31 +556,6 @@ input:checked + .toggle-slider:before { background: var(--light-background); } -.contact-text { - max-width: 600px; - margin: 0 auto 2rem; - font-size: 1.2rem; - line-height: 1.8; - color: var(--light-text); -} - -.contact-options { - text-align: center; - margin-bottom: 2rem; - color: var(--light-text); -} - -.contact-options a { - color: var(--primary-color); - text-decoration: none; - font-weight: 500; - transition: color 0.3s ease; -} - -.contact-options a:hover { - color: var(--accent-color); -} - .contact-form { max-width: 600px; margin: 0 auto; @@ -687,7 +575,6 @@ input:checked + .toggle-slider:before { .form-group label { display: block; margin-bottom: 0.5rem; - color: var(--text-color); font-weight: 500; } @@ -699,18 +586,6 @@ input:checked + .toggle-slider:before { border: 1px solid var(--border-color); border-radius: 12px; font-size: 1rem; - color: var(--text-color); - background: var(--light-background); - transition: all 0.3s ease; -} - -.form-group input:focus, -.form-group select:focus, -.form-group textarea:focus { - outline: none; - border-color: var(--primary-color); - box-shadow: 0 0 0 3px rgba(123, 45, 255, 0.1); - background: white; } .form-group textarea { @@ -725,20 +600,9 @@ input:checked + .toggle-slider:before { border: none; border-radius: 12px; font-weight: 600; - font-size: 1.1rem; cursor: pointer; - transition: all 0.3s ease; - margin-top: 1rem; } -.submit-button:hover { - background: var(--gradient-accent); - color: var(--text-color); - transform: translateY(-2px); - box-shadow: var(--shadow); -} - - /* --- Footer --- */ .footer { background: var(--text-color); @@ -756,51 +620,23 @@ input:checked + .toggle-slider:before { } .footer-logo img { - height: 20px; + height: 16px; /* POPRAVEK: Velikost logotipa v nogi */ margin-bottom: 1rem; } -.footer-logo p { - color: rgba(255, 255, 255, 0.8); -} - .footer h4 { color: white; font-size: 1.1rem; margin-bottom: 1.5rem; - font-weight: 600; -} - -.footer-links { - display: flex; - flex-direction: column; - gap: 0.75rem; } .footer-links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; - transition: color 0.3s ease; -} - -.footer-links a:hover { - color: var(--accent-color); -} - -.contact-methods a { - color: rgba(255, 255, 255, 0.8); - text-decoration: none; - transition: color 0.3s ease; - display: flex; - align-items: center; - gap: 0.75rem; + display: block; margin-bottom: 0.75rem; } -.contact-methods a:hover { - color: var(--accent-color); -} - .footer-bottom { max-width: 1200px; margin: 0 auto; @@ -808,24 +644,6 @@ input:checked + .toggle-slider:before { border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; - align-items: center; - color: rgba(255, 255, 255, 0.6); - font-size: 0.9rem; -} - -.legal-links { - display: flex; - gap: 2rem; -} - -.legal-links a { - color: rgba(255, 255, 255, 0.6); - text-decoration: none; - transition: color 0.3s ease; -} - -.legal-links a:hover { - color: white; } /* --- Chatbot Widget --- */ @@ -844,17 +662,16 @@ input:checked + .toggle-slider:before { align-items: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); z-index: 998; - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: transform 0.3s ease; } #chat-widget-button:hover { transform: scale(1.1); - box-shadow: var(--shadow-lg); } -#chat-widget-button img { - width: 32px; - height: 32px; +#chat-widget-button i { + font-size: 28px; + color: white; } #chat-widget-container { @@ -872,14 +689,10 @@ input:checked + .toggle-slider:before { flex-direction: column; overflow: hidden; z-index: 999; - transform-origin: bottom right; - transition: transform 0.3s ease, opacity 0.3s ease; } #chat-widget-container.hidden { - transform: scale(0); - opacity: 0; - pointer-events: none; + display: none; } .chat-header { @@ -888,13 +701,6 @@ input:checked + .toggle-slider:before { padding: 1rem; display: flex; justify-content: space-between; - align-items: center; -} - -.chat-header h3 { - font-size: 1.1rem; - font-weight: 600; - margin: 0; } #close-chat-btn { @@ -903,56 +709,53 @@ input:checked + .toggle-slider:before { color: white; font-size: 1.8rem; cursor: pointer; - line-height: 1; - opacity: 0.8; - transition: opacity 0.2s ease; -} - -#close-chat-btn:hover { - opacity: 1; } #chat-messages { flex-grow: 1; padding: 1rem; overflow-y: auto; - display: flex; - flex-direction: column; - gap: 0.75rem; } .chat-message { padding: 0.75rem 1rem; border-radius: 18px; - max-width: 80%; - line-height: 1.5; + max-width: 85%; + margin-bottom: 0.75rem; } .bot-message { background-color: var(--light-background); - color: var(--text-color); - border-bottom-left-radius: 4px; align-self: flex-start; } .user-message { background-color: var(--primary-color); color: white; - border-bottom-right-radius: 4px; align-self: flex-end; } -.typing-indicator { - align-self: flex-start; +.chat-footer { + padding: 0.5rem 1rem 1rem 1rem; + border-top: 1px solid var(--border-color); +} + +#chat-reset-btn { + background: none; + border: none; color: var(--light-text); - font-style: italic; - font-size: 0.9rem; + cursor: pointer; + font-size: 0.8rem; + margin: 0 auto 8px; + display: none; +} + +#chat-reset-btn.visible { + display: block; } #chat-input-form { display: flex; - padding: 1rem; - border-top: 1px solid var(--border-color); } #chat-input { @@ -960,13 +763,6 @@ input:checked + .toggle-slider:before { border: 1px solid var(--border-color); border-radius: 50px; padding: 0.75rem 1rem; - font-size: 1rem; - transition: border-color 0.2s; -} - -#chat-input:focus { - outline: none; - border-color: var(--primary-color); } #chat-input-form button { @@ -977,60 +773,115 @@ input:checked + .toggle-slider:before { width: 45px; height: 45px; margin-left: 0.5rem; - cursor: pointer; - font-size: 1.2rem; - transition: background-color 0.2s; } -#chat-input-form button:hover { - background-color: var(--secondary-color); +.bot-selection-container { + display: flex; + flex-direction: column; + gap: 10px; + margin: 15px 0; } - -/* --- Mobile Menu & Responsive --- */ -.menu-toggle { - display: none; - font-size: 1.5rem; - color: var(--text-color); +.bot-selection-btn { + background-color: white; + border: 1px solid var(--primary-color); + color: var(--primary-color); + padding: 12px 20px; + border-radius: 25px; cursor: pointer; } +.bot-selection-btn:hover { + background-color: var(--primary-color); + color: white; +} + +/* --- Responsive Design --- */ +@media (max-width: 1200px) { + .navbar { + padding: 1rem 1.25rem; + } + + .demo-grid, + .package-grid { + grid-template-columns: repeat(2, minmax(260px, 1fr)); + gap: 1.75rem; + } + + .footer-content { + grid-template-columns: repeat(2, minmax(220px, 1fr)); + gap: 3rem; + } +} + +@media (max-width: 1024px) { + section { + padding: clamp(3.5rem, 6vw, 5rem) 1.25rem; + } + + .hero { + min-height: 70vh; + padding-top: clamp(5rem, 10vw, 6.5rem); + } + + .hero h1 { + max-width: 760px; + } + + .demo-grid, + .package-grid { + gap: 1.5rem; + } + + .benefits-grid { + gap: 1.5rem; + } + + .about-content { + grid-template-columns: 1fr; + gap: 3rem; + text-align: center; + } + + .about-feature { + text-align: left; + } + + .process-steps { + gap: 1.5rem; + } +} + @media (max-width: 992px) { + .demo-grid, .package-grid { - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, minmax(240px, 1fr)); } - .package-card.featured { - grid-column: 1 / -1; - max-width: 500px; - margin: 0 auto; - transform: scale(1); + + .package-card { + padding: 2.25rem 1.75rem; + } + + .footer-content { + gap: 2.75rem; } } @media (max-width: 768px) { - body { - font-size: 16px; - } - - h2 { - font-size: 2.2rem; - } - - .section-subtitle { - font-size: 1.1rem; + section { + padding: clamp(2.5rem, 9vw, 3.5rem) 1.25rem; } .navbar { - padding: 1rem; + padding: 0.75rem 1.25rem; } .menu-toggle { display: block; - z-index: 1001; } .nav-links { - display: flex; + display: none; position: fixed; top: 0; left: 0; @@ -1047,81 +898,169 @@ input:checked + .toggle-slider:before { } .nav-links.active { + display: flex; transform: translateX(0); } .hero { - padding: 6rem 1rem 4rem; - min-height: 80vh; + min-height: auto; + padding-top: clamp(5rem, 12vw, 6rem); + padding-bottom: clamp(2.5rem, 8vw, 3.5rem); } - + .hero h1 { - font-size: 2.5rem; + font-size: clamp(2.2rem, 7vw, 2.5rem); } .hero-text { - font-size: 1.2rem; - } - - .hero-features { - flex-direction: column; - gap: 1rem; - } - - .package-grid { - grid-template-columns: 1fr; - } - - .package-card.featured { - max-width: 100%; - transform: scale(1); - } - - .benefits-grid { - grid-template-columns: 1fr; + font-size: 1.1rem; } + .demo-grid, + .package-grid, + .benefits-grid, .process-steps { grid-template-columns: 1fr; } - .about-content { - grid-template-columns: 1fr; + .process-steps { + gap: 1.25rem; + } + + .step { + padding: 1.75rem 1.5rem; + } + + .contact-form { + padding: 2.25rem 1.75rem; } .footer-content { grid-template-columns: 1fr; text-align: center; + gap: 2.5rem; } .footer-bottom { flex-direction: column; - gap: 1rem; - } - - #chat-widget-container { - width: 100%; - height: 100%; - bottom: 0; - right: 0; - border-radius: 0; - max-height: 100%; + gap: 1.25rem; + align-items: center; + text-align: center; } #chat-widget-button { bottom: 20px; right: 20px; + width: 56px; + height: 56px; + } + + #chat-widget-container { + bottom: 85px; + right: 16px; + width: calc(100vw - 32px); + max-width: 420px; + height: 65vh; + max-height: 520px; + } +} + +@media (max-width: 600px) { + .hero { + padding-top: clamp(4.5rem, 14vw, 5.5rem); + } + + .hero-text { + font-size: 1.05rem; + } + + section { + padding: clamp(2rem, 8vw, 3rem) 1.25rem; + } + + .benefits-grid { + gap: 1.5rem; + } + + .benefit-card { + padding: 1.75rem 1.5rem; + } + + .contact-form { + padding: 2rem 1.5rem; + gap: 1.25rem; + } + + .submit-button { + width: 100%; + } + + .footer-bottom { + gap: 1rem; + } +} + +@media (max-width: 480px) { + .hero { + gap: 1.5rem; + background-position: center; + } + + .hero h1 { + font-size: clamp(2rem, 8vw, 2.3rem); + letter-spacing: -0.25px; + } + + .hero .cta-button { + width: 100%; + padding: 1rem 1.5rem; + } + + .language-switch { + padding: 0.4rem 0.75rem; + } + + .benefit-card, + .package-card, + .about-feature, + .step { + padding: 1.5rem; + } + + .benefit-icon { + width: 56px; + height: 56px; + margin-bottom: 1rem; + } + + #chat-widget-container { + bottom: 75px; + right: 12px; + width: calc(100vw - 24px); + height: 60vh; + max-height: none; + } + + #chat-widget-button { + bottom: 16px; + right: 16px; } } /* --- Animations --- */ -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} \ No newline at end of file +.typing-indicator span { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + background-color: var(--light-text); + margin: 0 2px; + animation: bounce 1.4s infinite ease-in-out both; +} +.typing-indicator span:nth-child(1) { animation-delay: -0.32s; } +.typing-indicator span:nth-child(2) { animation-delay: -0.16s; } + +@keyframes bounce { + 0%, 80%, 100% { transform: scale(0); } + 40% { transform: scale(1.0); } +}