feat(client): translation status banner (#41001)

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>

client/i18n/intro-schema.js

@@ -5,6 +5,7 @@
 const introSchema = {
   'responsive-web-design': {
     title: 'Responsive Web Design',
+    isTranslated: true,
     intro: [
       "In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.",
       "First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
@@ -83,6 +84,7 @@ const introSchema = {
   },
   'javascript-algorithms-and-data-structures': {
     title: 'JavaScript Algorithms and Data Structures',
+    isTranslated: true,
     intro: [
       "While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions.",
       "Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
@@ -177,6 +179,7 @@ const introSchema = {
   },
   'front-end-libraries': {
     title: 'Front End Development Libraries',
+    isTranslated: true,
     intro: [
       "Now that you're familiar with HTML, CSS, and JavaScript, level up your skills by learning some of the most popular front end libraries in the industry.",
       "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
@@ -239,6 +242,7 @@ const introSchema = {
   },
   'data-visualization': {
     title: 'Data Visualization',
+    isTranslated: true,
     intro: [
       "Data is all around us, but it doesn't mean much without shape or context.",
       "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
@@ -277,6 +281,7 @@ const introSchema = {
   },
   'apis-and-microservices': {
     title: 'APIs and Microservices',
+    isTranslated: true,
     intro: [
       "Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
       'Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.',
@@ -318,6 +323,7 @@ const introSchema = {
   },
   'quality-assurance': {
     title: 'Quality Assurance',
+    isTranslated: true,
     intro: [
       "As your programs or web applications become more complex, you'll want to test them to make sure that new changes don't break their original functionality.",
       "In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
@@ -351,6 +357,7 @@ const introSchema = {
   },
   'scientific-computing-with-python': {
     title: 'Scientific Computing with Python',
+    isTranslated: true,
     intro: [
       'Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.',
       "In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
@@ -373,6 +380,7 @@ const introSchema = {
   },
   'data-analysis-with-python': {
     title: 'Data Analysis with Python',
+    isTranslated: true,
     intro: [
       'Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.',
       "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
@@ -403,6 +411,7 @@ const introSchema = {
   },
   'information-security': {
     title: 'Information Security',
+    isTranslated: true,
     intro: [
       "With everything we do online, there's a vast amount of sensitive information at risk: email addresses, passwords, phone numbers, and much more.",
       "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
@@ -434,6 +443,7 @@ const introSchema = {
   },
   'machine-learning-with-python': {
     title: 'Machine Learning with Python',
+    isTranslated: true,
     intro: [
       'Machine learning has many practical applications that you can use in your projects or on the job.',
       "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
@@ -464,6 +474,7 @@ const introSchema = {
   },
   'coding-interview-prep': {
     title: 'Coding Interview Prep',
+    isTranslated: true,
     intro: [
       "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
       'This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio.'
@@ -512,7 +523,9 @@ const introSchema = {
       'Browse our other free certifications\n(we recommend doing these in order)',
     courses: 'Courses',
     expand: 'Expand',
-    collapse: 'Collapse'
+    collapse: 'Collapse',
+    'translation-banner': "We're still translating this certification.",
+    'translation-help': 'You can help here'
   }
 };
 exports.introSchema = introSchema;

client/i18n/locales/chinese/intro.json

@@ -1,6 +1,7 @@
 {
   "responsive-web-design": {
     "title": "响应式网页设计",
+    "isTranslated": true,
     "intro": [
       "在响应式网页设计认证中，你将学习开发者用来编写网页的语言：HTML（超文本标记语言）用于创建内容，CSS（级联样式表）用于样式设计。",
       "首先，你将通过编写一个展示猫咪图片的应用，学习 HTML 和 CSS 的基本知识。 然后，通过画企鹅来学习像 CSS 变量这样的现代技术，以及通过构建网页表单来学习无障碍的最佳实践。",
@@ -79,6 +80,7 @@
   },
   "javascript-algorithms-and-data-structures": {
     "title": "JavaScript 算法和数据结构",
+    "isTranslated": false,
     "intro": [
       "HTML 和 CSS 控制页面的内容和样式，JavaScript 则用于页面交互。在 JavaScript 算法和数据结构认证中，你将学习 JavaScript 的基础知识，包括变量、 数组、 对象、 循环和函数。",
       "打好基础之后，你将会通过创建算法来操作字符串、进行阶乘运算甚至计算国际空间站的轨道来应用这些知识。",
@@ -173,6 +175,7 @@
   },
   "front-end-libraries": {
     "title": "前端开发库",
+    "isTranslated": false,
     "intro": [
       "你已经熟悉了 HTML、CSS 和 JavaScript。现在学习行业中一些流行的前端库来提升你的技能吧。",
       "在前端库认证中，你将学习如何使用 Bootstrap 快速设置网站样式，以及如何在 CSS 样式中添加逻辑，并使用 Sass 对其进行扩展。",
@@ -235,6 +238,7 @@
   },
   "data-visualization": {
     "title": "Data Visualization",
+    "isTranslated": false,
     "intro": [
       "Data is all around us, but it doesn't mean much without shape or context.",
       "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
@@ -273,6 +277,7 @@
   },
   "apis-and-microservices": {
     "title": "APIs and Microservices",
+    "isTranslated": false,
     "intro": [
       "Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
       "Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
@@ -314,6 +319,7 @@
   },
   "quality-assurance": {
     "title": "Quality Assurance",
+    "isTranslated": false,
     "intro": [
       "As your programs or web applications become more complex, you'll want to test them to make sure that new changes don't break their original functionality.",
       "In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
@@ -347,6 +353,7 @@
   },
   "scientific-computing-with-python": {
     "title": "Scientific Computing with Python",
+    "isTranslated": false,
     "intro": [
       "Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
       "In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
@@ -369,6 +376,7 @@
   },
   "data-analysis-with-python": {
     "title": "Data Analysis with Python",
+    "isTranslated": false,
     "intro": [
       "Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
       "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
@@ -399,6 +407,7 @@
   },
   "information-security": {
     "title": "Information Security",
+    "isTranslated": false,
     "intro": [
       "With everything we do online, there's a vast amount of sensitive information at risk: email addresses, passwords, phone numbers, and much more.",
       "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
@@ -430,6 +439,7 @@
   },
   "machine-learning-with-python": {
     "title": "Machine Learning with Python",
+    "isTranslated": false,
     "intro": [
       "Machine learning has many practical applications that you can use in your projects or on the job.",
       "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
@@ -460,6 +470,7 @@
   },
   "coding-interview-prep": {
     "title": "Coding Interview Prep",
+    "isTranslated": false,
     "intro": [
       "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
       "This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
@@ -507,6 +518,8 @@
     "browse-other": "浏览我们的其他免费认证\n（我们建议你按顺序学习）",
     "courses": "课程",
     "expand": "展开",
-    "collapse": "折叠"
+    "collapse": "折叠",
+    "translation-banner": "We're still translating this certification.",
+    "translation-help": "You can help here"
   }
 }

client/i18n/locales/english/intro.json

@@ -1,6 +1,7 @@
 {
   "responsive-web-design": {
     "title": "Responsive Web Design",
+    "isTranslated": true,
     "intro": [
       "In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design.",
       "First, you'll build a cat photo app to learn the basics of HTML and CSS. Later, you'll learn modern techniques like CSS variables by building a penguin, and best practices for accessibility by building a web form.",
@@ -79,6 +80,7 @@
   },
   "javascript-algorithms-and-data-structures": {
     "title": "JavaScript Algorithms and Data Structures",
+    "isTranslated": true,
     "intro": [
       "While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions.",
       "Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
@@ -173,6 +175,7 @@
   },
   "front-end-libraries": {
     "title": "Front End Development Libraries",
+    "isTranslated": true,
     "intro": [
       "Now that you're familiar with HTML, CSS, and JavaScript, level up your skills by learning some of the most popular front end libraries in the industry.",
       "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
@@ -235,6 +238,7 @@
   },
   "data-visualization": {
     "title": "Data Visualization",
+    "isTranslated": true,
     "intro": [
       "Data is all around us, but it doesn't mean much without shape or context.",
       "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
@@ -273,6 +277,7 @@
   },
   "apis-and-microservices": {
     "title": "APIs and Microservices",
+    "isTranslated": true,
     "intro": [
       "Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
       "Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
@@ -314,6 +319,7 @@
   },
   "quality-assurance": {
     "title": "Quality Assurance",
+    "isTranslated": true,
     "intro": [
       "As your programs or web applications become more complex, you'll want to test them to make sure that new changes don't break their original functionality.",
       "In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
@@ -347,6 +353,7 @@
   },
   "scientific-computing-with-python": {
     "title": "Scientific Computing with Python",
+    "isTranslated": true,
     "intro": [
       "Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
       "In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
@@ -369,6 +376,7 @@
   },
   "data-analysis-with-python": {
     "title": "Data Analysis with Python",
+    "isTranslated": true,
     "intro": [
       "Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
       "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
@@ -399,6 +407,7 @@
   },
   "information-security": {
     "title": "Information Security",
+    "isTranslated": true,
     "intro": [
       "With everything we do online, there's a vast amount of sensitive information at risk: email addresses, passwords, phone numbers, and much more.",
       "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
@@ -430,6 +439,7 @@
   },
   "machine-learning-with-python": {
     "title": "Machine Learning with Python",
+    "isTranslated": true,
     "intro": [
       "Machine learning has many practical applications that you can use in your projects or on the job.",
       "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
@@ -460,6 +470,7 @@
   },
   "coding-interview-prep": {
     "title": "Coding Interview Prep",
+    "isTranslated": true,
     "intro": [
       "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
       "This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
@@ -507,6 +518,8 @@
     "browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
     "courses": "Courses",
     "expand": "Expand",
-    "collapse": "Collapse"
+    "collapse": "Collapse",
+    "translation-banner": "We're still translating this certification.",
+    "translation-help": "You can help here"
   }
 }

client/i18n/locales/espanol/intro.json

@@ -1,6 +1,7 @@
 {
   "responsive-web-design": {
     "title": "Diseño web responsivo",
+    "isTranslated": true,
     "intro": [
       "En esta Certificación de Diseño Web Responsivo, aprenderás los lenguajes que los desarrolladores utilizan para construir páginas web: HTML (lenguaje de marcado de hipertexto) para el contenido, y CSS (Hojas de estilo en cascada) para el diseño.",
       "Primero, crearás una aplicación de fotos de gatos para aprender los conceptos básicos de HTML y CSS. Más adelante, aprenderá técnicas modernas como variables CSS mediante la construcción de un pingüino, y las mejores prácticas para la accesibilidad mediante la construcción de un formulario web.",
@@ -79,6 +80,7 @@
   },
   "javascript-algorithms-and-data-structures": {
     "title": "JavaScript Algorithms and Data Structures",
+    "isTranslated": false,
     "intro": [
       "While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions.",
       "Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",
@@ -173,6 +175,7 @@
   },
   "front-end-libraries": {
     "title": "Front End Development Libraries",
+    "isTranslated": false,
     "intro": [
       "Now that you're familiar with HTML, CSS, and JavaScript, level up your skills by learning some of the most popular front end libraries in the industry.",
       "In the Front End Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how add logic to your CSS styles and extend them with Sass.",
@@ -235,6 +238,7 @@
   },
   "data-visualization": {
     "title": "Data Visualization",
+    "isTranslated": false,
     "intro": [
       "Data is all around us, but it doesn't mean much without shape or context.",
       "In the Data Visualization Certification, you'll build charts, graphs, and maps to present different types of data with the D3.js library.",
@@ -273,6 +277,7 @@
   },
   "apis-and-microservices": {
     "title": "APIs and Microservices",
+    "isTranslated": false,
     "intro": [
       "Until this point, you've only used JavaScript on the front end to add interactivity to a page, solve algorithm challenges, or build an SPA. But JavaScript can also be used on the back end, or server, to build entire web applications.",
       "Today, one of the popular ways to build applications is through microservices, which are small, modular applications that work together to form a larger whole.",
@@ -314,6 +319,7 @@
   },
   "quality-assurance": {
     "title": "Quality Assurance",
+    "isTranslated": false,
     "intro": [
       "As your programs or web applications become more complex, you'll want to test them to make sure that new changes don't break their original functionality.",
       "In the Quality Assurance Certification, you'll learn how to write to write tests with Chai to ensure your applications work the way you expect them to.",
@@ -347,6 +353,7 @@
   },
   "scientific-computing-with-python": {
     "title": "Scientific Computing with Python",
+    "isTranslated": false,
     "intro": [
       "Python is one of the most popular, flexible programming languages today. You can use it for everything from basic scripting to machine learning.",
       "In the Scientific Computing with Python Certification, you'll Python fundamentals like variables, loops, conditionals, and functions. Then you'll quickly ramp up to complex data structures, networking, relational databases, and data visualization."
@@ -369,6 +376,7 @@
   },
   "data-analysis-with-python": {
     "title": "Data Analysis with Python",
+    "isTranslated": false,
     "intro": [
       "Data Analysis has been around for a long time. But up until a few years ago, developers practiced it using expensive, closed-source tools like Tableau. But recently, Python, SQL, and other open libraries have changed Data Analysis forever.",
       "In the Data Analysis with Python Certification, you'll learn the fundamentals of data analysis with Python. By the end of this certification, you'll know how to read data from sources like CSVs and SQL, and how to use libraries like Numpy, Pandas, Matplotlib, and Seaborn to process and visualize data."
@@ -399,6 +407,7 @@
   },
   "information-security": {
     "title": "Information Security",
+    "isTranslated": false,
     "intro": [
       "With everything we do online, there's a vast amount of sensitive information at risk: email addresses, passwords, phone numbers, and much more.",
       "With the Information Security Certification, you'll build a secure web app with HelmetJS to learn the fundamentals of protecting people's information online.",
@@ -430,6 +439,7 @@
   },
   "machine-learning-with-python": {
     "title": "Machine Learning with Python",
+    "isTranslated": false,
     "intro": [
       "Machine learning has many practical applications that you can use in your projects or on the job.",
       "In the Machine Learning with Python Certification, you'll use the TensorFlow framework to build several neural networks. A you'll explore more advanced techniques like natural language processing and reinforcement learning.",
@@ -460,6 +470,7 @@
   },
   "coding-interview-prep": {
     "title": "Coding Interview Prep",
+    "isTranslated": false,
     "intro": [
       "If you're looking for free coding exercises to prepare for your next job interview, we've got you covered.",
       "This section contains hundreds of coding challenges that test your knowledge of algorithms, data structures, and mathematics. It also has a number of take-home projects you can use to strengthen your skills, or add to your portfolio."
@@ -507,6 +518,8 @@
     "browse-other": "Browse our other free certifications\n(we recommend doing these in order)",
     "courses": "Courses",
     "expand": "Expand",
-    "collapse": "Collapse"
+    "collapse": "Collapse",
+    "translation-banner": "We're still translating this certification.",
+    "translation-help": "You can help here"
   }
 }

client/i18n/schema-validation.js

@@ -91,7 +91,7 @@ const noEmptyObjectValues = (obj, namespace = '') => {
       emptyKeys.push(
         noEmptyObjectValues(obj[key], namespace ? `${namespace}.${key}` : key)
       );
-    } else if (!obj[key]) {
+    } else if (!obj[key] && typeof obj[key] !== 'boolean') {
       emptyKeys.push(namespace ? `${namespace}.${key}` : key);
     }
   }

client/src/components/Header/components/universalNav.css

@@ -308,7 +308,7 @@
   }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 680px) {
   .nav-list {
     min-width: 100%;
     top: calc(var(--header-height) * 2);

client/src/templates/Introduction/SuperBlockIntro.js

@@ -15,7 +15,7 @@ import CertChallenge from './components/CertChallenge';
 import SuperBlockIntro from './components/SuperBlockIntro';
 import { dasherize } from '../../../../utils/slugs';
 import Block from './components/Block';
-import { Spacer } from '../../components/helpers';
+import { Spacer, Link } from '../../components/helpers';
 import {
   currentChallengeIdSelector,
   userFetchStateSelector,
@@ -127,17 +127,33 @@ export class SuperBlockIntroductionPage extends Component {
     const nodesForSuperBlock = edges.map(({ node }) => node);
     const blockDashedNames = uniq(nodesForSuperBlock.map(({ block }) => block));
 
-    const i18nSuperBlock = t(`intro:${superBlockDashedName}.title`);
+    const superBlockIntroObj = t(`intro:${superBlockDashedName}`);
+    const { title: i18nSuperBlock, isTranslated } = superBlockIntroObj;
+    const translationBannerText = t(`intro:misc-text.translation-banner`);
+    const translationBannerHelpText = t(`intro:misc-text.translation-help`);
 
     return (
       <>
         <Helmet>
           <title>{i18nSuperBlock} | freeCodeCamp.org</title>
         </Helmet>
+        {isTranslated ? (
+          ''
+        ) : (
+          <Link
+            className='translation-banner'
+            external={true}
+            to='https://contribute.freecodecamp.org/#/how-to-translate-files'
+          >
+            <p>
+              {translationBannerText} <span>{translationBannerHelpText}</span>.
+            </p>
+          </Link>
+        )}
         <Grid>
           <Row className='super-block-intro-page'>
             <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-              <Spacer size={2} />
+              <Spacer size={isTranslated ? 2 : 3} />
               <SuperBlockIntro superBlock={superBlock} />
               <Spacer size={2} />
               <h2 className='text-center big-subheading'>

client/src/templates/Introduction/intro.css

@@ -178,6 +178,39 @@ button.map-title {
   margin-bottom: 0;
 }
 
+a.translation-banner {
+  position: fixed;
+  top: var(--header-height);
+  background-color: var(--blue-dark);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  width: 100vw;
+  font-weight: 700;
+  font-size: 1rem;
+  z-index: 10;
+  color: var(--gray-00);
+  text-decoration: none;
+}
+
+a.translation-banner * {
+  margin: 0px;
+  color: var(--gray-00);
+}
+
+a.translation-banner span {
+  text-decoration: underline;
+}
+
+a.translation-banner:hover {
+  text-decoration: none;
+}
+
+a.translation-banner:hover span {
+  text-decoration: none;
+}
+
 @media screen and (max-width: 500px) {
   .super-block-intro-page p {
     font-size: 1rem;