-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path404.html
More file actions
308 lines (294 loc) · 81.7 KB
/
404.html
File metadata and controls
308 lines (294 loc) · 81.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html><html lang="404" dir="ltr" class="h-full dark"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/x-icon" href="/img/favicon/favicon.ico"><title>404 | Digital Bible Society</title><meta name="description" content><meta itemprop="name" content="404"><meta itemprop="description" content><meta property="og:type" content="website"><meta property="og:title" content="404"><meta property="og:description" content><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="404"><meta name="twitter:description" content><meta name="generator" content="Astro v5.9.2"><meta name="theme-color" content="#2563eb"><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><script>
const setDarkMode = () => {
const isDarkModePreferred = () => {
return localStorage.theme === "dark" ||
(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches);
};
const toggleClasses = (element, condition, classesOn, classesOff) => {
classesOn.forEach(cls => element.classList.toggle(cls, condition));
classesOff.forEach(cls => element.classList.toggle(cls, !condition));
};
const updateTogglerUI = (isDark) => {
toggleClasses(document.getElementById("darkModeTogglerSpace"), isDark, ["translate-x-5"], ["translate-x-0"]);
toggleClasses(document.getElementById("darkModeTogglerMoonWrap"), isDark, ["opacity-100", "duration-200", "ease-in"], ["opacity-0", "duration-100", "ease-out"]);
toggleClasses(document.getElementById("darkModeTogglerSunWrap"), isDark, ["opacity-0", "duration-100", "ease-out"], ["opacity-100", "duration-200", "ease-in"]);
};
const toggleDarkMode = () => {
const isDark = document.documentElement.classList.toggle("dark");
updateTogglerUI(isDark);
localStorage.theme = isDark ? "dark" : "light";
};
const preferredDarkMode = isDarkModePreferred();
document.documentElement.classList.toggle("dark", preferredDarkMode);
updateTogglerUI(preferredDarkMode);
attachEvent("[data-aw-toggle-color-scheme]", "click", toggleDarkMode);
};
document.addEventListener("DOMContentLoaded", setDarkMode);
document.addEventListener("astro:after-swap", setDarkMode);
function attachEvent(selector, event, fn) {
const matches = document.querySelectorAll(selector);
if (matches && matches.length) {
matches.forEach((elem) => {
elem.addEventListener(
event,
function () {
fn(elem);
},
false,
);
});
}
}
function hideOnClickOutside(element, toggleOptions = []) {
const outsideClickListener = event => {
if (!element.contains(event.target) && isVisible(element)) {
element.classList.add("hidden");
// Apply toggles to other elements if specified
toggleOptions.forEach(option => {
const targetElement = document.querySelector(option.selector);
if (targetElement) {
targetElement.classList.toggle(option.className);
}
});
removeClickListener();
}
}
const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener);
}
document.addEventListener('click', outsideClickListener);
}
const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
</script><!-- General --><link rel="icon" type="image/x-icon" href="/img/favicon/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"><!-- Apple Touch Icons --><link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"><link rel="apple-touch-icon" href="/img/favicon/apple-icon.png"><link rel="apple-touch-icon-precomposed" href="/img/favicon/apple-icon-precomposed.png"><!-- Android / Chrome --><link rel="icon" type="image/png" sizes="36x36" href="/img/favicon/android-icon-36x36.png"><link rel="icon" type="image/png" sizes="48x48" href="/img/favicon/android-icon-48x48.png"><link rel="icon" type="image/png" sizes="72x72" href="/img/favicon/android-icon-72x72.png"><link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/android-icon-96x96.png"><link rel="icon" type="image/png" sizes="144x144" href="/img/favicon/android-icon-144x144.png"><link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"><!-- Microsoft --><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-config" content="/img/favicon/browserconfig.xml"><meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"><meta name="msapplication-square70x70logo" content="/img/favicon/ms-icon-70x70.png"><meta name="msapplication-square150x150logo" content="/img/favicon/ms-icon-150x150.png"><meta name="msapplication-square310x310logo" content="/img/favicon/ms-icon-310x310.png"><!-- Web Manifest --><link rel="manifest" href="/img/favicon/manifest.json"><!-- Theme --><meta name="theme-color" content="#ffffff"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><style>.thumb-active[data-astro-cid-zetdm5md]{border-color:#2563eb!important;border-width:2px}.fade-out[data-astro-cid-zetdm5md]{opacity:0!important}.fade-in[data-astro-cid-zetdm5md]{opacity:1!important}[data-astro-cid-zetdm5md][x-cloak]{display:none!important}
</style>
<link rel="stylesheet" href="/_astro/_id_.BSkczpI-.css"></head> <body class="antialiased text-stone-900 dark:text-stone-300 tracking-tight h-screen dark:bg-stone-900"> <div class="flex grow flex-col justify-between m-auto h-screen"> <header class="border-t border-gray-300 dark:border-stone-800 bg-[url('/img/logo/bg.png')] dark:bg-[url('/img/logo/bg-dark.png')] "> <div id="wrapper" class="pt-1 pb-1 lg:pt-1.5 mx-auto z-40 w-full max-w-6xl flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"> <!-- Logo --> <div class="flex justify-center sm:justify-start"> <a class="flex flex-row items-center justify-center mx-auto" href="/404/" style="position: relative;"> <img src="/img/logo/logo.svg" alt="DBS Logo" class="w-14 sm:w-12 md:w-14 sm:ml-12 lg:ml-14 saturate-150 dark:filter-none"> <span class="pt-1 ml-2 md:ml-3 self-center text-lg sm:text-sm md:text-base lg:text-lg xl:text-xl uppercase whitespace-nowrap text-black dark:text-stone-200">Digital <span class="text-blue-700 dark:text-blue-400">Bible</span> Society</span> </a> </div> <!-- Search and Controls --> <div class="w-full flex flex-row justify-between items-center pr-4 sm:px-0 gap-1 mt-1"> <div class="flex mx-auto w-[50%] lg:w-[55%]"> <div id="search-wrapper" class="mx-auto w-full"> <div class="block mx-auto mb-1"> <div class="relative mx-1"> <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-stone-400"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 h-4 md:w-6 md:h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path> </svg> </div> <input id="search-input" type="text" placeholder="site serch" aria-label="Search" autocomplete="off" data-locale="404" data-t="[object Object]" class="block w-full text-xs rounded-md border border-stone-400 py-1 md:py-2 pl-12 shadow-lg
text-stone-500 placeholder-stone-600 bg-stone-50
dark:border-stone-700 dark:bg-stone-600 dark:text-stone-100 dark:placeholder-stone-100"> </div> </div> <div id="search-results-wrapper" class="relative w-full z-50"></div> </div> <script type="module" src="/_astro/Search.astro_astro_type_script_index_0_lang.C99OTu2Z.js"></script> </div> <div class="flex justify-end"> <div class="flex justify-center items-center"> <!--- Language Select using Popover (no JS) ---> <details class="relative inline-block group"> <summary class="focus:outline-none focus:ring-4 rounded-lg text-sm py-0.5 px-2 inline-flex items-center border
text-slate-600 bg-stone-100 dark:bg-stone-600 border-stone-300 dark:border-stone-700 dark:text-stone-300
hover:bg-white hover:border-blue-500 dark:hover:bg-stone-700 focus:ring-stone-200 dark:focus:ring-stone-700 cursor-pointer select-none"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-5 w-5 dark:placeholder-stone-400" viewBox="0 0 20 20"> <path d="M7.75 2.75a.75.75 0 0 0-1.5 0v1.26a32.99 32.99 0 0 0-3.6.28.75.75 0 1 0 .2 1.48 31.55 31.55 0 0 1 5.85-.22 19.38 19.38 0 0 1-1.7 4A19.42 19.42 0 0 1 6 7.5a.75.75 0 0 0-1.39.58 20.93 20.93 0 0 0 1.5 2.9 19.61 19.61 0 0 1-3.83 4.16.75.75 0 1 0 .94 1.16A21.12 21.12 0 0 0 7 12.34l.29.4a.75.75 0 0 0 1.2-.92c-.21-.26-.4-.54-.6-.81a20.89 20.89 0 0 0 2.34-5.33l.92.1a.75.75 0 0 0 .2-1.48 32.83 32.83 0 0 0-3.6-.3V2.75z"></path><path fill-rule="evenodd" d="M13 8a.75.75 0 0 1 .67.41l4.25 8.5a.75.75 0 1 1-1.34.67l-.8-1.58h-5.57l-.79 1.58a.75.75 0 1 1-1.34-.66l4.25-8.5A.75.75 0 0 1 13 8zm2.04 6.5L13 10.43l-2.04 4.07h4.08z" clip-rule="evenodd"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2 md:h-3 md:w-3 mt-1 text-sky-700 dark:text-sky-200"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path> </svg> </summary> <nav class="absolute mt-1 z-50 rounded-md shadow-lg border px-2 py-1 bg-white border-blue-500 dark:bg-stone-800 dark:border-stone-400 min-w-full" tabIndex="-1"> <a href="/en//" class="block cursor-pointer py-2 px-2 text-sm hover:rounded-lg
text-slate-800 hover:text-white hover:bg-blue-500 border-b border-stone-200 dark:border-stone-700
dark:text-stone-200 dark:hover:text-stone-100 dark:bg-stone-800 dark:hover:bg-stone-500 "> English </a><a href="/es//" class="block cursor-pointer py-2 px-2 text-sm hover:rounded-lg
text-slate-800 hover:text-white hover:bg-blue-500 border-b border-stone-200 dark:border-stone-700
dark:text-stone-200 dark:hover:text-stone-100 dark:bg-stone-800 dark:hover:bg-stone-500 "> Español </a><a href="/fr//" class="block cursor-pointer py-2 px-2 text-sm hover:rounded-lg
text-slate-800 hover:text-white hover:bg-blue-500 border-b border-stone-200 dark:border-stone-700
dark:text-stone-200 dark:hover:text-stone-100 dark:bg-stone-800 dark:hover:bg-stone-500 "> Français </a><a href="/pt//" class="block cursor-pointer py-2 px-2 text-sm hover:rounded-lg
text-slate-800 hover:text-white hover:bg-blue-500 border-b border-stone-200 dark:border-stone-700
dark:text-stone-200 dark:hover:text-stone-100 dark:bg-stone-800 dark:hover:bg-stone-500 "> Português </a><a href="/id//" class="block cursor-pointer py-2 px-2 text-sm hover:rounded-lg
text-slate-800 hover:text-white hover:bg-blue-500 border-b border-stone-200 dark:border-stone-700
dark:text-stone-200 dark:hover:text-stone-100 dark:bg-stone-800 dark:hover:bg-stone-500 "> Indonesia </a><a href="/ar//" class="block cursor-pointer py-2 px-2 text-sm hover:rounded-lg
text-slate-800 hover:text-white hover:bg-blue-500 border-b border-stone-200 dark:border-stone-700
dark:text-stone-200 dark:hover:text-stone-100 dark:bg-stone-800 dark:hover:bg-stone-500 "> عربي </a><a href="/hi//" class="block cursor-pointer py-2 px-2 text-sm hover:rounded-lg
text-slate-800 hover:text-white hover:bg-blue-500 border-b border-stone-200 dark:border-stone-700
dark:text-stone-200 dark:hover:text-stone-100 dark:bg-stone-800 dark:hover:bg-stone-500 "> हिन्दी </a><a href="/bn//" class="block cursor-pointer py-2 px-2 text-sm hover:rounded-lg
text-slate-800 hover:text-white hover:bg-blue-500 border-b border-stone-200 dark:border-stone-700
dark:text-stone-200 dark:hover:text-stone-100 dark:bg-stone-800 dark:hover:bg-stone-500 "> বাংলা </a><a href="/zh//" class="block cursor-pointer py-2 px-2 text-sm hover:rounded-lg
text-slate-800 hover:text-white hover:bg-blue-500 border-b border-stone-200 dark:border-stone-700
dark:text-stone-200 dark:hover:text-stone-100 dark:bg-stone-800 dark:hover:bg-stone-500 "> 普通话 </a> </nav> </details> <!--- Light - Dark Mode Toggle --> <button type="button" class="mr-0.5 md:mr-1 rounded-lg text-sm inline-flex items-center align-middle
text-stone-500 dark:text-stone-300 dark:bg-stone-800 hover:bg-stone-100 dark:hover:bg-stone-700"></button> <button id="DarkModeToggle" type="button" aria-label="Toggle between Dark and Light mode" class="relative inline-flex sm:hidden md:inline-flex h-6 w-10 mx-1 flex-shrink-0 cursor-pointer rounded-full border
transition-colors duration-200 ease-in-out shadow-inner
bg-gray-200 border-gray-600 hover:bg-gray-400 dark:bg-stone-600 dark:hover:bg-stone-500" role="switch" data-aw-toggle-color-scheme> <span class="sr-only">Use setting</span> <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" --> <span id="darkModeTogglerSpace" class="pointer-events-none relative right-1 inline-block h-6 w-6 transform rounded-full shadow ring-0 transition duration-200 ease-in-out
bg-white dark:bg-stone-900"> <!-- Enabled: "opacity-0 duration-100 ease-out", Not Enabled: "opacity-100 duration-200 ease-in" --> <span id="darkModeTogglerMoonWrap" aria-hidden="true" class="absolute inset-0 flex h-6 w-6 border rounded-full items-center justify-center opacity-0 transition-opacity duration-200 ease-in"> <svg xmlns="http://www.w3.org/2000/svg" fill="#fff" stroke="currentColor" stroke-width="1.5" class="size-6" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 15a9.72 9.72 0 0 1-3.75.75 9.75 9.75 0 0 1-9-13.5 9.75 9.75 0 0 0-6 9A9.75 9.75 0 0 0 12.75 21a9.75 9.75 0 0 0 9-6Z"></path></svg> </span> <span id="darkModeTogglerSunWrap" aria-hidden="true" class="-mt-[1px] absolute text-blue-700 inset-0 flex h-6 w-6 border rounded-full items-center justify-center opacity-0 transition-opacity duration-100 ease-out"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35" stroke-width="1.5" class="size-6"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="16.5" cy="16.5" r="17" fill="#226EAB" stroke="#E1E0E0"></circle><path d="M0 0h32v32H0z"></path><circle cx="16.17" cy="16.17" r="6.5" fill="#FDFDFD"></circle><path stroke="#FBFBFB" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.67" d="M6 16h1.11M16 6v1.11M24.89 16H26m-10 8.89V26M8.89 8.89l.78.78m13.44-.78-.78.78m0 12.66.78.78m-13.44-.78-.78.78"></path></g></svg> </span> </span> </button> <!-- Donate Button --> <a href="/404/about/donate" class="inline-flex rounded-lg text-sm ml-2 md:mr-2 lg:mx-2 pl-1.5 lg:pl-2 pr-2 lg:pr-4 py-0.5 md:py-1 items-center
text-white bg-gradient-to-br from-primary to-secondary hover:bg-gradient-to-tl shadow-lg
dark:text-stone-300 dark:bg-stone-700 dark:hover:text-stone-100 dark:hover:bg-stone-400 whitespace-nowrap"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4"> <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"></path> </svg> <span class=" hidden md:block pl-2 text-base">give now</span> <span class="md:hidden pl-1 text-sm">donate</span> </a> </div> </div> </div> </div> <!-- Mobile Hamburger --> <input type="checkbox" id="mobile-menu-toggle" class="hidden peer"> <label for="mobile-menu-toggle" class="sm:hidden absolute top-3 left-3 z-50 cursor-pointer flex flex-col gap-1.5"> <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition duration-300 peer-checked:rotate-45 peer-checked:translate-y-2"></span> <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition duration-300 peer-checked:opacity-0"></span> <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition duration-300 peer-checked:-rotate-45 peer-checked:-translate-y-2"></span> </label> <!-- Mobile Menu --> <div class="fixed top-0 left-0 w-full h-full bg-white dark:bg-stone-900 overflow-y-auto transform -translate-x-full transition-transform duration-300 ease-in-out z-40 peer-checked:translate-x-0 sm:hidden"> <nav class="flex flex-col pt-16"> <div class="border-b border-gray-200 dark:border-stone-700" x-data="{ open: false }"> <a href="/404/bibles" @click.prevent="
if (open) {
window.location.href = $el.href;
} else {
open = true;
}
" class="flex justify-between items-center py-3 px-5 text-lg font-medium hover:bg-gray-50 dark:hover:bg-stone-800"> <span>Bibles</span> <svg class="h-5 w-5 transition-transform duration-200" :class="{ 'rotate-180': open }" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path> </svg> </a> <div x-show="open" x-collapse x-cloak class="flex flex-col bg-gray-100 dark:bg-stone-800/80"> <a href="/404/bibles" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10"><img src="/img/icons/bible_gray_cloud.webp" alt="BibleCloud"></span> <div class="flex flex-col"> <span class="text-base font-medium">Bibles</span> </div> </a><a href="/404/audio/" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10"><img src="/img/icons/bible_gray_players.webp" alt="Audio Players"></span> <div class="flex flex-col"> <span class="text-base font-medium">Audio Bible Players</span> </div> </a><a href="/404/bibles/audio" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10"><img src="/img/icons/bible_gray_audio.webp" alt="Audio Bibles"></span> <div class="flex flex-col"> <span class="text-base font-medium">Audio Bibles</span> </div> </a><a href="/404/bibles/print" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10"><img src="/img/icons/bible_gray_pod.webp" alt="POD"></span> <div class="flex flex-col"> <span class="text-base font-medium">Print on Demand</span> </div> </a><a href="/404/bibles/reader" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10"><img src="/img/icons/bible_gray_reader.webp" alt="inScript"></span> <div class="flex flex-col"> <span class="text-base font-medium">inScript Reader</span> </div> </a><a href="/404/bibles/historic" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10"><img src="/img/icons/bible_gray_historic.webp" alt="Bible Archive"></span> <div class="flex flex-col"> <span class="text-base font-medium">historic bibles</span> </div> </a><a href="/404/bibles/films/" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10"><img src="/img/icons/bible_gray_films.webp" alt="Films"></span> <div class="flex flex-col"> <span class="text-base font-medium">bible films</span> </div> </a><a href="/404/libraries/art/" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10"><img src="/img/icons/bible_gray_art.webp" alt="Art"></span> <div class="flex flex-col"> <span class="text-base font-medium">Bible Art Gallery</span> </div> </a> </div> </div><div class="border-b border-gray-200 dark:border-stone-700" x-data="{ open: false }"> <a href="/404/audio" @click.prevent="
if (open) {
window.location.href = $el.href;
} else {
open = true;
}
" class="flex justify-between items-center py-3 px-5 text-lg font-medium hover:bg-gray-50 dark:hover:bg-stone-800"> <span>Audio</span> <svg class="h-5 w-5 transition-transform duration-200" :class="{ 'rotate-180': open }" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path> </svg> </a> <div x-show="open" x-collapse x-cloak class="flex flex-col bg-gray-100 dark:bg-stone-800/80"> <a href="/404/audio/" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-8"><img src="/img/icons/audio_players.webp" alt="Audio Players"></span> <div class="flex flex-col"> <span class="text-base font-medium">audio bible Players</span> </div> </a><a href="/404/bibles/audio" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-9 w-9"><img src="/img/icons/audio_bibles.webp" alt="Audio Bibles"></span> <div class="flex flex-col"> <span class="text-base font-medium">audio Bibles</span> </div> </a><a href="/404/audio/listen" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-8 w-10 -ml-2"><img src="/img/icons/audio_listen.webp" alt="Audio Bibles"></span> <div class="flex flex-col"> <span class="text-base font-medium">listen online</span> </div> </a><a href="/404/libraries/collections" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-8 w-10 -ml-1"><img src="/img/icons/audio_collections.webp" alt="Audio Bibles"></span> <div class="flex flex-col"> <span class="text-base font-medium">Audio Collections</span> </div> </a> </div> </div><div class="border-b border-gray-200 dark:border-stone-700" x-data="{ open: false }"> <a href="/404/libraries" @click.prevent="
if (open) {
window.location.href = $el.href;
} else {
open = true;
}
" class="flex justify-between items-center py-3 px-5 text-lg font-medium hover:bg-gray-50 dark:hover:bg-stone-800"> <span>Libraries</span> <svg class="h-5 w-5 transition-transform duration-200" :class="{ 'rotate-180': open }" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path> </svg> </a> <div x-show="open" x-collapse x-cloak class="flex flex-col bg-gray-100 dark:bg-stone-800/80"> <a href="/404/libraries" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10 shadow-lg"><img src="/img/icons/libraries_square_overview.webp" alt="Overview"></span> <div class="flex flex-col"> <span class="text-base font-medium">Overview</span> </div> </a><a href="/404/libraries/treasures" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10 shadow-lg"><img src="/img/icons/libraries_square_treasures.webp" alt="Treasures"></span> <div class="flex flex-col"> <span class="text-base font-medium">Treasures Libraries</span> </div> </a><a href="/404/libraries/bible" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10 shadow-lg"><img src="/img/icons/libraries_square_bible.webp" alt="Libraries"></span> <div class="flex flex-col"> <span class="text-base font-medium">Bible Libraries</span> </div> </a><a href="/404/libraries/collections" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10 shadow-lg"><img src="/img/icons/libraries_square_collections.webp" alt="Collections"></span> <div class="flex flex-col"> <span class="text-base font-medium">Audio Collections</span> </div> </a><a href="/404/libraries/art" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-10 shadow-lg"><img src="/img/icons/libraries_square_art.webp" alt="Art"></span> <div class="flex flex-col"> <span class="text-base font-medium">Bible Art Gallery</span> </div> </a> </div> </div><div class="border-b border-gray-200 dark:border-stone-700" x-data="{ open: false }"> <a href="/404/research" @click.prevent="
if (open) {
window.location.href = $el.href;
} else {
open = true;
}
" class="flex justify-between items-center py-3 px-5 text-lg font-medium hover:bg-gray-50 dark:hover:bg-stone-800"> <span>Research</span> <svg class="h-5 w-5 transition-transform duration-200" :class="{ 'rotate-180': open }" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path> </svg> </a> <div x-show="open" x-collapse x-cloak class="flex flex-col bg-gray-100 dark:bg-stone-800/80"> <a href="/404/research/countries" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-9 w-9"><img src="/img/icons/research_countries.webp" alt="Countries"></span> <div class="flex flex-col"> <span class="text-base font-medium">Countries</span> </div> </a><a href="/404/research/languages" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-9 w-10"><img src="/img/icons/research_languages.webp" alt="Languages"></span> <div class="flex flex-col"> <span class="text-base font-medium">Languages</span> </div> </a><a href="/404/research/agencies" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-9 w-8"><img src="/img/icons/research_agencies.webp" alt="Agencies"></span> <div class="flex flex-col"> <span class="text-base font-medium">Bible Agencies</span> </div> </a><a href="/404/about/work/research" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-10 w-9"><img src="/img/icons/research_fab.webp" alt="FindABible"></span> <div class="flex flex-col"> <span class="text-base font-medium">Find a Bible</span> </div> </a><a href="/404/about/work/research/index.html#bwl" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-9 w-9"><img src="/img/icons/research_bwl.webp" alt="BibleWatch"></span> <div class="flex flex-col"> <span class="text-base font-medium">Bible Watch List</span> </div> </a><a href="/404/research" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-9 w-9"><img src="/img/icons/research_with_us.webp" alt="Join Us"></span> <div class="flex flex-col"> <span class="text-base font-medium">Team</span> </div> </a> </div> </div><div class="border-b border-gray-200 dark:border-stone-700" x-data="{ open: false }"> <a href="/404/stories" @click.prevent="
if (open) {
window.location.href = $el.href;
} else {
open = true;
}
" class="flex justify-between items-center py-3 px-5 text-lg font-medium hover:bg-gray-50 dark:hover:bg-stone-800"> <span>Stories</span> <svg class="h-5 w-5 transition-transform duration-200" :class="{ 'rotate-180': open }" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path> </svg> </a> <div x-show="open" x-collapse x-cloak class="flex flex-col bg-gray-100 dark:bg-stone-800/80"> <a href="/404/stories" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-8 w-8"><img src="/img/icons/stories_speak_overview.webp" alt="Overview"></span> <div class="flex flex-col"> <span class="text-base font-medium"></span> </div> </a><a href="/404/stories/articles" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-8 w-8"><img src="/img/icons/stories_speak_articles.webp" alt="Stories"></span> <div class="flex flex-col"> <span class="text-base font-medium"></span> </div> </a><a href="/404/projects/proposals" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-8 w-8"><img src="/img/icons/stories_speak_proposals.webp" alt="Join Us"></span> <div class="flex flex-col"> <span class="text-base font-medium">Projects</span> <span class="text-xs text-gray-500 dark:text-stone-300">Support is needed</span> </div> </a><a href="/404/stories/magazines" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-8 w-8"><img src="/img/icons/stories_speak_publications.webp" alt="Magazines"></span> <div class="flex flex-col"> <span class="text-base font-medium"></span> </div> </a><a href="/404/stories/video" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-8 w-8"><img src="/img/icons/stories_speak_video.webp" alt="News"></span> <div class="flex flex-col"> <span class="text-base font-medium"></span> </div> </a> </div> </div><div class="border-b border-gray-200 dark:border-stone-700" x-data="{ open: false }"> <a href="/404/projects" @click.prevent="
if (open) {
window.location.href = $el.href;
} else {
open = true;
}
" class="flex justify-between items-center py-3 px-5 text-lg font-medium hover:bg-gray-50 dark:hover:bg-stone-800"> <span>Projects</span> <svg class="h-5 w-5 transition-transform duration-200" :class="{ 'rotate-180': open }" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path> </svg> </a> <div x-show="open" x-collapse x-cloak class="flex flex-col bg-gray-100 dark:bg-stone-800/80"> <a href="/404/projects" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-9 w-9"><img src="/img/icons/projects_involve.webp" alt="Volunteer"></span> <div class="flex flex-col"> <span class="text-base font-medium">Overview</span> <span class="text-xs text-gray-500 dark:text-stone-300">Stronger Together</span> </div> </a><a href="/404/projects/proposals" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 h-9 w-9"><img src="/img/icons/projects_proposals.webp" alt="Join Us"></span> <div class="flex flex-col"> <span class="text-base font-medium">Projects</span> <span class="text-xs text-gray-500 dark:text-stone-300">Support is needed</span> </div> </a> </div> </div><div class="border-b border-gray-200 dark:border-stone-700" x-data="{ open: false }"> <a href="/404/about" @click.prevent="
if (open) {
window.location.href = $el.href;
} else {
open = true;
}
" class="flex justify-between items-center py-3 px-5 text-lg font-medium hover:bg-gray-50 dark:hover:bg-stone-800"> <span>About</span> <svg class="h-5 w-5 transition-transform duration-200" :class="{ 'rotate-180': open }" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path> </svg> </a> <div x-show="open" x-collapse x-cloak class="flex flex-col bg-gray-100 dark:bg-stone-800/80"> <a href="/404/about/mission" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 w-9"><img src="/img/icons/icon_blue_mission.svg" alt="Mission"></span> <div class="flex flex-col"> <span class="text-base font-medium">Mission and Values</span> </div> </a><a href="/404/about/work" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 w-9"><img src="/img/icons/icon_blue_work.svg" alt="Our Work"></span> <div class="flex flex-col"> <span class="text-base font-medium">Our Work</span> </div> </a><a href="/404/about/partners" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 w-9"><img src="/img/icons/icon_blue_partners.svg" alt="Partners"></span> <div class="flex flex-col"> <span class="text-base font-medium">Partners</span> </div> </a><a href="/404/stories/projects" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 w-9"><img src="/img/icons/icon_blue_helping.svg" alt="Get Involved"></span> <div class="flex flex-col"> <span class="text-base font-medium">We Need You!</span> </div> </a><a href="/404/about/donate" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 w-9"><img src="/img/icons/icon_blue_donate.svg" alt="Donate"></span> <div class="flex flex-col"> <span class="text-base font-medium">Donate</span> </div> </a><a href="/404/about/contact" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-200 dark:hover:bg-stone-700"> <span class="shrink-0 w-9"><img src="/img/icons/icon_blue_contact.svg" alt="Contact"></span> <div class="flex flex-col"> <span class="text-base font-medium">Contact</span> <span class="text-xs text-gray-500 dark:text-stone-300">Contact Us</span> </div> </a> </div> </div> </nav> </div> <!-- Desktop Menu --> <div class="hidden sm:block"> <nav class="text-stone-800 border-stone-300 bg-[url('/img/logo/bg.png')]
dark:text-stone-200 dark:border-stone-700 dark:bg-[url('/img/logo/bg-dark.png')]"> <div class="max-w-6xl mx-auto flex items-center justify-center gap-1 md:gap-2"> <div class="relative group hidden sm:inline-block"> <!-- Trigger element --> <a href="/404/bibles"> <div class="text-sm md:text-base pt-1 py-2.5 px-2 cursor-pointer transition-colors duration-200
hover:text-blue-700 dark:hover:text-blue-400 hover:underline underline-offset-8
"> <span class="flex items-center"> Bibles <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3 lg:h-4 ml-1 mt-0.5 text-sky-700 dark:text-sky-200 transform transition-transform duration-400 group-hover:rotate-180" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg> </span> </div> </a> <!-- Dropdown panel --> <div class="absolute z-50 top-full left-0 px-2 pt-0 hidden group-hover:flex flex-col shadow-lg rounded-b-lg min-w-[360px]
bg-[url('/img/logo/bg.png')] dark:bg-[url('/img/logo/bg-dark.png')]
left-0"> <div class="p-2 w-full"> <div class="flex flex-col divide-y divide-gray-200 dark:divide-stone-700"> <div key="0" class=""> <a href="/404/bibles" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-t-lg "> <span class="shrink-0 flex self-center justify-center h-10 w-10"><img src="/img/icons/bible_gray_cloud.webp" alt="BibleCloud"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Bibles</span> </div> </a> </div><div key="1" class=""> <a href="/404/audio/" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
md:hidden "> <span class="shrink-0 flex self-center justify-center h-10 w-10"><img src="/img/icons/bible_gray_players.webp" alt="Audio Players"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Audio Bible Players</span> </div> </a> </div><div key="2" class=""> <a href="/404/bibles/audio" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
md:hidden "> <span class="shrink-0 flex self-center justify-center h-10 w-10"><img src="/img/icons/bible_gray_audio.webp" alt="Audio Bibles"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Audio Bibles</span> </div> </a> </div><div key="3" class=""> <a href="/404/bibles/print" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-10 w-10"><img src="/img/icons/bible_gray_pod.webp" alt="POD"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Print on Demand</span> </div> </a> </div><div key="4" class=""> <a href="/404/bibles/reader" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-10 w-10"><img src="/img/icons/bible_gray_reader.webp" alt="inScript"></span> <div class="flex flex-col"> <span class="text-sm font-medium">inScript Reader</span> </div> </a> </div><div key="5" class=""> <a href="/404/bibles/historic" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-10 w-10"><img src="/img/icons/bible_gray_historic.webp" alt="Bible Archive"></span> <div class="flex flex-col"> <span class="text-sm font-medium">historic bibles</span> </div> </a> </div><div key="6" class=""> <a href="/404/bibles/films/" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-10 w-10"><img src="/img/icons/bible_gray_films.webp" alt="Films"></span> <div class="flex flex-col"> <span class="text-sm font-medium">bible films</span> </div> </a> </div><div key="7" class=""> <a href="/404/libraries/art/" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
hidden md:flex rounded-b-lg"> <span class="shrink-0 flex self-center justify-center h-10 w-10"><img src="/img/icons/bible_gray_art.webp" alt="Art"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Bible Art Gallery</span> </div> </a> </div> </div> </div> </div> </div><div class="relative group hidden sm:inline-block"> <!-- Trigger element --> <a href="/404/audio"> <div class="text-sm md:text-base pt-1 py-2.5 px-2 cursor-pointer transition-colors duration-200
hover:text-blue-700 dark:hover:text-blue-400 hover:underline underline-offset-8
hidden md:inline-block "> <span class="flex items-center"> Audio <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3 lg:h-4 ml-1 mt-0.5 text-sky-700 dark:text-sky-200 transform transition-transform duration-400 group-hover:rotate-180" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg> </span> </div> </a> <!-- Dropdown panel --> <div class="absolute z-50 top-full left-0 px-2 pt-0 hidden group-hover:flex flex-col shadow-lg rounded-b-lg min-w-[360px]
bg-[url('/img/logo/bg.png')] dark:bg-[url('/img/logo/bg-dark.png')]
left-0"> <div class="p-2 w-full"> <div class="flex flex-col divide-y divide-gray-200 dark:divide-stone-700"> <div key="0" class=""> <a href="/404/audio/" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-t-lg "> <span class="shrink-0 flex self-center justify-center h-10 w-8"><img src="/img/icons/audio_players.webp" alt="Audio Players"></span> <div class="flex flex-col"> <span class="text-sm font-medium">audio bible Players</span> </div> </a> </div><div key="1" class=""> <a href="/404/bibles/audio" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-9 w-9"><img src="/img/icons/audio_bibles.webp" alt="Audio Bibles"></span> <div class="flex flex-col"> <span class="text-sm font-medium">audio Bibles</span> </div> </a> </div><div key="2" class=""> <a href="/404/audio/listen" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-8 w-10 -ml-2"><img src="/img/icons/audio_listen.webp" alt="Audio Bibles"></span> <div class="flex flex-col"> <span class="text-sm font-medium">listen online</span> </div> </a> </div><div key="3" class=""> <a href="/404/libraries/collections" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-b-lg"> <span class="shrink-0 flex self-center justify-center h-8 w-10 -ml-1"><img src="/img/icons/audio_collections.webp" alt="Audio Bibles"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Audio Collections</span> </div> </a> </div> </div> </div> </div> </div><div class="relative group hidden sm:inline-block"> <!-- Trigger element --> <a href="/404/libraries"> <div class="text-sm md:text-base pt-1 py-2.5 px-2 cursor-pointer transition-colors duration-200
hover:text-blue-700 dark:hover:text-blue-400 hover:underline underline-offset-8
"> <span class="flex items-center"> Libraries <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3 lg:h-4 ml-1 mt-0.5 text-sky-700 dark:text-sky-200 transform transition-transform duration-400 group-hover:rotate-180" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg> </span> </div> </a> <!-- Dropdown panel --> <div class="absolute z-50 top-full left-0 px-2 pt-0 hidden group-hover:flex flex-col shadow-lg rounded-b-lg min-w-[360px]
bg-[url('/img/logo/bg.png')] dark:bg-[url('/img/logo/bg-dark.png')]
left-0"> <div class="p-2 w-full"> <div class="flex flex-col divide-y divide-gray-200 dark:divide-stone-700"> <div key="0" class=""> <a href="/404/libraries" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-t-lg "> <span class="shrink-0 flex self-center justify-center h-10 w-10 shadow-lg"><img src="/img/icons/libraries_square_overview.webp" alt="Overview"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Overview</span> </div> </a> </div><div key="1" class=""> <a href="/404/libraries/treasures" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-10 w-10 shadow-lg"><img src="/img/icons/libraries_square_treasures.webp" alt="Treasures"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Treasures Libraries</span> </div> </a> </div><div key="2" class=""> <a href="/404/libraries/bible" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-10 w-10 shadow-lg"><img src="/img/icons/libraries_square_bible.webp" alt="Libraries"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Bible Libraries</span> </div> </a> </div><div key="3" class=""> <a href="/404/libraries/collections" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
md:hidden "> <span class="shrink-0 flex self-center justify-center h-10 w-10 shadow-lg"><img src="/img/icons/libraries_square_collections.webp" alt="Collections"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Audio Collections</span> </div> </a> </div><div key="4" class=""> <a href="/404/libraries/art" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-b-lg"> <span class="shrink-0 flex self-center justify-center h-10 w-10 shadow-lg"><img src="/img/icons/libraries_square_art.webp" alt="Art"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Bible Art Gallery</span> </div> </a> </div> </div> </div> </div> </div><div class="relative group hidden sm:inline-block"> <!-- Trigger element --> <a href="/404/research"> <div class="text-sm md:text-base pt-1 py-2.5 px-2 cursor-pointer transition-colors duration-200
hover:text-blue-700 dark:hover:text-blue-400 hover:underline underline-offset-8
"> <span class="flex items-center"> Research <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3 lg:h-4 ml-1 mt-0.5 text-sky-700 dark:text-sky-200 transform transition-transform duration-400 group-hover:rotate-180" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg> </span> </div> </a> <!-- Dropdown panel --> <div class="absolute z-50 top-full left-0 px-2 pt-0 hidden group-hover:flex flex-col shadow-lg rounded-b-lg min-w-[360px]
bg-[url('/img/logo/bg.png')] dark:bg-[url('/img/logo/bg-dark.png')]
left-1/2 -translate-x-1/2"> <div class="p-2 w-full"> <div class="flex flex-col divide-y divide-gray-200 dark:divide-stone-700"> <div key="0" class=""> <a href="/404/research/countries" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-t-lg "> <span class="shrink-0 flex self-center justify-center h-9 w-9"><img src="/img/icons/research_countries.webp" alt="Countries"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Countries</span> </div> </a> </div><div key="1" class=""> <a href="/404/research/languages" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-9 w-10"><img src="/img/icons/research_languages.webp" alt="Languages"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Languages</span> </div> </a> </div><div key="2" class=""> <a href="/404/research/agencies" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-9 w-8"><img src="/img/icons/research_agencies.webp" alt="Agencies"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Bible Agencies</span> </div> </a> </div><div key="3" class=""> <a href="/404/about/work/research" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-10 w-9"><img src="/img/icons/research_fab.webp" alt="FindABible"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Find a Bible</span> </div> </a> </div><div key="4" class=""> <a href="/404/about/work/research/index.html#bwl" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-9 w-9"><img src="/img/icons/research_bwl.webp" alt="BibleWatch"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Bible Watch List</span> </div> </a> </div><div key="5" class=""> <a href="/404/research" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-b-lg"> <span class="shrink-0 flex self-center justify-center h-9 w-9"><img src="/img/icons/research_with_us.webp" alt="Join Us"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Team</span> </div> </a> </div> </div> </div> </div> </div><div class="relative group hidden sm:inline-block"> <!-- Trigger element --> <a href="/404/stories"> <div class="text-sm md:text-base pt-1 py-2.5 px-2 cursor-pointer transition-colors duration-200
hover:text-blue-700 dark:hover:text-blue-400 hover:underline underline-offset-8
"> <span class="flex items-center"> Stories <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3 lg:h-4 ml-1 mt-0.5 text-sky-700 dark:text-sky-200 transform transition-transform duration-400 group-hover:rotate-180" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg> </span> </div> </a> <!-- Dropdown panel --> <div class="absolute z-50 top-full left-0 px-2 pt-0 hidden group-hover:flex flex-col shadow-lg rounded-b-lg min-w-[360px]
bg-[url('/img/logo/bg.png')] dark:bg-[url('/img/logo/bg-dark.png')]
left-1/2 -translate-x-1/2"> <div class="p-2 w-full"> <div class="flex flex-col divide-y divide-gray-200 dark:divide-stone-700"> <div key="0" class=""> <a href="/404/stories" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-t-lg "> <span class="shrink-0 flex self-center justify-center h-8 w-8"><img src="/img/icons/stories_speak_overview.webp" alt="Overview"></span> <div class="flex flex-col"> <span class="text-sm font-medium"></span> </div> </a> </div><div key="1" class=""> <a href="/404/stories/articles" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-8 w-8"><img src="/img/icons/stories_speak_articles.webp" alt="Stories"></span> <div class="flex flex-col"> <span class="text-sm font-medium"></span> </div> </a> </div><div key="2" class=""> <a href="/404/projects/proposals" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
md:hidden "> <span class="shrink-0 flex self-center justify-center h-8 w-8"><img src="/img/icons/stories_speak_proposals.webp" alt="Join Us"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Projects</span> <span class="text-xs text-gray-500 dark:text-gray-300">Support is needed</span> </div> </a> </div><div key="3" class=""> <a href="/404/stories/magazines" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center h-8 w-8"><img src="/img/icons/stories_speak_publications.webp" alt="Magazines"></span> <div class="flex flex-col"> <span class="text-sm font-medium"></span> </div> </a> </div><div key="4" class=""> <a href="/404/stories/video" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-b-lg"> <span class="shrink-0 flex self-center justify-center h-8 w-8"><img src="/img/icons/stories_speak_video.webp" alt="News"></span> <div class="flex flex-col"> <span class="text-sm font-medium"></span> </div> </a> </div> </div> </div> </div> </div><div class="relative group hidden sm:inline-block"> <!-- Trigger element --> <a href="/404/projects"> <div class="text-sm md:text-base pt-1 py-2.5 px-2 cursor-pointer transition-colors duration-200
hover:text-blue-700 dark:hover:text-blue-400 hover:underline underline-offset-8
hidden md:inline-block "> <span class="flex items-center"> Projects <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3 lg:h-4 ml-1 mt-0.5 text-sky-700 dark:text-sky-200 transform transition-transform duration-400 group-hover:rotate-180" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg> </span> </div> </a> <!-- Dropdown panel --> <div class="absolute z-50 top-full left-0 px-2 pt-0 hidden group-hover:flex flex-col shadow-lg rounded-b-lg min-w-[360px]
bg-[url('/img/logo/bg.png')] dark:bg-[url('/img/logo/bg-dark.png')]
left-1/2 -translate-x-1/2"> <div class="p-2 w-full"> <div class="flex flex-col divide-y divide-gray-200 dark:divide-stone-700"> <div key="0" class=""> <a href="/404/projects" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-t-lg "> <span class="shrink-0 flex self-center justify-center h-9 w-9"><img src="/img/icons/projects_involve.webp" alt="Volunteer"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Overview</span> <span class="text-xs text-gray-500 dark:text-gray-300">Stronger Together</span> </div> </a> </div><div key="1" class=""> <a href="/404/projects/proposals" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-b-lg"> <span class="shrink-0 flex self-center justify-center h-9 w-9"><img src="/img/icons/projects_proposals.webp" alt="Join Us"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Projects</span> <span class="text-xs text-gray-500 dark:text-gray-300">Support is needed</span> </div> </a> </div> </div> </div> </div> </div><div class="relative group hidden sm:inline-block"> <!-- Trigger element --> <a href="/404/about"> <div class="text-sm md:text-base pt-1 py-2.5 px-2 cursor-pointer transition-colors duration-200
hover:text-blue-700 dark:hover:text-blue-400 hover:underline underline-offset-8
"> <span class="flex items-center"> About <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3 lg:h-4 ml-1 mt-0.5 text-sky-700 dark:text-sky-200 transform transition-transform duration-400 group-hover:rotate-180" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg> </span> </div> </a> <!-- Dropdown panel --> <div class="absolute z-50 top-full left-0 px-2 pt-0 hidden group-hover:flex flex-col shadow-lg rounded-b-lg min-w-[360px]
bg-[url('/img/logo/bg.png')] dark:bg-[url('/img/logo/bg-dark.png')]
right-0 left-auto"> <div class="p-2 w-full"> <div class="flex flex-col divide-y divide-gray-200 dark:divide-stone-700"> <div key="0" class=""> <a href="/404/about/mission" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-t-lg "> <span class="shrink-0 flex self-center justify-center w-9"><img src="/img/icons/icon_blue_mission.svg" alt="Mission"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Mission and Values</span> </div> </a> </div><div key="1" class=""> <a href="/404/about/work" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center w-9"><img src="/img/icons/icon_blue_work.svg" alt="Our Work"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Our Work</span> </div> </a> </div><div key="2" class=""> <a href="/404/about/partners" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center w-9"><img src="/img/icons/icon_blue_partners.svg" alt="Partners"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Partners</span> </div> </a> </div><div key="3" class=""> <a href="/404/stories/projects" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center w-9"><img src="/img/icons/icon_blue_helping.svg" alt="Get Involved"></span> <div class="flex flex-col"> <span class="text-sm font-medium">We Need You!</span> </div> </a> </div><div key="4" class=""> <a href="/404/about/donate" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
"> <span class="shrink-0 flex self-center justify-center w-9"><img src="/img/icons/icon_blue_donate.svg" alt="Donate"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Donate</span> </div> </a> </div><div key="5" class=""> <a href="/404/about/contact" class="flex items-center gap-3 px-2.5 py-2 cursor-pointer bg-white/60 hover:bg-white/90 border border-stone-200 hover:border-stone-300
dark:bg-stone-800 dark:hover:bg-stone-700 dark:border-stone-700 hover:dark:border-stone-600
transition-all duration-100 ease-in-out transform hover:scale-[1.01]
rounded-b-lg"> <span class="shrink-0 flex self-center justify-center w-9"><img src="/img/icons/icon_blue_contact.svg" alt="Contact"></span> <div class="flex flex-col"> <span class="text-sm font-medium">Contact</span> <span class="text-xs text-gray-500 dark:text-gray-300">Contact Us</span> </div> </a> </div> </div> </div> </div> </div> </div> </nav> </div> </header> <main class="pb-3 bg-white dark:bg-stone-800 w-full mx-auto grow pb-8 md:pb-12 xl:pb-16"> <main class="bg-white dark:bg-stone-800" data-astro-cid-zetdm5md> <section class="flex items-center h-full px-4" data-astro-cid-zetdm5md> <div class="container flex flex-col items-center justify-center px-5 mx-auto my-8" data-astro-cid-zetdm5md> <div class="text-center" data-astro-cid-zetdm5md> <h2 class="my-2 font-thin text-6xl md:text-8xl" data-astro-cid-zetdm5md> <span class="sr-only" data-astro-cid-zetdm5md>Error</span> <span class="text-stone-600 dark:text-stone-300" data-astro-cid-zetdm5md>SORRY</span> </h2> <p class="mt-16 font-thin text-2xl md:text-4xl" data-astro-cid-zetdm5md>
ERROR 404 - we can't find that page.
</p> <p class="mt-16 text-base lg:text-lg text-stone-600 dark:text-stone-400" data-astro-cid-zetdm5md>
Please select a link above.<br data-astro-cid-zetdm5md>
Or, you can scroll down to ...</p> <h2 class="mt-20 text-xl lg:text-2xl text-blue-700 dark:text-blue-300" data-astro-cid-zetdm5md>... meet the Beasts of Revelation!</h2> </div> </div> </section> <!-- Gallery --> <section id="images" class="w-3xl mt-8 mx-auto" x-data="{
images: [
{ thumb: '/img/404/beast_1_thumb.webp', full: '/img/404/beast_1_full.webp', display: '/img/404/beast_1.webp' },
{ thumb: '/img/404/beast_2_thumb.webp', full: '/img/404/beast_2_full.webp', display: '/img/404/beast_2.webp' },
{ thumb: '/img/404/beast_3_thumb.webp', full: '/img/404/beast_3_full.webp', display: '/img/404/beast_3.webp' },
{ thumb: '/img/404/beast_4_thumb.webp', full: '/img/404/beast_4_full.webp', display: '/img/404/beast_4.webp' },
{ thumb: '/img/404/beast_5_thumb.webp', full: '/img/404/beast_5_full.webp', display: '/img/404/beast_5.webp' }
],
activeIndex: 0,
modalOpen: false
}" data-astro-cid-zetdm5md> <!-- Main Image Display --> <section id="images" class="w-3xl mt-8 mx-auto" data-astro-cid-zetdm5md> <!-- Main Image Box --> <div class="group relative w-full hover:border hover:shadow-xl border-dashed rounded-xl border-stone-400 p-2" data-astro-cid-zetdm5md> <!-- SVG visible on hover --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105.78 122.88" fill="currentColor" class="absolute top-6 -right-2 h-5 text-blue-600 dark:text-blue-300 opacity-0 group-hover:opacity-100 rotate-0 group-hover:rotate-180 transition-all duration-300 ease-in-out z-10" data-astro-cid-zetdm5md> <path fill-rule="evenodd" d="M85.94 27.52c5.17-11.05 5.08-20.18.1-27.52L55.09 53.71l7.69 13.64 23.16-39.83zm-66.1 0C14.67 16.47 14.76 7.34 19.74 0l37.45 64.99c1.74 2.25 2.82 4.64 2.96 7.22.13 2.41-.56 3.29-.95 5.39a7.22 7.22 0 0 0 1.03 5.4l1.56 1.71c1.4 1.53 2.6 3.37 4.97 3.07 1.58-.2 2.91-1.54 4.06-3.69a15.43 15.43 0 0 1 5.19-3.78 17.86 17.86 0 0 1 6.48-1.45c7.55.39 14.08 3.91 18.98 12.41 5.94 9.68 5.26 17.86.85 25.18-3.4 4.46-7.5 6.42-12.17 6.43-7.12.01-12.9-3.41-17.38-8.73-2.84-3.37-5.2-7.42-7.68-11.93l-9.03-11.54-1.06-2.7-35.16-60.46zM53.11 67.8a3.58 3.58 0 1 1 0 7.15 3.58 3.58 0 0 1 0-7.15zm22.25 22.23c2.55-3.9 6.85-4.31 10.95-2.87 3.29 1.16 6.13 3.62 8.53 7.32 2.02 3.12 3.59 8.15 3.19 12.51-.78 8.45-8.3 10.05-14.86 6.36a17.07 17.07 0 0 1-6.92-7.37 24.29 24.29 0 0 1-2.45-7.54c-.4-2.95-.07-5.93 1.56-8.41zm-28.8-9.44c-.17.79-.5 1.59-1.01 2.4l-1.56 1.71c-1.4 1.53-2.6 3.37-4.97 3.07-1.58-.2-2.91-1.54-4.06-3.69a15.43 15.43 0 0 0-5.19-3.78 17.86 17.86 0 0 0-6.48-1.45c-7.55.39-14.08 3.91-18.98 12.41-5.94 9.68-5.26 17.86-.85 25.18 3.4 4.46 7.5 6.42 12.17 6.43 7.12.01 12.9-3.41 17.38-8.73 2.84-3.37 5.2-7.42 7.68-11.93l10.63-13.58-.35-.6-.11-.18-4.3-7.26zm-16.13 9.44c-2.55-3.9-6.85-4.31-10.95-2.87-3.29 1.16-6.13 3.62-8.53 7.32-2.02 3.12-3.59 8.15-3.18 12.52.78 8.45 8.3 10.05 14.86 6.36a17.07 17.07 0 0 0 6.92-7.37A24.29 24.29 0 0 0 32 98.45c.39-2.96.05-5.94-1.57-8.42z" clip-rule="evenodd" data-astro-cid-zetdm5md></path> </svg> <img :src="images[activeIndex].display" alt="Beasts of Revelation" class="w-full h-auto rounded transition-opacity duration-500 opacity-100 cursor-pointer" loading="lazy" @click="modalOpen = true" data-astro-cid-zetdm5md> </div> <!-- Thumbnails --> <div class="flex justify-center gap-2 mt-4 flex-wrap" data-astro-cid-zetdm5md> <template x-for="(img, i) in images" :key="i" data-astro-cid-zetdm5md> <img :src="img.thumb" class="w-[100px] h-[70px] p-2 object-cover border rounded cursor-pointer transition duration-200" :class="{
'border-blue-500 ring-2 ring-blue-300': activeIndex === i,
'border-stone-300 hover:brightness-110 hover:border-blue-400': activeIndex !== i
}" @click="activeIndex = i" loading="lazy" data-astro-cid-zetdm5md> </template> </div> <!-- Modal --> <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75" x-show="modalOpen" x-transition @click.self="modalOpen = false" data-astro-cid-zetdm5md> <div class="max-w-5xl mx-auto p-4" data-astro-cid-zetdm5md> <img :src="images[activeIndex].full" alt="Zoomed Beast Image" class="w-full h-auto rounded shadow-xl border" data-astro-cid-zetdm5md> </div> </div> </section> </section></main> </main> <footer class="border-t border-b border-stone-200 dark:border-stone-700
bg-gray-200 bg-[url('/img/logo/bg.png')] dark:bg-[url('/img/logo/bg-dark.png')] dark:bg-stone-800"> <div id="wrapper" class="w-full "> <div id="footerTopRow" aria-labelledby="footer-heading" class="mt-2 mb-1 mx-auto max-w-5xl z-40 flex flex-row justify-around"> <a href="/404/" class=" hidden sm:flex justify-center w-1/3"> <img src="/img/logo/logo.svg" alt="DBS Logo" class=" w-14 md:w-16 ml-1 md:mr-2 lg:mr-4 dark:grayscale-[100%] dark:hover:grayscale-0 dark:hover:invert-0"> <span class=" pt-1 px-1 self-center text-[10px] sm:text-[14px] lg:text-[18px] uppercase whitespace-nowrap
text-slate-800 dark:grayscale dark:text-white dark:hover:grayscale-0 ">Digital <span class="text-blue-600 dark:text-blue-300">Bible</span> Society</span> </a> <!-- Social Links ---> <div class="mt-0 md:mt-1 flex justify-center align-center w-1/2 sm:w-1/3
text-stone-700 dark:text-stone-200 dark:hover:text-stone-300"> <a href="https://www.youtube.com/c/DigitalBibleSocietyChannel" title="DBS Youtube" class="opacity-80 text-stone-600 hover:opacity-100 hover:text-blue-600 dark:text-stone-400 dark:hover:text-stone-100" aria-label="Youtube" aria-hidden="true" target="_blank" rel="noopener noreferrer"> <svg class="mx-2 h-6 w-7 md:h-6 md:w-8" xmlns="http://www.w3.org/2000/svg" width="216" height="160" viewBox="0 0 216 160"><path fill="currentColor" fill-rule="nonzero" d="M209.5 27.5c-2-11-11.5-19-22.5-21.5-16.5-3.5-47-6-80-6S43 2.5 26.5 6C15.5 8.5 6 16 4 27.5 2 40 0 57.5 0 80s2 40 4.5 52.5c2 11 11.5 19 22.5 21.5 17.5 3.5 47.5 6 80.5 6s63-2.5 80.5-6c11-2.5 20.5-10 22.5-21.5 2-12.5 4.5-30.5 5-52.5-1-22.5-3.5-40-6-52.5ZM80 115V45l61 35-61 35Z"></path></svg> </a> <a href="https://vimeo.com/digitalbiblesociety" title="DBS Vimeo" class="opacity-80 text-stone-600 hover:opacity-100 hover:text-blue-600 dark:text-stone-400 dark:hover:text-stone-100" aria-label="Vimeo" aria-hidden="true" target="_blank" rel="noopener noreferrer"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mx-2 h-5 w-5 md:h-6 md:w-6" viewBox="0 0 434 434"><path d="M416 52.3c-10.5-11.4-25.7-17.4-45.2-18-55-1.7-93.9 27.5-115.6 87a8.8 8.8 0 0 0 10.6 11.6 69.6 69.6 0 0 1 18.4-2.6c8 0 18.7 1.5 24 8.5 4.1 5.4 4.7 13.5 1.7 24-2.5 9-15.5 32.8-31.5 58-19.6 30.7-30.4 44.4-33.5 44.4-10.3 0-47.5-165.2-48.6-168.8-10.7-37.8-16-56.8-50.8-56.8-26.5 0-85.5 48.3-134 90.5L4 136.5c-4.6 4-5.4 11-1.6 15.8l9 11.7c3.9 4.9 10.8 6 15.9 2.3l.5-.3c15.7-11.2 30.5-21.7 41.7-22.3 12.1-.6 22.7 18.4 35.3 63.6 24 87.8 60.3 192.4 97.7 192.4 39 0 85.6-33 145.8-111.4 54.5-70.9 83.6-127.1 85.5-168 1.4-31-4.6-53.8-17.8-68z"></path></svg> </a> <a href="https://www.facebook.com/digitalbiblesociety/" title="DBS Facebook" class="opacity-80 text-stone-600 hover:opacity-100 hover:text-blue-600 dark:text-stone-400 dark:hover:text-stone-100" aria-label="Facebook" aria-hidden="true" target="_blank" rel="noopener noreferrer"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mx-2 h-5 w-5 md:h-6 md:w-6" viewBox="0 0 310 310"><path d="M81.7 165.1h34V305a5 5 0 0 0 5 5h57.6a5 5 0 0 0 5-5V165.8h39a5 5 0 0 0 5-4.5l6-51.5a5 5 0 0 0-5-5.5h-45V72c0-9.8 5.2-14.7 15.6-14.7h29.4a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5h-42.4c-7 0-31.5 1.4-50.8 19.2a53.3 53.3 0 0 0-17.7 47.3v37.8H81.7a5 5 0 0 0-5 5V160a5 5 0 0 0 5 5z"></path></svg> </a> <a href="https://www.linkedin.com/company/digitalbiblesociety" title="DBS LinkedIn" class="opacity-80 text-stone-600 hover:opacity-100 hover:text-blue-600 dark:text-stone-400 dark:hover:text-stone-100" aria-label="LinkedIn" aria-hidden="true" target="_blank" rel="noopener noreferrer"> <svg class="mx-2 h-5 w-5 md:h-6 md:w-6" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 256 256" fill="currentColor"><g style="stroke:none;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;fill:none;fill-rule:nonzero;opacity:1"><path d="M1.48 29.91h18.66v60.01H1.48V29.91zM10.81.08a10.82 10.82 0 1 1-.02 21.64A10.82 10.82 0 0 1 10.8.08M31.84 29.91h17.89v8.2h.25c2.49-4.71 8.58-9.69 17.65-9.69C86.5 28.42 90 40.85 90 57.01v32.91H71.36V60.74c0-6.96-.12-15.92-9.7-15.92-9.7 0-11.18 7.6-11.18 15.42v29.68H31.84V29.91z" style="stroke:none;stroke-width:1;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;fill:currentColor;fill-rule:nonzero;opacity:1" transform="matrix(2.81 0 0 2.81 1.4 1.4)"></path></g></svg> </a> <a href="https://github.com/digitalbiblesociety" title="DBS Github" class="opacity-80 text-stone-600 hover:opacity-100 hover:text-blue-600 dark:text-stone-400 dark:hover:text-stone-100 hidden md:inline-block" aria-label="Github" aria-hidden="true" target="_blank" rel="noopener noreferrer"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mx-2 h-5 w-5 md:h-6 md:w-6" viewBox="0 0 24 24"><path d="M12 .5A12 12 0 0 0 0 12.3c0 5.2 3.4 9.6 8.2 11.2.6 0 .8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6a3.6 3.6 0 0 0-1.4-1.7c-1-.7.1-.7.1-.7C5 16.9 5.6 18 5.6 18c1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-5.8 0-1.3.5-2.4 1.3-3.2-.2-.3-.6-1.5 0-3.1 0 0 1-.3 3.4 1.2a11.7 11.7 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.1a4 4 0 0 1 1.3 3.2c0 4.5-2.8 5.5-5.5 5.8.5.3.9 1 .9 2.2v3.2c0 .3.1.7.8.6 4.8-1.6 8.2-6 8.2-11.2A12 12 0 0 0 12 .5z"></path></svg> </a> </div> <!-- Endoresements ---> <div class="flex justify-center w-1/2 sm:w-1/3 space-x-3 md:space-x-4 "> <a href="/404/about/donate#ecfa" class="opacity-80 dark:invert dark:grayscale hover:underline hover:opacity-100 dark:hover:invert-0 dark:hover:grayscale-0" title="ECFA"> <img src="/img/logo/end-ecfa.svg" class="dark:grayscale-[50%] dark:hover:invert h-7 md:h-10" alt="ECFA Financial Accountability"> </a> <a href="/404/about/donate#guidestar" class="opacity-80 dark:invert dark:grayscale hover:underline hover:opacity-100 dark:hover:invert-0 dark:hover:grayscale-0" title="Guidestar Gold"> <img src="/img/logo/end-guidestar.svg" class="h-7 md:h-10" alt="Guidestar Platinum"> </a> <a href="/404/about/donate#charity" class="opacity-80 dark:invert dark:grayscale hover:underline hover:opacity-100 dark:hover:invert-0 dark:hover:grayscale-0" title="Charity Navigator"> <img src="/img/logo/end-charity-navigator.svg" class="dark:grayscale-[50%] h-7 md:h-10" alt="Charity Navigator"> </a> <a href="/404/about/donate#fobai" class="opacity-80 dark:invert dark:grayscale hover:underline hover:opacity-100 dark:hover:invert-0 dark:hover:grayscale-0" title="Forum of Bible Agencies"> <img src="/img/logo/fobai_half.svg" class=" mt-0.5 h-6 md:h-9" alt="Forum of Bible Agencies"> </a> </div> </div> <!-- Copyright Bottom ---> <div class="mx-auto flex w-full py-1 text-sm border-t border-stone-200 dark:border-stone-700
dark:bg-stone-900 text-stone-800 dark:text-stone-300
bg-[url('/img/logo/bg.png')] dark:bg-[url('/img/logo/bg-dark.png')]"> <span class="m-auto w-full text-center "> <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-center opacity-80 hover:opacity-100
hover:text-blue-600 hover:underline hover:dark:text-stone-100"> Digital Bible Society <img class="mx-2 h-5 w-5 opacity-80 hover:opacity-100" alt="Creative Commons" src="/img/icons/creative-commons.svg"> 2025 </a> </span> <span class="text-right mx-8 whitespace-nowrap text-xs text-gray-700 dark:text-gray-300"> 6-16-2025 </span> </div> </div> </footer> </div> <!-- Alpine JS --> <script type="module" src="/src/scripts/alpine.js"></script> </body> </html>