Assist aims to support more languages than other voice assistants, but this is still a
work in progress, and we need your help.
-
+
- Local
+ Local processing
-
-
+
-
-
Needs more work
-
Ready to use
-
Fully supported
-
+
Home Assistant Cloud
-
-
-
-
-
Needs more work
-
Ready to use
-
Fully supported
+
-
Yes, provided your language is supported and you have hardware powerful enough to run local
- text-to-speech and speech-to-text models at a speed that is acceptable to you. Speech-to-text is
- the main limiting factor for many languages to run locally, as it has mixed results and often
- requires powerful hardware.
-
We recommend using at least an Intel N100 or equivalent processor;
- this will allow you to use OpenAI’s Whisper Base model for speech-to-text locally. This model
- runs reasonably fast for languages that have large public datasets to train on, such as English
- and Spanish. However, for languages with less data available, you will need Whisper’s Small or
- Large models that require significantly more powerful hardware to run. For some languages, no
- public datasets exist yet for local models to be trained on by OpenAI, and until they exist and
- they train models, you will not be able to run those languages fully locally.
+
Yes, provided your language is supported. For some languages, you can set up Assist and your
+ Voice Preview Edition to use a Focused Local model, which uses Speech-to-Phrase add-on. It can run
+ locally and accurately on lower-power hardware, by generating a local speech-to-text model
+ specifically for your Home Assistant installation. It is limited to predefined sentences aimed at
+ controlling your home, but not able to process general speech. For instance, it could turn on a
+ device, but would not be able to add something to your shopping list.
+
+
For other languages, Speech-to-Phrase may not be supported, which will require Fully Local
+ speech-to-text solution, such as the Whisper add-on. Fully local speech-to-text requires powerful
+ hardware to be accurate and responsive. If you wish to use OpenAI’s Whisper, we recommend using at
+ least an Intel N100 or equivalent processor. This will allow you to use the Whisper Base model for
+ speech-to-text locally. This model runs reasonably fast for languages that have large public
+ datasets to train on, such as English and Spanish. However, for languages with less data
+ available, you will need Whisper’s Small or Large models that require significantly more powerful
+ hardware to run.
@@ -1051,13 +1044,11 @@ frontpage_image: /images/frontpage/voice-pe-frontpage.jpg
-
You do not need Home Assistant Cloud. However, if you are running less powerful hardware, like
- Home Assistant Green or a Raspberry Pi 4, we believe this provides the best experience. By doing
- so, you can leverage our cloud for speech processing, ensuring superior accuracy and faster
- performance not possible on your low-powered device.
-
Additionally, some languages have poor or
- non-existent support by the local speech-to-text software we leverage (OpenAI’s Whisper), but
- are well-supported by the speech processing used by Home Assistant Cloud.
+
You do not need Home Assistant Cloud. However, for some languages, we believe that Home Assistant
+ Cloud provides the best experience. There are languages that are not supported by the local
+ speech-to-text models we leverage (either our focused local Speech-to-Phrase model, or the fully
+ local Whisper by OpenAI), but are well-supported by the speech processing used by Home Assistant
+ Cloud.
@@ -1182,17 +1173,17 @@ frontpage_image: /images/frontpage/voice-pe-frontpage.jpg
Yes, Home Assistant can be configured to use any speech-to-text integration that supports the
- Wyoming protocol. Currently, the only locally-run speech-to-text add-on available for Home
- Assistant users is OpenAI’s Whisper. This has mixed results, missing languages, and is
- hardware-intensive.
-
That led us to build an alternative - Rhasspy Speech can run locally and
- accurately on lower-power hardware, though this does not provide full speech-to-text
- capabilities. Based on the Rhasspy project, it is able to create local speech-to-text models,
- but is limited to predefined sentences aimed at controlling your home, and will not be able to
- process general speech. For instance, it could turn on a device, but will not be able to add
- something to your shopping list. We expect to share the first version of Rhasspy Speech during
- the next Voice livestream in 2025.
+ Wyoming protocol. The most commonly used fully local speech-to-text add-on available for Home
+ Assistant users is OpenAI’s Whisper. This has mixed results; specifically, it lacks support for
+ some languages and is hardware-intensive.
+
Our alternative speech-to-text model, Speech-To-Phrase, can run locally and accurately on
+ lower-power hardware, though this does not provide full speech-to-text capabilities. Based on the
+ Rhasspy project,
+ it is able to create focused local speech-to-text models, limited to predefined sentences aimed at
+ controlling your home, but not able to process general speech. For instance, it could turn on a
+ device, but would not be able to add something to your shopping list.
+
@@ -1383,4 +1374,7 @@ frontpage_image: /images/frontpage/voice-pe-frontpage.jpg
{% include custom/buy-dialog.html product="voice-pe" %}
-
+
+
\ No newline at end of file
diff --git a/source/voice-pe/rounded-path.svg b/source/voice-pe/rounded-path.svg
new file mode 100644
index 00000000000..cd2db791f5f
--- /dev/null
+++ b/source/voice-pe/rounded-path.svg
@@ -0,0 +1,3 @@
+
diff --git a/source/voice-pe/script.js b/source/voice-pe/script.js
index 2d27d25f03e..2c1eefd32a0 100644
--- a/source/voice-pe/script.js
+++ b/source/voice-pe/script.js
@@ -15,7 +15,6 @@ document.addEventListener('DOMContentLoaded', function () {
registerCarousels();
registerVideoModal();
registerBurgerIcon();
- registerCycleLocalCloud();
registerLanguageSelectChange();
registerFeatureCycle();
registerFaqItems();
@@ -29,7 +28,7 @@ function addBodyLoaded() {
let languageSelect = null;
function registerNiceSelect() {
- languageSelect = NiceSelect.bind(document.querySelector("select#language-select"), { searchable: true });
+ languageSelect = NiceSelect.bind(document.querySelector("select#language-select"), { searchable: true, placeholder: 'Select your language' });
}
function scrollIfFragment() {
@@ -437,47 +436,6 @@ function registerBurgerIcon() {
});
}
-function registerCycleLocalCloud() {
- // add intersection observer to #product-features. Only execute once
- const sides = document.querySelector('#local-cloud .sides');
- if (!sides) return;
-
- const observer = new IntersectionObserver(entries => {
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- observer.disconnect();
- // set css variable for
- let lastSide = 'cloud';
- let interval = null;
- interval = setInterval(() => {
- // toggle between data-side="local" and data-side="cloud"
- sides.setAttribute('data-side', '');
- setTimeout(() => {
- lastSide = lastSide === 'local' ? 'cloud' : 'local';
- sides.setAttribute('data-side', lastSide);
- }, 500);
- }, 5000);
-
- // if hover on left side, set to local
- sides.querySelector('.side.local').addEventListener('mouseenter', function () {
- clearInterval(interval);
- sides.setAttribute('data-side', 'local');
- });
-
- // if hover on right side, set to cloud
- sides.querySelector('.side.cloud').addEventListener('mouseenter', function () {
- clearInterval(interval);
- sides.setAttribute('data-side', 'cloud');
- });
- }
- });
- }, {
- threshold: .5
- });
-
- observer.observe(sides);
-}
-
function registerLanguageSelectChange() {
const browserLocale = navigator.language || navigator.userLanguage;
@@ -488,97 +446,32 @@ function registerLanguageSelectChange() {
});
}
-function updateLanguageSupports(locale = null) {
- let data = {
- "en-US": [3, 3],
- "es-ES": [3, 3],
- "pt-BR": [3, 3],
- "pt-PT": [2, 2],
- "de-DE": [3, 3],
- "de-CH": [0, 2],
- "it-IT": [2, 2],
- "ru-RU": [2, 2],
- "ja-JP": [0, 0],
- "tr-TR": [0, 1],
- "ko-KR": [0, 1],
- "fr-FR": [0, 3],
- "ca-ES": [0, 3],
- "pl-PL": [0, 3],
- "nl-BE": [0, 3],
- "nl-NL": [0, 3],
- "id-ID": [0, 1],
- "zh-HK": [0, 2],
- "zh-CN": [0, 1],
- "ms-MY": [0, 1],
- "sv-SE": [0, 2],
- "uk-UA": [0, 2],
- "th-TH": [0, 1],
- "vi-VN": [0, 1],
- "fi-FI": [0, 3],
- "no-NO": [0, 0],
- "gl-ES": [0, 2],
- "ar-JO": [0, 2],
- "ur-IN": [0, 0],
- "el-GR": [0, 1],
- "ro-RO": [0, 3],
- "da-DK": [0, 2],
- "ta-IN": [0, 0],
- "hr-HR": [0, 3],
- "mk-MK": [0, 0],
- "sk-SK": [0, 1],
- "he-IL": [0, 2],
- "sr-RS": [0, 1],
- "hu-HU": [0, 3],
- "bg-BG": [0, 2],
- "cs-CZ": [0, 1],
- "bs-BA": [0, 0],
- "sl-SI": [0, 2],
- "az-AZ": [0, 0],
- "et-EE": [0, 1],
- "lv-LV": [0, 1],
- "af-ZA": [0, 0],
- "cy-GB": [0, 0],
- "fa-IR": [0, 1],
- "lt-LT": [0, 1],
- "jv-ID": [0, 0],
- "sw-KE": [0, 0],
- "sw-TZ": [0, 0],
- "is-IS": [0, 1],
- "mt-MT": [0, 0],
- "ps-AF": [0, 0],
- "mr-IN": [0, 0],
- "bn-IN": [0, 0],
- "lb-LU": [0, 0],
- "hi-IN": [0, 0],
- "gu-IN": [0, 0],
- "km-KH": [0, 0],
- "ne-NP": [0, 0],
- "lo-LA": [0, 0],
- "te-IN": [0, 1],
- "kn-IN": [0, 0],
- "ml-IN": [0, 1],
- "kk-KZ": [0, 0],
- "so-SO": [0, 0],
- "uz-UZ": [0, 0],
- "ka-GE": [0, 1],
- "my-MM": [0, 0],
- "mn-MN": [0, 0],
- "hy-AM": [0, 0],
- "am-ET": [0, 0],
- "nb-NO": [0, 3],
- "eu-ES": [0, 1],
- "fil-PH": [0, 0],
- "ga-IE": [0, 0],
- "si-LK": [0, 0],
- "sq-AL": [0, 0],
- "su-ID": [0, 0],
- "wuu-CN": [0, 0],
- "yue-CN": [0, 0],
- "zu-ZA": [0, 0]
- };
+const languageDescriptions = {
+ 'local': {
+ 0: 'Running this language locally is not supported.',
+ 1: 'Full local processing is supported for this language, which requires powerful hardware (Intel N100 or greater) to provide adequate performance.',
+ 2: 'Focused local processing is supported for this language, which works on even low-powered systems, but is limited to home control commands.',
+ 3: 'Both Focused and Full local processing are supported for this language.'
+ },
+ 'cloud': {
+ 0: 'Cloud processing is not supported for this language.',
+ 1: 'Cloud processing is supported for this language, allowing fast and accurate processing even on low-powered Home Assistant systems.'
+ }
+}
- let elems = document.querySelectorAll('.supported-cards .supported-card');
- if (!elems) return;
+function updateLanguageSupports(locale = null) {
+ let data = window.language_scores;
+ if(!data || !locale) {
+ console.warn('No language data available or locale not provided.');
+ return;
+ }
+
+ const localElem = document.querySelector('.supported-cards .supported-card.local');
+ const cloudElem = document.querySelector('.supported-cards .supported-card.cloud');
+ if (!localElem || !cloudElem) return;
+
+ const localElemDescription = localElem.querySelector('.description');
+ const cloudElemDescription = cloudElem.querySelector('.description');
let supports = data[locale];
let foundLocale = locale;
@@ -595,12 +488,27 @@ function updateLanguageSupports(locale = null) {
document.querySelector('#language-select').value = foundLocale;
languageSelect.update();
- elems.forEach(elem => elem.setAttribute('data-state', '-1'));
+ if (supports.focused_local === 0 && supports.full_local === 0) {
+ localElem.setAttribute('data-state', '0');
+ localElemDescription.innerHTML = languageDescriptions.local[0];
+ } else if (supports.full_local > 0 && supports.focused_local === 0) {
+ localElem.setAttribute('data-state', '1');
+ localElemDescription.innerHTML = languageDescriptions.local[1];
+ } else if (supports.focused_local > 0 && supports.full_local === 0) {
+ localElem.setAttribute('data-state', '2');
+ localElemDescription.innerHTML = languageDescriptions.local[2];
+ } else if (supports.focused_local > 0 && supports.full_local > 0) {
+ localElem.setAttribute('data-state', '3');
+ localElemDescription.innerHTML = languageDescriptions.local[3];
+ }
- elems.forEach((elem, index) => {
- // set data-state to the value of the value
- elem.setAttribute('data-state', supports[index]);
- });
+ if (supports.cloud === 0) {
+ cloudElem.setAttribute('data-state', '0');
+ cloudElemDescription.innerHTML = languageDescriptions.cloud[0];
+ } else if (supports.cloud > 0) {
+ cloudElem.setAttribute('data-state', '3');
+ cloudElemDescription.innerHTML = languageDescriptions.cloud[1];
+ }
}
diff --git a/source/voice-pe/styles.css b/source/voice-pe/styles.css
index f591f1e456a..232265842c6 100644
--- a/source/voice-pe/styles.css
+++ b/source/voice-pe/styles.css
@@ -120,12 +120,16 @@ article.page h3 {
display: block;
}
+.vpe-main .nice-select .nice-select-dropdown {
+ width: 100%;
+}
+
.vpe-main .nice-select .list {
margin: 0;
}
.vpe-main .nice-select {
- --grid-width: 6;
+ --grid-width: 8;
box-shadow: 0 4px 12px 0px rgba(0, 35, 50, 0.2);
border: unset;
border-radius: 40px;
@@ -175,18 +179,19 @@ article.page h3 {
--price: 170;
--price-mobile: 60;
-
+
--wrapper-radius: 0px;
-
+
isolation: isolate;
position: relative;
}
@media only screen and (min-width: 875px) {
- :root{
- --price-mobile: 120;
+ :root {
+ --price-mobile: 120;
}
}
+
@media only screen and (min-width: 2180px) {
.vpe-main {
--wrapper-radius: 40px;
@@ -476,7 +481,7 @@ body.js-ready .hero-c-in {
height: var(--sticky-header-height);
position: sticky;
top: 0;
- z-index: 4;
+ z-index: 6;
background-color: rgba(255, 255, 255, 0);
transition: background-color 0.25s ease-out, transform 0.25s ease-out;
transform: translateY(20px);
@@ -2089,7 +2094,7 @@ section#hero .bg-gradient {
.vpe-main #choice-to-voice {
padding: calc(var(--grid-m) * 1) 0 0 0;
- height: calc(var(--grid-m) * 7);
+ height: calc(var(--grid-m) * 8);
}
.vpe-main #choice-to-voice .fs-medium {
@@ -2109,10 +2114,11 @@ section#hero .bg-gradient {
}
.vpe-main #choice-to-voice .wrapper {
- align-items: center;
display: flex;
+ flex-direction: column;
flex-wrap: wrap;
gap: 20px 40px;
+ z-index: 5;
}
.vpe-main #choice-to-voice p {
@@ -2121,6 +2127,7 @@ section#hero .bg-gradient {
.vpe-main #local-cloud {
height: calc(var(--grid-m) * 17);
+ z-index: 3;
}
.vpe-main #local-cloud .bg-blue {
@@ -2133,21 +2140,19 @@ section#hero .bg-gradient {
.vpe-main #local-cloud .sides {
display: flex;
+ flex-direction: column;
justify-content: center;
}
.vpe-main #local-cloud .house-bg {
- background-image: url('/images/voice-pe/local-cloud/house.svg');
position: absolute;
- background-size: 100%;
- background-position: center;
- background-repeat: no-repeat;
- width: 396px;
- height: 380px;
- top: calc(var(--grid-s) * -3);
left: 50%;
- z-index: -1;
transform: translateX(-50%);
+ right: 0;
+ width: auto;
+ max-width: unset;
+ bottom: calc(3.5 * var(--grid-m));
+ height: calc(var(--grid-m) * 16);
}
.vpe-main #local-cloud .sides .side,
@@ -2165,7 +2170,6 @@ section#hero .bg-gradient {
display: flex;
flex-direction: column;
align-items: center;
- width: calc(var(--grid-m) * 3);
}
.vpe-main #local-cloud .graphic-wrapper {
@@ -2173,114 +2177,172 @@ section#hero .bg-gradient {
}
.vpe-main #local-cloud .side.local {
+ align-items: center;
--color: var(--color-secondary);
- --color-inactive: #d0d0d4;
}
.vpe-main #local-cloud .side.cloud {
--color: var(--color-primary);
- --color-inactive: #a7e2fb;
}
-.vpe-main #local-cloud .side .line-to-vpe {
+.vpe-main #local-cloud .side .cards {
+ display: flex;
+ gap: var(--grid-m);
position: relative;
- overflow: hidden;
- height: calc(var(--grid-s) * 4);
- width: calc(var(--grid-m) * 3);
- margin-top: calc(var(--grid-s) * 2);
}
-.vpe-main #local-cloud .side .line-to-vpe svg.desktop {
- display: none;
+.vpe-main #local-cloud .side .devices {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ position: relative;
+ margin-left: -120px;
+ margin-bottom: 40px;
+ margin-top: 80px;
+ z-index: 1;
}
-.vpe-main #local-cloud .side .line-to-vpe svg {
- position: absolute;
- top: 0;
+.vpe-main #local-cloud .side .device.device--voice-pe img {
+ height: 80px;
}
-.vpe-main #local-cloud .sides .side.local .tail-line {
- background-image: url('/images/voice-pe/local-cloud/tail-lines.svg');
- background-size: inherit;
- background-position: bottom right;
- background-repeat: no-repeat;
- width: 200%;
- height: 219px;
- flex-basis: 0;
- overflow: visible;
- transform: translateX(calc((var(--grid-m) * -3) + 12px));
- flex-grow: 1;
+.vpe-main #local-cloud .side .device.device--ha img {
+ height: 120px;
}
-.vpe-main #local-cloud .sides .side.cloud .right-lines {
- background-image: url('/images/voice-pe/local-cloud/right-lines.svg');
- background-size: cover;
- background-position: bottom right;
- background-repeat: no-repeat;
- width: 281px;
- height: 291px;
- left: calc(100%);
- bottom: calc(100% - 20px);
- position: absolute;
- z-index: -1;
-}
-
-.vpe-main #local-cloud .sides .side.local .left-lines {
- background-image: url('/images/voice-pe/local-cloud/left-lines.svg');
- background-size: cover;
- background-position: bottom right;
- background-repeat: no-repeat;
- width: 172px;
- height: 244px;
- right: calc(100%);
- bottom: calc(100% - 20px);
- position: absolute;
- z-index: -1;
-}
-
-.vpe-main #local-cloud .sides .side.local .line-to-vpe svg {
- left: calc(50% - 1px);
- transform: scale(-1, 1);
-}
-
-.vpe-main #local-cloud .sides .side.cloud .line-to-vpe svg {
- right: calc(50% - 1px);
-}
.vpe-main #local-cloud .sides .side .graphic-card {
- height: calc(var(--grid-s) * 9);
+ height: calc(var(--grid-s) * 12);
border-radius: 12px;
- border: 2px solid var(--color-inactive);
+ border: 2px solid var(--color);
display: flex;
flex-direction: column;
- justify-content: space-between;
- align-items: center;
- text-align: center;
padding: var(--grid-s);
line-height: 1;
position: relative;
+ gap: 12px;
font-size: 12px;
transition: border-color 0.2s;
background-color: #e5f7fe;
+ max-width: calc(var(--grid-m) * 7);
+ width: 100%;
}
-.vpe-main #local-cloud .sides .side .graphic-card:before {
- content: '';
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background-color: var(--color-inactive);
- top: -5px;
+.vpe-main #local-cloud .sides .side.cloud .graphic-card {
+ max-height: calc(var(--grid-m) * 3);
+}
+
+
+.vpe-main #local-cloud .graphic-card .h-line {
+ position: absolute;
+ height: calc((var(--grid-m) * 1 + 4px));
+ bottom: 100%;
left: 50%;
transform: translateX(-50%);
- position: absolute;
- transition: background-color 0.2s;
+ width: 2px;
+ background-color: var(--color);
+
}
-.vpe-main #local-cloud .sides .side .graphic-card span,
-.vpe-main #local-cloud .sides .side .graphic-card>img {
- opacity: .35;
- transition: opacity 0.2s;
+.vpe-main #local-cloud .graphic-card .h-line:before {
+ --size: 11px;
+ content: '';
+ border-radius: 100%;
+ height: var(--size);
+ aspect-ratio: 1;
+ background-color: var(--color);
+ position: absolute;
+ bottom: calc((-1 * (var(--size) / 2)) + 1px);
+ left: calc((-1 * (var(--size) / 2)) + 1px);
+}
+
+.vpe-main #local-cloud .graphic-card .line {
+ position: absolute;
+ width: calc(100% - var(--grid-m) * 2.5);
+ left: calc(var(--grid-m) * 2);
+ height: calc(var(--grid-m) * 2);
+ top: 100%;
+}
+
+.vpe-main #local-cloud .graphic-card .line:before {
+ --size: 11px;
+ content: '';
+ border-radius: 100%;
+ height: var(--size);
+ aspect-ratio: 1;
+ background-color: var(--color);
+ position: absolute;
+ top: calc((-1 * (var(--size) / 2)) + 1px);
+ left: calc((-1 * (var(--size) / 2)) + 1px);
+}
+
+.vpe-main #local-cloud .graphic-card .line>span:after {
+ content: '';
+ position: absolute;
+ top: var(--grid-m);
+ left: var(--grid-m);
+ width: calc(100% - var(--grid-m) + 11px);
+ height: 2px;
+ background: var(--color);
+}
+
+.vpe-main #local-cloud .graphic-card .line>span span:first-child {
+ width: calc(var(--grid-m) + 2px);
+ aspect-ratio: 1;
+ display: block;
+ position: absolute;
+ top: 0;
+ overflow: hidden;
+}
+
+.vpe-main #local-cloud .graphic-card .line>span span:first-child:before {
+ content: '';
+ position: absolute;
+ height: 200%;
+ aspect-ratio: 1;
+ border: 2px solid var(--color);
+ border-radius: 20px;
+ bottom: 0;
+ left: 0;
+}
+
+
+.vpe-main #local-cloud .graphic-card .line>span span:last-child {
+ width: calc(var(--grid-m) + 2px);
+ aspect-ratio: 1;
+ display: block;
+ position: absolute;
+ right: calc((var(--grid-m) * -1) + -4px);
+ overflow: hidden;
+ bottom: -2px;
+}
+
+.vpe-main #local-cloud .graphic-card .line>span span:last-child:before {
+ content: '';
+ position: absolute;
+ height: 200%;
+ aspect-ratio: 1;
+ border: 2px solid var(--color);
+ border-radius: 20px;
+ top: 0;
+ right: 0;
+}
+
+.vpe-main #local-cloud .graphic-card:last-child .line {
+ transform: rotateZ(0) rotateY(180deg);
+ bottom: 0;
+ right: calc((var(--grid-m) * 2) - 2px);
+ left: unset;
+}
+
+.vpe-main #local-cloud .graphic-card span {
+ font-weight: 700;
+ font-size: 14px;
+ color: var(--color);
+}
+
+.vpe-main #local-cloud .graphic-card p {
+ font-size: 12px;
}
.vpe-main #local-cloud .sides .side .graphic-card>img {
@@ -2289,67 +2351,6 @@ section#hero .bg-gradient {
flex-grow: 1;
}
-.vpe-main #local-cloud .sides .side.local .line {
- height: calc(var(--grid-s) * 3);
- width: 2px;
- background-color: var(--color-inactive);
- transition: background-color 0.2s;
-}
-
-.vpe-main #local-cloud .sides .side.cloud .line-solid {
- height: var(--grid-s);
- width: 2px;
- background-color: var(--color-inactive);
- transition: background-color 0.2s;
-}
-
-.vpe-main #local-cloud .sides .side.cloud .line-faint {
- background-color: var(--color-inactive);
- height: calc((var(--grid-s) * 2) + 6px);
- margin-top: -6px;
- width: 2px;
- transition: background-color 0.2s;
-}
-
-
-.vpe-main #local-cloud .sides .side.cloud .lines-dashed {
- display: flex;
- gap: 4px;
-}
-
-.vpe-main #local-cloud .sides .side.cloud .lines-dashed .line-dashed:last-child {
- transform: rotate(180deg);
-}
-
-.vpe-main #local-cloud .sides .side.cloud .line-dashed {
- height: calc(var(--grid-s) * 3);
- width: 2px;
- background: repeating-linear-gradient(0deg,
- var(--color), var(--color) 4px,
- transparent 4px, transparent 8px);
- background-size: 2px 8px;
- background-position: 0 0px;
- animation: dashed-move 1s infinite linear;
- transition: opacity 0.2s;
- opacity: .25;
-}
-
-.vpe-main #local-cloud .sides .side .datacenter {
- opacity: 0.35;
- transition: opacity 0.2s;
- display: flex;
-}
-
-.vpe-main #local-cloud .sides .side .datacenter>img {
- height: 100px;
- margin: 0 -1px;
- z-index: 1;
-}
-
-.vpe-main #local-cloud .sides .side .datacenter>img:first-child {
- display: none;
-}
-
.vpe-main #local-cloud .sides .side .circle-icon {
height: 60px;
width: 60px;
@@ -2357,7 +2358,6 @@ section#hero .bg-gradient {
border: 1px solid var(--color);
display: grid;
place-items: center;
- opacity: 0.35;
transition: opacity 0.2s;
}
@@ -2369,53 +2369,6 @@ section#hero .bg-gradient {
height: calc(var(--grid-m) * 4);
}
-.vpe-main #local-cloud .info-sides .info-side {
- flex-grow: 1;
- flex-basis: 0;
-}
-
-.vpe-main #local-cloud .info-sides .info-side p {
- margin: 0;
-}
-
-.vpe-main #local-cloud .info-sides .info-side:last-child {
- text-align: right;
-}
-
-.vpe-main #local-cloud .info-sides .side-info-wrapper .side-info {
- opacity: 1;
-}
-
-.vpe-main #local-cloud .info-sides .info-side:nth-child(1) {
- color: var(--color-secondary);
-}
-
-.vpe-main #local-cloud .info-sides .info-side:nth-child(2) {
- color: var(--color-primary);
-}
-
-.vpe-main #local-cloud .side-info {
- display: flex;
- flex-direction: column;
- gap: 8px;
- margin-top: 9px;
- opacity: 0.35;
- transition: opacity 0.2s;
-}
-
-.vpe-main #local-cloud .side-info span {
- font-weight: 700;
- font-size: 20px;
- color: var(--color);
- line-height: 1.2;
-}
-
-.vpe-main #local-cloud .side-info p {
- font-size: 12px;
- color: #4F606E;
- line-height: 1.3;
-}
-
.vpe-main #local-cloud .sides .side div .side-info-wrapper {
display: none;
flex-direction: column;
@@ -2431,61 +2384,21 @@ section#hero .bg-gradient {
left: calc(100% + (var(--grid-m) * 2));
}
-.vpe-main #local-cloud .sides[data-side="cloud"] {}
-
-.vpe-main #local-cloud .sides[data-side="local"] .side.local .line-to-vpe svg,
-.vpe-main #local-cloud .sides[data-side="cloud"] .side.cloud .line-to-vpe svg {
- --draw: 3;
+.vpe-main #local-cloud .line-dashed {
+ width: calc(var(--grid-s) * 2);
+ height: 2px;
+ background: repeating-linear-gradient(90deg,
+ black, black 4px,
+ transparent 4px, transparent 8px);
+ background-size: 8px 2px;
+ background-position: 0 0px;
+ animation: dashed-move-h 2s infinite linear;
+ transition: opacity 0.2s;
}
-.vpe-main #local-cloud .sides[data-side="cloud"] .side.cloud .graphic-card,
-.vpe-main #local-cloud .sides[data-side="local"] .side.local .graphic-card {
- border-color: var(--color);
- transition-delay: .2s;
-}
-
-.vpe-main #local-cloud .sides[data-side="cloud"] .side.cloud .side-info,
-.vpe-main #local-cloud .sides[data-side="local"] .side.local .side-info,
-.vpe-main #local-cloud .sides[data-side="cloud"] .side.cloud .graphic-card span,
-.vpe-main #local-cloud .sides[data-side="cloud"] .side.cloud .graphic-card img,
-.vpe-main #local-cloud .sides[data-side="local"] .side.local .graphic-card span,
-.vpe-main #local-cloud .sides[data-side="local"] .side.local .graphic-card img {
- transition-delay: .2s;
- opacity: 1;
-}
-
-.vpe-main #local-cloud .sides[data-side="cloud"] .side.cloud .graphic-card:before,
-.vpe-main #local-cloud .sides[data-side="local"] .side.local .graphic-card:before {
- transition-delay: .2s;
- background-color: var(--color);
-}
-
-.vpe-main #local-cloud .sides[data-side="cloud"] .side.cloud .datacenter {
- opacity: 1;
- transition-delay: .4s;
-}
-
-.vpe-main #local-cloud .sides[data-side="cloud"] .side.cloud .line-solid,
-.vpe-main #local-cloud .sides[data-side="local"] .side.local .line {
- transition-delay: .4s;
- background-color: var(--color);
-}
-
-.vpe-main #local-cloud .sides[data-side="cloud"] .side.cloud .line-faint {
- background-color: var(--color);
- transition-delay: .4s;
-}
-
-.vpe-main #local-cloud .sides[data-side="cloud"] .side.cloud .line-dashed,
-.vpe-main #local-cloud .sides[data-side="cloud"] .side.cloud .circle-icon,
-.vpe-main #local-cloud .sides[data-side="local"] .side.local .circle-icon {
- transition-delay: .4s;
- opacity: 1;
-}
-
-@keyframes dashed-move {
+@keyframes dashed-move-v {
from {
- background-position: 0 0px;
+ background-position: 0 0;
}
to {
@@ -2493,8 +2406,19 @@ section#hero .bg-gradient {
}
}
+@keyframes dashed-move-h {
+ from {
+ background-position: 0 0;
+ }
+
+ to {
+ background-position: 16px 0;
+ }
+}
+
.vpe-main #language-support {
z-index: 2;
+ position: relative;
}
.vpe-main #language-support .bg-blue {
@@ -2509,7 +2433,7 @@ section#hero .bg-gradient {
background-color: #ffffff;
border-radius: 20px;
padding: 30px 20px 40px 20px;
- height: calc(var(--grid-m) * 18);
+ height: calc(var(--grid-m) * 20);
text-align: center;
}
@@ -2543,39 +2467,51 @@ section#hero .bg-gradient {
.vpe-main #language-support .supported-cards {
display: flex;
- gap: 20px 40px;
+ gap: 10px;
flex-wrap: wrap;
width: 100%;
margin-top: 40px;
justify-content: center;
+ flex-direction: column;
}
.vpe-main #language-support .supported-card {
border-radius: 12px;
- align-items: center;
color: #002332;
display: flex;
flex-direction: column;
gap: 8px;
- height: 74px;
+ flex-grow: 1;
+ flex-basis: 0;
+ border: 2px solid #efefef;
+ height: calc(var(--grid-m) * 5);
/* margin-top: 19px; */
- max-width: 164px;
- margin: 0 12px;
+ padding: 20px;
+ text-align: left;
opacity: 1;
position: relative;
transition: border-color .2s, background-color .2s, opacity .2s;
- width: 100%;
+}
+
+.vpe-main #language-support .supported-card:before {
+ content: '';
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ height: 29px;
+ width: 29px;
+ background-size: 100%;
+ background-position: center;
}
.vpe-main #language-support .supported-card .heading {
- align-items: center;
- display: flex;
gap: 12px;
line-height: 1;
+ margin-bottom: 8px;
}
.vpe-main #language-support .supported-card .heading span {
- font-size: 1rem;
+ font-size: 24px;
font-weight: 600;
}
@@ -2618,22 +2554,30 @@ section#hero .bg-gradient {
transition: opacity .5s ease-out;
}
-.vpe-main #language-support .supported-card[data-state="1"] .state-bar span:nth-child(1):after,
-.vpe-main #language-support .supported-card[data-state="2"] .state-bar span:nth-child(1):after,
-.vpe-main #language-support .supported-card[data-state="3"] .state-bar span:nth-child(1):after {
- background: linear-gradient(90deg, #BA1B1B 0%, #FF6B02 100%);
- opacity: 1;
+.vpe-main #language-support .supported-card[data-state="2"],
+.vpe-main #language-support .supported-card[data-state="3"] {
+ border-color: #008142;
}
-.vpe-main #language-support .supported-card[data-state="2"] .state-bar span:nth-child(2):after,
-.vpe-main #language-support .supported-card[data-state="3"] .state-bar span:nth-child(2):after {
- background: linear-gradient(90deg, #FF6B02 0%, #FE0 100%);
- opacity: 1;
+.vpe-main #language-support .supported-card[data-state="2"]:before,
+.vpe-main #language-support .supported-card[data-state="3"]:before {
+ background-image: url("data:image/svg+xml,%3Csvg width='29' height='29' viewBox='0 0 29 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1914_181' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='29' height='29'%3E%3Crect width='29' height='29' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1914_181)'%3E%3Cpath d='M12.47 21.17L22.6925 10.9475L20.6625 8.9175L12.47 17.11L8.3375 12.9775L6.3075 15.0075L12.47 21.17ZM14.5 29C12.4942 29 10.6092 28.6194 8.845 27.8581C7.08083 27.0969 5.54625 26.0638 4.24125 24.7588C2.93625 23.4538 1.90313 21.9192 1.14188 20.155C0.380625 18.3908 0 16.5058 0 14.5C0 12.4942 0.380625 10.6092 1.14188 8.845C1.90313 7.08083 2.93625 5.54625 4.24125 4.24125C5.54625 2.93625 7.08083 1.90313 8.845 1.14188C10.6092 0.380625 12.4942 0 14.5 0C16.5058 0 18.3908 0.380625 20.155 1.14188C21.9192 1.90313 23.4538 2.93625 24.7588 4.24125C26.0638 5.54625 27.0969 7.08083 27.8581 8.845C28.6194 10.6092 29 12.4942 29 14.5C29 16.5058 28.6194 18.3908 27.8581 20.155C27.0969 21.9192 26.0638 23.4538 24.7588 24.7588C23.4538 26.0638 21.9192 27.0969 20.155 27.8581C18.3908 28.6194 16.5058 29 14.5 29Z' fill='%23008142'/%3E%3C/g%3E%3C/svg%3E%0A");
}
-.vpe-main #language-support .supported-card[data-state="3"] .state-bar span:nth-child(3):after {
- background: linear-gradient(90deg, #FE0 0%, #16F3BE 100%);
- opacity: 1;
+.vpe-main #language-support .supported-card[data-state="1"] {
+ border-color: #DB582E;
+}
+
+.vpe-main #language-support .supported-card[data-state="1"]:before {
+ background-image: url("data:image/svg+xml,%3Csvg width='29' height='29' viewBox='0 0 29 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 29C14.1143 29 13.7467 28.9277 13.3971 28.783C13.0476 28.6384 12.7282 28.4335 12.4389 28.1683L0.831671 16.5611C0.5665 16.2718 0.361596 15.9524 0.216958 15.6029C0.0723192 15.2533 0 14.8857 0 14.5C0 14.1143 0.0723192 13.7406 0.216958 13.3791C0.361596 13.0175 0.5665 12.7041 0.831671 12.4389L12.4389 0.831671C12.7282 0.542394 13.0476 0.331463 13.3971 0.198878C13.7467 0.0662926 14.1143 0 14.5 0C14.8857 0 15.2594 0.0662926 15.6209 0.198878C15.9825 0.331463 16.2959 0.542394 16.5611 0.831671L28.1683 12.4389C28.4576 12.7041 28.6685 13.0175 28.8011 13.3791C28.9337 13.7406 29 14.1143 29 14.5C29 14.8857 28.9337 15.2533 28.8011 15.6029C28.6685 15.9524 28.4576 16.2718 28.1683 16.5611L16.5611 28.1683C16.2959 28.4335 15.9825 28.6384 15.6209 28.783C15.2594 28.9277 14.8857 29 14.5 29ZM13.0536 15.9464H15.9464V7.26808H13.0536V15.9464ZM14.5 20.2855C14.9098 20.2855 15.2533 20.1469 15.5305 19.8697C15.8078 19.5925 15.9464 19.249 15.9464 18.8392C15.9464 18.4293 15.8078 18.0858 15.5305 17.8086C15.2533 17.5314 14.9098 17.3928 14.5 17.3928C14.0902 17.3928 13.7467 17.5314 13.4695 17.8086C13.1922 18.0858 13.0536 18.4293 13.0536 18.8392C13.0536 19.249 13.1922 19.5925 13.4695 19.8697C13.7467 20.1469 14.0902 20.2855 14.5 20.2855Z' fill='%23DB582E'/%3E%3C/svg%3E%0A");
+}
+
+.vpe-main #language-support .supported-card[data-state="0"] {
+ border-color: #BA1B1B;
+}
+
+.vpe-main #language-support .supported-card[data-state="0"]:before {
+ background-image: url("data:image/svg+xml,%3Csvg width='29' height='29' viewBox='0 0 29 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.28 21.75L14.5 16.53L19.72 21.75L21.75 19.72L16.53 14.5L21.75 9.28L19.72 7.25L14.5 12.47L9.28 7.25L7.25 9.28L12.47 14.5L7.25 19.72L9.28 21.75ZM14.5 29C12.4942 29 10.6092 28.6194 8.845 27.8581C7.08083 27.0969 5.54625 26.0638 4.24125 24.7588C2.93625 23.4538 1.90313 21.9192 1.14188 20.155C0.380625 18.3908 0 16.5058 0 14.5C0 12.4942 0.380625 10.6092 1.14188 8.845C1.90313 7.08083 2.93625 5.54625 4.24125 4.24125C5.54625 2.93625 7.08083 1.90313 8.845 1.14188C10.6092 0.380625 12.4942 0 14.5 0C16.5058 0 18.3908 0.380625 20.155 1.14188C21.9192 1.90313 23.4538 2.93625 24.7588 4.24125C26.0638 5.54625 27.0969 7.08083 27.8581 8.845C28.6194 10.6092 29 12.4942 29 14.5C29 16.5058 28.6194 18.3908 27.8581 20.155C27.0969 21.9192 26.0638 23.4538 24.7588 24.7588C23.4538 26.0638 21.9192 27.0969 20.155 27.8581C18.3908 28.6194 16.5058 29 14.5 29Z' fill='%23BA1B1B'/%3E%3C/svg%3E%0A");
}
.vpe-main #language-support .supported-card .state-bar:before {
@@ -3005,6 +2949,7 @@ section#hero .bg-gradient {
--draw: var(--draw-cable, 0);
position: absolute;
}
+
.vpe-main #controls .controls-heading .cable svg.mobile {
top: -50%;
right: 0;
@@ -3848,11 +3793,11 @@ section#hero .bg-gradient {
}
.vpe-main #faq .faq-items .faq-item:nth-child(2) .faq-item-content {
- height: calc(var(--grid-m)* 13);
+ height: calc(var(--grid-m)* 17);
}
.vpe-main #faq .faq-items .faq-item:nth-child(3) .faq-item-content {
- height: calc(var(--grid-m)* 9);
+ height: calc(var(--grid-m)* 6);
}
.vpe-main #faq .faq-items .faq-item:nth-child(4) .faq-item-content {
@@ -4264,16 +4209,20 @@ section#hero .bg-gradient {
--large-font-size: 81px;
}
+ .vpe-main #local-cloud .sides .side .graphic-card {
+ height: calc(var(--grid-s) * 10);
+ }
+
.vpe-main #faq .faq-items .faq-item:nth-child(1) .faq-item-content {
height: calc(var(--grid-m)* 10);
}
.vpe-main #faq .faq-items .faq-item:nth-child(2) .faq-item-content {
- height: calc(var(--grid-m)* 11);
+ height: calc(var(--grid-m)* 14);
}
.vpe-main #faq .faq-items .faq-item:nth-child(3) .faq-item-content {
- height: calc(var(--grid-m)* 7);
+ height: calc(var(--grid-m)* 5);
}
.vpe-main #faq .faq-items .faq-item:nth-child(4) .faq-item-content {
@@ -4484,7 +4433,7 @@ section#hero .bg-gradient {
}
.vpe-main #language-support .language-card {
- height: calc(var(--grid-m) * 15);
+ height: calc(var(--grid-m) * 20);
}
.vpe-main #community-image .wrapper {
@@ -4549,11 +4498,11 @@ section#hero .bg-gradient {
}
.vpe-main #faq .faq-items .faq-item:nth-child(2) .faq-item-content {
- height: calc(var(--grid-m)* 8);
+ height: calc(var(--grid-m)* 9);
}
.vpe-main #faq .faq-items .faq-item:nth-child(3) .faq-item-content {
- height: calc(var(--grid-m)* 6);
+ height: calc(var(--grid-m)* 4);
}
.vpe-main #faq .faq-items .faq-item:nth-child(4) .faq-item-content {
@@ -4689,6 +4638,10 @@ section#hero .bg-gradient {
align-self: flex-start;
}
+ .vpe-main #local-cloud .sides .side .graphic-card {
+ height: calc(var(--grid-s) * 8);
+ }
+
.vpe-main .wrapper#hero .product {
height: calc(var(--grid-m) * var(--hero-product-row-width, 9));
width: calc(var(--grid-m) * var(--hero-product-row-width, 9));
@@ -4736,11 +4689,11 @@ section#hero .bg-gradient {
}
.vpe-main #faq .faq-items .faq-item:nth-child(2) .faq-item-content {
- height: calc(var(--grid-m)* 7);
+ height: calc(var(--grid-m)* 8);
}
.vpe-main #faq .faq-items .faq-item:nth-child(3) .faq-item-content {
- height: calc(var(--grid-m)* 5);
+ height: calc(var(--grid-m)* 4);
}
.vpe-main #faq .faq-items .faq-item:nth-child(4) .faq-item-content {
@@ -4903,8 +4856,7 @@ section#hero .bg-gradient {
.vpe-main #pricing .fs-price {
margin-bottom: -10px;
}
-}
-@media (min-width: 940px) {
+
.vpe-main {
--columns: 11;
--columns-outer: 11;
@@ -5091,7 +5043,7 @@ section#hero .bg-gradient {
}
.vpe-main #choice-to-voice {
- height: calc(var(--grid-m) * 11);
+ height: calc(var(--grid-m) * 10);
padding: calc(var(--grid-m) * 2) 0 0 0;
}
@@ -5099,54 +5051,186 @@ section#hero .bg-gradient {
height: calc(var(--grid-m) * 15);
}
+ .vpe-main #local-cloud .sides {
+ flex-direction: row;
+ }
+
.vpe-main #local-cloud .info-sides {
display: none;
}
.vpe-main #local-cloud .house-bg {
- top: calc(var(--grid-s) * -5);
- height: 500px;
- width: 520px;
+ width: calc(var(--grid-m) * 17);
+ bottom: calc(-2 * var(--grid-m));
+ transform: unset;
+ aspect-ratio: 1/1.18;
+ left: calc(-2 * var(--grid-m));
+ top: unset;
+ max-width: 100%;
+ height: unset;
}
- .vpe-main #local-cloud .sides .side {
- width: calc(var(--grid-m) * 4);
+ .vpe-main #local-cloud .side {
+ flex-direction: row;
}
- .vpe-main #local-cloud .side-info span {
+ .vpe-main #local-cloud .side .devices {
+ flex-direction: column;
+ margin-left: 100px;
+ margin-right: 100px;
+ margin-top: -120px;
+ margin-bottom: 0;
+ }
+
+ .vpe-main #local-cloud .line-dashed {
+ height: calc(var(--grid-s) * 2);
+ width: 2px;
+ background: repeating-linear-gradient(0deg,
+ black, black 4px,
+ transparent 4px, transparent 8px);
+ background-size: 2px 8px;
+ background-position: 0 0px;
+ animation: dashed-move-v 2s infinite linear;
+ transition: opacity 0.2s;
+ }
+
+ .vpe-main #local-cloud .graphic-card .line {
+ position: absolute;
+ bottom: 0;
+ height: calc(var(--grid-m) * 4);
+ left: 100%;
+ top: unset;
+ }
+
+ .vpe-main #local-cloud .graphic-card .h-line {
+
+ width: calc((var(--grid-m) * 3));
+ bottom: 100%;
+ right: 100%;
+ top: 50%;
+ transform: translateY(-50%);
+ height: 2px;
+ left: unset;
+ }
+
+ .vpe-main #local-cloud .graphic-card .h-line:before {
+ bottom: calc((-1 * (var(--size) / 2)) + 1px);
+ right: calc((-1 * (var(--size) / 2)) + 1px);
+ left: unset;
+ }
+
+ .vpe-main #local-cloud .graphic-card .line:before {
+ --size: 11px;
+ content: '';
+ border-radius: 100%;
+ height: var(--size);
+ aspect-ratio: 1;
+ background-color: var(--color);
+ position: absolute;
+ top: calc((-1 * (var(--size) / 2)) + 1px);
+ left: calc((-1 * (var(--size) / 2)) + 1px);
+ }
+
+ .vpe-main #local-cloud .graphic-card .line>span:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ height: 2px;
+ width: calc(var(--grid-m) * 1);
+ background: var(--color);
+ }
+
+ .vpe-main #local-cloud .graphic-card .line>span:after {
+ content: '';
+ position: absolute;
+ left: calc(var(--grid-m) * 2);
+ top: var(--grid-m);
+ height: calc(100% - var(--grid-m));
+ width: 2px;
+ background: var(--color);
+ }
+
+ .vpe-main #local-cloud .graphic-card .line>span span:first-child {
+ width: calc(var(--grid-m) + 2px);
+ aspect-ratio: 1;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: calc(var(--grid-m) * 1);
+ overflow: hidden;
+ }
+
+ .vpe-main #local-cloud .graphic-card .line>span span:first-child:before {
+ content: '';
+ position: absolute;
+ height: 200%;
+ aspect-ratio: 1;
+ border: 2px solid var(--color);
+ border-radius: 20px;
+ top: 0;
+ right: 0;
+ bottom: unset;
+ left: unset;
+ }
+
+
+ .vpe-main #local-cloud .graphic-card .line>span span:last-child {
+ width: calc(var(--grid-m) + 2px);
+ aspect-ratio: 1;
+ display: block;
+ position: absolute;
+ left: calc(var(--grid-m) * 2);
+ overflow: hidden;
+ bottom: calc((-1 * var(--grid-m) / 2) - 2.5px);
+ }
+
+ .vpe-main #local-cloud .graphic-card .line>span span:last-child:before {
+ content: '';
+ position: absolute;
+ height: 200%;
+ aspect-ratio: 1;
+ border: 2px solid var(--color);
+ border-radius: 20px;
+ bottom: 0;
+ left: 0;
+ top: unset;
+ right: unset;
+ }
+
+ .vpe-main #local-cloud .graphic-card:last-child .line {
+ transform: rotateZ(180deg) rotateY(180deg);
+ bottom: unset;
+ top: 0;
+ left: 100%;
+ right: unset;
+ }
+
+ .vpe-main #local-cloud .cards {
+ flex-direction: column;
+ }
+
+ .vpe-main #local-cloud .graphic-card span {
font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--color);
}
- .vpe-main #local-cloud .side-info p {
+ .vpe-main #local-cloud .graphic-card p {
font-size: 1rem;
}
- .vpe-main #local-cloud .sides .side .line-to-vpe {
- height: calc(var(--grid-s) * 5);
- width: calc(var(--grid-m) * 4);
- }
-
.vpe-main #local-cloud .sides .side .graphic-card {
- height: calc(var(--grid-s) * 11);
- width: calc(var(--grid-m) * 4);
- padding: var(--grid-s) 0 0;
+ height: calc(var(--grid-s) * 10);
+ padding: var(--grid-s);
+ max-width: calc(var(--grid-m) * 8);
}
- .vpe-main #local-cloud .sides .side.local .tail-line {
- transform: translateX(calc((var(--grid-m) * -4) + 12px));
+ .vpe-main #local-cloud .sides .side.cloud .graphic-card {
+ max-height: unset;
}
- .vpe-main #local-cloud .sides .side.cloud .right-lines {
- left: 100%;
- }
-
- .vpe-main #local-cloud .sides .side.local .left-lines {
- right: 100%;
- }
-
- .vpe-main #local-cloud .sides .side.cloud .right-lines,
- .vpe-main #local-cloud .sides .side.local .left-lines {
- bottom: calc(100% - 18px);
+ .vpe-main #local-cloud .sides .side .graphic-card span {
+ white-space: nowrap;
}
.vpe-main #local-cloud .sides .side .graphic-card>img {
@@ -5172,10 +5256,19 @@ section#hero .bg-gradient {
}
.vpe-main #language-support .language-card {
- padding: 52px 80px 40px;
+ padding: 52px 40px 40px;
+ height: calc(var(--grid-m) * 15);
border-radius: 40px;
}
+ .vpe-main #language-support .supported-cards {
+ flex-direction: row;
+ }
+
+ .vpe-main #language-support .supported-cards .supported-card {
+ height: calc(var(--grid-m) * 4);
+ }
+
.vpe-main #language-support .form-title {
margin-top: 80px;
}
@@ -5225,11 +5318,11 @@ section#hero .bg-gradient {
}
.vpe-main #faq .faq-items .faq-item:nth-child(1) .faq-item-content {
- height: calc(var(--grid-m)* 5);
+ height: calc(var(--grid-m)* 6);
}
.vpe-main #faq .faq-items .faq-item:nth-child(2) .faq-item-content {
- height: calc(var(--grid-m)* 6);
+ height: calc(var(--grid-m)* 7);
}
.vpe-main #faq .faq-items .faq-item:nth-child(3) .faq-item-content {