MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Simplify component.php to minimal layout with conditional analytics #82

Merged
Copilot merged 78 commits from copilot/fix-breaking-overrides into main 2026-03-17 21:42:02 +00:00
Conversation 1 Commits 78 Files Changed 142 +49 -2027
19 changed files with 49 additions and 2027 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit af1f18e720 - Show all commits

6
.gitignore vendored
View File

@@ -208,9 +208,9 @@ htdocs/logs/
# ============================================================ # ============================================================
# Template Customizations # Template Customizations
# ============================================================ # ============================================================
# Ignore custom color scheme files to prevent fork-specific customizations # Ignore custom theme files to prevent fork-specific customizations
src/media/css/colors/light/colors_custom.css src/media/css/theme/light.custom.css
src/media/css/colors/dark/colors_custom.css src/media/css/theme/dark.custom.css
# Ignore user customization files to prevent local development overrides # Ignore user customization files to prevent local development overrides
src/media/css/user.css src/media/css/user.css

8
README.md
View File

@@ -203,13 +203,13 @@ Access template configuration via **System → Site Templates → MokoCassiopeia
- **Left Drawer Icon**: Font Awesome icon class (e.g., `fa-solid fa-chevron-right`) - **Left Drawer Icon**: Font Awesome icon class (e.g., `fa-solid fa-chevron-right`)
- **Right Drawer Icon**: Font Awesome icon class (e.g., `fa-solid fa-chevron-left`) - **Right Drawer Icon**: Font Awesome icon class (e.g., `fa-solid fa-chevron-left`)
### Custom Color Palettes ### Custom Theme Palettes
MokoCassiopeia supports custom color schemes: MokoCassiopeia supports custom theme schemes:
1. **Copy template files** from `/templates/` directory: 1. **Copy template files** from `/templates/` directory:
- `colors_custom_light.css` → `media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css` - `theme_custom_light.css` → `media/templates/site/mokocassiopeia/css/theme/light.custom.css`
- `colors_custom_dark.css` → `media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css` - `theme_custom_dark.css` → `media/templates/site/mokocassiopeia/css/theme/dark.custom.css`
2. **Customize** the CSS variables to match your brand colors 2. **Customize** the CSS variables to match your brand colors
3. **Enable in Joomla**: System → Site Templates → MokoCassiopeia → Theme tab → Set palette to "Custom" 3. **Enable in Joomla**: System → Site Templates → MokoCassiopeia → Theme tab → Set palette to "Custom"
4. **Save** and view your site with custom colors 4. **Save** and view your site with custom colors

4
docs/CSS_VARIABLES.md
View File

@@ -46,8 +46,8 @@ This document provides a complete reference of all CSS variables available in th
To create custom color schemes: To create custom color schemes:
1. **Copy template files** from `./templates/` directory: 1. **Copy template files** from `./templates/` directory:
- `colors_custom_light.css` → `media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css` - `theme_custom_light.css` → `media/templates/site/mokocassiopeia/css/theme/light.custom.css`
- `colors_custom_dark.css` → `media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css` - `theme_custom_dark.css` → `media/templates/site/mokocassiopeia/css/theme/dark.custom.css`
2. **Edit the variables** in the copied files to match your brand 2. **Edit the variables** in the copied files to match your brand

2
docs/MODULE_OVERRIDES.md
View File

@@ -587,7 +587,7 @@ cp -r src/html/mod_virtuemart_cart src/html/mod_virtuemart_cart_original
Override CSS variables in your custom color scheme: Override CSS variables in your custom color scheme:
```css ```css
/* src/media/css/colors/light/colors_custom.css */ /* src/media/css/theme/light.custom.css */
:root { :root {
--vm-price-color: #28a745; --vm-price-color: #28a745;
--vm-cart-bg: #f8f9fa; --vm-cart-bg: #f8f9fa;

8
src/error.php
View File

@@ -68,22 +68,22 @@ $darkKey = 'template.dark.' . $colorDarkKey;
try { try {
$wa->useStyle('template.light.colors_standard'); $wa->useStyle('template.light.colors_standard');
} catch (\Throwable $e) { } catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/colors/light/colors_standard.css'); $wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/theme/light.standard.css');
} }
try { try {
$wa->useStyle('template.dark.colors_standard'); $wa->useStyle('template.dark.colors_standard');
} catch (\Throwable $e) { } catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/colors/dark/colors_standard.css'); $wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/theme/dark.standard.css');
} }
try { try {
$wa->useStyle($lightKey); $wa->useStyle($lightKey);
} catch (\Throwable $e) { } catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/colors/light/' . $colorLightKey . '.css'); $wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/theme/' . $colorLightKey . '.css');
} }
try { try {
$wa->useStyle($darkKey); $wa->useStyle($darkKey);
} catch (\Throwable $e) { } catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/colors/dark/' . $colorDarkKey . '.css'); $wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/theme/' . $colorDarkKey . '.css');
} }
// Scripts // Scripts

24
src/joomla.asset.json
View File

@@ -77,15 +77,15 @@
"attributes": {"media": "all"} "attributes": {"media": "all"}
}, },
{ {
"name": "template.light.colors_custom", "name": "template.light.custom",
"type": "style", "type": "style",
"uri": "media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css", "uri": "media/templates/site/mokocassiopeia/css/theme/light.custom.css",
"attributes": {"media": "all"} "attributes": {"media": "all"}
}, },
{ {
"name": "template.light.colors_custom.min", "name": "template.light.custom.min",
"type": "style", "type": "style",
"uri": "media/templates/site/mokocassiopeia/css/colors/light/colors_custom.min.css", "uri": "media/templates/site/mokocassiopeia/css/theme/light.custom.min.css",
"attributes": {"media": "all"} "attributes": {"media": "all"}
}, },
{ {
@@ -101,26 +101,26 @@
"attributes": {"media": "all"} "attributes": {"media": "all"}
}, },
{ {
"name": "template.dark.colors_alternative", "name": "template.dark.alternative",
"type": "style", "type": "style",
"uri": "media/templates/site/mokocassiopeia/css/colors/dark/colors_alternative.css", "uri": "media/templates/site/mokocassiopeia/css/theme/dark.alternative.css",
"attributes": {"media": "all"} "attributes": {"media": "all"}
}, },
{ {
"name": "template.dark.colors_alternative.min", "name": "template.dark.alternative.min",
"type": "style", "type": "style",
"uri": "media/templates/site/mokocassiopeia/css/colors/dark/colors_alternative.min.css" "uri": "media/templates/site/mokocassiopeia/css/theme/dark.alternative.min.css"
}, },
{ {
"name": "template.dark.colors_custom", "name": "template.dark.custom",
"type": "style", "type": "style",
"uri": "media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css", "uri": "media/templates/site/mokocassiopeia/css/theme/dark.custom.css",
"attributes": {"media": "all"} "attributes": {"media": "all"}
}, },
{ {
"name": "template.dark.colors_custom.min", "name": "template.dark.custom.min",
"type": "style", "type": "style",
"uri": "media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.min.css", "uri": "media/templates/site/mokocassiopeia/css/theme/dark.custom.min.css",
"attributes": {"media": "all"} "attributes": {"media": "all"}
}, },
{ {

4
src/language/en-GB/tpl_mokocassiopeia.ini
View File

@@ -75,9 +75,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard"
TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom" TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom"
; New labels for Theme tab dropdowns ; New labels for Theme tab dropdowns
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light colour palette" 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/colors_custom.css</code> to <code>media/templates/site/mokocassiopeia/css/colors/light/colors_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> 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_DARK_NAME_LABEL="Dark colour palette" 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/colors_custom.css</code> to <code>media/templates/site/mokocassiopeia/css/colors/dark/colors_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> 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."
; ===== Theme tab (core feature strings) ===== ; ===== Theme tab (core feature strings) =====
TPL_MOKO_THEME_FIELDSET="Theme" TPL_MOKO_THEME_FIELDSET="Theme"

2
src/language/en-GB/tpl_mokocassiopeia.sys.ini
View File

@@ -34,4 +34,4 @@ TPL_MOKOCASSIOPEIA_POSITION_TOP_B="Top-b"
TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar" TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar"
TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left" TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left"
TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right" TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right"
TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="<h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia 3.0</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> To create a custom colour scheme, copy the template file <code>templates/colors_custom.css</code> to either <code>media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css</code> or <code>media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css</code>. Customise the CSS variables to match your brand, then activate it 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 <code>docs/CSS_VARIABLES.md</code>. </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 3.0</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> To create a custom colour scheme, copy the template file <code>templates/theme_custom_light.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> or <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>. Customise the CSS variables to match your brand, then activate it 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 <code>docs/CSS_VARIABLES.md</code>. </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>"

4
src/language/en-US/tpl_mokocassiopeia.ini
View File

@@ -75,9 +75,9 @@ TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard"
TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom" TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom"
; New labels for Theme tab dropdowns ; New labels for Theme tab dropdowns
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette" 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/colors_custom.css</code> to <code>media/templates/site/mokocassiopeia/css/colors/light/colors_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> 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_DARK_NAME_LABEL="Dark color palette" 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/colors_custom.css</code> to <code>media/templates/site/mokocassiopeia/css/colors/dark/colors_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> 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."
; ===== Theme tab (core feature strings) ===== ; ===== Theme tab (core feature strings) =====
TPL_MOKO_THEME_FIELDSET="Theme" TPL_MOKO_THEME_FIELDSET="Theme"

2
src/language/en-US/tpl_mokocassiopeia.sys.ini
View File

@@ -34,4 +34,4 @@ TPL_MOKOCASSIOPEIA_POSITION_TOP_B="Top-b"
TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar" TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar"
TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left" TPL_MOKOCASSIOPEIA_POSITION_DRAWER_LEFT="Drawer-Left"
TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right" TPL_MOKOCASSIOPEIA_POSITION_DRAWER_RIGHT="Drawer-Right"
TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="<h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia 3.0</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> To create a custom color scheme, copy the template file <code>templates/colors_custom.css</code> to either <code>media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css</code> or <code>media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css</code>. Customize the CSS variables to match your brand, then activate it 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 <code>docs/CSS_VARIABLES.md</code>. </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 3.0</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> To create a custom color scheme, copy the template file <code>templates/theme_custom_light.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> or <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>. Customize the CSS variables to match your brand, then activate it 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 <code>docs/CSS_VARIABLES.md</code>. </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>"

842
src/media/css/colors/dark/colors_standard.css
View File

@@ -1,842 +0,0 @@
@charset "UTF-8";
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/mokocassiopeia/css/global/dark/colors_standard.css
VERSION: 03.05.00
BRIEF: Standard dark mode color definitions for MokoCassiopeia template
*/
/* -----------------------------------------------
* DARK THEME
* --------------------------------------------- */
:root[data-bs-theme='dark']{
color-scheme: dark;
/* ===== BRAND & THEME COLORS ===== */
--color-primary: #112855;
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #6fb3ff;
/* ===== NAVIGATION ===== */
--mainmenu-nav-link-color: #fff;
--nav-text-color: gray;
--nav-bg-color: var(--color-primary);
/* ===== LINKS ===== */
--color-link: white;
--color-hover: gray;
--color-active: var(--mainmenu-nav-link-color);
--link-color: #8ab4f8;
--link-color-rgb: 138, 180, 248;
--link-decoration: underline;
--link-hover-color: #c3d6ff;
--link-hover-color-rgb: 195, 214, 255;
--link-active-color: var(--link-color);
/* ===== OFFCANVAS ===== */
--offcanvas-color: var(--body-color);
--offcanvas-padding-x: 1rem;
--offcanvas-padding-y: 1rem;
/* ===== NAVBAR ===== */
--navbar-padding-x: 1rem;
--navbar-padding-y: 0.5rem;
--navbar-color: var(--nav-text-color);
--navbar-active-color: var(--mainmenu-nav-link-color);
--navbar-disabled-color: #6c757d;
--navbar-brand-padding-y: 0.3125rem;
--navbar-brand-margin-end: 1rem;
--navbar-brand-font-size: 1.25rem;
--navbar-brand-color: var(--nav-text-color);
--navbar-brand-active-color: var(--mainmenu-nav-link-color);
--navbar-nav-link-padding-x: 0.5rem;
--navbar-toggler-padding-y: 0.25rem;
--navbar-toggler-padding-x: 0.75rem;
--navbar-toggler-font-size: 1.25rem;
--navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
--navbar-toggler-border-radius: 0.25rem;
--navbar-toggler-focus-width: 0.25rem;
--navbar-toggler-transition: box-shadow 0.15s ease-in-out;
--nav-link-padding-x: 1rem;
--nav-link-padding-y: 0.5rem;
--nav-link-font-weight: 400;
--nav-link-color: var(--nav-text-color);
--nav-link-active-color: var(--mainmenu-nav-link-color);
--nav-link-disabled-color: #6c757d;
/* ===== TYPOGRAPHY & BODY ===== */
--font-sans-serif: -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';
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--body-font-family: -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;
--heading-color: #f1f5f9;
--emphasis-color: #fff;
--emphasis-color-rgb: 255, 255, 255;
--secondary-color: #e6ebf1bf;
--secondary-color-rgb: 230, 235, 241;
--tertiary-color: #e6ebf180;
--tertiary-color-rgb: 230, 235, 241;
--muted-color: #6d757e;
--code-color: #ff7abd;
--code-color-ink: var(--code-color, #e93f8e);
--highlight-color: #111;
--highlight-bg: #ffe28a1a;
/* ===== LAYOUT & SPACING ===== */
--padding-x: 0.15rem;
--padding-y: 0.15rem;
--bg-opacity: 1;
--nav-toggle-size: 3rem;
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
--secondary-bg: #151b22;
--secondary-bg-rgb: 21, 27, 34;
--tertiary-bg: #10151b;
--tertiary-bg-rgb: 16, 21, 27;
--hr-color: var(--border-color, #dfe3e7);
--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);
--border: 5px;
/* ===== BREAKPOINTS ===== */
--bp-xs: 0;
--bp-sm: 576px;
--bp-md: 768px;
--bp-lg: 992px;
--bp-xl: 1200px;
/* ===== BOOTSTRAP PALETTE ===== */
--primary: #010156;
--secondary: #48525d;
--success: #4aa664;
--info: #4f7aa0;
--warning: #c77a00;
--danger: #c23a31;
--light: #1b2027;
--dark: #0f1318;
--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;
--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;
/* ===== ALERT LINK COLORS ===== */
--alert-primary-link-color: #b3c1ff;
--alert-secondary-link-color: #9fa6ad;
--alert-success-link-color: #a0e5b3;
--alert-info-link-color: #8eccf2;
--alert-warning-link-color: #ffe4a0;
--alert-danger-link-color: #ffa8a3;
--alert-light-link-color: #f0f4f8;
--alert-dark-link-color: #9fa6ad;
/* ===== LIST GROUP ITEM COLORS ===== */
--list-group-item-primary-color: #8ca3ff;
--list-group-item-primary-bg: #1a2550;
--list-group-item-primary-active-bg: #223066;
--list-group-item-secondary-color: #9fa6ad;
--list-group-item-secondary-bg: #2b323b;
--list-group-item-secondary-active-bg: #363d47;
--list-group-item-success-color: #a0e5b3;
--list-group-item-success-bg: #1e3d2d;
--list-group-item-success-active-bg: #275538;
--list-group-item-info-color: #8eccf2;
--list-group-item-info-bg: #1a3448;
--list-group-item-info-active-bg: #234459;
--list-group-item-warning-color: #ffe4a0;
--list-group-item-warning-bg: #4a3410;
--list-group-item-warning-active-bg: #5c4216;
--list-group-item-danger-color: #ffa8a3;
--list-group-item-danger-bg: #4a1e1c;
--list-group-item-danger-active-bg: #5c2823;
--list-group-item-light-color: #e9ecef;
--list-group-item-light-bg: #1e2430;
--list-group-item-light-active-bg: #282f3d;
--list-group-item-dark-color: #48525d;
--list-group-item-dark-bg: #0e1318;
--list-group-item-dark-active-bg: #161b22;
/* ===== LINK UTILITY COLORS ===== */
--link-primary-color: hsl(240, 98%, 50%);
--link-primary-hover-color: hsl(240, 98%, 45%);
--link-secondary-color: hsl(210, 15%, 70%);
--link-secondary-hover-color: hsl(210, 15%, 65%);
--link-success-color: hsl(120, 40%, 60%);
--link-success-hover-color: hsl(120, 40%, 55%);
--link-info-color: hsl(207, 60%, 65%);
--link-info-hover-color: hsl(207, 60%, 60%);
--link-warning-color: hsl(38, 100%, 65%);
--link-warning-hover-color: hsl(38, 100%, 60%);
--link-danger-color: hsl(3, 85%, 65%);
--link-danger-hover-color: hsl(3, 85%, 60%);
--link-light-color: hsl(210, 20%, 90%);
--link-light-hover-color: hsl(210, 20%, 85%);
--link-dark-color: hsl(210, 10%, 35%);
--link-dark-hover-color: hsl(210, 10%, 30%);
/* ===== COMPONENT-SPECIFIC COLORS ===== */
--mod-finder-link-hover: #5a6470;
--form-legend-color: #9fa6ad;
--border-gray: #3a4250;
--subhead-color: #9fa6ad;
--box-shadow-gray: #1a2027;
--btn-active-text-gray: #7a8490;
--indicator-success-bg: var(--success);
--item-list-color: #2a2f34;
--notification-badge-bg: var(--danger);
--content-bg-gray: #2b323b;
--taba-btn-green: #5a9c2f;
--taba-btn-blue: #3d75a8;
--taba-btn-red: #c43620;
--taba-btn-gray: #6a7080;
--taba-msg-bg: #1e2430;
--toc-link-color: #9fa6ad;
--toc-link-active-color: #91a4ff;
--choices-disabled-bg: #2b323b;
--choices-input-bg: var(--body-bg);
--choices-border-light: #48525d;
--choices-arrow-color: #9fa6ad;
--choices-inner-bg: #1a2027;
--choices-focused-border: #5472ff;
--choices-dropdown-bg: var(--body-bg);
--choices-item-bg: #1a5f75;
--choices-item-border: #1a748f;
--choices-item-hover-bg: #1a748f;
--choices-item-hover-border: #1a8aa8;
--choices-item-disabled-bg: #48525d;
--choices-item-disabled-border: #36404a;
--choices-item-highlighted: #2b323b;
--choices-input-inner-bg: #1a2027;
/* ===== STANDARD COLORS ===== */
--blue: #91a4ff;
--indigo: #b19cff;
--purple: #c0a5ff;
--pink: #ff8fc0;
--red: #ff7a73;
--orange: #ff9c4d;
--yellow: #ffd166;
--green: #78d694;
--teal: #76e3ff;
--cyan: #6fb7ff;
--black: #000;
--white: #fff;
/* ===== GRAY SCALE ===== */
--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;
--white-rgb: 255, 255, 255;
--black-rgb: 0, 0, 0;
/* ===== OPACITY UTILITIES ===== */
--opacity-0: 0;
--opacity-5: 0.05;
--opacity-10: 0.1;
--opacity-15: 0.15;
--opacity-20: 0.2;
--opacity-25: 0.25;
--opacity-30: 0.3;
--opacity-50: 0.5;
--opacity-75: 0.75;
--opacity-100: 1;
/* ===== COMMON SHADOW COLORS ===== */
--shadow-color-light: rgba(var(--black-rgb), var(--opacity-30));
--shadow-color-medium: rgba(var(--black-rgb), var(--opacity-50));
--shadow-color-dark: rgba(var(--black-rgb), var(--opacity-75));
--border-color-translucent: rgba(var(--white-rgb), var(--opacity-10));
--highlight-translucent: rgba(var(--white-rgb), var(--opacity-5));
/* ===== HEADER BACKGROUND ===== */
--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg');
--header-background-attachment: fixed;
--header-background-repeat: repeat;
--header-background-size: auto;
/* ===== CONTAINER BACKGROUNDS ===== */
/* Below Topbar Container */
--container-below-topbar-bg-image: none;
--container-below-topbar-bg-color: transparent;
--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: none;
--container-below-topbar-border-radius: 0;
/* Top A Container */
--container-top-a-bg-image: none;
--container-top-a-bg-color: transparent;
--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: none;
--container-top-a-border-radius: 0;
/* Top B Container */
--container-top-b-bg-image: none;
--container-top-b-bg-color: transparent;
--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: none;
--container-top-b-border-radius: 0;
/* TOC Container */
--container-toc-bg: var(--secondary-bg);
--container-toc-color: #dbe3ff;
/* Sidebar Container */
--container-sidebar-bg-image: none;
--container-sidebar-bg-color: transparent;
--container-sidebar-bg-position: center;
--container-sidebar-bg-attachment: scroll;
--container-sidebar-bg-repeat: repeat;
--container-sidebar-bg-size: auto;
--container-sidebar-border: none;
--container-sidebar-border-radius: 0;
/* Bottom A Container */
--container-bottom-a-bg-image: none;
--container-bottom-a-bg-color: transparent;
--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: none;
--container-bottom-a-border-radius: 5px;
/* Bottom B Container */
--container-bottom-b-bg-image: none;
--container-bottom-b-bg-color: transparent;
--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: none;
--container-bottom-b-border-radius: 0;
/* ===== BORDERS ===== */
--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;
/* ===== SHADOWS ===== */
--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 & FORMS ===== */
--focus-ring-width: .25rem;
--focus-ring-opacity: .6;
--focus-ring-color: #5472ff66;
--input-color: #e6ebf1;
--input-bg: #1a2332;
--input-border-color: #3a4250;
--input-focus-border-color: #5472ff;
--input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25);
--input-placeholder-color: #8894aa;
--input-disabled-bg: #0f1318;
--input-disabled-border-color: #2b323b;
--input-file-button-active-bg: #2b3441;
--form-range-thumb-active-bg: #4a5766;
--form-valid-color: #78d694;
--form-valid-border-color: #78d694;
--form-invalid-color: #ff8e86;
--form-invalid-border-color: #ff8e86;
/* ===== BUTTONS ===== */
--btn-border-radius: var(--border-radius);
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3);
/* ===== CARDS ===== */
--card-spacer-y: 1rem;
--card-spacer-x: 1rem;
--card-title-spacer-y: 0.5rem;
--card-border-width: 1px;
--card-border-color: var(--border-color);
--card-border-radius: var(--border-radius);
--card-box-shadow: none;
--card-inner-border-radius: calc(var(--border-radius) - 1px);
--card-cap-padding-y: 0.5rem;
--card-cap-padding-x: 1rem;
--card-cap-bg: rgba(255, 255, 255, 0.03);
--card-cap-color: var(--body-color);
--card-height: auto;
--card-color: var(--body-color);
--card-bg: var(--secondary-bg);
--card-img-overlay-padding: 1rem;
--card-group-margin: 0.75rem;
/* ===== VIRTUEMART (VM) ===== */
/* VM Surfaces */
--vm-surface: var(--secondary-bg);
--vm-surface-2: var(--tertiary-bg);
--vm-text: var(--body-color);
--vm-text-strong: #ffffff;
--vm-text-muted: var(--gray-700);
--vm-border: var(--border-color);
--vm-price-color: var(--success);
/* VM Layout and Density */
--vm-container-max-width: 1200px;
--vm-section-gap: 2rem;
--vm-block-radius: var(--border-radius);
--vm-block-shadow: var(--box-shadow-sm);
/* VM Typography */
--vm-category-title-size: 2rem;
--vm-subcategory-title-size: 1.5rem;
--vm-page-title-size: 1.75rem;
--vm-products-type-title-size: 1.25rem;
--vm-product-title-size: 1.125rem;
--vm-product-title-weight: 500;
--vm-products-type-title-weight: 600;
--vm-price-size: 1.5rem;
--vm-price-detail-size: 1.125rem;
--vm-price-desc-size: 0.875rem;
/* VM Controls */
--vm-input-radius: var(--border-radius);
--vm-input-shadow: var(--box-shadow-sm);
--vm-qty-width: 80px;
--vm-cart-dropdown-min-width: 300px;
/* VM Alerts */
--vm-alert-radius: var(--border-radius);
--vm-alert-shadow: var(--box-shadow-sm);
--vm-availability-bg: var(--success-bg-subtle);
--vm-availability-text: var(--success);
/* VM Buttons */
--vm-btn-padding-x: 1rem;
--vm-btn-padding-y: 0.5rem;
--vm-btn-radius: var(--border-radius);
--vm-btn-shadow: var(--box-shadow-sm);
--vm-btn-primary-bg: var(--primary);
--vm-btn-primary-text: #ffffff;
--vm-btn-primary-border: var(--primary);
--vm-btn-secondary-bg: var(--secondary);
--vm-btn-secondary-text: #ffffff;
--vm-btn-secondary-border: var(--secondary);
/* VM Image Overlay Controls */
--vm-image-overlay-gap-x: 0.5rem;
--vm-image-overlay-gap-y: 0.5rem;
--vm-image-overlay-raise: 0.25rem;
--vm-image-overlay-btn-size: 2.5rem;
--vm-image-overlay-btn-radius: 50%;
--vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7);
--vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85);
--vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2);
--vm-image-overlay-btn-border-width: 1px;
--vm-image-overlay-btn-color: var(--body-color);
--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
/* VM Vendor Menu */
--vm-vendor-menu-bg: var(--secondary-bg);
--vm-vendor-menu-border: var(--border-color);
--vm-vendor-menu-radius: var(--border-radius);
--vm-vendor-menu-shadow: var(--box-shadow-sm);
--vm-vendor-menu-item-gap: 0.25rem;
--vm-vendor-menu-item-padding-x: 1rem;
--vm-vendor-menu-item-padding-y: 0.5rem;
--vm-vendor-menu-pill-radius: 50rem;
--vm-vendor-menu-link: var(--link-color);
--vm-vendor-menu-link-hover: var(--link-hover-color);
--vm-vendor-menu-link-active: var(--primary);
--vm-vendor-menu-hover-bg: var(--tertiary-bg);
/* ===== GABLE ===== */
--gab-blue: #4d9fff;
--gab-green: #5cb85c;
--gab-red: #ff6b6b;
--gab-orange: #ff9f5a;
--gab-gray1: #868e96;
--gab-gray2: #adb5bd;
--gab-gray3: #ced4da;
}
.btn {
--btn-padding-x: 1rem;
--btn-padding-y: 0.6rem;
--btn-font-family: inherit;
--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;
}
.btn-success {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(120, 35%, 45%);
--btn-border-color: hsl(120, 35%, 45%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(120, 35%, 40%);
--btn-hover-border-color: hsl(120, 35%, 38%);
--btn-focus-shadow-rgb: 96, 180, 96;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(120, 35%, 38%);
--btn-active-border-color: hsl(120, 35%, 36%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(120, 35%, 45%);
--btn-disabled-border-color: hsl(120, 35%, 45%);
}
.btn-info {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(207, 55%, 55%);
--btn-border-color: hsl(207, 55%, 55%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(207, 55%, 50%);
--btn-hover-border-color: hsl(207, 55%, 48%);
--btn-focus-shadow-rgb: 100, 160, 210);
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(207, 55%, 48%);
--btn-active-border-color: hsl(207, 55%, 46%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(207, 55%, 55%);
--btn-disabled-border-color: hsl(207, 55%, 55%);
}
.btn-warning {
--btn-color: hsl(0, 0%, 0%);
--btn-bg: hsl(38, 100%, 50%);
--btn-border-color: hsl(38, 100%, 50%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: hsl(38, 100%, 45%);
--btn-hover-border-color: hsl(38, 100%, 43%);
--btn-focus-shadow-rgb: 220, 170, 40;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: hsl(38, 100%, 43%);
--btn-active-border-color: hsl(38, 100%, 41%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 0%);
--btn-disabled-bg: hsl(38, 100%, 50%);
--btn-disabled-border-color: hsl(38, 100%, 50%);
}
.btn-danger {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(3, 82%, 50%);
--btn-border-color: hsl(3, 82%, 50%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(3, 82%, 45%);
--btn-hover-border-color: hsl(3, 82%, 43%);
--btn-focus-shadow-rgb: 220, 80, 80;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(3, 82%, 43%);
--btn-active-border-color: hsl(3, 82%, 41%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(3, 82%, 50%);
--btn-disabled-border-color: hsl(3, 82%, 50%);
}
.btn-light {
--btn-color: hsl(0, 0%, 0%);
--btn-bg: hsl(210, 17%, 85%);
--btn-border-color: hsl(210, 17%, 85%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: hsl(210, 17%, 80%);
--btn-hover-border-color: hsl(210, 17%, 78%);
--btn-focus-shadow-rgb: 200, 205, 210;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: hsl(210, 17%, 78%);
--btn-active-border-color: hsl(210, 17%, 76%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 0%);
--btn-disabled-bg: hsl(210, 17%, 85%);
--btn-disabled-border-color: hsl(210, 17%, 85%);
}
.btn-dark {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(210, 10%, 20%);
--btn-border-color: hsl(210, 10%, 20%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(210, 10%, 18%);
--btn-hover-border-color: hsl(210, 10%, 16%);
--btn-focus-shadow-rgb: 60, 65, 70;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(210, 10%, 16%);
--btn-active-border-color: hsl(210, 10%, 14%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(210, 10%, 20%);
--btn-disabled-border-color: hsl(210, 10%, 20%);
}
.btn-outline-primary {
--btn-color: hsl(240, 98%, 40%);
--btn-border-color: hsl(240, 98%, 40%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(240, 98%, 40%);
--btn-hover-border-color: hsl(240, 98%, 40%);
--btn-focus-shadow-rgb: 80, 80, 180;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(240, 98%, 40%);
--btn-active-border-color: hsl(240, 98%, 40%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(240, 98%, 40%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(240, 98%, 40%);
--gradient: none;
}
.btn-outline-secondary {
--btn-color: hsl(210, 20%, 60%);
--btn-border-color: hsl(210, 20%, 60%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: hsl(210, 20%, 60%);
--btn-hover-border-color: hsl(210, 20%, 60%);
--btn-focus-shadow-rgb: 120, 140, 160;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: hsl(210, 20%, 60%);
--btn-active-border-color: hsl(210, 20%, 60%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(210, 20%, 60%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(210, 20%, 60%);
--gradient: none;
}
.btn-outline-success {
--btn-color: hsl(120, 35%, 55%);
--btn-border-color: hsl(120, 35%, 55%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: hsl(120, 35%, 55%);
--btn-hover-border-color: hsl(120, 35%, 55%);
--btn-focus-shadow-rgb: 100, 190, 100;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: hsl(120, 35%, 55%);
--btn-active-border-color: hsl(120, 35%, 55%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(120, 35%, 55%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(120, 35%, 55%);
--gradient: none;
}
.btn-outline-info {
--btn-color: hsl(207, 55%, 65%);
--btn-border-color: hsl(207, 55%, 65%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: hsl(207, 55%, 65%);
--btn-hover-border-color: hsl(207, 55%, 65%);
--btn-focus-shadow-rgb: 110, 170, 220;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: hsl(207, 55%, 65%);
--btn-active-border-color: hsl(207, 55%, 65%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(207, 55%, 65%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(207, 55%, 65%);
--gradient: none;
}
.btn-outline-warning {
--btn-color: hsl(38, 100%, 60%);
--btn-border-color: hsl(38, 100%, 60%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: hsl(38, 100%, 60%);
--btn-hover-border-color: hsl(38, 100%, 60%);
--btn-focus-shadow-rgb: 240, 190, 70;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: hsl(38, 100%, 60%);
--btn-active-border-color: hsl(38, 100%, 60%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(38, 100%, 60%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(38, 100%, 60%);
--gradient: none;
}
.btn-outline-danger {
--btn-color: hsl(3, 82%, 60%);
--btn-border-color: hsl(3, 82%, 60%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: hsl(3, 82%, 60%);
--btn-hover-border-color: hsl(3, 82%, 60%);
--btn-focus-shadow-rgb: 240, 100, 100;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: hsl(3, 82%, 60%);
--btn-active-border-color: hsl(3, 82%, 60%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(3, 82%, 60%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(3, 82%, 60%);
--gradient: none;
}
/* 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;
}
.btn-outline-dark {
--btn-color: hsl(210, 10%, 30%);
--btn-border-color: hsl(210, 10%, 30%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(210, 10%, 30%);
--btn-hover-border-color: hsl(210, 10%, 30%);
--btn-focus-shadow-rgb: 70, 75, 80;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(210, 10%, 30%);
--btn-active-border-color: hsl(210, 10%, 30%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(210, 10%, 30%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(210, 10%, 30%);
--gradient: none;
}
/* Links as buttons */
.btn-link {
--btn-font-weight: 400;
--btn-color: var(--color-link);
--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;
}

95
src/media/css/colors/dark/index.html
View File

@@ -1,95 +0,0 @@
<!-- Copyright (C) 2025 Moko Consulting <jmiller@mokoconsulting.tech>
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.Site
INGROUP: Templates.MokoCassiopeia
FILE: index.html
BRIEF: Security redirect page to block folder access and forward to site root.
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Redirecting…</title>
<!-- Search engines: do not index this placeholder redirect page -->
<meta name="robots" content="noindex, nofollow, noarchive" />
<!-- Instant redirect fallback even if JavaScript is disabled -->
<meta http-equiv="refresh" content="0; url=/" />
<!-- Canonical root reference -->
<link rel="canonical" href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
(function redirectToRoot() {
// Configuration object with safe defaults.
var opts = {
fallbackPath: "/", // string: fallback destination if origin is unavailable
delayMs: 0, // number: delay before redirect in ms (0 = immediate)
behavior: "replace" // enum: "replace" | "assign"
};
// Determine absolute origin in all mainstream browsers.
var origin = (typeof location.origin === "string" && location.origin)
|| (location.protocol + "//" + location.host);
// Final destination: absolute root of the current site, or fallback path.
var destination = origin ? origin + "/" : opts.fallbackPath;
function go() {
if (opts.behavior === "assign") {
location.assign(destination);
} else {
location.replace(destination);
}
}
// Execute redirect, optionally after a short delay.
if (opts.delayMs > 0) {
setTimeout(go, opts.delayMs);
} else {
go();
}
})();
</script>
<!--
Secondary meta-refresh for no-JS environments is already set above.
Some very old crawlers may ignore JS; the meta refresh ensures coverage.
-->
<noscript>
<!-- Extra defense-in-depth: if JS is disabled, meta refresh (above) handles redirect. -->
<style>
html, body { height:100%; }
body { display:flex; align-items:center; justify-content:center; margin:0; font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.msg { opacity: .75; text-align: center; }
</style>
</noscript>
</head>
<body>
<div class="msg">Redirecting to the site root… If you are not redirected, <a href="/">click here</a>.</div>
</body>
</html>

95
src/media/css/colors/index.html
View File

@@ -1,95 +0,0 @@
<!-- Copyright (C) 2025 Moko Consulting <jmiller@mokoconsulting.tech>
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.Site
INGROUP: Templates.MokoCassiopeia
FILE: index.html
BRIEF: Security redirect page to block folder access and forward to site root.
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Redirecting…</title>
<!-- Search engines: do not index this placeholder redirect page -->
<meta name="robots" content="noindex, nofollow, noarchive" />
<!-- Instant redirect fallback even if JavaScript is disabled -->
<meta http-equiv="refresh" content="0; url=/" />
<!-- Canonical root reference -->
<link rel="canonical" href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
(function redirectToRoot() {
// Configuration object with safe defaults.
var opts = {
fallbackPath: "/", // string: fallback destination if origin is unavailable
delayMs: 0, // number: delay before redirect in ms (0 = immediate)
behavior: "replace" // enum: "replace" | "assign"
};
// Determine absolute origin in all mainstream browsers.
var origin = (typeof location.origin === "string" && location.origin)
|| (location.protocol + "//" + location.host);
// Final destination: absolute root of the current site, or fallback path.
var destination = origin ? origin + "/" : opts.fallbackPath;
function go() {
if (opts.behavior === "assign") {
location.assign(destination);
} else {
location.replace(destination);
}
}
// Execute redirect, optionally after a short delay.
if (opts.delayMs > 0) {
setTimeout(go, opts.delayMs);
} else {
go();
}
})();
</script>
<!--
Secondary meta-refresh for no-JS environments is already set above.
Some very old crawlers may ignore JS; the meta refresh ensures coverage.
-->
<noscript>
<!-- Extra defense-in-depth: if JS is disabled, meta refresh (above) handles redirect. -->
<style>
html, body { height:100%; }
body { display:flex; align-items:center; justify-content:center; margin:0; font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.msg { opacity: .75; text-align: center; }
</style>
</noscript>
</head>
<body>
<div class="msg">Redirecting to the site root… If you are not redirected, <a href="/">click here</a>.</div>
</body>
</html>

851
src/media/css/colors/light/colors_standard.css
View File

@@ -1,851 +0,0 @@
@charset "UTF-8";
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
SPDX-License-Identifier: GPL-3.0-or-later
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/mokocassiopeia/css/global/light/colors_standard.css
VERSION: 03.05.00
BRIEF: Standard light mode color definitions for MokoCassiopeia template
*/
/* -----------------------------------------------
* LIGHT THEME
* --------------------------------------------- */
:root[data-bs-theme="light"] {
color-scheme: light;
/* ===== BRAND & THEME COLORS ===== */
--color-primary: #112855;
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #3f8ff0;
/* ===== NAVIGATION ===== */
--mainmenu-nav-link-color: white;
--nav-text-color: white;
--nav-bg-color: var(--color-link);
/* ===== LINKS ===== */
--color-link: #224FAA;
--color-hover: var(--accent-color-primary);
--link-color: #224faa;
--link-color-rgb: 34, 79, 170;
--link-decoration: underline;
--link-hover-color: #424077;
--link-hover-color-rgb: 66, 64, 119;
--link-active-color: var(--link-color);
/* ===== OFFCANVAS ===== */
--offcanvas-color: var(--body-color);
--offcanvas-padding-x: 1rem;
--offcanvas-padding-y: 1rem;
/* ===== NAVBAR ===== */
--navbar-padding-x: 1rem;
--navbar-padding-y: 0.5rem;
--navbar-color: var(--nav-text-color);
--navbar-active-color: var(--mainmenu-nav-link-color);
--navbar-disabled-color: #6c757d;
--navbar-brand-padding-y: 0.3125rem;
--navbar-brand-margin-end: 1rem;
--navbar-brand-font-size: 1.25rem;
--navbar-brand-color: var(--nav-text-color);
--navbar-brand-active-color: var(--mainmenu-nav-link-color);
--navbar-nav-link-padding-x: 0.5rem;
--navbar-toggler-padding-y: 0.25rem;
--navbar-toggler-padding-x: 0.75rem;
--navbar-toggler-font-size: 1.25rem;
--navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
--navbar-toggler-border-radius: 0.25rem;
--navbar-toggler-focus-width: 0.25rem;
--navbar-toggler-transition: box-shadow 0.15s ease-in-out;
--nav-link-padding-x: 1rem;
--nav-link-padding-y: 0.5rem;
--nav-link-font-weight: 400;
--nav-link-color: var(--nav-text-color);
--nav-link-active-color: var(--mainmenu-nav-link-color);
--nav-link-disabled-color: #6c757d;
/* ===== TYPOGRAPHY & BODY ===== */
--font-sans-serif: -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";
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--body-font-family: -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: #22262a;
--body-color-rgb: 34, 38, 42;
--body-bg: #fff;
--body-bg-rgb: 255, 255, 255;
--heading-color: inherit;
--emphasis-color: #000;
--emphasis-color-rgb: 0, 0, 0;
--secondary-color: #22262abf;
--secondary-color-rgb: 34, 38, 42;
--tertiary-color: #22262a80;
--tertiary-color-rgb: 34, 38, 42;
--muted-color: #6d757e;
--code-color: #e93f8e;
--code-color-ink: var(--code-color, #e93f8e);
--highlight-color: #22262a;
--highlight-bg: #fbeea8;
/* ===== LAYOUT & SPACING ===== */
--padding-x: 0.15rem;
--padding-y: 0.15rem;
--bg-opacity: 1;
--nav-toggle-size: 3rem;
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
--secondary-bg: #eaedf0;
--secondary-bg-rgb: 234, 237, 240;
--tertiary-bg: #f9fafb;
--tertiary-bg-rgb: 249, 250, 251;
--hr-color: var(--border-color, #dfe3e7);
--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);
--border: 5px;
/* ===== BREAKPOINTS ===== */
--bp-xs: 0;
--bp-sm: 576px;
--bp-md: 768px;
--bp-lg: 992px;
--bp-xl: 1200px;
/* ===== BOOTSTRAP PALETTE ===== */
--primary: #010156;
--secondary: #6d757e;
--success: #448344;
--info: #30638d;
--warning: #ad6200;
--danger: #a51f18;
--light: #f9fafb;
--dark: #353b41;
--primary-rgb: 1, 1, 86;
--secondary-rgb: 109, 117, 126;
--success-rgb: 68, 131, 68;
--info-rgb: 48, 99, 141;
--warning-rgb: 173, 98, 0;
--danger-rgb: 165, 31, 24;
--light-rgb: 249, 250, 251;
--dark-rgb: 53, 59, 65;
--primary-text-emphasis: #002;
--secondary-text-emphasis: #2c2f32;
--success-text-emphasis: #1b351b;
--info-text-emphasis: #132838;
--warning-text-emphasis: #452700;
--danger-text-emphasis: #420c09;
--light-text-emphasis: #484f56;
--dark-text-emphasis: #484f56;
--primary-bg-subtle: #ccd;
--secondary-bg-subtle: #e2e3e5;
--success-bg-subtle: #dae6da;
--info-bg-subtle: #d6e0e8;
--warning-bg-subtle: #efe0cc;
--danger-bg-subtle: #edd2d1;
--light-bg-subtle: #fcfcfd;
--dark-bg-subtle: #ced4da;
--primary-border-subtle: #99b;
--secondary-border-subtle: #c5c8cb;
--success-border-subtle: #b4ceb4;
--info-border-subtle: #acc1d1;
--warning-border-subtle: #dec099;
--danger-border-subtle: #dba5a2;
--light-border-subtle: #eaedf0;
--dark-border-subtle: #adb5bd;
/* ===== ALERT LINK COLORS ===== */
--alert-primary-link-color: #01012a;
--alert-secondary-link-color: #34383d;
--alert-success-link-color: #213f21;
--alert-info-link-color: #172f44;
--alert-warning-link-color: #532f00;
--alert-danger-link-color: #4f0f0b;
--alert-light-link-color: #505050;
--alert-dark-link-color: #1a1c1f;
/* ===== LIST GROUP ITEM COLORS ===== */
--list-group-item-primary-color: #010134;
--list-group-item-primary-bg: #ccccdd;
--list-group-item-primary-active-bg: #b8b8c7;
--list-group-item-secondary-color: #41464c;
--list-group-item-secondary-bg: #e2e3e5;
--list-group-item-secondary-active-bg: #cbccce;
--list-group-item-success-color: #294f29;
--list-group-item-success-bg: #dae6da;
--list-group-item-success-active-bg: #c4cfc4;
--list-group-item-info-color: #1d3b55;
--list-group-item-info-bg: #d6e0e8;
--list-group-item-info-active-bg: #c1cad1;
--list-group-item-warning-color: #683b00;
--list-group-item-warning-bg: #efe0cc;
--list-group-item-warning-active-bg: #d7cab8;
--list-group-item-danger-color: #63130e;
--list-group-item-danger-bg: #edd2d1;
--list-group-item-danger-active-bg: #d5bdbc;
--list-group-item-light-color: #646464;
--list-group-item-light-bg: #fefefe;
--list-group-item-light-active-bg: #e5e5e5;
--list-group-item-dark-color: #202327;
--list-group-item-dark-bg: #d7d8d9;
--list-group-item-dark-active-bg: #c2c2c3;
/* ===== LINK UTILITY COLORS ===== */
--link-primary-color: hsl(240, 98%, 17%);
--link-primary-hover-color: #010145;
--link-secondary-color: hsl(210, 7%, 46%);
--link-secondary-hover-color: #575e65;
--link-success-color: hsl(120, 32%, 39%);
--link-success-hover-color: #366936;
--link-info-color: hsl(207, 49%, 37%);
--link-info-hover-color: #264f71;
--link-warning-color: hsl(34, 100%, 34%);
--link-warning-hover-color: #8a4e00;
--link-danger-color: hsl(3, 75%, 37%);
--link-danger-hover-color: #841913;
--link-light-color: hsl(210, 17%, 98%);
--link-light-hover-color: #fafbfc;
--link-dark-color: hsl(210, 10%, 23%);
--link-dark-hover-color: #2a2f34;
/* ===== COMPONENT-SPECIFIC COLORS ===== */
--mod-finder-link-hover: #e6e6e6;
--form-legend-color: #495057;
--border-gray: #b2bfcd;
--subhead-color: #495057;
--box-shadow-gray: #ddd;
--btn-active-text-gray: #A0A0A0;
--indicator-success-bg: var(--success);
--item-list-color: #F5F5F5;
--notification-badge-bg: var(--danger);
--content-bg-gray: #DDD;
--taba-btn-green: #7ac143;
--taba-btn-blue: #5091cd;
--taba-btn-red: #f44321;
--taba-btn-gray: #AAA;
--taba-msg-bg: #f5f5f5;
--toc-link-color: #767676;
--toc-link-active-color: #563d7c;
--choices-disabled-bg: #eaeaea;
--choices-input-bg: var(--white);
--choices-border-light: #ddd;
--choices-arrow-color: #333;
--choices-inner-bg: #f9f9f9;
--choices-focused-border: #b7b7b7;
--choices-dropdown-bg: var(--white);
--choices-item-bg: #00bcd4;
--choices-item-border: #00a5bb;
--choices-item-hover-bg: #00a5bb;
--choices-item-hover-border: #008fa1;
--choices-item-disabled-bg: #aaaaaa;
--choices-item-disabled-border: #919191;
--choices-item-highlighted: #f2f2f2;
--choices-input-inner-bg: #f9f9f9;
/* ===== STANDARD COLORS ===== */
--blue: #010156;
--indigo: #6812f3;
--purple: #6f42c2;
--pink: #e93f8e;
--red: #a51f18;
--orange: #fd7e17;
--yellow: #ad6200;
--green: #448344;
--teal: #5abfdd;
--cyan: #30638d;
--black: #000;
--white: #fff;
/* ===== GRAY SCALE ===== */
--gray-100: #f9fafb;
--gray-200: #eaedf0;
--gray-300: #dfe3e7;
--gray-400: #ced4da;
--gray-500: #adb5bd;
--gray-600: #6d757e;
--gray-700: #484f56;
--gray-800: #353b41;
--gray-900: #22262a;
--white-rgb: 255, 255, 255;
--black-rgb: 0, 0, 0;
/* ===== OPACITY UTILITIES ===== */
--opacity-0: 0;
--opacity-5: 0.05;
--opacity-10: 0.1;
--opacity-15: 0.15;
--opacity-20: 0.2;
--opacity-25: 0.25;
--opacity-30: 0.3;
--opacity-50: 0.5;
--opacity-75: 0.75;
--opacity-100: 1;
/* ===== COMMON SHADOW COLORS ===== */
--shadow-color-light: rgba(var(--black-rgb), var(--opacity-15));
--shadow-color-medium: rgba(var(--black-rgb), var(--opacity-25));
--shadow-color-dark: rgba(var(--black-rgb), var(--opacity-30));
--border-color-translucent: rgba(var(--black-rgb), var(--opacity-10));
--highlight-translucent: rgba(var(--white-rgb), var(--opacity-15));
/* ===== HEADER BACKGROUND ===== */
--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg');
--header-background-attachment: fixed;
--header-background-repeat: repeat;
--header-background-size: auto;
/* ===== CONTAINER BACKGROUNDS ===== */
/* Below Topbar Container */
--container-below-topbar-bg-image: none;
--container-below-topbar-bg-color: transparent;
--container-below-topbar-bg-position: auto;
--container-below-topbar-bg-attachment: fixed;
--container-below-topbar-bg-repeat: repeat;
--container-below-topbar-bg-size: auto;
--container-below-topbar-border: none;
--container-below-topbar-border-radius: 0;
/* Top A Container */
--container-top-a-bg-image: none;
--container-top-a-bg-color: transparent;
--container-top-a-bg-position: auto;
--container-top-a-bg-attachment: fixed;
--container-top-a-bg-repeat: repeat;
--container-top-a-bg-size: auto;
--container-top-a-border: none;
--container-top-a-border-radius: 0;
/* Top B Container */
--container-top-b-bg-image: none;
--container-top-b-bg-color: transparent;
--container-top-b-bg-position: auto;
--container-top-b-bg-attachment: fixed;
--container-top-b-bg-repeat: repeat;
--container-top-b-bg-size: auto;
--container-top-b-border: none;
--container-top-b-border-radius: 0;
/* TOC Container */
--container-toc-bg: var(--mainmenu-nav-link-color);
--container-toc-color: var(--color-primary);
/* Sidebar Container */
--container-sidebar-bg-image: none;
--container-sidebar-bg-color: transparent;
--container-sidebar-bg-position: auto;
--container-sidebar-bg-attachment: scroll;
--container-sidebar-bg-repeat: repeat;
--container-sidebar-bg-size: auto;
--container-sidebar-border: none;
--container-sidebar-border-radius: 0;
/* Bottom A Container */
--container-bottom-a-bg-image: none;
--container-bottom-a-bg-color: transparent;
--container-bottom-a-bg-position: auto;
--container-bottom-a-bg-attachment: fixed;
--container-bottom-a-bg-repeat: repeat;
--container-bottom-a-bg-size: auto;
--container-bottom-a-border: none;
--container-bottom-a-border-radius: 0;
/* Bottom B Container */
--container-bottom-b-bg-image: none;
--container-bottom-b-bg-color: transparent;
--container-bottom-b-bg-position: auto;
--container-bottom-b-bg-attachment: fixed;
--container-bottom-b-bg-repeat: repeat;
--container-bottom-b-bg-size: auto;
--container-bottom-b-border: none;
--container-bottom-b-border-radius: 0;
/* ===== BORDERS ===== */
--border-width: 1px;
--border-style: solid;
--border-color: #dfe3e7;
--border-color-translucent: #0000002d;
--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)*2;
--border-radius-pill: 50rem;
/* ===== SHADOWS ===== */
--box-shadow: 0 .5rem 1rem #00000026;
--box-shadow-sm: 0 .125rem .25rem #00000013;
--box-shadow-lg: 0 1rem 3rem #0000002d;
--box-shadow-inset: inset 0 1px 2px #00000013;
/* ===== FOCUS & FORMS ===== */
--focus-ring-width: .25rem;
--focus-ring-opacity: .25;
--focus-ring-color: #01015640;
--input-color: hsl(210, 11%, 15%);
--input-bg: hsl(210, 20%, 98%);
--input-border-color: hsl(210, 14%, 83%);
--input-focus-border-color: #8894aa;
--input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
--input-placeholder-color: hsl(210, 7%, 46%);
--input-disabled-bg: hsl(210, 16%, 93%);
--input-disabled-border-color: hsl(210, 14%, 83%);
--input-file-button-active-bg: #dee1e4;
--form-range-thumb-active-bg: #b8bfcc;
--form-valid-color: #448344;
--form-valid-border-color: #448344;
--form-invalid-color: #a51f18;
--form-invalid-border-color: #a51f18;
/* ===== BUTTONS ===== */
--btn-border-radius: var(--border-radius);
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
/* ===== CARDS ===== */
--card-spacer-y: 1rem;
--card-spacer-x: 1rem;
--card-title-spacer-y: 0.5rem;
--card-border-width: 1px;
--card-border-color: var(--border-color);
--card-border-radius: var(--border-radius);
--card-box-shadow: none;
--card-inner-border-radius: calc(var(--border-radius) - 1px);
--card-cap-padding-y: 0.5rem;
--card-cap-padding-x: 1rem;
--card-cap-bg: rgba(0, 0, 0, 0.03);
--card-cap-color: var(--body-color);
--card-height: auto;
--card-color: var(--body-color);
--card-bg: var(--body-bg);
--card-img-overlay-padding: 1rem;
--card-group-margin: 0.75rem;
/* ===== VIRTUEMART (VM) ===== */
/* VM Surfaces */
--vm-surface: #ffffff;
--vm-surface-2: #f8f9fa;
--vm-text: var(--body-color);
--vm-text-strong: #000000;
--vm-text-muted: #6c757d;
--vm-border: var(--border-color);
--vm-price-color: var(--success);
/* VM Layout and Density */
--vm-container-max-width: 1200px;
--vm-section-gap: 2rem;
--vm-block-radius: var(--border-radius);
--vm-block-shadow: var(--box-shadow-sm);
/* VM Typography */
--vm-category-title-size: 2rem;
--vm-subcategory-title-size: 1.5rem;
--vm-page-title-size: 1.75rem;
--vm-products-type-title-size: 1.25rem;
--vm-product-title-size: 1.125rem;
--vm-product-title-weight: 500;
--vm-products-type-title-weight: 600;
--vm-price-size: 1.5rem;
--vm-price-detail-size: 1.125rem;
--vm-price-desc-size: 0.875rem;
/* VM Controls */
--vm-input-radius: var(--border-radius);
--vm-input-shadow: var(--box-shadow-sm);
--vm-qty-width: 80px;
--vm-cart-dropdown-min-width: 300px;
/* VM Alerts */
--vm-alert-radius: var(--border-radius);
--vm-alert-shadow: var(--box-shadow-sm);
--vm-availability-bg: var(--success-bg-subtle);
--vm-availability-text: var(--success);
/* VM Buttons */
--vm-btn-padding-x: 1rem;
--vm-btn-padding-y: 0.5rem;
--vm-btn-radius: var(--border-radius);
--vm-btn-shadow: var(--box-shadow-sm);
--vm-btn-primary-bg: var(--primary);
--vm-btn-primary-text: #ffffff;
--vm-btn-primary-border: var(--primary);
--vm-btn-secondary-bg: var(--secondary);
--vm-btn-secondary-text: #ffffff;
--vm-btn-secondary-border: var(--secondary);
/* VM Image Overlay Controls */
--vm-image-overlay-gap-x: 0.5rem;
--vm-image-overlay-gap-y: 0.5rem;
--vm-image-overlay-raise: 0.25rem;
--vm-image-overlay-btn-size: 2.5rem;
--vm-image-overlay-btn-radius: 50%;
--vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9);
--vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1);
--vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1);
--vm-image-overlay-btn-border-width: 1px;
--vm-image-overlay-btn-color: var(--body-color);
--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* VM Vendor Menu */
--vm-vendor-menu-bg: var(--body-bg);
--vm-vendor-menu-border: var(--border-color);
--vm-vendor-menu-radius: var(--border-radius);
--vm-vendor-menu-shadow: var(--box-shadow-sm);
--vm-vendor-menu-item-gap: 0.25rem;
--vm-vendor-menu-item-padding-x: 1rem;
--vm-vendor-menu-item-padding-y: 0.5rem;
--vm-vendor-menu-pill-radius: 50rem;
--vm-vendor-menu-link: var(--link-color);
--vm-vendor-menu-link-hover: var(--link-hover-color);
--vm-vendor-menu-link-active: var(--primary);
--vm-vendor-menu-hover-bg: var(--secondary-bg);
/* ===== GABLE ===== */
--gab-blue: #0066cc;
--gab-green: #28a745;
--gab-red: #dc3545;
--gab-orange: #fd7e14;
--gab-gray1: #495057;
--gab-gray2: #6c757d;
--gab-gray3: #adb5bd;
}
.btn {
--btn-padding-x: 1rem;
--btn-padding-y: 0.6rem;
--btn-font-family: inherit;
--btn-font-size: 1rem;
--btn-font-weight: 400;
--btn-line-height: 1.5;
--btn-color: hsl(210, 11%, 15%);
--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;
}
.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: 39, 39, 111;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #010145;
--btn-active-border-color: #010141;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(240, 98%, 17%);
--btn-disabled-border-color: hsl(240, 98%, 17%);
}
.btn-secondary {
--btn-color: var(--body-bg);
--btn-bg: var(--nav-bg-color);
--btn-border-color: hsl(210, 7%, 46%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #5d636b;
--btn-hover-border-color: #575e65;
--btn-focus-shadow-rgb: gray;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #575e65;
--btn-active-border-color: #52585f;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(210, 7%, 46%);
--btn-disabled-border-color: hsl(210, 7%, 46%);
}
.btn-success {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(120, 32%, 39%);
--btn-border-color: hsl(120, 32%, 39%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #3a6f3a;
--btn-hover-border-color: #366936;
--btn-focus-shadow-rgb: 96, 150, 96;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #366936;
--btn-active-border-color: #336233;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(120, 32%, 39%);
--btn-disabled-border-color: hsl(120, 32%, 39%);
}
.btn-info {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(207, 49%, 37%);
--btn-border-color: hsl(207, 49%, 37%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #295478;
--btn-hover-border-color: #264f71;
--btn-focus-shadow-rgb: 79, 122, 158;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #264f71;
--btn-active-border-color: #244a6a;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(207, 49%, 37%);
--btn-disabled-border-color: hsl(207, 49%, 37%);
}
.btn-warning {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(34, 100%, 34%);
--btn-border-color: hsl(34, 100%, 34%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #935300;
--btn-hover-border-color: #8a4e00;
--btn-focus-shadow-rgb: 185, 122, 38;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #8a4e00;
--btn-active-border-color: #824a00;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(34, 100%, 34%);
--btn-disabled-border-color: hsl(34, 100%, 34%);
}
.btn-danger {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(3, 75%, 37%);
--btn-border-color: hsl(3, 75%, 37%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #8c1a14;
--btn-hover-border-color: #841913;
--btn-focus-shadow-rgb: 179, 65, 59;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #841913;
--btn-active-border-color: #7c1712;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(3, 75%, 37%);
--btn-disabled-border-color: hsl(3, 75%, 37%);
}
.btn-light {
--btn-color: hsl(0, 0%, 0%);
--btn-bg: hsl(210, 17%, 98%);
--btn-border-color: hsl(210, 17%, 98%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: #d4d5d5;
--btn-hover-border-color: #c7c8c9;
--btn-focus-shadow-rgb: 212, 213, 213;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: #c7c8c9;
--btn-active-border-color: #bbbcbc;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 0%);
--btn-disabled-bg: hsl(210, 17%, 98%);
--btn-disabled-border-color: hsl(210, 17%, 98%);
}
.btn-dark {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(210, 10%, 23%);
--btn-border-color: hsl(210, 10%, 23%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #53585e;
--btn-hover-border-color: #494f54;
--btn-focus-shadow-rgb: 83, 88, 94;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #5d6267;
--btn-active-border-color: #494f54;
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(0, 0%, 100%);
--btn-disabled-bg: hsl(210, 10%, 23%);
--btn-disabled-border-color: hsl(210, 10%, 23%);
}
.btn-outline-primary {
--btn-color: hsl(240, 98%, 17%);
--btn-border-color: hsl(240, 98%, 17%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(240, 98%, 17%);
--btn-hover-border-color: hsl(240, 98%, 17%);
--btn-focus-shadow-rgb: 1, 1, 86;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(240, 98%, 17%);
--btn-active-border-color: hsl(240, 98%, 17%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(240, 98%, 17%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(240, 98%, 17%);
--gradient: none;
}
.btn-outline-secondary {
--btn-color: hsl(210, 7%, 46%);
--btn-border-color: hsl(210, 7%, 46%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(210, 7%, 46%);
--btn-hover-border-color: hsl(210, 7%, 46%);
--btn-focus-shadow-rgb: 109, 117, 126;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(210, 7%, 46%);
--btn-active-border-color: hsl(210, 7%, 46%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(210, 7%, 46%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(210, 7%, 46%);
--gradient: none;
}
.btn-outline-success {
--btn-color: hsl(120, 32%, 39%);
--btn-border-color: hsl(120, 32%, 39%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(120, 32%, 39%);
--btn-hover-border-color: hsl(120, 32%, 39%);
--btn-focus-shadow-rgb: 68, 131, 68;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(120, 32%, 39%);
--btn-active-border-color: hsl(120, 32%, 39%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(120, 32%, 39%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(120, 32%, 39%);
--gradient: none;
}
.btn-outline-info {
--btn-color: hsl(207, 49%, 37%);
--btn-border-color: hsl(207, 49%, 37%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(207, 49%, 37%);
--btn-hover-border-color: hsl(207, 49%, 37%);
--btn-focus-shadow-rgb: 48, 99, 141;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(207, 49%, 37%);
--btn-active-border-color: hsl(207, 49%, 37%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(207, 49%, 37%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(207, 49%, 37%);
--gradient: none;
}
.btn-outline-warning {
--btn-color: hsl(34, 100%, 34%);
--btn-border-color: hsl(34, 100%, 34%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(34, 100%, 34%);
--btn-hover-border-color: hsl(34, 100%, 34%);
--btn-focus-shadow-rgb: 173, 98, 0;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(34, 100%, 34%);
--btn-active-border-color: hsl(34, 100%, 34%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(34, 100%, 34%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(34, 100%, 34%);
--gradient: none;
}
.btn-outline-danger {
--btn-color: hsl(3, 75%, 37%);
--btn-border-color: hsl(3, 75%, 37%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(3, 75%, 37%);
--btn-hover-border-color: hsl(3, 75%, 37%);
--btn-focus-shadow-rgb: 165, 31, 24;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(3, 75%, 37%);
--btn-active-border-color: hsl(3, 75%, 37%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(3, 75%, 37%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(3, 75%, 37%);
--gradient: none;
}
.btn-outline-light {
--btn-color: hsl(210, 17%, 98%);
--btn-border-color: hsl(210, 17%, 98%);
--btn-hover-color: hsl(0, 0%, 0%);
--btn-hover-bg: hsl(210, 17%, 98%);
--btn-hover-border-color: hsl(210, 17%, 98%);
--btn-focus-shadow-rgb: 249, 250, 251;
--btn-active-color: hsl(0, 0%, 0%);
--btn-active-bg: hsl(210, 17%, 98%);
--btn-active-border-color: hsl(210, 17%, 98%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(210, 17%, 98%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(210, 17%, 98%);
--gradient: none;
}
.btn-outline-dark {
--btn-color: hsl(210, 10%, 23%);
--btn-border-color: hsl(210, 10%, 23%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: hsl(210, 10%, 23%);
--btn-hover-border-color: hsl(210, 10%, 23%);
--btn-focus-shadow-rgb: 53, 59, 65;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: hsl(210, 10%, 23%);
--btn-active-border-color: hsl(210, 10%, 23%);
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--btn-disabled-color: hsl(210, 10%, 23%);
--btn-disabled-bg: transparent;
--btn-disabled-border-color: hsl(210, 10%, 23%);
--gradient: none;
}
.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: hsl(210, 7%, 46%);
--btn-disabled-border-color: transparent;
--btn-box-shadow: none;
--btn-focus-shadow-rgb: 39, 39, 111;
text-decoration: underline;
}

95
src/media/css/colors/light/index.html
View File

@@ -1,95 +0,0 @@
<!-- Copyright (C) 2025 Moko Consulting <jmiller@mokoconsulting.tech>
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.Site
INGROUP: Templates.MokoCassiopeia
FILE: index.html
BRIEF: Security redirect page to block folder access and forward to site root.
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Redirecting…</title>
<!-- Search engines: do not index this placeholder redirect page -->
<meta name="robots" content="noindex, nofollow, noarchive" />
<!-- Instant redirect fallback even if JavaScript is disabled -->
<meta http-equiv="refresh" content="0; url=/" />
<!-- Canonical root reference -->
<link rel="canonical" href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
(function redirectToRoot() {
// Configuration object with safe defaults.
var opts = {
fallbackPath: "/", // string: fallback destination if origin is unavailable
delayMs: 0, // number: delay before redirect in ms (0 = immediate)
behavior: "replace" // enum: "replace" | "assign"
};
// Determine absolute origin in all mainstream browsers.
var origin = (typeof location.origin === "string" && location.origin)
|| (location.protocol + "//" + location.host);
// Final destination: absolute root of the current site, or fallback path.
var destination = origin ? origin + "/" : opts.fallbackPath;
function go() {
if (opts.behavior === "assign") {
location.assign(destination);
} else {
location.replace(destination);
}
}
// Execute redirect, optionally after a short delay.
if (opts.delayMs > 0) {
setTimeout(go, opts.delayMs);
} else {
go();
}
})();
</script>
<!--
Secondary meta-refresh for no-JS environments is already set above.
Some very old crawlers may ignore JS; the meta refresh ensures coverage.
-->
<noscript>
<!-- Extra defense-in-depth: if JS is disabled, meta refresh (above) handles redirect. -->
<style>
html, body { height:100%; }
body { display:flex; align-items:center; justify-content:center; margin:0; font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.msg { opacity: .75; text-align: center; }
</style>
</noscript>
</head>
<body>
<div class="msg">Redirecting to the site root… If you are not redirected, <a href="/">click here</a>.</div>
</body>
</html>

2
src/templateDetails.xml
View File

@@ -41,7 +41,7 @@
<author>Jonathan Miller || Moko Consulting</author> <author>Jonathan Miller || Moko Consulting</author>
<authorEmail>hello@mokoconsulting.tech</authorEmail> <authorEmail>hello@mokoconsulting.tech</authorEmail>
<copyright>(C)GNU General Public License Version 3 - 2026 Moko Consulting</copyright> <copyright>(C)GNU General Public License Version 3 - 2026 Moko Consulting</copyright>
<description><![CDATA[<h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia 3.0</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> To create a custom colour scheme, copy the template file <code>templates/colors_custom.css</code> to either <code>media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css</code> or <code>media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css</code>. Customise the CSS variables to match your brand, then activate it 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 <code>docs/CSS_VARIABLES.md</code>. </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 3.0</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> To create a custom colour scheme, copy the template file <code>templates/theme_custom_light.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/light.custom.css</code> or <code>templates/theme_custom_dark.css</code> to <code>media/templates/site/mokocassiopeia/css/theme/dark.custom.css</code>. Customise the CSS variables to match your brand, then activate it 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 <code>docs/CSS_VARIABLES.md</code>. </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> <inheritable>1</inheritable>
<files> <files>
<filename>component.php</filename> <filename>component.php</filename>

20
templates/README.md
View File

@@ -9,7 +9,7 @@
This directory contains template files for custom color schemes that can be copied to your template installation. This directory contains template files for custom color schemes that can be copied to your template installation.
## Custom Color Palette Templates ## Custom Theme Palette Templates
Template files are provided for both light and dark themes with complete Bootstrap button definitions: Template files are provided for both light and dark themes with complete Bootstrap button definitions:
@@ -17,18 +17,18 @@ Template files are provided for both light and dark themes with complete Bootstr
| File | Theme | Description | | File | Theme | Description |
|------|-------|-------------| |------|-------|-------------|
| `colors_custom_light.css` | Light | Custom light theme with all Bootstrap button variants | | `theme_custom_light.css` | Light | Custom light theme with all Bootstrap button variants |
| `colors_custom_dark.css` | Dark | Custom dark theme with all Bootstrap button variants | | `theme_custom_dark.css` | Dark | Custom dark theme with all Bootstrap button variants |
### Using Custom Color Templates ### Using Custom Theme Templates
1. **Copy** the template file to your template's CSS directory: 1. **Copy** the template file to your template's CSS theme directory:
```bash ```bash
# For light theme # For light theme
cp templates/colors_custom_light.css src/media/css/colors/light/colors_custom.css cp templates/theme_custom_light.css src/media/css/theme/light.custom.css
# For dark theme # For dark theme
cp templates/colors_custom_dark.css src/media/css/colors/dark/colors_custom.css cp templates/theme_custom_dark.css src/media/css/theme/dark.custom.css
``` ```
2. **Customize** the CSS variables in your copied file: 2. **Customize** the CSS variables in your copied file:
@@ -37,12 +37,12 @@ Template files are provided for both light and dark themes with complete Bootstr
- Update button variants if needed - Update button variants if needed
3. **Register** in `src/joomla.asset.json`: 3. **Register** in `src/joomla.asset.json`:
- Ensure `template.light.colors_custom` and `template.dark.colors_custom` assets are defined - Ensure `template.light.custom` and `template.dark.custom` assets are defined
- Already configured by default in the asset manifest - Already configured by default in the asset manifest
4. **Activate** via Joomla admin: 4. **Activate** via Joomla admin:
- Go to System → Site Templates → MokoCassiopeia - Go to System → Site Templates → MokoCassiopeia
- Select "Custom" in the Color Palette dropdown - Select "Custom" in the Theme Palette dropdown
- Save and check your site - Save and check your site
### Bootstrap Button Variants Included ### Bootstrap Button Variants Included
@@ -57,7 +57,7 @@ All template files include complete definitions for:
Each button variant includes hover, active, focus, and disabled states using CSS variables. Each button variant includes hover, active, focus, and disabled states using CSS variables.
## Color System Features ## Theme System Features
### CSS Variable Structure ### CSS Variable Structure

6
templates/colors_custom_dark.css → templates/theme_custom_dark.css
View File

@@ -10,7 +10,7 @@
# FILE INFORMATION # FILE INFORMATION
DEFGROUP: Joomla.Template.Site DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia.Templates INGROUP: MokoCassiopeia.Templates
PATH: ./templates/colors_custom_dark.css PATH: ./templates/theme_custom_dark.css
VERSION: 03.08.04 VERSION: 03.08.04
BRIEF: Custom dark theme color template with Bootstrap button definitions BRIEF: Custom dark theme color template with Bootstrap button definitions
*/ */
@@ -19,10 +19,10 @@
* CUSTOM DARK THEME TEMPLATE * CUSTOM DARK THEME TEMPLATE
* *
* Copy this file to: * Copy this file to:
* src/media/css/colors/dark/colors_custom.css * src/media/css/theme/dark.custom.css
* *
* Then register it in src/joomla.asset.json under * Then register it in src/joomla.asset.json under
* template.dark.colors_custom asset. * template.dark.custom asset.
* --------------------------------------------- */ * --------------------------------------------- */
:root[data-bs-theme='dark'] { :root[data-bs-theme='dark'] {

6
templates/colors_custom_light.css → templates/theme_custom_light.css
View File

@@ -10,7 +10,7 @@
# FILE INFORMATION # FILE INFORMATION
DEFGROUP: Joomla.Template.Site DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia.Templates INGROUP: MokoCassiopeia.Templates
PATH: ./templates/colors_custom_light.css PATH: ./templates/theme_custom_light.css
VERSION: 03.08.04 VERSION: 03.08.04
BRIEF: Custom light theme color template with Bootstrap button definitions BRIEF: Custom light theme color template with Bootstrap button definitions
*/ */
@@ -19,10 +19,10 @@
* CUSTOM LIGHT THEME TEMPLATE * CUSTOM LIGHT THEME TEMPLATE
* *
* Copy this file to: * Copy this file to:
* src/media/css/colors/light/colors_custom.css * src/media/css/theme/light.custom.css
* *
* Then register it in src/joomla.asset.json under * Then register it in src/joomla.asset.json under
* template.light.colors_custom asset. * template.light.custom asset.
* --------------------------------------------- */ * --------------------------------------------- */
:root[data-bs-theme="light"] { :root[data-bs-theme="light"] {