fix: app landing page improvements (#9001)

* fix: CSS improvements

- remove shadow on text highlights
- remove font ligature on Plus Jakarta Sans

* fix: add an id to top mobile banner

so that we can hide it easily on app page

* fix: fix app landing page detection for French

lib/ProductOpener/Display.pm

@@ -1208,7 +1208,7 @@ sub display_text ($request_ref) {
 
 	$request_ref->{page_type} = "text";
 
-	if ($textid eq 'open-food-facts-mobile-app') {
+	if ($textid =~ /open-food-facts-mobile-app|application-mobile-open-food-facts/) {
 		# we want the mobile app landing page to be included in a <div class="row">
 		# so we display it under the `banner` page format, which is the page format
 		# used on product pages, with a colored banner on top

scss/_off.scss

@@ -1416,6 +1416,7 @@ $section-cyan: #008c8c;
   font-weight: 700;
   // override color as it is not black due to our choice of $dark
   color: $black !important;
+  font-variant-ligatures: none;
 }
 
 
@@ -1429,7 +1430,6 @@ $section-cyan: #008c8c;
   border-radius: 5px;
   text-transform: uppercase;
   display: inline-block;
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); 
 
   &.orange {
     background-color: $off-orange;
@@ -1641,6 +1641,7 @@ a.panel_title {
 #app-landing-page {
   // use Plus Jakarta Sans everywhere
   font-family: "Plus Jakarta Sans", $font-family-sans-serif;
+  font-variant-ligatures: none;
 
   .highlight-label {
   // make the highlighted labels smaller

templates/web/common/site_layout.tt.html

@@ -241,7 +241,7 @@
 				<!-- full width banner on mobile -->
 
 				[% IF mobile %]
-					<a href="[% mobile.link %]" class="button large expand success">
+					<a href="[% mobile.link %]" id="mobile-app-top-banner" class="button large expand success">
 					<div class="row collapse">
 						<div class="small-6 columns">
 							[% mobile.text %]