.current-menu-item > a, .current-menu-parent > a, .current_page_item > a, .current_page_parent > a { color: #26b5b9; /* The desired color */ font-weight: bold; border-bottom: 2px solid #26b5b9; } .o-timeline-container { box-shadow: none !important; /* Removes any shadow */ border: none !important; /* Removes the frame */ background-color: transparent !important; /* Makes the background color transparent */ padding: 0 !important; /* Removes the inner margin */ margin: 0 !important; /* Removes the outer margin */ } .wp-block-themeisle-blocks-timeline-item { background-color: transparent !important; /* Makes the background of timeline elements transparent */ border: none !important; /* Removes the frame of timeline elements */ box-shadow: none !important; /* Removes the shadow of timeline elements */ } .o-timeline-content { background-color: transparent !important; /* Makes the background of the content transparent */ box-shadow: none !important; /* Removes the shadow */ border: none !important; /* Removes the frame */ padding: 0 !important; /* Removes unnecessary padding */ } .wp-block-themeisle-blocks-timeline-item { margin-bottom: 20px !important; /* Bottom margin between elements */ padding: 40px !important; /* Inner space around elements */ } .wp-block-themeisle-blocks-timeline-item { margin-bottom: 20px !important; /* Bottom margin between elements */ padding: 20px !important; /* Padding around elements */ } .o-timeline-content { padding-left: 40px !important; /* Increases the left padding between text and icon */ } .o-timeline-content { padding-left: 50px !important; /* Increases the left padding further so that text is further away from the icon */ } /* Fix icon position and set z-index */ .o-timeline-icon { position: relative; /* Change icon position */ z-index: 2 !important; /* Brings icons forward to appear above the line */ background-color: #ffffff; /* White background behind the icon to hide the line */ border-radius: 50%; /* Make icons circular */ padding: 8px; /* Additional padding so the icon doesn't touch the line */ } /* Set the position and z-index of the line */ .o-timeline-root::before { content: ""; position: absolute; left: 50%; /* Center the line */ transform: translateX(-50%); width: 4px; /* Line width */ height: 100%; background-color: #26b5b9; /* Line color */ z-index: 1; /* Lower the z-index of the line */ } /* Bring the position and z-index of the icons to the front */ .o-timeline-icon { position: relative; /* Relative position of the icons */ z-index: 9999 !important; /* High z-index value to make them appear in front of everything */ background-color: #ffffff; /* White background color for icons */ border-radius: 50%; /* Circular icons */ padding: 8px; /* Extra padding */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Slight shadow for emphasis */ } /* Put the timeline line's z-index in the background */ .o-timeline-root::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 4px; height: 100%; background-color: #26b5b9; z-index: 1; /* Lower z-index to be in front of icons */ } /* Reduce the z-index of the entire timeline item */ .wp-block-themeisle-blocks-timeline-item { position: relative; z-index: 5; /* Lower z-index than icons */ } /* Disable animation on icons */ .o-timeline-icon .fas { animation: none !important; } .o-timeline-content { padding-left: 70px !important; /* Increase the left space between text and icon */ } a { text-decoration: none; color: inherit; transition: all 0.3s ease; } a:hover { cursor: url('custom-hand-cursor.png'), pointer; /* Specify a custom cursor image */ color: #3498db; /* Change color on hover */ transform: scale(1.05); /* Slight zoom on hover */ } button { background-color: #3498db; color: white; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; transition: background-color 0.3s ease, transform 0.2s ease; } button:hover { background-color: #2980b9; /* Darker shade on hover */ transform: translateY(-3px); /* Slight lift */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow */ cursor: pointer; } button:active { transform: translateY(1px); /* Slight fade on click */ } img { transition: transform 0.3s ease, filter 0.3s ease; } img:hover { transform: scale(1.1); /* Slight zoom */ filter: brightness(1.2); /* Lighter color */ cursor: url('custom-hand-cursor.png'), pointer; } .progress-bar { width: 0; height: 5px; background: linear-gradient(90deg, #3498db, #1abc9c); animation: progress-animation 3s forwards ease-in-out; } @keyframes progress-animation { 0% { width: 0; } 100% { width: 100%; } } .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Original */ body { margin: 0; padding: 0; } /* Minified */ body{margin:0;padding:0;} .container { display: flex; justify-content: space-between; align-items: center; padding: 10px; } .sprite { background: url('sprite.png') no-repeat; } .icon-home { width: 32px; height: 32px; background-position: 0 0; } .icon-settings { width: 32px; height: 32px; background-position: -32px 0; } /* Menu icon (hamburger) position and style */ .menu-toggle { position: fixed; top: 15px; right: 20px; z-index: 1000; /* Make sure it's always on top */ background-color: transparent; border: none; font-size: 24px; color: #fff; /* White icon */ cursor: pointer; } /* Mobile menu (hidden by default) */ .mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; /* Full screen */ background-color: #2c3e50; /* Dark background */ color: #fff; z-index: 999; /* Be in front, but before the hamburger icon */ display: none; /* Hidden by default */ padding: 20px; box-sizing: border-box; overflow-y: auto; /* Scrollable for long menus */ } /* Menu link style */ .mobile-menu a { display: block; padding: 10px 0; text-decoration: none; color: #fff; font-size: 18px; } /* Active state hover */ .mobile-menu a:hover { background-color: #1abc9c; color: #fff; } /* General settings for cards */ .is-style-customboxshadow { transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; border-radius: 10px; /* Rounded corners */ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Basic shadow */ background-color: rgba(255, 255, 255, 0.1); /* Transparent background */ } /* Hover effect – when you hover the mouse over it */ .is-style-customboxshadow:hover { transform: scale(1.05); /* Slightly larger */ box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow */ background-color: rgba(255, 255, 255, 0.15); /* Slightly lighter background */ } /* Icon and title animation */ .is-style-customboxshadow:hover .guten-icon-wrapper, .is-style-customboxshadow:hover h3, .is-style-customboxshadow:hover h2 { transform: translateY(-5px); /* Moves slightly up */ transition: transform 0.3s ease; } /* General settings for timeline boxes */ .wp-block-themeisle-blocks-timeline-item { transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; border-radius: 10px; /* Rounded corners */ box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); /* Basic shadow */ background-color: rgba(255, 255, 255, 0.1); /* Transparent background */ } /* Hover effect – when the mouse goes over */ .wp-block-themeisle-blocks-timeline-item:hover { transform: scale(1.05); /* It grows a little */ box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Stronger shadow */ background-color: rgba(255, 255, 255, 0.2); /* Lighter background */ } /* Make the text and icons move a little */ .wp-block-themeisle-blocks-timeline-item:hover .o-timeline-icon, .wp-block-themeisle-blocks-timeline-item:hover .o-timeline-content { transform: translateY(-5px); transition: transform 0.3s ease; } /* Only applies to the specified columns */ #wp-block-themeisle-blocks-advanced-columns-7631bb9c .wp-block-themeisle-blocks-advanced-column { transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; border-radius: 0px; /* Remove rounding */ box-shadow: none !important; /* Remove shadow */ background: none !important; /* Remove background */ padding: 20px; } /* Hover effect – when the mouse goes over */ #wp-block-themeisle-blocks-advanced-columns-7631bb9c .wp-block-themeisle-blocks-advanced-column:hover { transform: scale(1.05); /* It will grow a little */ box-shadow: none !important; /* There should be no shadow under hover */ background: none !important; /* Don't have a background under hover */ } /* The icon and title also move a little */ #wp-block-themeisle-blocks-advanced-columns-7631bb9c .wp-block-themeisle-blocks-advanced-column:hover .wp-block-heading, #wp-block-themeisle-blocks-advanced-columns-7631bb9c .wp-block-themeisle-blocks-advanced-column:hover .wp-block-themeisle-blocks-font-awesome-icons { transform: translateY(-5px); transition: transform 0.3s ease; } /* Highlight text on hover */ #wp-block-themeisle-blocks-advanced-columns-7631bb9c .wp-block-themeisle-blocks-advanced-column:hover p { color: #fff; /* Lighter text highlighting */ } #wp-block-themeisle-blocks-advanced-columns-546fa8db .wp-block-themeisle-blocks-advanced-column { transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; border-radius: 0px; box-shadow: none !important; background: none !important; padding: 20px; } #wp-block-themeisle-blocks-advanced-columns-546fa8db .wp-block-themeisle-blocks-advanced-column:hover { transform: scale(1.05); box-shadow: none !important; background: none !important; } #wp-block-themeisle-blocks-advanced-columns-546fa8db .wp-block-themeisle-blocks-advanced-column:hover .wp-block-heading, #wp-block-themeisle-blocks-advanced-columns-546fa8db .wp-block-themeisle-blocks-advanced-column:hover .wp-block-heading .wp-block-themeisle-blocks-font-awesome-icons { transform: translateY(-5px); transition: transform 0.3s ease; } #wp-block-themeisle-blocks-advanced-columns-546fa8db .wp-block-themeisle-blocks-advanced-column:hover p { color: #fff; } /* Applies to accessibility columns only */ .wp-block-columns-is-layout-flex .wp-block-column { transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; border-radius: 0px; /* Remove rounding */ box-shadow: none !important; /* Remove shadow */ background: none !important; /* Remove background */ padding: 20px; } /* Hover effect – when the mouse goes over */ .wp-block-columns-is-layout-flex .wp-block-column:hover { transform: scale(1.05); box-shadow: none !important; background: none !important; } /* The icon and title also move a bit */ .wp-block-columns-is-layout-flex .wp-block-column:hover .wp-block-heading, .wp-block-columns-is-layout-flex .wp-block-column:hover .wp-block-themeisle-blocks-font-awesome-icons { transform: translateY(-5px); transition: transform 0.3s ease; } /* Highlight text on hover */ .wp-block-columns-is-layout-flex .wp-block-column:hover p { color: #fff; } /* Basic style */ .wp-elements-3a076a4ecca71bfb29c204ec6b0a5dfd { transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease; font-weight: bold; position: relative; display: inline-block; } /* Hover effect – when you move the mouse over it */ .wp-elements-3a076a4ecca71bfb29c204ec6b0a5dfd:hover { color: #f9c0a3; /* For example, a light pink shade */ text-shadow: 0 0 10px rgba(249, 192, 163, 0.8); /* Glow effect */ transform: scale(1.1); /* It grows a little */ } /* Animated underline */ .wp-elements-3a076a4ecca71bfb29c204ec6b0a5dfd::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 0; height: 2px; background-color: #f9c0a3; transition: width 0.3s ease, left 0.3s ease; } /* If you hover over it, the underline will open */ .wp-elements-3a076a4ecca71bfb29c204ec6b0a5dfd:hover::after { width: 100%; left: 0; } /* Underline the active submenu item */ .current-menu-item > a { color: #26b5b9; font-weight: bold; position: relative; } /* Underline effect */ .current-menu-item > a::after, .current-menu-ancestor > a::after, .current-menu-parent > a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #26b5b9; } /* Underline the active submenu item */ .current-menu-item > a::after { width: 100%; } /* The parent menu items leading to it ("Home", "Jobs") should also be underlined */ .current-menu-ancestor > a::after, .current-menu-parent > a::after { width: 100%; } i { font-display: swap; will-change: transform; } /* 📌 Chatbot displays the bot's name in the header */ .wp-chatbot-header::after { content: "ArtifAI"; /* The name of the chatbot */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: bold; color: #ffffff; /* White color */ text-transform: uppercase; letter-spacing: 1px; z-index: 10 !important; /* Ensures it is always visible */ pointer-events: none; /* Prevents it from being clickable */ } /* 📌 Fine-tune header position and style */ .wp-chatbot-header { position: relative; text-align: center; padding: 10px !important; } /* 📌 Writes the bot name in the chatbot header */ .wp-chatbot-header::after { content: "ArtifAI"; /* The name of the chatbot */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: bold; color: #ffffff; /* White color */ text-transform: uppercase; letter-spacing: 1px; } /* 📌 Header position and style tweak */ .wp-chatbot-header { position: relative; text-align: center; } /* 📌 Messaging bar (footer) background more contrasty */ .wp-chatbot-footer { background: rgba(240, 240, 240, 0.95) !important; /* Light gray background */ border-top: 2px solid #26b5b9 !important; /* Turquoise line to differentiate */ padding: 10px !important; backdrop-filter: blur(5px) !important; /* Subtle background blur */ } /* 📌 Message field (input) more readable background and text */ #wp-chatbot-editor { background: #ffffff !important; /* White background */ border: 2px solid #26b5b9 !important; /* Turquoise border */ border-radius: 15px !important; padding: 12px !important; font-size: 15px !important; color: #314b5a !important; /* Dark blue text */ font-weight: bold !important; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1) !important; } /* 📌 Message field placeholder text more contrast */ #wp-chatbot-editor::placeholder { color: #4d4d4d !important; /* Darker gray text */ font-weight: normal !important; } /* 📌 Make bottom icons (info, menu) more visible */ .wp-chatbot-tab-nav ul li a { color: #4d4d4d !important; /* Darker gray */ opacity: 1 !important; }