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>
+            <span class="support-eyebrow">Immediate workaround — no extension update required</span>
-            <h2 id="quick-fix-title">Use the built-in one-click fix</h2>
+            <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>Keep the affected video website open.</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>Open the browser’s extensions menu next to the address bar.</li>
-                <li>Select <strong>Allow access</strong> and approve the browser prompt. KoalaSync retries the tab automatically.</li>
+                <li>If KoalaSync appears under <strong>Access requested</strong>, select KoalaSync to grant access.</li>
-                <li>If the prompt does not appear, use the manual browser steps below and reload the video page once.</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>