Fix site access banner overlay and immediate guidance

website/site-access-help.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>KoalaSync Cannot Access Your Video Site? Fix Website Access</title>
-    <meta name="description" content="Restore KoalaSync website access in Chrome, Edge, Brave, Opera, or Firefox when a video tab cannot be linked or controlled.">
+    <meta name="description" content="Restore KoalaSync website access immediately in Chrome, Edge, Brave, Opera, Vivaldi, or Firefox when a video tab cannot be linked or controlled.">
     <meta name="robots" content="index, follow">
     <link rel="preload" href="style.min.css" as="style">
     <link rel="stylesheet" href="style.min.css">
@@ -69,32 +69,35 @@
         </header>
 
         <section class="support-card" aria-labelledby="quick-fix-title">
-            <span class="support-eyebrow">Start here</span>
-            <h2 id="quick-fix-title">Use the built-in one-click fix</h2>
+            <span class="support-eyebrow">Immediate workaround — no extension update required</span>
+            <h2 id="quick-fix-title">Allow KoalaSync in your browser now</h2>
             <ol class="support-steps">
-                <li>Open the video website and then open the KoalaSync popup.</li>
-                <li>Select the video tab. If access is blocked, KoalaSync shows an access notice instead of silently pretending the tab is connected.</li>
-                <li>Select <strong>Allow access</strong> and approve the browser prompt. KoalaSync retries the tab automatically.</li>
-                <li>If the prompt does not appear, use the manual browser steps below and reload the video page once.</li>
+                <li>Keep the affected video website open.</li>
+                <li>Open the browser’s extensions menu next to the address bar.</li>
+                <li>If KoalaSync appears under <strong>Access requested</strong>, select KoalaSync to grant access.</li>
+                <li>If that section is missing, open KoalaSync’s menu or extension details and set website access to <strong>On this site</strong> or <strong>On all sites</strong>.</li>
+                <li>Reload the video page once, open KoalaSync, and select the video tab again.</li>
             </ol>
+            <p>This manual workaround works even while KoalaSync 2.6.2 is still waiting for approval or rollout in your browser’s extension store.</p>
         </section>
 
         <div class="support-callout" role="note">
             <span class="support-callout-icon" aria-hidden="true">i</span>
             <div>
                 <strong>This is not a new KoalaSync permission.</strong>
-                <p>Modern browsers let users, profiles, and administrators withhold extension access per website. Chrome’s newer extension menu makes that existing control much more visible. KoalaSync now detects the blocked state and asks for access only after you select a video tab.</p>
+                <p>Modern browsers let users, profiles, and administrators withhold extension access per website. Chrome’s newer extension menu makes that existing control much more visible. KoalaSync 2.6.2 detects the blocked state and adds a guided recovery action after the store update reaches you; the manual steps above work immediately on older KoalaSync releases.</p>
             </div>
         </div>
 
         <div class="support-grid">
             <section class="support-card" aria-labelledby="chromium-title">
-                <span class="support-eyebrow">Chrome, Edge, Brave, Opera</span>
+                <span class="support-eyebrow">Chrome, Edge, Brave, Opera, Vivaldi</span>
                 <h2 id="chromium-title">Allow KoalaSync on the current site</h2>
                 <ol>
                     <li>Keep the affected video tab open.</li>
                     <li>Open the browser’s extensions menu near the address bar.</li>
                     <li>Under <strong>Access requested</strong>, select KoalaSync and allow access.</li>
+                    <li>In browsers with the older menu, right-click KoalaSync and choose <strong>This can read and change site data</strong>, then allow the current site.</li>
                     <li>If needed, open KoalaSync’s extension details and change site access to <strong>On this site</strong> or <strong>On all sites</strong>.</li>
                     <li>Reload the video tab and select it again in KoalaSync.</li>
                 </ol>

website/styles/foundation.css

@@ -93,12 +93,19 @@
 }
 
 .site-access-banner {
-    position: relative;
+    position: fixed;
+    top: 89px;
+    left: 0;
+    width: 100%;
     z-index: 900;
-    margin-top: 96px;
     border-block: 1px solid color-mix(in oklch, var(--accent) 42%, transparent);
     background: color-mix(in oklch, var(--accent) 16%, var(--bg));
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
+    transition: top 0.3s ease;
+}
+
+nav.nav-scrolled + .site-access-banner {
+    top: 59px;
 }
 
 .site-access-banner-inner {
@@ -143,7 +150,11 @@
 
 @media (max-width: 768px) {
     .site-access-banner {
-        margin-top: 76px;
+        top: 73px;
+    }
+
+    nav.nav-scrolled + .site-access-banner {
+        top: 59px;
     }
 
     .site-access-banner-inner {

website/template.html

@@ -210,7 +210,7 @@
         </style>
     </noscript>
 </head>
-<body class="landing-with-support-banner">
+<body>
     <div class="scroll-progress-bar"></div>
 
     <a class="skip-link" href="#main-content">Skip to main content</a>
@@ -366,7 +366,6 @@
             <span id="site-access-banner-text">{{SUPPORT_BANNER_TEXT}}</span>
             <a href="/site-access-help.html" class="site-access-banner-link">
                 <span>{{SUPPORT_BANNER_CTA}}</span>
-                <span aria-hidden="true">→</span>
             </a>
         </div>
     </aside>