Publish 2025-08-21

alexanderby · alexanderby · commit 07f9decb882e · 2025-08-21T13:00:06.000+01:00
diff --git a/elements/plus-tiers.js b/elements/plus-tiers.js
@@ -538,6 +538,7 @@ const cssText = `
 .payment-methods__visa {
     aspect-ratio: 1 / 1;
     background-image: url('https://buy.paddle.com/images/icons/visa.svg');
+    filter: brightness(3);
     height: 1.5rem;
 }
 .payment-methods__mastercard {
diff --git a/images/plus-devices-1.jpg b/images/plus-devices-1.jpg
diff --git a/plus/index.html b/plus/index.html
@@ -19,26 +19,33 @@
 </head>
 
 <body>
-    <a class="banner" href="../">
-        <img class="banner__image" src="/images/darkreader-birthday.svg" />
-    </a>
-
-    <h1 class="title">
-        <span class="title-darkreader">Dark Reader</span> <span class="title-plus">Plus</span>
-    </h1>
-
-    <p class="description">
-        Premium themes & custom colors<br>
-    </p>
-
-    <p>
-        <darkreader-plus-tiers></darkreader-plus-tiers>
-        <script type="module" src="/elements/plus-tiers.js"></script>
-    </p>
-
-    <h3 class="slogan">
-        Color Your World
-    </h3>
+    <section>
+        <h1 class="title">
+            <span class="title-darkreader">Dark Reader</span> <span class="title-plus">Plus</span>
+        </h1>
+    
+        <p class="description">
+            Premium themes & custom colors<br>
+        </p>
+    
+        <p>
+            <darkreader-plus-tiers></darkreader-plus-tiers>
+            <script type="module" src="/elements/plus-tiers.js"></script>
+        </p>
+    
+        <h3 class="slogan">
+            Color Your World
+        </h3>
+    
+        <div class="desktop-promo">
+            <img class="desktop-promo-image" src="/images/plus-devices-1.jpg">
+        </div>
+    
+        <p>
+            <i class="edge-icon"></i>
+            Available for Microsoft Edge on Windows, macOS and Android.
+        </p>
+    </section>
 
     <div class="carousel">
         <div class="carousel-wrapper">
@@ -50,17 +57,16 @@ <h3 class="slogan">
     </div>
 
     <section>
-        <p>
+        <p class="text-secondary">
+            By completing the purchase you agree to the <a href="../terms/">terms of use</a>.
+            <br>
             For any questions please <a href="mailto:support@darkreader.org?subject=[Plus]%20Key">contact us</a>.
         </p>
-        <p>
-            <a href="../terms/">Terms of Use</a>
-        </p>
     </section>
 
     <footer>
         © 2025 Dark Reader Ltd<br>
-        Dark Reader Ltd is registered in England and Wales (Company No 13594380),
+        Dark Reader Ltd is registered in England and Wales (Company No 13594380),<br>
         Suite 746 Unit 3A, 34-35 Hatton Garden, London, EC1N 8DX, United Kingdom
     </footer>
 
diff --git a/plus/style.css b/plus/style.css
@@ -104,6 +104,11 @@ a:visited {
     text-align: center;
 }
 
+p,
+footer {
+    text-wrap: balance;
+}
+
 .slogan {
     background-image: linear-gradient(to right, #e7573b, #af6ce9, #40a6e5);
     background-clip: text;
@@ -129,7 +134,7 @@ section {
     margin: 1rem 0;
 }
 
-em {
+.text-secondary {
     opacity: 0.75;
 }
 
@@ -140,6 +145,7 @@ footer {
 }
 
 .carousel {
+    display: none;
     margin: 1rem auto 0 auto;
     overflow: auto;
     padding-bottom: 1rem;
@@ -164,3 +170,36 @@ footer {
     flex: none;
     width: 8rem;
 }
+
+.desktop-promo {
+    padding-left: 10%;
+}
+
+.desktop-promo-image {
+    aspect-ratio: 2;
+    object-fit: cover;
+    object-position: 50% 54%;
+    width: 100%;
+}
+
+.edge-icon {
+    background-image: url(/images/icon-edge-256x256.svg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    bottom: -0.125rem;
+    display: inline-block;
+    height: 1rem;
+    position: relative;
+    width: 1rem;
+}
+
+@media (min-width: 45rem) {
+    .title {
+        font-size: 4rem;
+    }
+
+    .description {
+        font-size: 2rem;
+    }
+}

Original file line number	Diff line number	Diff line change
@@ -538,6 +538,7 @@ const cssText = `
`538`	`538`	`.payment-methods__visa {`
`539`	`539`	`aspect-ratio: 1 / 1;`
`540`	`540`	`background-image: url('https://buy.paddle.com/images/icons/visa.svg');`
	`541`	`+ filter: brightness(3);`
`541`	`542`	`height: 1.5rem;`
`542`	`543`	`}`
`543`	`544`	`.payment-methods__mastercard {`