fix: eliminate banner flash on page reload

src/app.html

@@ -10,6 +10,31 @@
 			document.documentElement.setAttribute('color-scheme', 'dark')
 		</script>
 
+		<!-- Prevent dismissed banners from flashing on reload by hiding them before first paint,
+		     same technique as the color-scheme script above. -->
+		<script>
+			try {
+				var bannerTypes = [
+					{ pattern: /^banner_(.+)_hidden$/, attr: 'data-banner-id' },
+					{ pattern: /^campaign_banner_(.+)_hidden$/, attr: 'data-campaign-banner-id' }
+				]
+				var css = ''
+				for (var i = 0; i < localStorage.length; i++) {
+					var key = localStorage.key(i)
+					if (!key || localStorage.getItem(key) !== 'true') continue
+					for (var j = 0; j < bannerTypes.length; j++) {
+						var m = key.match(bannerTypes[j].pattern)
+						if (m) css += `[${bannerTypes[j].attr}="${m[1]}"]{display:none!important}`
+					}
+				}
+				if (css) {
+					var s = document.createElement('style')
+					s.textContent = css
+					document.head.appendChild(s)
+				}
+			} catch (e) {}
+		</script>
+
 		<!-- Google Tag Manager -->
 		<script>
 			;(function (w, d, s, l, i) {

src/lib/components/Banner.svelte

@@ -1,36 +1,26 @@
 <script lang="ts">
 	import X from 'lucide-svelte/icons/x'
 	import { page } from '$app/stores'
-	import { onMount } from 'svelte'
 	import { browser } from '$app/environment'
 	import { fade } from 'svelte/transition'
 
 	export let contrast = false
 	export let target: string | null = null
 	export let id: string | null = null
-	export let hidden = false
-
-	// Function to check localStorage on mount
-	function checkStoredState() {
-		if (browser && id) {
-			const storedState = localStorage.getItem(`banner_${id}_hidden`)
-			if (storedState === 'true') {
-				hidden = true
-				console.log(`Banner ${id} restored from storage as hidden`)
-			}
+	let hidden = false
+	if (browser && id) {
+		try {
+			hidden = localStorage.getItem(`banner_${id}_hidden`) === 'true'
+		} catch {
+			// SecurityError in storage-restricted contexts
 		}
 	}
 
-	// Simplest possible click handler
 	function closeClick() {
-		console.log('Close button clicked! ' + new Date().toISOString())
 		hidden = true
-
-		// Save state if we have an ID
 		if (browser && id) {
 			try {
 				localStorage.setItem(`banner_${id}_hidden`, 'true')
-				console.log('Saved to localStorage')
 			} catch (e) {
 				console.error(e)
 			}
@@ -41,30 +31,10 @@
 		const path = $page.url.pathname
 		if (path === target) hidden = true
 	}
-
-	onMount(() => {
-		checkStoredState()
-
-		// Debug info
-		console.log('Banner component mounted')
-
-		// Extra safety - add global click handler in case event bubbling is an issue
-		if (browser) {
-			const closeBtn = document.querySelector('.banner-close-btn')
-			if (closeBtn) {
-				closeBtn.addEventListener('click', (e) => {
-					e.preventDefault()
-					e.stopPropagation()
-					console.log('Direct DOM click handler fired')
-					closeClick()
-				})
-			}
-		}
-	})
 </script>
 
 {#if !hidden}
-	<div class="banner" class:contrast transition:fade={{ duration: 200 }}>
+	<div class="banner" class:contrast data-banner-id={id} transition:fade={{ duration: 200 }}>
 		<span class="content">
 			<slot />
 		</span>

src/lib/components/CampaignBanner.svelte

@@ -9,7 +9,14 @@
 
 	export let href: string
 	export let id = 'campaign'
-	let hidden = browser && id && localStorage.getItem(`campaign_banner_${id}_hidden`) === 'true'
+	let hidden = false
+	if (browser && id) {
+		try {
+			hidden = localStorage.getItem(`campaign_banner_${id}_hidden`) === 'true'
+		} catch {
+			// SecurityError in storage-restricted contexts
+		}
+	}
 
 	function close() {
 		hidden = true
@@ -32,7 +39,7 @@
 </script>
 
 {#if !hidden}
-	<div class="campaign-banner" transition:fade={{ duration: 200 }}>
+	<div class="campaign-banner" data-campaign-banner-id={id} transition:fade={{ duration: 200 }}>
 		<div class="accent-line"></div>
 		<div class="campaign-content">
 			<LinkWithoutIcon {href} class="campaign-link" on:click={close}>

src/routes/+layout.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { browser } from '$app/environment'
 	import type { GeoApiResponse } from '$api/geo/+server'
 	import { page } from '$app/stores'
 	import Banner from '$lib/components/Banner.svelte'
@@ -35,10 +34,6 @@
 	// Show the hero on the homepage, but nowhere else
 	$: hero = deLocalizeHref($page.url.pathname) === '/'
 
-	$: if (browser && deLocalizeHref($page.url.pathname) === '/india-summit-2026') {
-		localStorage.setItem('campaign_banner_india-summit-2026_hidden', 'true')
-	}
-
 	onMount(async () => {
 		const response = await fetch('/api/geo')
 		geo = await response.json()