From 379d89c0d41e92fbd8b41b936fc71a337e3b67a8 Mon Sep 17 00:00:00 2001
From: John Thomson <john_thomson@sil.org>
Date: Wed, 27 May 2026 12:03:25 -0500
Subject: [PATCH] Implement QR code for local-community branding (BL-16370)

---
 .../branding/Local-Community/branding.json    |  2 +-
 .../branding/Local-Community/branding.less    | 74 +++++++++++++++----
 2 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/src/content/branding/Local-Community/branding.json b/src/content/branding/Local-Community/branding.json
index 1bd907991378..7eb898be0309 100644
--- a/src/content/branding/Local-Community/branding.json
+++ b/src/content/branding/Local-Community/branding.json
@@ -9,7 +9,7 @@
         {
             "data-book": "outside-back-cover-branding-bottom-html",
             "lang": "*",
-            "content": "<img class='branding' src='BloomLocal.svg'/><div>This book was created with many Bloom Enterprise features enabled at no cost in order to support projects that are fully funded and managed by the language community.  Licensed to \"{personalization}\".</div>",
+            "content": "<div class='bloom-branding-wrapper local-community-branding'><a class='local-community-badge' href='https://bloomlibrary.org/'><img class='local-community-logo' src='BloomLocal.svg'/><div class='local-community-message'>This book was created with many Bloom Enterprise features enabled at no cost in order to support projects that are fully funded and managed by the language community.  Licensed to \"{personalization}\".</div></a></div>",
             "condition": "always"
         }
     ]
diff --git a/src/content/branding/Local-Community/branding.less b/src/content/branding/Local-Community/branding.less
index a575b26f2212..c52ebee57e73 100644
--- a/src/content/branding/Local-Community/branding.less
+++ b/src/content/branding/Local-Community/branding.less
@@ -5,22 +5,64 @@
 @import "../branding-base.less";
 
 [data-book="outside-back-cover-branding-bottom-html"] {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 10px; // space between the logo and the {personalization} text
-    border: solid #ce5546 3px;
-    border-radius: 4px;
-    background: white;
-    padding: 10px;
-    font-family: "Andika";
-    font-size: 10.5pt;
-    width: 9cm;
-    margin-right: auto;
-    margin-left: auto;
+    .bloom-branding-wrapper.local-community-branding {
+        border-width: 3px;
+        border-radius: 4px;
+        padding: 10px;
+        font-family: "Andika";
+        font-size: 10.5pt;
+        width: 12cm;
+        max-width: 100%;
+        box-sizing: border-box;
 
-    img.branding {
-        height: 2cm;
-        margin-right: 10px;
+        .local-community-badge {
+            display: grid;
+            // Keep side images at normal size while giving the message as much room as possible.
+            // If space gets tight, keep at least this much width for readable text in the center.
+            grid-template-columns: max-content minmax(3cm, 1fr) max-content;
+            grid-auto-columns: 0;
+            align-items: center;
+            column-gap: 10px;
+            row-gap: 6px;
+            color: inherit;
+            text-decoration: none;
+
+            .local-community-logo {
+                height: 2cm;
+                width: auto;
+                max-width: none;
+                margin: 0;
+                grid-column: 1;
+                align-self: start;
+                justify-self: start;
+            }
+
+            .local-community-message {
+                grid-column: 2;
+                min-width: 0;
+                margin: 0;
+            }
+
+            .bloom-qrcode {
+                width: 2cm;
+                max-width: none;
+                padding: 0;
+                margin: 0;
+                grid-column: 3;
+                align-self: start;
+                justify-self: end;
+            }
+
+            .bloom-lang-on-blorg {
+                grid-column-start: 1;
+                grid-column-end: -1;
+                grid-row: 2;
+                margin: 0;
+                width: auto;
+                justify-self: stretch;
+                text-align: start;
+                max-width: none;
+            }
+        }
     }
 }