src/language/en-GB/tpl_mokocassiopeia.ini

@@ -8,7 +8,7 @@
 ; DEFGROUP: Joomla.Template.Site
 ; INGROUP: MokoCassiopeia
 ; PATH: ./language/en-GB/tpl_mokocassiopeia.ini
-; VERSION: 03.06.02
+; VERSION: 03.09.01
 ; BRIEF: English (GB) language strings for the MokoCassiopeia Joomla template
 ;
 ; Note: Template metadata strings (name, description) are in tpl_mokocassiopeia.sys.ini
@@ -75,9 +75,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard"
 TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom"
 ; New labels for Theme tab dropdowns
 TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light colour palette"
-TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a colour palette for light mode. <strong>Standard</strong> uses the default blue theme with comprehensive styling for all components. <strong>Custom</strong> allows you to create your own colour scheme - copy the template file from <code>templates/theme_custom_light.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> and customise the CSS variables to match your brand."
+TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a colour palette for light mode. <strong>Standard</strong> uses the default blue theme with comprehensive styling for all components. <strong>Custom</strong> loads <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> — copy the starter file from <code>templates/mokocassiopeia/templates/light.custom.css</code> and customise the CSS variables to match your brand."
 TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark colour palette"
-TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a colour palette for dark mode. <strong>Standard</strong> uses the default blue theme optimised for dark backgrounds with proper contrast. <strong>Custom</strong> allows you to create your own colour scheme - copy the template file from <code>templates/theme_custom_dark.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code> and customise the CSS variables to match your brand."
+TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a colour palette for dark mode. <strong>Standard</strong> uses the default blue theme optimised for dark backgrounds with proper contrast. <strong>Custom</strong> loads <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code> — copy the starter file from <code>templates/mokocassiopeia/templates/dark.custom.css</code> and customise the CSS variables to match your brand."
 
 ; ===== Theme tab (core feature strings) =====
 TPL_MOKO_THEME_FIELDSET="Theme"
@@ -109,6 +109,24 @@ TPL_MOKO_THEME_FAB_ENABLED_DESC="Display a persistent, accessible theme toggle."
 TPL_MOKO_THEME_FAB_POS="Floating switch position"
 TPL_MOKO_THEME_FAB_POS_DESC="Screen corner for the toggle."
 
+; ===== CSS Variables tab =====
+TPL_MOKOCASSIOPEIA_CSS_VARS_FIELDSET_LABEL="CSS Variables"
+TPL_MOKOCASSIOPEIA_CSS_VARS_INTRO="<p>All colours, spacing and layout values are driven by CSS custom properties. To override any variable without editing the template, add your overrides to <code>media/templates/site/mokocassiopeia/css/user.css</code>, or create a custom palette file (see the Theme tab). Variables are scoped to <code>:root[data-bs-theme=&quot;light&quot;]</code> or <code>:root[data-bs-theme=&quot;dark&quot;]</code> so light and dark values are independent.</p>"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_LABEL="Brand &amp; Bootstrap Palette"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_DESC="<strong>Brand</strong><br><code>--color-primary</code> — Primary brand colour (default: <code>#112855</code>)<br><code>--accent-color-primary</code> — Primary accent (default: <code>#3f8ff0</code>)<br><code>--accent-color-secondary</code> — Secondary accent<br><br><strong>Bootstrap Semantic Colours</strong><br>Map to buttons, alerts, badges and other components.<br><code>--primary</code>, <code>--secondary</code>, <code>--success</code>, <code>--info</code>, <code>--warning</code>, <code>--danger</code>, <code>--light</code>, <code>--dark</code>"
+TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_LABEL="Typography &amp; Body"
+TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_DESC="<code>--body-color</code> — Default text colour<br><code>--body-bg</code> — Page background<br><code>--body-font-family</code> — Font stack<br><code>--body-font-size</code> — Base size (default: <code>1rem</code>)<br><code>--body-line-height</code> — Line height (default: <code>1.5</code>)<br><code>--heading-color</code> — Heading colour (default: inherit)<br><code>--link-color</code> — Hyperlink colour<br><code>--link-hover-color</code> — Hyperlink hover colour<br><code>--code-color</code> — Inline code colour<br><code>--muted-color</code> — Muted/secondary text colour"
+TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_LABEL="Navigation"
+TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_DESC="<code>--nav-bg-color</code> — Navbar background colour<br><code>--nav-text-color</code> — Navbar text colour<br><code>--mainmenu-nav-link-color</code> — Active nav link colour<br><code>--navbar-padding-x</code> / <code>--navbar-padding-y</code> — Navbar padding<br><code>--nav-link-padding-x</code> / <code>--nav-link-padding-y</code> — Link padding"
+TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL="Header Background"
+TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC="Controls the background of the topbar/header area.<br><code>--header-background-image</code> — CSS <code>background-image</code> value (default: built-in SVG pattern)<br><code>--header-background-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--header-background-repeat</code> — e.g. <code>repeat</code>, <code>no-repeat</code><br><code>--header-background-size</code> — e.g. <code>auto</code>, <code>cover</code>, <code>contain</code>"
+TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_LABEL="Container Backgrounds"
+TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_DESC="Each layout container has its own background variables. Replace <code>{pos}</code> with: <code>below-topbar</code>, <code>top-a</code>, <code>top-b</code>, <code>sidebar</code>, <code>bottom-a</code>, or <code>bottom-b</code>.<br><br><code>--container-{pos}-bg-image</code> — Background image (default: <code>none</code>)<br><code>--container-{pos}-bg-color</code> — Background colour (default: <code>transparent</code>)<br><code>--container-{pos}-bg-position</code> — Background position<br><code>--container-{pos}-bg-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--container-{pos}-bg-repeat</code> — Repeat behaviour<br><code>--container-{pos}-bg-size</code> — e.g. <code>cover</code>, <code>auto</code><br><code>--container-{pos}-border</code> — Border shorthand<br><code>--container-{pos}-border-radius</code> — Border radius"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_LABEL="Borders &amp; Shadows"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_DESC="<strong>Borders</strong><br><code>--border-color</code> — Default border colour<br><code>--border-width</code> — Default width (default: <code>1px</code>)<br><code>--border-radius</code> — Default radius (default: <code>.25rem</code>)<br><code>--border-radius-sm</code>, <code>--border-radius-lg</code>, <code>--border-radius-xl</code>, <code>--border-radius-pill</code><br><br><strong>Shadows</strong><br><code>--box-shadow</code> — Standard shadow<br><code>--box-shadow-sm</code> — Subtle shadow<br><code>--box-shadow-lg</code> — Prominent shadow<br><code>--box-shadow-inset</code> — Inset shadow"
+TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_LABEL="Forms &amp; Focus"
+TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_DESC="<code>--input-color</code> — Input text colour<br><code>--input-bg</code> — Input background<br><code>--input-border-color</code> — Input border colour<br><code>--input-focus-border-color</code> — Focused border colour<br><code>--input-focus-box-shadow</code> — Focused input shadow<br><code>--input-placeholder-color</code> — Placeholder text colour<br><code>--input-disabled-bg</code> — Disabled input background<br><br><code>--focus-ring-color</code> — Keyboard focus ring colour<br><code>--focus-ring-width</code> — Focus ring width<br><code>--form-valid-color</code> / <code>--form-invalid-color</code> — Validation state colours"
+
 ; ===== Misc =====
 MOD_BREADCRUMBS_HERE="YOU ARE HERE:"
 

src/language/en-GB/tpl_mokocassiopeia.sys.ini

@@ -34,4 +34,4 @@ TPL_MOKOCASSIOPEIA_POSITION_TOP_B="Top-b"
 TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar"
 TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left"
 TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right"
-TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="<h3>MokoCassiopeia Template Description</h3> <p>  <strong>MokoCassiopeia</strong> continues Joomla’s tradition of space-themed default templates—  building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5),  and <em>Protostar</em> (Joomla 3.0). </p> <p>  This template is a customized fork of the <strong>Cassiopeia</strong> template introduced in Joomla 4,  preserving its modern, accessible, and mobile-first foundation while introducing new stylistic  enhancements and structural refinements specifically tailored for use by Moko Consulting. </p>  <h4>Custom Colour Themes</h4> <p>  Starter palette files are included with the template. To create a custom colour scheme,  copy <code>templates/mokocassiopeia/templates/light.custom.css</code> to  <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code>,  or <code>templates/mokocassiopeia/templates/dark.custom.css</code> to  <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>.  Customise the CSS variables to match your brand, then activate your palette in  <em>System → Site Templates → MokoCassiopeia → Theme tab</em>  by selecting "Custom" for the Light or Dark Mode Palette.  For comprehensive documentation on all available CSS variables,  see <a href=\"https://github.com/mokoconsulting-tech/MokoCassiopeia/tree/main/docs\" target=\"_blank\" rel=\"noopener\">docs/CSS_VARIABLES.md</a>. </p>  <h4>Custom CSS &amp; JavaScript</h4> <p>  For site-specific styles and scripts that should survive template updates, create the following files: </p> <ul>  <li><code>media/templates/site/mokocassiopeia/css/user.css</code> — loaded on every page for custom CSS overrides.</li>  <li><code>media/templates/site/mokocassiopeia/js/user.js</code> — loaded on every page for custom JavaScript.</li> </ul> <p>  These files are gitignored and will not be overwritten by template updates. </p>  <h4>Code Attribution</h4> <p>  This template is based on the original <strong>Cassiopeia</strong> template developed by the  <a href=\"https://www.joomla.org\" target=\"_blank\" rel=\"noopener\">Joomla! Project</a> and released under the GNU General Public License. </p> <p>  Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p>  It includes integration with  <a href=\"https://afeld.github.io/bootstrap-toc/\" target=\"_blank\" rel=\"noopener\">Bootstrap TOC</a>,  an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p>  All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>"
+TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="<h3>MokoCassiopeia Template Description</h3> <p>  <strong>MokoCassiopeia</strong> continues Joomla’s tradition of space-themed default templates—  building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5),  and <em>Protostar</em> (Joomla 3.0). </p> <p>  This template is a customized fork of the <strong>Cassiopeia</strong> template introduced in Joomla 4,  preserving its modern, accessible, and mobile-first foundation while introducing new stylistic  enhancements and structural refinements specifically tailored for use by Moko Consulting. </p>  <h4>Custom Colour Themes</h4> <p>  Starter palette files are included with the template. To create a custom colour scheme,  copy <code>templates/mokocassiopeia/templates/light.custom.css</code> to  <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code>,  or <code>templates/mokocassiopeia/templates/dark.custom.css</code> to  <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>.  Customise the CSS variables to match your brand, then activate your palette in  <em>System → Site Templates → MokoCassiopeia → Theme tab</em>  by selecting "Custom" for the Light or Dark Mode Palette.  A full variable reference is available in the <em>CSS Variables</em> tab in template options. </p>  <h4>Custom CSS &amp; JavaScript</h4> <p>  For site-specific styles and scripts that should survive template updates, create the following files: </p> <ul>  <li><code>media/templates/site/mokocassiopeia/css/user.css</code> — loaded on every page for custom CSS overrides.</li>  <li><code>media/templates/site/mokocassiopeia/js/user.js</code> — loaded on every page for custom JavaScript.</li> </ul> <p>  These files are gitignored and will not be overwritten by template updates. </p>  <h4>Code Attribution</h4> <p>  This template is based on the original <strong>Cassiopeia</strong> template developed by the  <a href=\"https://www.joomla.org\" target=\"_blank\" rel=\"noopener\">Joomla! Project</a> and released under the GNU General Public License. </p> <p>  Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p>  It includes integration with  <a href=\"https://afeld.github.io/bootstrap-toc/\" target=\"_blank\" rel=\"noopener\">Bootstrap TOC</a>,  an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p>  All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>"

src/language/en-US/tpl_mokocassiopeia.ini

@@ -8,7 +8,7 @@
 ; DEFGROUP: Joomla.Template.Site
 ; INGROUP: MokoCassiopeia
 ; PATH: ./language/en-US/tpl_mokocassiopeia.ini
-; VERSION: 03.06.02
+; VERSION: 03.09.01
 ; BRIEF: English (US) language strings for the MokoCassiopeia Joomla template
 ;
 ; Note: Template metadata strings (name, description) are in tpl_mokocassiopeia.sys.ini
@@ -75,9 +75,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard"
 TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom"
 ; New labels for Theme tab dropdowns
 TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette"
-TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a color palette for light mode. <strong>Standard</strong> uses the default blue theme with comprehensive styling for all components. <strong>Custom</strong> allows you to create your own color scheme - copy the template file from <code>templates/theme_custom_light.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> and customize the CSS variables to match your brand."
+TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a color palette for light mode. <strong>Standard</strong> uses the default blue theme with comprehensive styling for all components. <strong>Custom</strong> loads <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> — copy the starter file from <code>templates/mokocassiopeia/templates/light.custom.css</code> and customize the CSS variables to match your brand."
 TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark color palette"
-TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a color palette for dark mode. <strong>Standard</strong> uses the default blue theme optimized for dark backgrounds with proper contrast. <strong>Custom</strong> allows you to create your own color scheme - copy the template file from <code>templates/theme_custom_dark.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code> and customize the CSS variables to match your brand."
+TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC="Select a color palette for dark mode. <strong>Standard</strong> uses the default blue theme optimized for dark backgrounds with proper contrast. <strong>Custom</strong> loads <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code> — copy the starter file from <code>templates/mokocassiopeia/templates/dark.custom.css</code> and customize the CSS variables to match your brand."
 
 ; ===== Theme tab (core feature strings) =====
 TPL_MOKO_THEME_FIELDSET="Theme"
@@ -109,6 +109,24 @@ TPL_MOKO_THEME_FAB_ENABLED_DESC="Display a persistent, accessible theme toggle."
 TPL_MOKO_THEME_FAB_POS="Floating switch position"
 TPL_MOKO_THEME_FAB_POS_DESC="Screen corner for the toggle."
 
+; ===== CSS Variables tab =====
+TPL_MOKOCASSIOPEIA_CSS_VARS_FIELDSET_LABEL="CSS Variables"
+TPL_MOKOCASSIOPEIA_CSS_VARS_INTRO="<p>All colors, spacing and layout values are driven by CSS custom properties. To override any variable without editing the template, add your overrides to <code>media/templates/site/mokocassiopeia/css/user.css</code>, or create a custom palette file (see the Theme tab). Variables are scoped to <code>:root[data-bs-theme=&quot;light&quot;]</code> or <code>:root[data-bs-theme=&quot;dark&quot;]</code> so light and dark values are independent.</p>"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_LABEL="Brand &amp; Bootstrap Palette"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_DESC="<strong>Brand</strong><br><code>--color-primary</code> — Primary brand color (default: <code>#112855</code>)<br><code>--accent-color-primary</code> — Primary accent (default: <code>#3f8ff0</code>)<br><code>--accent-color-secondary</code> — Secondary accent<br><br><strong>Bootstrap Semantic Colors</strong><br>Map to buttons, alerts, badges and other components.<br><code>--primary</code>, <code>--secondary</code>, <code>--success</code>, <code>--info</code>, <code>--warning</code>, <code>--danger</code>, <code>--light</code>, <code>--dark</code>"
+TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_LABEL="Typography &amp; Body"
+TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_DESC="<code>--body-color</code> — Default text color<br><code>--body-bg</code> — Page background<br><code>--body-font-family</code> — Font stack<br><code>--body-font-size</code> — Base size (default: <code>1rem</code>)<br><code>--body-line-height</code> — Line height (default: <code>1.5</code>)<br><code>--heading-color</code> — Heading color (default: inherit)<br><code>--link-color</code> — Hyperlink color<br><code>--link-hover-color</code> — Hyperlink hover color<br><code>--code-color</code> — Inline code color<br><code>--muted-color</code> — Muted/secondary text color"
+TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_LABEL="Navigation"
+TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_DESC="<code>--nav-bg-color</code> — Navbar background color<br><code>--nav-text-color</code> — Navbar text color<br><code>--mainmenu-nav-link-color</code> — Active nav link color<br><code>--navbar-padding-x</code> / <code>--navbar-padding-y</code> — Navbar padding<br><code>--nav-link-padding-x</code> / <code>--nav-link-padding-y</code> — Link padding"
+TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL="Header Background"
+TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC="Controls the background of the topbar/header area.<br><code>--header-background-image</code> — CSS <code>background-image</code> value (default: built-in SVG pattern)<br><code>--header-background-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--header-background-repeat</code> — e.g. <code>repeat</code>, <code>no-repeat</code><br><code>--header-background-size</code> — e.g. <code>auto</code>, <code>cover</code>, <code>contain</code>"
+TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_LABEL="Container Backgrounds"
+TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_DESC="Each layout container has its own background variables. Replace <code>{pos}</code> with: <code>below-topbar</code>, <code>top-a</code>, <code>top-b</code>, <code>sidebar</code>, <code>bottom-a</code>, or <code>bottom-b</code>.<br><br><code>--container-{pos}-bg-image</code> — Background image (default: <code>none</code>)<br><code>--container-{pos}-bg-color</code> — Background color (default: <code>transparent</code>)<br><code>--container-{pos}-bg-position</code> — Background position<br><code>--container-{pos}-bg-attachment</code> — <code>fixed</code> or <code>scroll</code><br><code>--container-{pos}-bg-repeat</code> — Repeat behavior<br><code>--container-{pos}-bg-size</code> — e.g. <code>cover</code>, <code>auto</code><br><code>--container-{pos}-border</code> — Border shorthand<br><code>--container-{pos}-border-radius</code> — Border radius"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_LABEL="Borders &amp; Shadows"
+TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_DESC="<strong>Borders</strong><br><code>--border-color</code> — Default border color<br><code>--border-width</code> — Default width (default: <code>1px</code>)<br><code>--border-radius</code> — Default radius (default: <code>.25rem</code>)<br><code>--border-radius-sm</code>, <code>--border-radius-lg</code>, <code>--border-radius-xl</code>, <code>--border-radius-pill</code><br><br><strong>Shadows</strong><br><code>--box-shadow</code> — Standard shadow<br><code>--box-shadow-sm</code> — Subtle shadow<br><code>--box-shadow-lg</code> — Prominent shadow<br><code>--box-shadow-inset</code> — Inset shadow"
+TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_LABEL="Forms &amp; Focus"
+TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_DESC="<code>--input-color</code> — Input text color<br><code>--input-bg</code> — Input background<br><code>--input-border-color</code> — Input border color<br><code>--input-focus-border-color</code> — Focused border color<br><code>--input-focus-box-shadow</code> — Focused input shadow<br><code>--input-placeholder-color</code> — Placeholder text color<br><code>--input-disabled-bg</code> — Disabled input background<br><br><code>--focus-ring-color</code> — Keyboard focus ring color<br><code>--focus-ring-width</code> — Focus ring width<br><code>--form-valid-color</code> / <code>--form-invalid-color</code> — Validation state colors"
+
 ; ===== Misc =====
 MOD_BREADCRUMBS_HERE="YOU ARE HERE:"
 

src/language/en-US/tpl_mokocassiopeia.sys.ini

@@ -34,4 +34,4 @@ TPL_MOKOCASSIOPEIA_POSITION_TOP_B="Top-b"
 TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar"
 TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left"
 TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right"
-TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="<h3>MokoCassiopeia Template Description</h3> <p>  <strong>MokoCassiopeia</strong> continues Joomla’s tradition of space-themed default templates—  building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5),  and <em>Protostar</em> (Joomla 3.0). </p> <p>  This template is a customized fork of the <strong>Cassiopeia</strong> template introduced in Joomla 4,  preserving its modern, accessible, and mobile-first foundation while introducing new stylistic  enhancements and structural refinements specifically tailored for use by Moko Consulting. </p>  <h4>Custom Color Themes</h4> <p>  Starter palette files are included with the template. To create a custom color scheme,  copy <code>templates/mokocassiopeia/templates/light.custom.css</code> to  <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code>,  or <code>templates/mokocassiopeia/templates/dark.custom.css</code> to  <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>.  Customize the CSS variables to match your brand, then activate your palette in  <em>System → Site Templates → MokoCassiopeia → Theme tab</em>  by selecting "Custom" for the Light or Dark Mode Palette.  For comprehensive documentation on all available CSS variables,  see <a href=\"https://github.com/mokoconsulting-tech/MokoCassiopeia/tree/main/docs\" target=\"_blank\" rel=\"noopener\">docs/CSS_VARIABLES.md</a>. </p>  <h4>Custom CSS &amp; JavaScript</h4> <p>  For site-specific styles and scripts that should survive template updates, create the following files: </p> <ul>  <li><code>media/templates/site/mokocassiopeia/css/user.css</code> — loaded on every page for custom CSS overrides.</li>  <li><code>media/templates/site/mokocassiopeia/js/user.js</code> — loaded on every page for custom JavaScript.</li> </ul> <p>  These files are gitignored and will not be overwritten by template updates. </p>  <h4>Code Attribution</h4> <p>  This template is based on the original <strong>Cassiopeia</strong> template developed by the  <a href=\"https://www.joomla.org\" target=\"_blank\" rel=\"noopener\">Joomla! Project</a> and released under the GNU General Public License. </p> <p>  Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p>  It includes integration with  <a href=\"https://afeld.github.io/bootstrap-toc/\" target=\"_blank\" rel=\"noopener\">Bootstrap TOC</a>,  an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p>  All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>"
+TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="<h3>MokoCassiopeia Template Description</h3> <p>  <strong>MokoCassiopeia</strong> continues Joomla’s tradition of space-themed default templates—  building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5),  and <em>Protostar</em> (Joomla 3.0). </p> <p>  This template is a customized fork of the <strong>Cassiopeia</strong> template introduced in Joomla 4,  preserving its modern, accessible, and mobile-first foundation while introducing new stylistic  enhancements and structural refinements specifically tailored for use by Moko Consulting. </p>  <h4>Custom Color Themes</h4> <p>  Starter palette files are included with the template. To create a custom color scheme,  copy <code>templates/mokocassiopeia/templates/light.custom.css</code> to  <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code>,  or <code>templates/mokocassiopeia/templates/dark.custom.css</code> to  <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>.  Customize the CSS variables to match your brand, then activate your palette in  <em>System → Site Templates → MokoCassiopeia → Theme tab</em>  by selecting "Custom" for the Light or Dark Mode Palette.  A full variable reference is available in the <em>CSS Variables</em> tab in template options. </p>  <h4>Custom CSS &amp; JavaScript</h4> <p>  For site-specific styles and scripts that should survive template updates, create the following files: </p> <ul>  <li><code>media/templates/site/mokocassiopeia/css/user.css</code> — loaded on every page for custom CSS overrides.</li>  <li><code>media/templates/site/mokocassiopeia/js/user.js</code> — loaded on every page for custom JavaScript.</li> </ul> <p>  These files are gitignored and will not be overwritten by template updates. </p>  <h4>Code Attribution</h4> <p>  This template is based on the original <strong>Cassiopeia</strong> template developed by the  <a href=\"https://www.joomla.org\" target=\"_blank\" rel=\"noopener\">Joomla! Project</a> and released under the GNU General Public License. </p> <p>  Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p>  It includes integration with  <a href=\"https://afeld.github.io/bootstrap-toc/\" target=\"_blank\" rel=\"noopener\">Bootstrap TOC</a>,  an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p>  All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>"

src/templateDetails.xml

@@ -41,7 +41,7 @@
 	<author>Jonathan Miller || Moko Consulting</author>
 	<authorEmail>hello@mokoconsulting.tech</authorEmail>
 	<copyright>(C)GNU General Public License Version 3 - 2026 Moko Consulting</copyright>
-	<description><![CDATA[<h3>MokoCassiopeia Template Description</h3> <p>  <strong>MokoCassiopeia</strong> continues Joomla's tradition of space-themed default templates—  building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5),  and <em>Protostar</em> (Joomla 3.0). </p> <p>  This template is a customized fork of the <strong>Cassiopeia</strong> template introduced in Joomla 4,  preserving its modern, accessible, and mobile-first foundation while introducing new stylistic  enhancements and structural refinements specifically tailored for use by Moko Consulting. </p>  <h4>Custom Colour Themes</h4> <p>  Starter palette files are included with the template. To create a custom colour scheme,  copy <code>templates/mokocassiopeia/templates/light.custom.css</code> to  <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code>,  or <code>templates/mokocassiopeia/templates/dark.custom.css</code> to  <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>.  Customise the CSS variables to match your brand, then activate your palette in  <em>System → Site Templates → MokoCassiopeia → Theme tab</em>  by selecting "Custom" for the Light or Dark Mode Palette.  For comprehensive documentation on all available CSS variables,  see <a href="https://github.com/mokoconsulting-tech/MokoCassiopeia/tree/main/docs" target="_blank" rel="noopener">docs/CSS_VARIABLES.md</a>. </p>  <h4>Custom CSS &amp; JavaScript</h4> <p>  For site-specific styles and scripts that should survive template updates, create the following files: </p> <ul>  <li><code>media/templates/site/mokocassiopeia/css/user.css</code> — loaded on every page for custom CSS overrides.</li>  <li><code>media/templates/site/mokocassiopeia/js/user.js</code> — loaded on every page for custom JavaScript.</li> </ul> <p>  These files are gitignored and will not be overwritten by template updates. </p>  <h4>Code Attribution</h4> <p>  This template is based on the original <strong>Cassiopeia</strong> template developed by the  <a href="https://www.joomla.org" target="_blank" rel="noopener">Joomla! Project</a> and released under the GNU General Public License. </p> <p>  Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p>  It includes integration with  <a href="https://afeld.github.io/bootstrap-toc/" target="_blank" rel="noopener">Bootstrap TOC</a>,  an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p>  All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>]]></description>
+	<description><![CDATA[<h3>MokoCassiopeia Template Description</h3> <p>  <strong>MokoCassiopeia</strong> continues Joomla's tradition of space-themed default templates—  building on the legacy of <em>Solarflare</em> (Joomla 1.0), <em>Milkyway</em> (Joomla 1.5),  and <em>Protostar</em> (Joomla 3.0). </p> <p>  This template is a customized fork of the <strong>Cassiopeia</strong> template introduced in Joomla 4,  preserving its modern, accessible, and mobile-first foundation while introducing new stylistic  enhancements and structural refinements specifically tailored for use by Moko Consulting. </p>  <h4>Custom Colour Themes</h4> <p>  Starter palette files are included with the template. To create a custom colour scheme,  copy <code>templates/mokocassiopeia/templates/light.custom.css</code> to  <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code>,  or <code>templates/mokocassiopeia/templates/dark.custom.css</code> to  <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>.  Customise the CSS variables to match your brand, then activate your palette in  <em>System → Site Templates → MokoCassiopeia → Theme tab</em>  by selecting "Custom" for the Light or Dark Mode Palette.  A full variable reference is available in the <em>CSS Variables</em> tab in template options. </p>  <h4>Custom CSS &amp; JavaScript</h4> <p>  For site-specific styles and scripts that should survive template updates, create the following files: </p> <ul>  <li><code>media/templates/site/mokocassiopeia/css/user.css</code> — loaded on every page for custom CSS overrides.</li>  <li><code>media/templates/site/mokocassiopeia/js/user.js</code> — loaded on every page for custom JavaScript.</li> </ul> <p>  These files are gitignored and will not be overwritten by template updates. </p>  <h4>Code Attribution</h4> <p>  This template is based on the original <strong>Cassiopeia</strong> template developed by the  <a href="https://www.joomla.org" target="_blank" rel="noopener">Joomla! Project</a> and released under the GNU General Public License. </p> <p>  Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. </p> <p>  It includes integration with  <a href="https://afeld.github.io/bootstrap-toc/" target="_blank" rel="noopener">Bootstrap TOC</a>,  an open-source table of contents generator by A. Feld, licensed under the MIT License. </p> <p>  All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. </p>]]></description>
 	<inheritable>1</inheritable>
 	<files>
 		<filename>component.php</filename>
@@ -247,6 +247,18 @@
 					<option value="tl">Top-left</option>
 				</field>
 			</fieldset>
+
+			<!-- CSS Variables reference tab -->
+			<fieldset name="css_variables" label="TPL_MOKOCASSIOPEIA_CSS_VARS_FIELDSET_LABEL">
+				<field name="css_vars_intro" type="note" description="TPL_MOKOCASSIOPEIA_CSS_VARS_INTRO" />
+				<field name="css_vars_brand" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BRAND_DESC" class="alert alert-light" />
+				<field name="css_vars_typography" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_TYPO_DESC" class="alert alert-light" />
+				<field name="css_vars_nav" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_NAV_DESC" class="alert alert-light" />
+				<field name="css_vars_header" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_HEADER_DESC" class="alert alert-light" />
+				<field name="css_vars_containers" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_CONTAINERS_DESC" class="alert alert-light" />
+				<field name="css_vars_borders" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_BORDERS_DESC" class="alert alert-light" />
+				<field name="css_vars_forms" type="note" label="TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_LABEL" description="TPL_MOKOCASSIOPEIA_CSS_VARS_FORMS_DESC" class="alert alert-light" />
+			</fieldset>
 		</fields>
 	</config>
 </extension>