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>
2026-04-16 18:29:43 -05:00
parent c35e76f554
commit 5e5d6a4e89
7 changed files with 298 additions and 276 deletions
--- a/src/helper/favicon.php
+++ b/src/helper/favicon.php
@@ -162,7 +162,7 @@ class MokoFaviconHelper
     */
    public static function getHeadTags(string $basePath): string
    {
-        $basePath = rtrim($basePath, '/');
+        $basePath = htmlspecialchars(rtrim($basePath, '/'), ENT_QUOTES, 'UTF-8');

        return '<link rel="apple-touch-icon" sizes="180x180" href="' . $basePath . '/apple-touch-icon.png">' . "\n"
             . '<link rel="icon" type="image/png" sizes="32x32" href="' . $basePath . '/favicon-32x32.png">' . "\n"
--- a/src/index.php
+++ b/src/index.php
@@ -41,7 +41,7 @@ $params_favicon_source     = (string) $this->params->get('favicon_source', '');
 $params_theme_enabled      = $this->params->get('theme_enabled', 1);
 $params_theme_control_type = (string) $this->params->get('theme_control_type', 'radios');
 $params_theme_fab_enabled  = $this->params->get('theme_fab_enabled', 1);
-$params_theme_fab_pos      = $this->params->get('theme_fab_pos', 'br');
+$params_theme_fab_pos      = 'br';

 // Accessibility params
 $params_a11y_toolbar    = $this->params->get('a11y_toolbar_enabled', 1);
@@ -51,7 +51,7 @@ $params_a11y_contrast   = $this->params->get('a11y_high_contrast', 1);
 $params_a11y_links      = $this->params->get('a11y_highlight_links', 1);
 $params_a11y_font       = $this->params->get('a11y_readable_font', 1);
 $params_a11y_animations = $this->params->get('a11y_pause_animations', 1);
-$params_a11y_pos        = (string) $this->params->get('a11y_toolbar_pos', 'tl');
+$params_a11y_pos        = 'br';

 // Detecting Active Variables
 $option    = $input->getCmd('option', '');
--- a/src/language/en-GB/tpl_mokocassiopeia.ini
+++ b/src/language/en-GB/tpl_mokocassiopeia.ini
@@ -259,16 +259,14 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_VM_DESC="<strong>Surfaces &amp; text</strong><br><co
 TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_LABEL="Gable"
 TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_DESC="Colour tokens used by the Gable extension.<br><code>--gab-blue</code> — <code>#0066cc</code><br><code>--gab-green</code> — <code>#28a745</code><br><code>--gab-red</code> — <code>#dc3545</code><br><code>--gab-orange</code> — <code>#fd7e14</code><br><code>--gab-gray1</code> — <code>#495057</code><br><code>--gab-gray2</code> — <code>#6c757d</code><br><code>--gab-gray3</code> — <code>#adb5bd</code>"

+TPL_MOKOCASSIOPEIA_CSS_VARS_FOOTER_LABEL="Footer"
+TPL_MOKOCASSIOPEIA_CSS_VARS_FOOTER_DESC="<strong>Spacing</strong><br><code>--footer-padding-top</code> — Top padding (default: <code>1rem</code>)<br><code>--footer-padding-bottom</code> — Bottom padding (default: <code>80px</code>)<br><code>--footer-grid-padding-y</code> — Grid vertical padding (default: <code>2.5rem</code>)<br><code>--footer-grid-padding-x</code> — Grid horizontal padding (default: <code>0.5em</code>)"
+
 ; ===== Theme Preview tab =====
 TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FIELDSET_LABEL="Theme Preview"
 TPL_MOKOCASSIOPEIA_THEME_PREVIEW_INTRO="<p>Live preview of all CSS variables, hero variants, block colours, and Bootstrap components rendered with your active theme. Use the <strong>Toggle Light / Dark</strong> button inside the preview to switch modes. This page is also available as a standalone file at <code>templates/mokocassiopeia/templates/theme-test.html</code>.</p>"
 TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FRAME="<iframe src='../templates/mokocassiopeia/templates/theme-test.html' style='width:100%;height:80vh;border:1px solid #dee2e6;border-radius:.375rem;' loading='lazy' title='Theme test sheet preview'></iframe>"

-; ===== Brand Showcase tab =====
-TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_FIELDSET_LABEL="Brand Showcase"
-TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_INTRO="<p>Interactive brand and Bootstrap 5 component showcase with colour system gradients. <strong>Hover over any gradient</strong> to sample the exact pixel colour at that point. Use the <strong>Toggle Light / Dark</strong> button to switch themes. This page is also available standalone at <code>templates/mokocassiopeia/templates/brand-showcase.html</code>.</p>"
-TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_FRAME="<iframe src='../templates/mokocassiopeia/templates/brand-showcase.html' style='width:100%;height:80vh;border:1px solid #dee2e6;border-radius:.375rem;' loading='lazy' title='Brand and Bootstrap showcase with colour sampler'></iframe>"
-
 ; ===== Misc =====
 MOD_BREADCRUMBS_HERE="YOU ARE HERE:"

--- a/src/language/en-US/tpl_mokocassiopeia.ini
+++ b/src/language/en-US/tpl_mokocassiopeia.ini
@@ -259,16 +259,14 @@ TPL_MOKOCASSIOPEIA_CSS_VARS_VM_DESC="<strong>Surfaces &amp; text</strong><br><co
 TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_LABEL="Gable"
 TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_DESC="Color tokens used by the Gable extension.<br><code>--gab-blue</code> — <code>#0066cc</code><br><code>--gab-green</code> — <code>#28a745</code><br><code>--gab-red</code> — <code>#dc3545</code><br><code>--gab-orange</code> — <code>#fd7e14</code><br><code>--gab-gray1</code> — <code>#495057</code><br><code>--gab-gray2</code> — <code>#6c757d</code><br><code>--gab-gray3</code> — <code>#adb5bd</code>"

+TPL_MOKOCASSIOPEIA_CSS_VARS_FOOTER_LABEL="Footer"
+TPL_MOKOCASSIOPEIA_CSS_VARS_FOOTER_DESC="<strong>Spacing</strong><br><code>--footer-padding-top</code> — Top padding (default: <code>1rem</code>)<br><code>--footer-padding-bottom</code> — Bottom padding (default: <code>80px</code>)<br><code>--footer-grid-padding-y</code> — Grid vertical padding (default: <code>2.5rem</code>)<br><code>--footer-grid-padding-x</code> — Grid horizontal padding (default: <code>0.5em</code>)"
+
 ; ===== Theme Preview tab =====
 TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FIELDSET_LABEL="Theme Preview"
 TPL_MOKOCASSIOPEIA_THEME_PREVIEW_INTRO="<p>Live preview of all CSS variables, hero variants, block colors, and Bootstrap components rendered with your active theme. Use the <strong>Toggle Light / Dark</strong> button inside the preview to switch modes. This page is also available as a standalone file at <code>templates/mokocassiopeia/templates/theme-test.html</code>.</p>"
 TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FRAME="<iframe src='../templates/mokocassiopeia/templates/theme-test.html' style='width:100%;height:80vh;border:1px solid #dee2e6;border-radius:.375rem;' loading='lazy' title='Theme test sheet preview'></iframe>"

-; ===== Brand Showcase tab =====
-TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_FIELDSET_LABEL="Brand Showcase"
-TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_INTRO="<p>Interactive brand and Bootstrap 5 component showcase with color system gradients. <strong>Hover over any gradient</strong> to sample the exact pixel color at that point. Use the <strong>Toggle Light / Dark</strong> button to switch themes. This page is also available standalone at <code>templates/mokocassiopeia/templates/brand-showcase.html</code>.</p>"
-TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_FRAME="<iframe src='../templates/mokocassiopeia/templates/brand-showcase.html' style='width:100%;height:80vh;border:1px solid #dee2e6;border-radius:.375rem;' loading='lazy' title='Brand and Bootstrap showcase with color sampler'></iframe>"
-
 ; ===== Misc =====
 MOD_BREADCRUMBS_HERE="YOU ARE HERE:"

--- a/src/media/css/offline.css
+++ b/src/media/css/offline.css
@@ -5,66 +5,36 @@
 SPDX-License-Identifier: GPL-3.0-or-later
 */

-/* === Offline Page Layout === */
+/* === Offline Page — Full-viewport background with centered overlay card === */
+
 .moko-offline-wrap {
 	min-height: 100vh;
-	display: grid;
-	grid-template-rows: auto 1fr auto;
-	background-color: var(--body-bg, #0e1318);
-	color: var(--body-font-color, #e6ebf1);
-	font-family: var(--body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-}
-
-.moko-offline-main {
-	display: grid;
-	place-items: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 	padding: 2rem 1rem;
+	color: #fff;
+	font-family: var(--body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+	/* Background set inline via Joomla offline_image or fallback */
+	background-color: var(--body-bg, #0e1318);
+	background-position: center;
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-size: cover;
 }

-/* === Centered Card Grid === */
-.moko-offline-grid {
-	display: grid;
-	grid-template-columns: 1fr minmax(0, 720px) 1fr;
-	width: 100%;
-	max-width: 1200px;
-	margin: 0 auto;
-}
-
-.moko-offline-grid__side {
-	display: block;
-}
-
-.moko-offline-grid__center {
-	min-width: 0;
-}
-
-@media (max-width: 767.98px) {
-	.moko-offline-grid {
-		grid-template-columns: 1fr;
-	}
-
-	.moko-offline-grid__side {
-		display: none;
-	}
-
-	.moko-offline-main {
-		padding: 0;
-	}
-
-	.moko-offline-card {
-		border-radius: 0;
-		border: none;
-		min-height: 100%;
-	}
-}
-
-/* === Card === */
+/* === Centered Card Overlay === */
 .moko-offline-card {
-	background-color: var(--card-bg, var(--secondary-bg, #151b22));
-	border: var(--card-border-width, 1px) solid var(--card-border-color, var(--border-color, #2b323b));
-	border-radius: var(--border-radius, 0.25rem);
-	box-shadow: var(--box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.26));
-	padding: 2.5rem;
+	width: 100%;
+	max-width: 640px;
+	background: rgba(0, 0, 0, 0.6);
+	backdrop-filter: blur(8px);
+	-webkit-backdrop-filter: blur(8px);
+	border-radius: 0.875rem;
+	padding: 2.5rem 2rem;
+	text-align: center;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }

@media (min-width: 768px) {
@@ -73,150 +43,191 @@
 	}
 }

-/* === Brand / Logo === */
+@media (max-width: 575.98px) {
+	.moko-offline-wrap {
+		padding: 1rem 0.75rem;
+	}
+
+	.moko-offline-card {
+		padding: 2rem 1.25rem;
+	}
+}
+
+/* === Logo (with glow effect like clarksvillefurs) === */
 .moko-offline-brand {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+	display: block;
 	text-align: center;
-	gap: 0.75rem;
 	text-decoration: none;
-	color: var(--body-font-color, #e6ebf1);
-	margin-bottom: 2rem;
+	color: #fff;
+	margin-bottom: 1.5rem;
 }

 .moko-offline-brand:hover {
-	color: var(--color-link, #8ab4f8);
+	color: var(--accent-color-primary, #3f8ff0);
 }

 .moko-offline-brand img {
-	max-width: 200px;
-	max-height: 80px;
+	max-width: 280px;
+	max-height: 120px;
 	width: auto;
 	height: auto;
+	filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.3))
+	        drop-shadow(0 0 24px rgba(255, 255, 255, 0.15));
 }

 .moko-offline-brand .site-title {
-	font-size: 1.75rem;
+	display: block;
+	font-size: 2rem;
 	font-weight: 700;
 	font-family: 'Osaka', var(--body-font-family, sans-serif);
+	text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
 }

 .moko-offline-brand .brand-tagline {
 	display: block;
-	opacity: 0.75;
-	font-size: 0.875rem;
-	line-height: 1.2;
+	opacity: 0.7;
+	font-size: 0.9rem;
+	margin-top: 0.25rem;
 }

-/* === Header === */
-.moko-offline-header {
-	background-color: var(--header-bg, var(--color-primary, #112855));
-	color: var(--mainmenu-nav-link-color, #fff);
-	padding: 1rem 0;
+/* === Offline Message === */
+.moko-offline-message {
+	margin-bottom: 1.5rem;
 }

-.moko-offline-header .container {
-	display: flex;
-	align-items: center;
-	gap: 1rem;
-	max-width: 1200px;
-	margin: 0 auto;
-	padding: 0 1rem;
-}
-
-.moko-offline-header .moko-brand {
-	display: flex;
-	align-items: center;
-	gap: 0.75rem;
-	text-decoration: none;
-	color: var(--mainmenu-nav-link-color, #fff);
-}
-
-.moko-offline-header .moko-brand img {
-	max-width: 180px;
-	max-height: 60px;
-	width: auto;
-	height: auto;
-}
-
-.moko-offline-header .moko-brand .brand-tagline {
-	display: block;
-	opacity: 0.75;
-	font-size: 0.875rem;
-	line-height: 1.2;
-}
-
-/* === Content Typography === */
-.moko-offline-card h1 {
-	color: var(--heading-color, var(--body-font-color, #f1f5f9));
+.moko-offline-message h1 {
+	font-size: 1.5rem;
 	font-weight: 700;
+	color: #fff;
+	margin-bottom: 0.5rem;
+	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }

-.moko-offline-card .lead {
-	color: var(--gray-600, #48525d);
+.moko-offline-message p {
+	color: rgba(255, 255, 255, 0.85);
 	line-height: 1.6;
+	margin: 0;
+}
+
+/* === Offline Module Position === */
+.moko-offline-modules {
+	margin-bottom: 1.5rem;
+	text-align: left;
+}
+
+/* === Copyright Footer === */
+.moko-offline-copyright {
+	font-size: 0.8rem;
+	color: rgba(255, 255, 255, 0.45);
+	margin-top: 1.5rem;
+	padding-top: 1rem;
+	border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.moko-offline-copyright a {
+	color: rgba(255, 255, 255, 0.6);
+	text-decoration: underline;
+}
+
+.moko-offline-copyright a:hover {
+	color: #fff;
+}
+
+/* === Login Accordion (translucent on overlay) === */
+.moko-offline-card .accordion {
+	text-align: left;
 }

-/* === Accordion === */
 .moko-offline-card .accordion-item {
-	background-color: var(--card-bg, var(--secondary-bg, #151b22));
-	border-color: var(--border-color, #2b323b);
+	background: transparent;
+	border-color: rgba(255, 255, 255, 0.15);
 }

 .moko-offline-card .accordion-button {
-	background-color: var(--card-bg, var(--secondary-bg, #151b22));
-	color: var(--body-font-color, #e6ebf1);
+	background: transparent;
+	color: rgba(255, 255, 255, 0.8);
+	font-size: 0.9rem;
+	padding: 0.75rem 1rem;
 }

 .moko-offline-card .accordion-button:not(.collapsed) {
-	background-color: var(--card-cap-bg, rgba(255, 255, 255, 0.03));
-	color: var(--body-font-color, #e6ebf1);
+	background: rgba(255, 255, 255, 0.05);
+	color: #fff;
+	box-shadow: none;
+}
+
+.moko-offline-card .accordion-button::after {
+	filter: invert(1) brightness(2);
 }

 .moko-offline-card .accordion-body {
-	background-color: var(--card-bg, var(--secondary-bg, #151b22));
+	background: transparent;
+	padding: 1rem;
 }

-/* === Form Controls === */
+/* === Form Controls (glass effect) === */
 .moko-offline-card .form-control {
-	background-color: var(--input-bg, #1a2332);
-	border-color: var(--input-border-color, #3a4250);
-	color: var(--input-color, #e6ebf1);
+	background-color: rgba(255, 255, 255, 0.1);
+	border-color: rgba(255, 255, 255, 0.2);
+	color: #fff;
+}
+
+.moko-offline-card .form-control::placeholder {
+	color: rgba(255, 255, 255, 0.4);
 }

 .moko-offline-card .form-control:focus {
-	border-color: var(--input-focus-border-color, #5472ff);
-	box-shadow: var(--input-focus-box-shadow, 0 0 0 0.25rem rgba(84, 114, 255, 0.25));
+	background-color: rgba(255, 255, 255, 0.15);
+	border-color: var(--accent-color-primary, #3f8ff0);
+	color: #fff;
+	box-shadow: 0 0 0 0.25rem rgba(63, 143, 240, 0.25);
 }

 .moko-offline-card .form-label {
-	color: var(--body-font-color, #e6ebf1);
+	color: rgba(255, 255, 255, 0.8);
+	font-size: 0.875rem;
 }

 .moko-offline-card .form-check-label {
-	color: var(--body-font-color, #e6ebf1);
+	color: rgba(255, 255, 255, 0.7);
+}
+
+.moko-offline-card .form-check-input {
+	background-color: rgba(255, 255, 255, 0.1);
+	border-color: rgba(255, 255, 255, 0.3);
+}
+
+.moko-offline-card .form-check-input:checked {
+	background-color: var(--accent-color-primary, #3f8ff0);
+	border-color: var(--accent-color-primary, #3f8ff0);
 }

 /* === Button === */
 .moko-offline-card .btn-primary {
 	background-color: var(--color-primary, #112855);
-	border-color: var(--color-primary, #112855);
-	color: var(--mainmenu-nav-link-color, #fff);
+	border-color: rgba(255, 255, 255, 0.15);
+	color: #fff;
 }

 .moko-offline-card .btn-primary:hover {
-	background-color: var(--color-hover, gray);
-	border-color: var(--color-hover, gray);
+	background-color: var(--accent-color-primary, #3f8ff0);
+	border-color: var(--accent-color-primary, #3f8ff0);
 }

 /* === Links === */
 .moko-offline-card a {
-	color: var(--link-color, var(--color-link, #8ab4f8));
+	color: var(--accent-color-primary, #3f8ff0);
 }

 .moko-offline-card a:hover {
-	color: var(--link-hover-color, #c3d6ff);
+	color: #fff;
+}
+
+/* === Joomla system messages === */
+.moko-offline-messages {
+	width: 100%;
+	max-width: 640px;
+	margin-bottom: 1rem;
 }

 /* === Skip Link === */
--- a/src/offline.php
+++ b/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>
--- a/src/templateDetails.xml
+++ b/src/templateDetails.xml
@@ -295,7 +295,8 @@
 					<option value="0">JNO</option>
 					<option value="1">JYES</option>
 				</field>
-				<field name="a11y_toolbar_pos" type="list" default="tl"
+				<!-- Position forced to bottom-right in index.php -->
+				<field name="a11y_toolbar_pos" type="hidden" default="br"
 							 label="TPL_MOKO_A11Y_TOOLBAR_POS" description="TPL_MOKO_A11Y_TOOLBAR_POS_DESC"
 							 showon="a11y_toolbar_enabled:1">
 					<option value="br">Bottom-right</option>
@@ -312,7 +313,8 @@
 					<option value="0">JNO</option>
 					<option value="1">JYES</option>
 				</field>
-				<field name="theme_fab_pos" type="list" default="br"
+				<!-- Position forced to bottom-right in index.php -->
+				<field name="theme_fab_pos" type="hidden" default="br"
 							 label="TPL_MOKO_THEME_FAB_POS" description="TPL_MOKO_THEME_FAB_POS_DESC">
 					<option value="br">Bottom-right</option>
 					<option value="bl">Bottom-left</option>
@@ -365,6 +367,7 @@
 				<field name="css_vars_offcanvas" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_OFFCANVAS_DESC" class="alert alert-light" />
 				<field name="css_vars_virtuemart" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_VM_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_VM_DESC" class="alert alert-light" />
 				<field name="css_vars_gable" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_GABLE_DESC" class="alert alert-light" />
+				<field name="css_vars_footer" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_FOOTER_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_FOOTER_DESC" class="alert alert-light" />
 			</fieldset>

 			<!-- Theme Preview tab — embedded test sheet -->
@@ -372,12 +375,6 @@
 				<field name="theme_preview_intro" type="note" description="TPL_MOKOCASSIOPEIA_THEME_PREVIEW_INTRO" />
 				<field name="theme_preview_frame" type="note" description="TPL_MOKOCASSIOPEIA_THEME_PREVIEW_FRAME" />
 			</fieldset>
-
-			<!-- Brand Showcase tab — color system, gradients, interactive sampler -->
-			<fieldset name="brand_showcase" label="TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_FIELDSET_LABEL">
-				<field name="brand_showcase_intro" type="note" description="TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_INTRO" />
-				<field name="brand_showcase_frame" type="note" description="TPL_MOKOCASSIOPEIA_BRAND_SHOWCASE_FRAME" />
-			</fieldset>
 		</fields>
 	</config>
 </extension>