Offline page redesign, remove brand showcase tab, force a11y/theme to bottom-right

- Offline page: full-viewport Joomla offline_image background, centered glass card
  overlay with logo glow, message, offline position, login accordion, copyright
- Favicon: added to offline page, HTML-escaped paths in helper
- Removed brand showcase tab, added footer CSS vars to CSS Variables tab
- Forced a11y toolbar and theme FAB to bottom-right (removed position selectors)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/offline.php

@@ -1,5 +1,5 @@
 <?php
-/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
+/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
 
  This file is part of a Moko Consulting project.
 
@@ -30,7 +30,7 @@ $params    = $this->params ?: $app->getTemplate(true)->params;
 $direction = $this->direction ?: 'ltr';
 
 /* -----------------------
-   Load ONLY template.css + theme palettes (with min toggle)
+   Load CSS + theme palettes
 ------------------------ */
 $useMin      = !((int) $params->get('development_mode', 0) === 1);
 $assetSuffix = $useMin ? '.min' : '';
@@ -59,30 +59,30 @@ if ($params_DarkColorName === 'custom' && file_exists(JPATH_ROOT . '/media/templ
 	$doc->addStyleSheet($base . 'theme/dark.custom' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-dark-custom']);
 }
 
-/* Load user assets last (after all other styles and scripts) */
+/* Load user assets last */
 $doc->addStyleSheet($base . 'user' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-user']);
 
-/* Bootstrap CSS/JS for accordion behavior; safe to keep. */
+/* Bootstrap CSS/JS for accordion */
 HTMLHelper::_('bootstrap.loadCss', true, $doc);
 HTMLHelper::_('bootstrap.framework');
 
-/* Load template.js for theme switcher and other functionality */
+/* Load template.js for theme switcher */
 $doc->addScript($jsBase . 'template' . $assetSuffix . '.js', ['version' => 'auto', 'defer' => true], ['id' => 'moko-template-js']);
 
-/* Load user.js last for custom user scripts */
+/* Load user.js last */
 $doc->addScript($jsBase . 'user' . $assetSuffix . '.js', ['version' => 'auto', 'defer' => true], ['id' => 'moko-user-js']);
 
 /* -----------------------
-   Title + Meta (Include Site Name in Page Titles)
+   Title + Meta
 ------------------------ */
 $sitename  = (string) $app->get('sitename');
 $baseTitle = Text::_('JGLOBAL_OFFLINE') ?: 'Offline';
-$snSetting = (int) $app->get('sitename_pagetitles', 0); // 0=no, 1=before, 2=after
+$snSetting = (int) $app->get('sitename_pagetitles', 0);
 
 if ($snSetting === 1) {
-	$doc->setTitle(Text::sprintf('JPAGETITLE', $sitename, $baseTitle));  // Site Name BEFORE
+	$doc->setTitle(Text::sprintf('JPAGETITLE', $sitename, $baseTitle));
 } elseif ($snSetting === 2) {
-	$doc->setTitle(Text::sprintf('JPAGETITLE', $baseTitle, $sitename));  // Site Name AFTER
+	$doc->setTitle(Text::sprintf('JPAGETITLE', $baseTitle, $sitename));
 } else {
 	$doc->setTitle($baseTitle);
 }
@@ -91,11 +91,21 @@ $doc->setMetaData('robots', 'noindex, nofollow');
 /* -----------------------
    Offline content from Global Config
 ------------------------ */
-$displayOfflineMessage = (int) $app->get('display_offline_message', 1); // 0|1|2
+$displayOfflineMessage = (int) $app->get('display_offline_message', 1);
 $offlineMessage        = trim((string) $app->get('offline_message', ''));
 
 /* -----------------------
-   Brand: logo from params OR siteTitle (matches index.php)
+   Offline image from Joomla Global Config (System > Global Configuration > Site > Offline Image)
+   Used as the full-viewport background image.
+------------------------ */
+$offlineImage = trim((string) $app->get('offline_image', ''));
+$bgStyle = '';
+if ($offlineImage !== '') {
+	$bgStyle = 'background-image: url(\'' . htmlspecialchars(Uri::root(false) . $offlineImage, ENT_QUOTES, 'UTF-8') . '\');';
+}
+
+/* -----------------------
+   Brand: logo from template params OR siteTitle
 ------------------------ */
 $brandHtml = '';
 $logoFile  = (string) $params->get('logoFile');
@@ -110,9 +120,8 @@ if ($logoFile !== '') {
 		0
 	);
 } else {
-	// If no logo file, show the title (defaults to "MokoCassiopeia" if not set)
 	$siteTitle = $params->get('siteTitle', 'MokoCassiopeia');
-	$brandHtml = '<span class="site-title" title="' . $sitename . '">'
+	$brandHtml = '<span class="site-title" title="' . htmlspecialchars($sitename, ENT_QUOTES, 'UTF-8') . '">'
 			   . htmlspecialchars($siteTitle, ENT_COMPAT, 'UTF-8')
 			   . '</span>';
 }
@@ -120,6 +129,20 @@ if ($logoFile !== '') {
 $brandTagline = (string) ($params->get('brand_tagline') ?: $params->get('siteDescription') ?: '');
 $showTagline  = (int) $params->get('show_brand_tagline', 0);
 
+// Favicon
+$params_favicon_source = (string) $params->get('favicon_source', '');
+$faviconHeadTags = '';
+if ($params_favicon_source) {
+	require_once JPATH_ROOT . '/templates/' . $this->template . '/helper/favicon.php';
+	$faviconSourceAbs = JPATH_ROOT . '/' . ltrim($params_favicon_source, '/');
+	$faviconOutputDir = JPATH_ROOT . '/images/favicons';
+	$faviconUrlBase   = Uri::root(true) . '/images/favicons';
+
+	if (MokoFaviconHelper::generate($faviconSourceAbs, $faviconOutputDir)) {
+		$faviconHeadTags = MokoFaviconHelper::getHeadTags($faviconUrlBase);
+	}
+}
+
 // Theme params
 $params_theme_enabled = (int) $params->get('theme_enabled', 1);
 
@@ -135,7 +158,7 @@ if (!empty($params_googlesitekey)) {
 }
 
 /* -----------------------
-   Login routes & Users
+   Login routes
 ------------------------ */
 $action = Route::_('index.php', true);
 $return = base64_encode(Uri::base());
@@ -156,10 +179,12 @@ if (class_exists('\Joomla\Component\Users\Site\Helper\RouteHelper')) {
 <head>
 	<jdoc:include type="head" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<?php if ($faviconHeadTags) : ?>
+	<?php echo $faviconHeadTags; ?>
+	<?php endif; ?>
 
 	<?php if ($params_theme_enabled) : ?>
 	<script>
-	  // Early theme application to avoid FOUC
 	  (function () {
 		try {
 		  var stored = localStorage.getItem('theme');
@@ -173,10 +198,9 @@ if (class_exists('\Joomla\Component\Users\Site\Helper\RouteHelper')) {
 	<?php endif; ?>
 
 </head>
-<body class="site moko-offline-wrap <?php echo htmlspecialchars($direction, ENT_QUOTES, 'UTF-8'); ?>">
+<body class="site moko-offline-wrap" <?php if ($bgStyle) : ?>style="<?php echo $bgStyle; ?>"<?php endif; ?>>
 <?php if (!empty($params_googletagmanager) && !empty($params_googletagmanagerid)) :
 	$gtmID = htmlspecialchars($params_googletagmanagerid, ENT_QUOTES, 'UTF-8'); ?>
-	<!-- Google Tag Manager -->
 	<script>
 		(function(w,d,s,l,i){
 			w[l]=w[l]||[];
@@ -189,19 +213,14 @@ if (class_exists('\Joomla\Component\Users\Site\Helper\RouteHelper')) {
 			f.parentNode.insertBefore(j,f);
 		})(window,document,'script','dataLayer','<?php echo $gtmID; ?>');
 	</script>
-	<!-- End Google Tag Manager -->
-
-	<!-- Google Tag Manager (noscript) -->
 	<noscript>
 		<iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo $gtmID; ?>"
 				height="0" width="0" style="display:none;visibility:hidden"></iframe>
 	</noscript>
-	<!-- End Google Tag Manager (noscript) -->
 <?php endif; ?>
 
 <?php if (!empty($params_googleanalytics) && !empty($params_googleanalyticsid)) :
 	$gaId = htmlspecialchars($params_googleanalyticsid, ENT_QUOTES, 'UTF-8'); ?>
-	<!-- Google Analytics (gtag.js) -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=<?php echo $gaId; ?>"></script>
 	<script>
 		window.dataLayer = window.dataLayer || [];
@@ -218,135 +237,134 @@ if (class_exists('\Joomla\Component\Users\Site\Helper\RouteHelper')) {
 				gtag('config', id, { 'anonymize_ip': true });
 			} else if (/^UA-/.test(id)) {
 				gtag('config', id, { 'anonymize_ip': true });
-				console.warn('Using a UA- ID. Universal Analytics is sunset; consider migrating to GA4.');
 			} else {
 				console.warn('Unrecognized Google Analytics ID format:', id);
 			}
 		})('<?php echo $gaId; ?>');
 	</script>
-	<!-- End Google Analytics -->
 <?php endif; ?>
 
 	<a class="skip-link" href="#maincontent"><?php echo Text::_('JSKIP_TO_CONTENT') ?: 'Skip to content'; ?></a>
 
-	<?php if ($this->countModules('offline-header')) : ?>
-		<header class="moko-offline-header">
-			<div class="container">
-				<jdoc:include type="modules" name="offline-header" style="none" />
-			</div>
-		</header>
-	<?php endif; ?>
-
-	<main id="maincontent" class="moko-offline-main">
+	<!-- Joomla system messages -->
+	<div class="moko-offline-messages">
 		<jdoc:include type="message" />
+	</div>
 
-		<div class="moko-offline-grid">
-			<div class="moko-offline-grid__side"></div>
-			<div class="moko-offline-grid__center">
-				<div class="moko-offline-card">
-					<!-- Centered logo -->
-					<a class="moko-offline-brand" href="<?php echo htmlspecialchars(Uri::base(), ENT_QUOTES, 'UTF-8'); ?>" aria-label="<?php echo htmlspecialchars($sitename, ENT_COMPAT, 'UTF-8'); ?>">
-						<?php echo $brandHtml; ?>
-						<?php if ($showTagline && $brandTagline): ?>
-							<small class="brand-tagline"><?php echo htmlspecialchars($brandTagline, ENT_COMPAT, 'UTF-8'); ?></small>
-						<?php endif; ?>
-					</a>
+	<!-- Centered overlay card -->
+	<main id="maincontent">
+		<div class="moko-offline-card">
 
-					<?php if ($displayOfflineMessage === 1 && $offlineMessage !== '') : ?>
-						<div class="mb-4 text-center">
-							<h1 class="h3 mb-2"><?php echo Text::_('JOFFLINE_MESSAGE') ?: 'Site Offline'; ?></h1>
-							<p class="lead mb-0"><?php echo $offlineMessage; ?></p>
-						</div>
-					<?php elseif ($displayOfflineMessage === 2) : ?>
-						<div class="mb-4 text-center">
-							<h1 class="h3 mb-2"><?php echo Text::_('JOFFLINE_MESSAGE') ?: 'Site Offline'; ?></h1>
-							<p class="lead mb-0">
-								<?php echo Text::_('JOFFLINE_MESSAGE_DEFAULT') ?: 'This site is down for maintenance. Please check back soon.'; ?>
-							</p>
-						</div>
-					<?php endif; ?>
+			<!-- Logo -->
+			<a class="moko-offline-brand" href="<?php echo htmlspecialchars(Uri::base(), ENT_QUOTES, 'UTF-8'); ?>" aria-label="<?php echo htmlspecialchars($sitename, ENT_COMPAT, 'UTF-8'); ?>">
+				<?php echo $brandHtml; ?>
+				<?php if ($showTagline && $brandTagline): ?>
+					<small class="brand-tagline"><?php echo htmlspecialchars($brandTagline, ENT_COMPAT, 'UTF-8'); ?></small>
+				<?php endif; ?>
+			</a>
 
-					<!-- Main offline module position -->
-					<?php if ($this->countModules('offline')) : ?>
-						<section class="mb-4" aria-label="Offline modules">
-							<jdoc:include type="modules" name="offline" style="none" />
-						</section>
-					<?php endif; ?>
+			<!-- Offline message -->
+			<?php if ($displayOfflineMessage === 1 && $offlineMessage !== '') : ?>
+				<div class="moko-offline-message">
+					<h1><?php echo Text::_('JOFFLINE_MESSAGE') ?: 'Site Offline'; ?></h1>
+					<p><?php echo $offlineMessage; ?></p>
+				</div>
+			<?php elseif ($displayOfflineMessage === 2) : ?>
+				<div class="moko-offline-message">
+					<h1><?php echo Text::_('JOFFLINE_MESSAGE') ?: 'Site Offline'; ?></h1>
+					<p><?php echo Text::_('JOFFLINE_MESSAGE_DEFAULT') ?: 'This site is down for maintenance. Please check back soon.'; ?></p>
+				</div>
+			<?php endif; ?>
 
-					<!-- Login accordion (collapsed by default) -->
-					<div class="accordion" id="offlineAccordion">
-						<div class="accordion-item">
-							<h2 class="accordion-header" id="headingLogin">
-								<button class="accordion-button collapsed" type="button"
-									data-bs-toggle="collapse" data-bs-target="#collapseLogin"
-									aria-expanded="false" aria-controls="collapseLogin">
-									<?php echo Text::_('JLOGIN'); ?>
-								</button>
-							</h2>
-							<div id="collapseLogin" class="accordion-collapse collapse" aria-labelledby="headingLogin" data-bs-parent="#offlineAccordion">
-								<div class="accordion-body">
-									<form action="<?php echo $action; ?>" method="post" class="form-validate">
-										<fieldset>
-											<legend class="visually-hidden"><?php echo Text::_('JLOGIN'); ?></legend>
+			<!-- Offline module position -->
+			<?php if ($this->countModules('offline')) : ?>
+				<div class="moko-offline-modules">
+					<jdoc:include type="modules" name="offline" style="none" />
+				</div>
+			<?php endif; ?>
 
-											<div class="mb-3">
-												<label class="form-label" for="username"><?php echo Text::_('JGLOBAL_USERNAME'); ?></label>
-												<input class="form-control" type="text" name="username" id="username" autocomplete="username" required aria-required="true">
-											</div>
+			<!-- Login accordion -->
+			<div class="accordion" id="offlineAccordion">
+				<div class="accordion-item">
+					<h2 class="accordion-header" id="headingLogin">
+						<button class="accordion-button collapsed" type="button"
+							data-bs-toggle="collapse" data-bs-target="#collapseLogin"
+							aria-expanded="false" aria-controls="collapseLogin">
+							<?php echo Text::_('JLOGIN'); ?>
+						</button>
+					</h2>
+					<div id="collapseLogin" class="accordion-collapse collapse" aria-labelledby="headingLogin" data-bs-parent="#offlineAccordion">
+						<div class="accordion-body">
+							<form action="<?php echo $action; ?>" method="post" class="form-validate">
+								<fieldset>
+									<legend class="visually-hidden"><?php echo Text::_('JLOGIN'); ?></legend>
 
-											<div class="mb-3">
-												<label class="form-label" for="password"><?php echo Text::_('JGLOBAL_PASSWORD'); ?></label>
-												<input class="form-control" type="password" name="password" id="password" autocomplete="current-password" required aria-required="true">
-											</div>
+									<div class="mb-3">
+										<label class="form-label" for="username"><?php echo Text::_('JGLOBAL_USERNAME'); ?></label>
+										<input class="form-control" type="text" name="username" id="username" autocomplete="username" required aria-required="true">
+									</div>
 
-											<div class="mb-3">
-												<label class="form-label" for="secretkey"><?php echo Text::_('JGLOBAL_SECRETKEY'); ?></label>
-												<input class="form-control" type="text" name="secretkey" id="secretkey" autocomplete="one-time-code" placeholder="<?php echo Text::_('JGLOBAL_SECRETKEY'); ?>">
-											</div>
+									<div class="mb-3">
+										<label class="form-label" for="password"><?php echo Text::_('JGLOBAL_PASSWORD'); ?></label>
+										<input class="form-control" type="password" name="password" id="password" autocomplete="current-password" required aria-required="true">
+									</div>
 
-											<div class="form-check mb-4">
-												<input class="form-check-input" type="checkbox" name="remember" id="remember">
-												<label class="form-check-label" for="remember"><?php echo Text::_('JGLOBAL_REMEMBER_ME'); ?></label>
-											</div>
+									<div class="mb-3">
+										<label class="form-label" for="secretkey"><?php echo Text::_('JGLOBAL_SECRETKEY'); ?></label>
+										<input class="form-control" type="text" name="secretkey" id="secretkey" autocomplete="one-time-code" placeholder="<?php echo Text::_('JGLOBAL_SECRETKEY'); ?>">
+									</div>
 
-											<div class="d-grid">
-												<button type="submit" class="btn btn-primary"><?php echo Text::_('JLOGIN'); ?></button>
-											</div>
+									<div class="form-check mb-4">
+										<input class="form-check-input" type="checkbox" name="remember" id="remember">
+										<label class="form-check-label" for="remember"><?php echo Text::_('JGLOBAL_REMEMBER_ME'); ?></label>
+									</div>
 
-											<input type="hidden" name="option" value="com_users">
-											<input type="hidden" name="task" value="user.login">
-											<input type="hidden" name="return" value="<?php echo $return; ?>">
-											<?php echo HTMLHelper::_('form.token'); ?>
-										</fieldset>
+									<div class="d-grid">
+										<button type="submit" class="btn btn-primary"><?php echo Text::_('JLOGIN'); ?></button>
+									</div>
 
-										<nav class="mt-3 small" aria-label="<?php echo Text::_('COM_USERS'); ?>">
-											<ul class="list-inline m-0">
-												<li class="list-inline-item">
-													<a href="<?php echo $resetUrl; ?>"><?php echo Text::_('COM_USERS_LOGIN_RESET'); ?></a>
-												</li>
-												<li class="list-inline-item">
-													<a href="<?php echo $remindUrl; ?>"><?php echo Text::_('COM_USERS_LOGIN_REMIND'); ?></a>
-												</li>
-												<?php if ($allowRegistration) : ?>
-													<li class="list-inline-item">
-														<a href="<?php echo $registrationUrl; ?>"><?php echo Text::_('COM_USERS_REGISTER'); ?></a>
-													</li>
-												<?php endif; ?>
-											</ul>
-										</nav>
-									</form>
-								</div>
-							</div>
+									<input type="hidden" name="option" value="com_users">
+									<input type="hidden" name="task" value="user.login">
+									<input type="hidden" name="return" value="<?php echo $return; ?>">
+									<?php echo HTMLHelper::_('form.token'); ?>
+								</fieldset>
+
+								<nav class="mt-3 small" aria-label="<?php echo Text::_('COM_USERS'); ?>">
+									<ul class="list-inline m-0">
+										<li class="list-inline-item">
+											<a href="<?php echo $resetUrl; ?>"><?php echo Text::_('COM_USERS_LOGIN_RESET'); ?></a>
+										</li>
+										<li class="list-inline-item">
+											<a href="<?php echo $remindUrl; ?>"><?php echo Text::_('COM_USERS_LOGIN_REMIND'); ?></a>
+										</li>
+										<?php if ($allowRegistration) : ?>
+											<li class="list-inline-item">
+												<a href="<?php echo $registrationUrl; ?>"><?php echo Text::_('COM_USERS_REGISTER'); ?></a>
+											</li>
+										<?php endif; ?>
+									</ul>
+								</nav>
+							</form>
 						</div>
 					</div>
-					<!-- /accordion -->
 				</div>
 			</div>
-			<div class="moko-offline-grid__side"></div>
+
+			<!-- Copyright -->
+			<div class="moko-offline-copyright">
+				&copy; <?php echo date('Y'); ?> <?php echo htmlspecialchars($sitename, ENT_COMPAT, 'UTF-8'); ?>. <?php echo Text::_('JGLOBAL_ISFREESOFTWARE') ?: 'All rights reserved.'; ?>
+			</div>
+
 		</div>
 	</main>
 
-	<!-- No footer modules on offline page -->
+	<!-- Offline footer module position -->
+	<?php if ($this->countModules('offline-footer')) : ?>
+		<div class="moko-offline-messages mt-3">
+			<jdoc:include type="modules" name="offline-footer" style="none" />
+		</div>
+	<?php endif; ?>
+
 	<jdoc:include type="modules" name="debug" style="none" />
 </body>
 </html>