diff --git a/language/en-GB/tpl_moko-cassiopeia.ini b/language/en-GB/tpl_moko-cassiopeia.ini
index a9662f2..183d520 100644
--- a/language/en-GB/tpl_moko-cassiopeia.ini
+++ b/language/en-GB/tpl_moko-cassiopeia.ini
@@ -1,13 +1,30 @@
-;---------------------------------------------------
-; Template: moko-cassiopeia
-; File: en-GB.tpl_moko-cassiopeia.ini
-; Version: 02.00
-; Author: Jonathan Miller
-; Copyright: (C) 2025 Moko Consulting. All rights reserved.
-; License: GNU General Public License v3 or later; see LICENSE.txt
-; Description: Language strings for the frontend template.
-; Note: All ini files must be saved as UTF-8 without BOM.
-;---------------------------------------------------
+# =========================================================================
+# Copyright (C) 2025 Moko Consulting
+#
+# This file is part of a Moko Consulting project.
+#
+# SPDX-License-Identifier: GPL-3.0-or-later
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program. If not, see https://www.gnu.org/licenses/ .
+# =========================================================================
+# FILE INFORMATION
+# DEFGROUP: Joomla
+# INGROUP: Moko-Cassiopeia
+# PATH: language/en-GB/tpl_moko-cassiopeia.ini
+# VERSION: 02.00
+# BRIEF: English (GB) language strings for the Moko-Cassiopeia Joomla template
+# =========================================================================
; ===== Template meta =====
MOKO-CASSIOPEIA="MOKO-CASSIOPEIA Site template"
diff --git a/language/en-GB/tpl_moko-cassiopeia.sys.ini b/language/en-GB/tpl_moko-cassiopeia.sys.ini
index ea2a9df..809fb14 100644
--- a/language/en-GB/tpl_moko-cassiopeia.sys.ini
+++ b/language/en-GB/tpl_moko-cassiopeia.sys.ini
@@ -1,13 +1,30 @@
-;---------------------------------------------------
-; Template: moko-cassiopeia
-; File: en-GB.tpl_moko-cassiopeia.sys.ini
-; Version: 02.00
-; Author: Jonathan Miller
-; Copyright: (C) 2025 Moko Consulting. All rights reserved.
-; License: GNU General Public License v3 or later; see LICENSE.txt
-; Description: Language strings for the frontend template.
-; Note: All ini files must be saved as UTF-8 without BOM.
-;---------------------------------------------------
+# =========================================================================
+# Copyright (C) 2025 Moko Consulting
+#
+# This file is part of a Moko Consulting project.
+#
+# SPDX-License-Identifier: GPL-3.0-or-later
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program. If not, see https://www.gnu.org/licenses/ .
+# =========================================================================
+# FILE INFORMATION
+# DEFGROUP: Joomla
+# INGROUP: Moko-Cassiopeia
+# PATH: language/en-GB/tpl_moko-cassiopeia.sys.ini
+# VERSION: 02.00
+# BRIEF: English (GB) system language strings for template metadata and installer
+# =========================================================================
TPL_MOKO-CASSIOPEIA="Moko-Cassiopeia Site template"
TPL_MOKO-CASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE-METISMENU="Collapsible Dropdown"
@@ -30,11 +47,12 @@ TPL_MOKO-CASSIOPEIA_POSITION_TOP-B="Top-b"
TPL_MOKO-CASSIOPEIA_POSITION_TOPBAR="Top Bar"
TPL_MOKO-CASSIOPEIA_POSITION_DRAWER-LEFT="Drawer-Left"
TPL_MOKO-CASSIOPEIA_POSITION_DRAWER-RIGHT="Drawer-Right"
-TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="
- MOKO-CASSIOPEIA continues Joomla’s tradition of space-themed default templates—
- building on the legacy of Solarflare from Joomla 1.0, Milkyway from Joomla 1.5,
- and Protostar from Joomla 3.0.
+ MOKO-CASSIOPEIA 2.0 continues Joomla’s tradition of space-themed default templates—
+ building on the legacy of Solarflare (Joomla 1.0), Milkyway (Joomla 1.5),
+ and Protostar (Joomla 3.0).
This template is a customized fork of the Cassiopeia template introduced in Joomla 4,
@@ -42,41 +60,40 @@ TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="
MOKO-CASSIOPEIA Template Description
- MOKO-CASSIOPEIA is designed to serve as a versatile, production-ready base for
- contemporary Joomla websites, emphasizing speed, clarity, and open-source philosophy.
+ Version 2.0 introduces significant new functionality including a Dark Mode toggle,
+ Google Tag Manager (GTM) and Google Analytics 4 (GA4) hooks, and expanded template configuration
+ options — all while keeping overrides minimal and upgrade-friendly.
Features
Fully responsive and mobile-first layout
Based on Joomla 4+ template architecture
-
Enhanced SCSS and CSS overrides for custom styling
-
Built-in support for Bootstrap 5
-
- Integrated dynamic Table of Contents via
- Bootstrap TOC
-
+
Enhanced SCSS and CSS overrides for streamlined custom styling
+
Built-in support for Bootstrap 5
+
Font Awesome 6 integration for modern iconography
+
Automatic Table of Contents (TOC) — selectable per article via toc-left or toc-right layouts
+
Dark Mode toggle (new in v2.0) with user switch and admin override
+
Optional GTM + GA4 hooks (new in v2.0) for analytics and marketing integration
Optimized template structure for performance and maintainability
Custom module positions and layout presets
-
Accessible, lightweight, and extensible
+
Accessible, lightweight, and extensible for long-term use
Ideal for professional services, portfolios, and informational websites
Code Attribution
This template is based on the original Cassiopeia template developed by the
- Joomla! Project and released under the GNU General Public License.
+ Joomla! Project and released under the GNU General Public License.
Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards.
-
a
+
It includes integration with
- Bootstrap TOC,
+ Bootstrap TOC,
an open-source table of contents generator by A. Feld, licensed under the MIT License.
All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable.
"
-
-JGLOBAL_OFFLINE="Offline"
diff --git a/language/en-US/tpl_moko-cassiopeia.ini b/language/en-US/tpl_moko-cassiopeia.ini
index a9662f2..f183188 100644
--- a/language/en-US/tpl_moko-cassiopeia.ini
+++ b/language/en-US/tpl_moko-cassiopeia.ini
@@ -1,13 +1,30 @@
-;---------------------------------------------------
-; Template: moko-cassiopeia
-; File: en-GB.tpl_moko-cassiopeia.ini
-; Version: 02.00
-; Author: Jonathan Miller
-; Copyright: (C) 2025 Moko Consulting. All rights reserved.
-; License: GNU General Public License v3 or later; see LICENSE.txt
-; Description: Language strings for the frontend template.
-; Note: All ini files must be saved as UTF-8 without BOM.
-;---------------------------------------------------
+# =========================================================================
+# Copyright (C) 2025 Moko Consulting
+#
+# This file is part of a Moko Consulting project.
+#
+# SPDX-License-Identifier: GPL-3.0-or-later
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program. If not, see https://www.gnu.org/licenses/ .
+# =========================================================================
+# FILE INFORMATION
+# DEFGROUP: Joomla
+# INGROUP: Moko-Cassiopeia
+# PATH: language/en-US/tpl_moko-cassiopeia.ini
+# VERSION: 02.00
+# BRIEF: English (US) language strings for the Moko-Cassiopeia Joomla template
+# =========================================================================
; ===== Template meta =====
MOKO-CASSIOPEIA="MOKO-CASSIOPEIA Site template"
diff --git a/language/en-US/tpl_moko-cassiopeia.sys.ini b/language/en-US/tpl_moko-cassiopeia.sys.ini
index 3c3a2e5..774ca82 100644
--- a/language/en-US/tpl_moko-cassiopeia.sys.ini
+++ b/language/en-US/tpl_moko-cassiopeia.sys.ini
@@ -1,13 +1,30 @@
-;---------------------------------------------------
-; Template: moko-cassiopeia
-; File: en-US.tpl_moko-cassiopeia.sys.ini
-; Version: 02.00
-; Author: Jonathan Miller
-; Copyright: (C) 2025 Moko Consulting. All rights reserved.
-; License: GNU General Public License v3 or later; see LICENSE.txt
-; Description: Language strings for the frontend template.
-; Note: All ini files must be saved as UTF-8 without BOM.
-;---------------------------------------------------
+# =========================================================================
+# Copyright (C) 2025 Moko Consulting
+#
+# This file is part of a Moko Consulting project.
+#
+# SPDX-License-Identifier: GPL-3.0-or-later
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program. If not, see https://www.gnu.org/licenses/ .
+# =========================================================================
+# FILE INFORMATION
+# DEFGROUP: Joomla
+# INGROUP: Moko-Cassiopeia
+# PATH: language/en-US/tpl_moko-cassiopeia.sys.ini
+# VERSION: 02.00
+# BRIEF: English (US) system language strings for template metadata and installer
+# =========================================================================
TPL_MOKO-CASSIOPEIA="Moko-Cassiopeia Site template"
TPL_MOKO-CASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE-METISMENU="Collapsible Dropdown"
@@ -31,11 +48,11 @@ TPL_MOKO-CASSIOPEIA_POSITION_TOPBAR="Top Bar"
TPL_MOKO-CASSIOPEIA_POSITION_DRAWER-LEFT="Drawer-Left"
TPL_MOKO-CASSIOPEIA_POSITION_DRAWER-RIGHT="Drawer-Right"
TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION=
-TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="
MOKO-CASSIOPEIA Template Description
+TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="
MOKO-CASSIOPEIA Template Description (v2.0)
- MOKO-CASSIOPEIA continues Joomla’s tradition of space-themed default templates—
- building on the legacy of Solarflare from Joomla 1.0, Milkyway from Joomla 1.5,
- and Protostar from Joomla 3.0.
+ MOKO-CASSIOPEIA 2.0 continues Joomla’s tradition of space-themed default templates—
+ building on the legacy of Solarflare (Joomla 1.0), Milkyway (Joomla 1.5),
+ and Protostar (Joomla 3.0).
This template is a customized fork of the Cassiopeia template introduced in Joomla 4,
@@ -43,41 +60,40 @@ TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="
MOKO-CASSIOPEIA Template Description
- MOKO-CASSIOPEIA is designed to serve as a versatile, production-ready base for
- contemporary Joomla websites, emphasizing speed, clarity, and open-source philosophy.
+ Version 2.0 introduces significant new functionality including a Dark Mode toggle,
+ Google Tag Manager (GTM) and Google Analytics 4 (GA4) hooks, and expanded template configuration
+ options — all while keeping overrides minimal and upgrade-friendly.
Features
Fully responsive and mobile-first layout
Based on Joomla 4+ template architecture
-
Enhanced SCSS and CSS overrides for custom styling
-
Built-in support for Bootstrap 5
-
- Integrated dynamic Table of Contents via
- Bootstrap TOC
-
+
Enhanced SCSS and CSS overrides for streamlined custom styling
+
Built-in support for Bootstrap 5
+
Font Awesome 6 integration for modern iconography
+
Automatic Table of Contents (TOC) — selectable per article via toc-left or toc-right layouts
+
Dark Mode toggle (new in v2.0) with user switch and admin override
+
Optional GTM + GA4 hooks (new in v2.0) for analytics and marketing integration
Optimized template structure for performance and maintainability
Custom module positions and layout presets
-
Accessible, lightweight, and extensible
+
Accessible, lightweight, and extensible for long-term use
Ideal for professional services, portfolios, and informational websites
Code Attribution
This template is based on the original Cassiopeia template developed by the
- Joomla! Project and released under the GNU General Public License.
+ Joomla! Project and released under the GNU General Public License.
Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards.
-
a
+
It includes integration with
- Bootstrap TOC,
+ Bootstrap TOC,
an open-source table of contents generator by A. Feld, licensed under the MIT License.
All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable.
"
-
-JGLOBAL_OFFLINE="Offline"
diff --git a/media/templates/site/moko-cassiopeia/css/editor.css b/media/templates/site/moko-cassiopeia/css/editor.css
index bd2032d..f5c8d7d 100644
--- a/media/templates/site/moko-cassiopeia/css/editor.css
+++ b/media/templates/site/moko-cassiopeia/css/editor.css
@@ -1,3 +1,33 @@
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/editor.css
+ * VERSION: 02.00
+ * BRIEF: Stylesheet for Joomla editor content within Moko-Cassiopeia template
+ * =========================================================================
+ */
+
/* STYLES FOR JOOMLA! EDITOR */
body {
font-size: 1rem;
diff --git a/media/templates/site/moko-cassiopeia/css/gable.css b/media/templates/site/moko-cassiopeia/css/gable.css
index d5a281c..1e653df 100644
--- a/media/templates/site/moko-cassiopeia/css/gable.css
+++ b/media/templates/site/moko-cassiopeia/css/gable.css
@@ -1,3 +1,33 @@
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/gable.css
+ * VERSION: 02.00
+ * BRIEF: Stylesheet providing gable-specific layout and design rules for Moko-Cassiopeia
+ * =========================================================================
+ */
+
:root {
--gab-blue: transparent;
--gab-green: #7ac143;
diff --git a/media/templates/site/moko-cassiopeia/css/global/dark/colors_alternative.css b/media/templates/site/moko-cassiopeia/css/global/dark/colors_alternative.css
new file mode 100644
index 0000000..5130cea
--- /dev/null
+++ b/media/templates/site/moko-cassiopeia/css/global/dark/colors_alternative.css
@@ -0,0 +1,368 @@
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/global/dark/colors_alternative.css
+ * VERSION: 02.00
+ * BRIEF: Alternative dark mode color definitions for Moko-Cassiopeia template
+ * =========================================================================
+ */
+
+/* -----------------------------------------------
+ * DARK THEME
+ * --------------------------------------------- */
+
+:root[data-bs-theme='dark']{
+ /* System hint for native widgets */
+ color-scheme: dark;
+
+ /* Brand & links */
+ --color-primary: #112855;
+ --accent-color-primary: #3f8ff0;
+ --accent-color-secondary: #6fb3ff;
+
+ --mainmenu-nav-link-color: #fff;
+
+ --color-link: #224FAA;
+ --color-hover: #224FAA;
+
+ /* Header background (kept same image; works over dark bg) */
+ --header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); --header-background-attachment: fixed;
+ --header-background-repeat: repeat;
+ --header-background-size: auto;
+
+ /* Section containers */
+ --container-below-topbar-bg-image: ;
+ --container-below-topbar-bg-color: ;
+ --container-below-topbar-bg-position: center;
+ --container-below-topbar-bg-attachment: fixed;
+ --container-below-topbar-bg-repeat: no-repeat;
+ --container-below-topbar-bg-size: cover;
+ --container-below-topbar-border: ;
+ --container-below-topbar-border-radius: ;
+
+ --container-top-a-bg-image: ;
+ --container-top-a-bg-color: ;
+ --container-top-a-bg-position: center;
+ --container-top-a-bg-attachment: fixed;
+ --container-top-a-bg-repeat: no-repeat;
+ --container-top-a-bg-size: cover;
+ --container-top-a-border: ;
+ --container-top-a-border-radius: ;
+
+ --container-top-b-bg-image: ;
+ --container-top-b-bg-color: ;
+ --container-top-b-bg-position: center;
+ --container-top-b-bg-attachment: fixed;
+ --container-top-b-bg-repeat: no-repeat;
+ --container-top-b-bg-size: cover;
+ --container-top-b-border: ;
+ --container-top-b-border-radius: ;
+
+ --container-toc-bg: ;
+ --container-toc-color: #dbe3ff;
+
+ --container-sidebar-bg-image: ;
+ --container-sidebar-bg-color: ;
+ --container-sidebar-bg-position: center;
+ --container-sidebar-bg-attachment: scroll;
+ --container-sidebar-bg-repeat: repeat;
+ --container-sidebar-bg-size: auto;
+ --container-sidebar-border: ;
+ --container-sidebar-border-radius: ;
+
+ --container-bottom-a-bg-image: ;
+ --container-bottom-a-bg-color: ;
+ --container-bottom-a-bg-position: center;
+ --container-bottom-a-bg-attachment: fixed;
+ --container-bottom-a-bg-repeat: no-repeat;
+ --container-bottom-a-bg-size: cover;
+ --container-bottom-a-border: ;
+ --container-bottom-a-border-radius: 5px;
+
+ --container-bottom-b-bg-image: ;
+ --container-bottom-b-bg-color: ;
+ --container-bottom-b-bg-position: center;
+ --container-bottom-b-bg-attachment: fixed;
+ --container-bottom-b-bg-repeat: no-repeat;
+ --container-bottom-b-bg-size: cover;
+ --container-bottom-b-border: ;
+ --container-bottom-b-border-radius: ;
+
+ /* Nav & accents */
+ --nav-text-color: var(--mainmenu-nav-link-color);
+ --nav-bg-color: var(--color-link);
+ --border: 5px;
+
+ --muted-color: #6d757e;
+ --hr-color: var(--border-color, #dfe3e7);
+ --link-active-color: var(--link-color);
+ --code-color-ink: var(--code-color, #e93f8e);
+ --border-color-soft: var(--border-color, #dfe3e7);
+ --kbd-bg: var(--secondary-bg, #eaedf0);
+ --kbd-ink: var(--body-bg, #fff);
+ --toc-bg: var(--secondary-bg, #eaedf0);
+ --toc-ink: var(--color-primary, #112855);
+ --selection-bg: var(--highlight-bg, #fbeea8);
+ --selection-ink: var(--body-color, #22262a);
+
+ /* Palette */
+ --blue: #91a4ff;
+ --black: #000;
+ --indigo: #b19cff;
+ --purple: #c0a5ff;
+ --pink: #ff8fc0;
+ --red: #ff7a73;
+ --orange: #ff9c4d;
+ --yellow: #ffd166;
+ --green: #78d694;
+ --teal: #76e3ff;
+ --cyan: #6fb7ff;
+ --white: #fff;
+
+ /* Grays tuned for dark */
+ --gray-100: #161a20;
+ --gray-200: #1b2027;
+ --gray-300: #222831;
+ --gray-400: #2b323b;
+ --gray-500: #36404a;
+ --gray-600: #48525d;
+ --gray-700: #5b6672;
+ --gray-800: #cfd6de;
+ --gray-900: #e6ebf1;
+
+ /* Contextuals (keep brand hues) */
+ --primary: #010156;
+ --secondary: #48525d;
+ --success: #4aa664;
+ --info: #4f7aa0;
+ --warning: #c77a00;
+ --danger: #c23a31;
+ --light: #1b2027;
+ --dark: #0f1318;
+
+ /* RGB helpers */
+ --primary-rgb: 1,1,86;
+ --secondary-rgb: 72,82,93;
+ --success-rgb: 74,166,100;
+ --info-rgb: 79,122,160;
+ --warning-rgb: 199,122,0;
+ --danger-rgb: 194,58,49;
+ --light-rgb: 27,32,39;
+ --dark-rgb: 15,19,24;
+
+ /* Emphasis & subtle variants */
+ --primary-text-emphasis: #c7ccff;
+ --secondary-text-emphasis: #cfd6de;
+ --success-text-emphasis: #bde8c9;
+ --info-text-emphasis: #bcd6ee;
+ --warning-text-emphasis: #ffd9a6;
+ --danger-text-emphasis: #ffb7b2;
+ --light-text-emphasis: #d2d8df;
+ --dark-text-emphasis: #d2d8df;
+
+ --primary-bg-subtle: #0b1030;
+ --secondary-bg-subtle: #1e2430;
+ --success-bg-subtle: #0f2a1b;
+ --info-bg-subtle: #0d2232;
+ --warning-bg-subtle: #2a1e06;
+ --danger-bg-subtle: #2d1110;
+ --light-bg-subtle: #12161d;
+ --dark-bg-subtle: #1e2430;
+
+ --primary-border-subtle: #2b3a7a;
+ --secondary-border-subtle: #2b323b;
+ --success-border-subtle: #2b5b40;
+ --info-border-subtle: #254861;
+ --warning-border-subtle: #5a3c0e;
+ --danger-border-subtle: #5c2723;
+ --light-border-subtle: #222831;
+ --dark-border-subtle: #2b323b;
+
+ /* Typography & layout */
+ --body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+ --body-font-size: 1rem;
+ --body-font-weight: 400;
+ --body-line-height: 1.5;
+
+ --body-color: #e6ebf1;
+ --body-color-rgb: 230, 235, 241;
+ --body-bg: #0e1318;
+ --body-bg-rgb: 14, 19, 24;
+
+ --emphasis-color: #fff;
+ --emphasis-color-rgb: 255, 255, 255;
+
+ --secondary-color: #e6ebf1bf;
+ --secondary-color-rgb: 230, 235, 241;
+
+ --secondary-bg: #151b22;
+ --secondary-bg-rgb: 21, 27, 34;
+
+ --tertiary-color: #e6ebf180;
+ --tertiary-color-rgb: 230, 235, 241;
+ --tertiary-bg: #10151b;
+ --tertiary-bg-rgb: 16, 21, 27;
+
+ --heading-color: #f1f5f9;
+
+ --link-color: #8ab4f8;
+ --link-color-rgb: 138, 180, 248;
+ --link-decoration: underline;
+ --link-hover-color: #c3d6ff;
+ --link-hover-color-rgb: 195, 214, 255;
+
+ --code-color: #ff7abd;
+ --highlight-color: #111;
+ --highlight-bg: #ffe28a1a;
+
+ --border-width: 1px;
+ --border-style: solid;
+ --border-color: #2b323b;
+ --border-color-translucent: #ffffff26;
+
+ --border-radius: .25rem;
+ --border-radius-sm: .2rem;
+ --border-radius-lg: .3rem;
+ --border-radius-xl: .3rem;
+ --border-radius-xxl: 2rem;
+ --border-radius-2xl: var(--border-radius-xxl);
+ --border-radius-pill: 50rem;
+
+ --box-shadow: 0 .5rem 1rem #00000066;
+ --box-shadow-sm: 0 .125rem .25rem #00000040;
+ --box-shadow-lg: 0 1rem 3rem #00000080;
+ --box-shadow-inset: inset 0 1px 2px #00000040;
+
+ --focus-ring-width: .25rem;
+ --focus-ring-opacity: .6;
+ --focus-ring-color: #5472ff66;
+
+ --form-valid-color: #78d694;
+ --form-valid-border-color: #78d694;
+ --form-invalid-color: #ff8e86;
+ --form-invalid-border-color: #ff8e86;
+}
+
+.btn {
+ --btn-padding-x: 1rem;
+ --btn-padding-y: 0.6rem;
+ --btn-font-family: ;
+ --btn-font-size: 1rem;
+ --btn-font-weight: 400;
+ --btn-line-height: 1.5;
+ --btn-color: var(--white);
+ --btn-bg: transparent;
+ --btn-border-width: 1px;
+ --btn-border-color: transparent;
+ --btn-border-radius: 0.25rem;
+ --btn-active-border-color: transparent;
+ --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+ --btn-disabled-opacity: 0.65;
+ --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
+ display: inline-block;
+ padding: var(--btn-padding-y) var(--btn-padding-x);
+ font-family: var(--btn-font-family);
+ font-size: var(--btn-font-size);
+ font-weight: var(--btn-font-weight);
+ line-height: var(--btn-line-height);
+ color: var(--btn-color);
+ text-align: center;
+ text-decoration: none;
+ vertical-align: middle;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ border: var(--btn-border-width) solid var(--btn-border-color);
+ border-radius: var(--btn-border-radius);
+ background-color: var(--btn-bg);
+ -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+ -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+}
+
+/* Buttons — inherit brand hues; ensure strong contrast on dark bg */
+.btn-primary {
+ --btn-color: hsl(0, 0%, 100%);
+ --btn-bg: hsl(240, 98%, 17%);
+ --btn-border-color: hsl(240, 98%, 17%);
+ --btn-hover-color: hsl(0, 0%, 100%);
+ --btn-hover-bg: #010149;
+ --btn-hover-border-color: #010145;
+ --btn-focus-shadow-rgb: 84, 114, 255;
+ --btn-active-color: hsl(0, 0%, 100%);
+ --btn-active-bg: #010145;
+ --btn-active-border-color: #010141;
+}
+
+.btn-secondary {
+ --btn-color: var(--nav-text-color);
+ --btn-bg: var(--nav-bg-color);
+ --btn-border-color: #3a4250;
+ --btn-hover-color: #fff;
+ --btn-hover-bg: #1b2a55;
+ --btn-hover-border-color: #162448;
+ --btn-focus-shadow-rgb: 84, 114, 255;
+ --btn-active-color: #fff;
+ --btn-active-bg: #162448;
+ --btn-active-border-color: #12203f;
+}
+
+/* Outline buttons on dark: keep readable borders */
+.btn-outline-light {
+ --btn-color: #e6ebf1;
+ --btn-border-color: #e6ebf1;
+ --btn-hover-color: #111;
+ --btn-hover-bg: #e6ebf1;
+ --btn-hover-border-color: #e6ebf1;
+ --btn-active-color: #111;
+ --btn-active-bg: #d7dce2;
+ --btn-active-border-color: #d7dce2;
+ --gradient: none;
+}
+
+/* Links as buttons */
+.btn-link {
+ --btn-font-weight: 400;
+ --btn-color: var(--link-color);
+ --btn-bg: transparent;
+ --btn-border-color: transparent;
+ --btn-hover-color: var(--link-hover-color);
+ --btn-hover-border-color: transparent;
+ --btn-active-color: var(--link-hover-color);
+ --btn-active-border-color: transparent;
+ --btn-disabled-color: #6d7781;
+ --btn-disabled-border-color: transparent;
+ --btn-box-shadow: none;
+ --btn-focus-shadow-rgb: 84, 114, 255;
+ text-decoration: underline;
+}
+
+.btn-secondary {
+ --btn-color: var(--nav-text-color);
+ --btn-bg: var(--nav-bg-color);
+}
diff --git a/media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css b/media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css
new file mode 100644
index 0000000..9da4f20
--- /dev/null
+++ b/media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css
@@ -0,0 +1,368 @@
+@charset "UTF-8";
+/* =========================================================================
+ * Copyright (C) 2025 Moko Consulting
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css
+ * VERSION: 02.00
+ * BRIEF: Standard dark mode color definitions for Moko-Cassiopeia template
+ * =========================================================================
+ */
+
+/* -----------------------------------------------
+ * DARK THEME
+ * --------------------------------------------- */
+
+:root[data-bs-theme='dark']{
+ /* System hint for native widgets */
+ color-scheme: dark;
+
+ /* Brand & links */
+ --color-primary: #112855;
+ --accent-color-primary: #3f8ff0;
+ --accent-color-secondary: #6fb3ff;
+
+ --mainmenu-nav-link-color: #fff;
+
+ --color-link: #224FAA;
+ --color-hover: #224FAA;
+
+ /* Header background (kept same image; works over dark bg) */
+ --header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); --header-background-attachment: fixed;
+ --header-background-repeat: repeat;
+ --header-background-size: auto;
+
+ /* Section containers */
+ --container-below-topbar-bg-image: ;
+ --container-below-topbar-bg-color: ;
+ --container-below-topbar-bg-position: center;
+ --container-below-topbar-bg-attachment: fixed;
+ --container-below-topbar-bg-repeat: no-repeat;
+ --container-below-topbar-bg-size: cover;
+ --container-below-topbar-border: ;
+ --container-below-topbar-border-radius: ;
+
+ --container-top-a-bg-image: ;
+ --container-top-a-bg-color: ;
+ --container-top-a-bg-position: center;
+ --container-top-a-bg-attachment: fixed;
+ --container-top-a-bg-repeat: no-repeat;
+ --container-top-a-bg-size: cover;
+ --container-top-a-border: ;
+ --container-top-a-border-radius: ;
+
+ --container-top-b-bg-image: ;
+ --container-top-b-bg-color: ;
+ --container-top-b-bg-position: center;
+ --container-top-b-bg-attachment: fixed;
+ --container-top-b-bg-repeat: no-repeat;
+ --container-top-b-bg-size: cover;
+ --container-top-b-border: ;
+ --container-top-b-border-radius: ;
+
+ --container-toc-bg: ;
+ --container-toc-color: #dbe3ff;
+
+ --container-sidebar-bg-image: ;
+ --container-sidebar-bg-color: ;
+ --container-sidebar-bg-position: center;
+ --container-sidebar-bg-attachment: scroll;
+ --container-sidebar-bg-repeat: repeat;
+ --container-sidebar-bg-size: auto;
+ --container-sidebar-border: ;
+ --container-sidebar-border-radius: ;
+
+ --container-bottom-a-bg-image: ;
+ --container-bottom-a-bg-color: ;
+ --container-bottom-a-bg-position: center;
+ --container-bottom-a-bg-attachment: fixed;
+ --container-bottom-a-bg-repeat: no-repeat;
+ --container-bottom-a-bg-size: cover;
+ --container-bottom-a-border: ;
+ --container-bottom-a-border-radius: 5px;
+
+ --container-bottom-b-bg-image: ;
+ --container-bottom-b-bg-color: ;
+ --container-bottom-b-bg-position: center;
+ --container-bottom-b-bg-attachment: fixed;
+ --container-bottom-b-bg-repeat: no-repeat;
+ --container-bottom-b-bg-size: cover;
+ --container-bottom-b-border: ;
+ --container-bottom-b-border-radius: ;
+
+ /* Nav & accents */
+ --nav-text-color: var(--mainmenu-nav-link-color);
+ --nav-bg-color: var(--color-link);
+ --border: 5px;
+
+ --muted-color: #6d757e;
+ --hr-color: var(--border-color, #dfe3e7);
+ --link-active-color: var(--link-color);
+ --code-color-ink: var(--code-color, #e93f8e);
+ --border-color-soft: var(--border-color, #dfe3e7);
+ --kbd-bg: var(--secondary-bg, #eaedf0);
+ --kbd-ink: var(--body-bg, #fff);
+ --toc-bg: var(--secondary-bg, #eaedf0);
+ --toc-ink: var(--color-primary, #112855);
+ --selection-bg: var(--highlight-bg, #fbeea8);
+ --selection-ink: var(--body-color, #22262a);
+
+ /* Palette */
+ --blue: #91a4ff;
+ --black: #000;
+ --indigo: #b19cff;
+ --purple: #c0a5ff;
+ --pink: #ff8fc0;
+ --red: #ff7a73;
+ --orange: #ff9c4d;
+ --yellow: #ffd166;
+ --green: #78d694;
+ --teal: #76e3ff;
+ --cyan: #6fb7ff;
+ --white: #fff;
+
+ /* Grays tuned for dark */
+ --gray-100: #161a20;
+ --gray-200: #1b2027;
+ --gray-300: #222831;
+ --gray-400: #2b323b;
+ --gray-500: #36404a;
+ --gray-600: #48525d;
+ --gray-700: #5b6672;
+ --gray-800: #cfd6de;
+ --gray-900: #e6ebf1;
+
+ /* Contextuals (keep brand hues) */
+ --primary: #010156;
+ --secondary: #48525d;
+ --success: #4aa664;
+ --info: #4f7aa0;
+ --warning: #c77a00;
+ --danger: #c23a31;
+ --light: #1b2027;
+ --dark: #0f1318;
+
+ /* RGB helpers */
+ --primary-rgb: 1,1,86;
+ --secondary-rgb: 72,82,93;
+ --success-rgb: 74,166,100;
+ --info-rgb: 79,122,160;
+ --warning-rgb: 199,122,0;
+ --danger-rgb: 194,58,49;
+ --light-rgb: 27,32,39;
+ --dark-rgb: 15,19,24;
+
+ /* Emphasis & subtle variants */
+ --primary-text-emphasis: #c7ccff;
+ --secondary-text-emphasis: #cfd6de;
+ --success-text-emphasis: #bde8c9;
+ --info-text-emphasis: #bcd6ee;
+ --warning-text-emphasis: #ffd9a6;
+ --danger-text-emphasis: #ffb7b2;
+ --light-text-emphasis: #d2d8df;
+ --dark-text-emphasis: #d2d8df;
+
+ --primary-bg-subtle: #0b1030;
+ --secondary-bg-subtle: #1e2430;
+ --success-bg-subtle: #0f2a1b;
+ --info-bg-subtle: #0d2232;
+ --warning-bg-subtle: #2a1e06;
+ --danger-bg-subtle: #2d1110;
+ --light-bg-subtle: #12161d;
+ --dark-bg-subtle: #1e2430;
+
+ --primary-border-subtle: #2b3a7a;
+ --secondary-border-subtle: #2b323b;
+ --success-border-subtle: #2b5b40;
+ --info-border-subtle: #254861;
+ --warning-border-subtle: #5a3c0e;
+ --danger-border-subtle: #5c2723;
+ --light-border-subtle: #222831;
+ --dark-border-subtle: #2b323b;
+
+ /* Typography & layout */
+ --body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+ --body-font-size: 1rem;
+ --body-font-weight: 400;
+ --body-line-height: 1.5;
+
+ --body-color: #e6ebf1;
+ --body-color-rgb: 230, 235, 241;
+ --body-bg: #0e1318;
+ --body-bg-rgb: 14, 19, 24;
+
+ --emphasis-color: #fff;
+ --emphasis-color-rgb: 255, 255, 255;
+
+ --secondary-color: #e6ebf1bf;
+ --secondary-color-rgb: 230, 235, 241;
+
+ --secondary-bg: #151b22;
+ --secondary-bg-rgb: 21, 27, 34;
+
+ --tertiary-color: #e6ebf180;
+ --tertiary-color-rgb: 230, 235, 241;
+ --tertiary-bg: #10151b;
+ --tertiary-bg-rgb: 16, 21, 27;
+
+ --heading-color: #f1f5f9;
+
+ --link-color: #8ab4f8;
+ --link-color-rgb: 138, 180, 248;
+ --link-decoration: underline;
+ --link-hover-color: #c3d6ff;
+ --link-hover-color-rgb: 195, 214, 255;
+
+ --code-color: #ff7abd;
+ --highlight-color: #111;
+ --highlight-bg: #ffe28a1a;
+
+ --border-width: 1px;
+ --border-style: solid;
+ --border-color: #2b323b;
+ --border-color-translucent: #ffffff26;
+
+ --border-radius: .25rem;
+ --border-radius-sm: .2rem;
+ --border-radius-lg: .3rem;
+ --border-radius-xl: .3rem;
+ --border-radius-xxl: 2rem;
+ --border-radius-2xl: var(--border-radius-xxl);
+ --border-radius-pill: 50rem;
+
+ --box-shadow: 0 .5rem 1rem #00000066;
+ --box-shadow-sm: 0 .125rem .25rem #00000040;
+ --box-shadow-lg: 0 1rem 3rem #00000080;
+ --box-shadow-inset: inset 0 1px 2px #00000040;
+
+ --focus-ring-width: .25rem;
+ --focus-ring-opacity: .6;
+ --focus-ring-color: #5472ff66;
+
+ --form-valid-color: #78d694;
+ --form-valid-border-color: #78d694;
+ --form-invalid-color: #ff8e86;
+ --form-invalid-border-color: #ff8e86;
+}
+
+.btn {
+ --btn-padding-x: 1rem;
+ --btn-padding-y: 0.6rem;
+ --btn-font-family: ;
+ --btn-font-size: 1rem;
+ --btn-font-weight: 400;
+ --btn-line-height: 1.5;
+ --btn-color: var(--white);
+ --btn-bg: transparent;
+ --btn-border-width: 1px;
+ --btn-border-color: transparent;
+ --btn-border-radius: 0.25rem;
+ --btn-active-border-color: transparent;
+ --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+ --btn-disabled-opacity: 0.65;
+ --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
+ display: inline-block;
+ padding: var(--btn-padding-y) var(--btn-padding-x);
+ font-family: var(--btn-font-family);
+ font-size: var(--btn-font-size);
+ font-weight: var(--btn-font-weight);
+ line-height: var(--btn-line-height);
+ color: var(--btn-color);
+ text-align: center;
+ text-decoration: none;
+ vertical-align: middle;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ border: var(--btn-border-width) solid var(--btn-border-color);
+ border-radius: var(--btn-border-radius);
+ background-color: var(--btn-bg);
+ -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+ -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
+}
+
+/* Buttons — inherit brand hues; ensure strong contrast on dark bg */
+.btn-primary {
+ --btn-color: hsl(0, 0%, 100%);
+ --btn-bg: hsl(240, 98%, 17%);
+ --btn-border-color: hsl(240, 98%, 17%);
+ --btn-hover-color: hsl(0, 0%, 100%);
+ --btn-hover-bg: #010149;
+ --btn-hover-border-color: #010145;
+ --btn-focus-shadow-rgb: 84, 114, 255;
+ --btn-active-color: hsl(0, 0%, 100%);
+ --btn-active-bg: #010145;
+ --btn-active-border-color: #010141;
+}
+
+.btn-secondary {
+ --btn-color: var(--nav-text-color);
+ --btn-bg: var(--nav-bg-color);
+ --btn-border-color: #3a4250;
+ --btn-hover-color: #fff;
+ --btn-hover-bg: #1b2a55;
+ --btn-hover-border-color: #162448;
+ --btn-focus-shadow-rgb: 84, 114, 255;
+ --btn-active-color: #fff;
+ --btn-active-bg: #162448;
+ --btn-active-border-color: #12203f;
+}
+
+/* Outline buttons on dark: keep readable borders */
+.btn-outline-light {
+ --btn-color: #e6ebf1;
+ --btn-border-color: #e6ebf1;
+ --btn-hover-color: #111;
+ --btn-hover-bg: #e6ebf1;
+ --btn-hover-border-color: #e6ebf1;
+ --btn-active-color: #111;
+ --btn-active-bg: #d7dce2;
+ --btn-active-border-color: #d7dce2;
+ --gradient: none;
+}
+
+/* Links as buttons */
+.btn-link {
+ --btn-font-weight: 400;
+ --btn-color: var(--link-color);
+ --btn-bg: transparent;
+ --btn-border-color: transparent;
+ --btn-hover-color: var(--link-hover-color);
+ --btn-hover-border-color: transparent;
+ --btn-active-color: var(--link-hover-color);
+ --btn-active-border-color: transparent;
+ --btn-disabled-color: #6d7781;
+ --btn-disabled-border-color: transparent;
+ --btn-box-shadow: none;
+ --btn-focus-shadow-rgb: 84, 114, 255;
+ text-decoration: underline;
+}
+
+.btn-secondary {
+ --btn-color: var(--nav-text-color);
+ --btn-bg: var(--nav-bg-color);
+}
diff --git a/media/templates/site/moko-cassiopeia/css/global/dark/index.html b/media/templates/site/moko-cassiopeia/css/global/dark/index.html
new file mode 100644
index 0000000..206e130
--- /dev/null
+++ b/media/templates/site/moko-cassiopeia/css/global/dark/index.html
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+ Redirecting…
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Redirecting to the site root… If you are not redirected, click here.
Redirecting to the site root… If you are not redirected, click here.
+
+
diff --git a/templates/moko-cassiopeia/html/com_content/article/toc-left.php b/templates/moko-cassiopeia/html/com_content/article/toc-left.php
new file mode 100644
index 0000000..290202c
--- /dev/null
+++ b/templates/moko-cassiopeia/html/com_content/article/toc-left.php
@@ -0,0 +1,173 @@
+
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: templates/moko-cassiopeia/html/com_content/article/toc-left.php
+ * VERSION: 02.00
+ * BRIEF: Template override for Joomla articles with Table of Contents aligned left
+ * =========================================================================
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Factory;
+use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Language\Associations;
+use Joomla\CMS\Language\Text;
+use Joomla\CMS\Layout\FileLayout;
+use Joomla\CMS\Layout\LayoutHelper;
+use Joomla\CMS\Router\Route;
+use Joomla\CMS\Uri\Uri;
+use Joomla\Component\Content\Administrator\Extension\ContentComponent;
+use Joomla\Component\Content\Site\Helper\RouteHelper;
+
+// Create shortcuts to some parameters.
+$params = $this->item->params;
+$canEdit = $params->get('access-edit');
+$user = Factory::getUser();
+$info = $params->get('info_block_position', 0);
+$htag = $this->params->get('show_page_heading') ? 'h2' : 'h1';
+
+// Check if associations are implemented. If they are, define the parameter.
+$assocParam = (Associations::isEnabled() && $params->get('show_associations'));
+$currentDate = Factory::getDate()->format('Y-m-d H:i:s');
+$isNotPublishedYet = $this->item->publish_up > $currentDate;
+$isExpired = !is_null($this->item->publish_down) && $this->item->publish_down < $currentDate;
+?>
+
+
diff --git a/templates/moko-cassiopeia/html/com_content/article/toc-right.php b/templates/moko-cassiopeia/html/com_content/article/toc-right.php
new file mode 100644
index 0000000..06c683e
--- /dev/null
+++ b/templates/moko-cassiopeia/html/com_content/article/toc-right.php
@@ -0,0 +1,175 @@
+
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/ .
+ * =========================================================================
+ * FILE INFORMATION
+ * DEFGROUP: Joomla
+ * INGROUP: Moko-Cassiopeia
+ * PATH: templates/moko-cassiopeia/html/com_content/article/toc-right.php
+ * VERSION: 02.00
+ * BRIEF: Template override for Joomla articles with Table of Contents aligned right
+ * =========================================================================
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Factory;
+use Joomla\CMS\HTML\HTMLHelper;
+use Joomla\CMS\Language\Associations;
+use Joomla\CMS\Language\Text;
+use Joomla\CMS\Layout\FileLayout;
+use Joomla\CMS\Layout\LayoutHelper;
+use Joomla\CMS\Router\Route;
+use Joomla\CMS\Uri\Uri;
+use Joomla\Component\Content\Administrator\Extension\ContentComponent;
+use Joomla\Component\Content\Site\Helper\RouteHelper;
+
+// Create shortcuts to some parameters.
+$params = $this->item->params;
+$canEdit = $params->get('access-edit');
+$user = Factory::getUser();
+$info = $params->get('info_block_position', 0);
+$htag = $this->params->get('show_page_heading') ? 'h2' : 'h1';
+
+// Check if associations are implemented. If they are, define the parameter.
+$assocParam = (Associations::isEnabled() && $params->get('show_associations'));
+$currentDate = Factory::getDate()->format('Y-m-d H:i:s');
+$isNotPublishedYet = $this->item->publish_up > $currentDate;
+$isExpired = !is_null($this->item->publish_down) && $this->item->publish_down < $currentDate;
+?>
+
Redirecting to the site root… If you are not redirected, click here.
+
+
diff --git a/templates/moko-cassiopeia/html/com_content/featured/default.php b/templates/moko-cassiopeia/html/com_content/featured/default.php
new file mode 100644
index 0000000..8214b33
--- /dev/null
+++ b/templates/moko-cassiopeia/html/com_content/featured/default.php
@@ -0,0 +1,75 @@
+
+ * @license GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+?>
+
+ maxLevel - 1 level comments only. Replies to deeper nested comments are to the $this->maxLevel - 1 level parent. ?>
+
+
+
+
+
+
+
+
+
+
+
+
+= 1; $level--): ?>
+
+
+
+
+
+
+
diff --git a/templates/moko-cassiopeia/html/com_engage/comments/default_login.php b/templates/moko-cassiopeia/html/com_engage/comments/default_login.php
new file mode 100644
index 0000000..d08c718
--- /dev/null
+++ b/templates/moko-cassiopeia/html/com_engage/comments/default_login.php
@@ -0,0 +1,45 @@
+get('login_module', '-1');
+$moduleContent = (empty($loginModule) || ($loginModule === '-1')) ? '' : trim($this->loadModule($loginModule));
+$positionContent = trim($this->loadPosition('engage-login'));
+
+/**
+ * A reason for this to happen is that site owner wants discussion to be open to invitation-only members of the site but
+ * visible by anyone. This is mostly relevant in political organizations, NGOs and local / closed community
+ * organizations where a small number of people are openly discussing a public interest issue, but they don't want to
+ * allow random people to detract the conversation.
+ */
+if (empty($moduleContent) && empty($positionContent))
+{
+ return;
+}
+?>
+
diff --git a/templates/moko-cassiopeia/html/com_engage/comments/index.html b/templates/moko-cassiopeia/html/com_engage/comments/index.html
new file mode 100644
index 0000000..206e130
--- /dev/null
+++ b/templates/moko-cassiopeia/html/com_engage/comments/index.html
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+ Redirecting…
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Redirecting to the site root… If you are not redirected, click here.
+
+
+ *
+ * This file is part of a Moko Consulting project.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see .
+ -->
+
+
+
+
+
+
+
+ Redirecting…
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Redirecting to the site root… If you are not redirected, click here.