cta teaser boxes and buttons #225

src/_data/de/content.js

@@ -312,25 +312,25 @@ module.exports = {
   "reduceContrast": "Kontrast verringern",
   "increaseContrast": "Kontrast erhöhen",
   "services": "Leistungen",
-  "servicesBuildTitle": "Let's build your website!",
+  "servicesBuildTitle": "Wir bauen deine Website!",
   "servicesBuild1": "schnell erste Erfolge erreichen",
   "servicesBuild2": "nachhaltiges Konzept von Anfang an",
   "servicesBuild3": "langfristige Zusammenarbeit",
   "servicesBuild4": "Kooperation mit erfahrenen Partner:innen",
-  "servicesBuildMoreLinkText": "Professionelle Websiteerstellung",
-  "servicesBuildMoreLinkTitle": "jetzt starten",
-  "servicesVerifyTitle": "Let's verify your website!",
-  "servicesVerify1": "measure your carbon footprint",
-  "servicesVerify2": "inspect loading time and accessibility",
-  "servicesVerify3": "identify critical errors and problems",
-  "servicesVerify4": "pass audits, obtain certifications",
+  "servicesBuildMoreLinkText": "jetzt starten",
+  "servicesBuildMoreLinkTitle": "Professionelle Websiteerstellung",
+  "servicesVerifyTitle": "Wir testen deine Website!",
+  "servicesVerify1": "dein digitaler CO<sub>2</sub>-Fußabdruck",
+  "servicesVerify2": "deine Ladezeit und Barrierefreiheit",
+  "servicesVerify3": "kritische Fehler und Probleme",
+  "servicesVerify4": "testen und zertifieren lassen",
   "servicesVerifyMoreLinkText": "jetzt prüfen",
   "servicesVerifyMoreLinkTitle": "mehr über Test und Analyse",
-  "servicesImproveTitle": "Let's improve and optimize your website!",
-  "servicesImprove1": "make your customers love it",
-  "servicesImprove2": "make it work smoothly on every device",
-  "servicesImprove3": "make it easy to find on Ecosia",
-  "servicesImprove4": "improve and certify its ecological efficiency",
+  "servicesImproveTitle": "Wir verbessern und pflegen deine Website!",
+  "servicesImprove1": "deine Kund:innen sollen sie lieben",
+  "servicesImprove2": "perfekt für Computer und Smartphone",
+  "servicesImprove3": "einfach auf Ecosia zu finden",
+  "servicesImprove4": "ökologisch effizient und zertifiziert",
   "servicesImproveMoreLinkText": "jetzt optimieren",
   "servicesImproveMoreLinkTitle": "mehr über Optimierung und Zertifizierung",
   "showLandingpageLinks": "true",

src/_data/en/content.js

@@ -314,25 +314,26 @@ module.exports = {
   "increaseContrast": "increase contrast",
   "services": "Services",
   "servicesBuildTitle": "Let's build your website!",
-  "servicesBuild1": "schnell erste Erfolge erreichen",
-  "servicesBuild2": "nachhaltiges Konzept von Anfang an",
-  "servicesBuild3": "langfristige Zusammenarbeit",
-  "servicesBuild4": "Kooperation mit erfahrenen Partner:innen",
-  "servicesBuildMoreLinkText": "Professionelle Websiteerstellung",
+  "servicesBuild1": "achieve initial success quickly",
+  "servicesBuild2": "sustainable concept from the start",
+  "servicesBuild3": "long-term collaboration",
+  "servicesBuild4": "cooperation with experienced partners",
+  "servicesBuildMoreLinkText": "Professional Website Creation",
   "servicesBuildMoreLinkTitle": "start now",
   "servicesVerifyTitle": "Let's verify your website!",
   "servicesVerify1": "measure your carbon footprint",
   "servicesVerify2": "inspect loading time and accessibility",
   "servicesVerify3": "identify critical errors and problems",
   "servicesVerify4": "pass audits, obtain certifications",
   "servicesVerifyMoreLinkText": "check now",
-  "servicesVerifyMoreLinkTitle": "mehr über Test und Analyse",
+  "servicesVerifyMoreLinkTitle": "more about audits and analysis",
   "servicesImproveTitle": "Let's improve and optimize your website!",
   "servicesImprove1": "make your customers love it",
   "servicesImprove2": "make it work smoothly on every device",
   "servicesImprove3": "make it easy to find on Ecosia",
   "servicesImprove4": "improve and certify its ecological efficiency",
   "servicesImproveMoreLinkText": "optimize now",
+  "servicesImproveMoreLinkTitle": "optimization and certification options",
   "showLandingpageLinks": "",
   "landingLinkTitleWordPress":"Wordpress-Website nachhaltig optimieren lassen",
   "landingLinkTextWordPress": "WordPress",

src/_includes/design-tokens.css

@@ -49,6 +49,7 @@ body {
   --secondary-background: var(--merino-light);
   --secondary-lighter-background: var(--merino-slightly-lighter);
   --cta-light-background: var(--white-wheat-butter);
+  --cta-button-light-background: var(--pantone-illuminating);
   --nav-menu-background: var(--greenish-blue);
   --peel-gradient: var(--greenish-blue);
   --peel-gradient-semitrans: rgba(5, 50, 69, 0.5);
@@ -105,6 +106,9 @@ body {
 
   --skills-tile-container-bg: rgba(98, 49, 68, 0.75);
 
+  --effect-box-shadow-dropshadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.125);
+  --effect-box-shadow-dropshadow-darker: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.25);
+
   /* animation */
   --radius: 100%;
   --primary-animation-color: var(--deep-green);
@@ -131,6 +135,7 @@ body.high-contrast {
   --secondary-background: var(--merino-lighter);
   --secondary-lighter-background: #fff;
   --cta-light-background: #fff;
+  --cta-button-light-background: var(--illuminating-higher-contrast);
   --nav-menu-background: var(--greenish-blue);
   --peel-gradient: var(--spermidine-green-darker);
   --peel-gradient-semitrans: var(--greenish-blue);

src/index.liquid

@@ -656,26 +656,29 @@
                   <li>{{ content.servicesBuild1 }}</li>
                   <li>{{ content.servicesBuild2 }}</li>
                   <li>{{ content.servicesBuild3 }}</li>
+                  <li>{{ content.servicesBuild4 }}</li>
                 </ul>
-                <a href="#">{{ content.servicesBuildMoreLinkText }}...</a>
+                <a href="#" class="buttonlike" title="{{ content.servicesBuildMoreLinkTitle }}">{{ content.servicesBuildMoreLinkText }}!</a>
               </li>
               <li class="tile text-content-color">
                 <h4 class="font-sans">{{ content.servicesVerifyTitle }}</h4>
                 <ul>
                   <li>{{ content.servicesVerify1 }}</li>
                   <li>{{ content.servicesVerify2 }}</li>
                   <li>{{ content.servicesVerify3 }}</li>
+                  <li>{{ content.servicesVerify4 }}</li>
                 </ul>
-                <a href="#">{{ content.servicesVerifyMoreLinkText }}...</a>
+                <a class="buttonlike" href="#" title="{{ content.servicesVerifyMoreLinkTitle }}">{{ content.servicesVerifyMoreLinkText }}!</a>
               </li>
               <li class="tile text-content-color">
                 <h4 class="font-sans">{{ content.servicesImproveTitle }}</h4>
                 <ul>
                   <li>{{ content.servicesImprove1 }}</li>
                   <li>{{ content.servicesImprove2 }}</li>
                   <li>{{ content.servicesImprove3 }}</li>
+                  <li>{{ content.servicesImprove4 }}</li>
                 </ul>
-                <a href="#">{{ content.servicesImproveMoreLinkText }}...</a>
+                <a class="buttonlike" href="#" title="{{ content.servicesImproveMoreLinkTitle }}">{{ content.servicesImproveMoreLinkText }}!</a>
               </li>
             </ul>
           </section>

src/styles.css

@@ -931,6 +931,12 @@ ul.grid-container.skills {
   grid-template-columns: 1fr 1fr 1fr;
 }
 
+@media only screen and (max-width: 490px) {
+  .grid-container.services {
+    grid-template-columns: 1fr;
+  }
+}
+
 .grid-container.services > li {
   padding: 0 0 1rem 1rem;
   background-color: var(--cta-light-background);
@@ -946,6 +952,43 @@ ul.grid-container.skills {
   padding: 0;
 }
 
+.grid-container.services a.buttonlike,
+.grid-container.services a.buttonlike:link,
+.grid-container.services a.buttonlike:visited,
+.grid-container.services a.buttonlike:active,
+.grid-container.services a.buttonlike:hover,
+.grid-container.services a.buttonlike:focus {
+  background: var(--cta-button-light-background);
+  background-color: var(--cta-button-light-background);
+  background-image: none;
+  border: solid 1px var(--cta-button-light-background);
+  border-radius: 0.25rem;
+  color: var(--secondary-foreground);
+  display: inline-block;
+  margin-top: 1rem;
+  min-width: 11rem;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  transition:
+    box-shadow 0.125s ease-out,
+    font-size 0.125s ease-out,
+    padding 0.125s ease-out;
+  text-align: center;
+}
+
+.grid-container.services a.buttonlike:link,
+.grid-container.services a.buttonlike:visited,
+.grid-container.services a.buttonlike:active {
+  box-shadow: var(--effect-box-shadow-dropshadow);
+}
+
+.grid-container.services a.buttonlike:hover,
+.grid-container.services a.buttonlike:focus {
+  box-shadow: var(--effect-box-shadow-dropshadow-darker);
+  font-size: 1.125rem;
+  padding: 0.4rem 0.875rem 0.35rem 0.875rem;
+}
+
 .brand-coral {
   background-color: var(--interior-rose);
   color: #000;