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

Complete template system overhaul: CSS variables, theme management, and UI improvements #74

Merged
Copilot merged 47 commits from copilot/fix-language-constants-display into main 2026-02-07 17:49:30 +00:00
Conversation 2 Commits 47 Files Changed 29 +2704 -2371
29 changed files with 2704 additions and 2371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -1,4 +1,4 @@
<!-- Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
<!-- Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.

20
SECURITY.md
View File

@@ -123,6 +123,25 @@ Security posture is reinforced through operational controls:
* Consistent path normalization and whitespace hygiene checks where required for release correctness.
* Least privilege for GitHub Actions permissions.
### Template Security Features
**Custom Head Content Injection**
The template provides Custom Head Code fields (`custom_head_start` and `custom_head_end`) that allow administrators to inject custom HTML, CSS, and JavaScript code. This is an intentional feature for:
* Adding analytics scripts (Google Analytics, Google Tag Manager)
* Custom meta tags
* Third-party integrations
* Custom styling
**Security Considerations:**
* These fields use `filter="raw"` to allow HTML/JS injection
* **Access is restricted to Joomla administrators only** via template configuration
* This is not an XSS vulnerability as it requires administrator privileges
* Administrators should only add trusted code from verified sources
* Regular security audits should review custom head content
This policy does not guarantee that all vulnerabilities will be prevented. It defines how risk is managed when issues are discovered.
## Safe Harbor
@@ -162,4 +181,5 @@ If you want credit, include the name or handle to list in an advisory. If you pr
| Date | Change Summary | Author |
| ---------- | ------------------------------------------------------------------------------------------------ | --------------- |
| 2026-01-30 | Added Template Security Features section documenting custom head content injection controls. | Copilot Agent |
| 2025-12-18 | Initial publication of security policy, intake channels, triage targets, and disclosure process. | Moko Consulting |

748
docs/CSS_VARIABLES.md
View File

@@ -24,13 +24,20 @@ This document provides a complete reference of all CSS variables available in th
- [Primary Brand Colors](#primary-brand-colors)
- [Link Colors](#link-colors)
- [Navigation Colors](#navigation-colors)
- [Navbar Variables](#navbar-variables)
- [Offcanvas Variables](#offcanvas-variables)
- [Header Background](#header-background)
- [Container Backgrounds](#container-backgrounds)
- [Bootstrap Color Palette](#bootstrap-color-palette)
- [Body & Typography](#body--typography)
- [Additional Theme Colors](#additional-theme-colors)
- [Borders & Shadows](#borders--shadows)
- [Button Utilities](#button-utilities)
- [Card Variables](#card-variables)
- [Form Colors](#form-colors)
- [Responsive Tokens & Breakpoints](#responsive-tokens--breakpoints)
- [VirtueMart Variables](#virtuemart-variables)
- [Gable Variables](#gable-variables)
---
@@ -131,6 +138,149 @@ To create custom color schemes:
---
## Navbar Variables
### `--navbar-padding-x`
- **Description**: Horizontal padding for navbar
- **Default**: `1rem`
- **Usage**: Navbar horizontal spacing
### `--navbar-padding-y`
- **Description**: Vertical padding for navbar
- **Default**: `0.5rem`
- **Usage**: Navbar vertical spacing
### `--navbar-color`
- **Description**: Default text color for navbar items
- **Light Mode Default**: `rgba(0, 0, 0, 0.55)`
- **Dark Mode Default**: `rgba(255, 255, 255, 0.55)`
- **Usage**: Navbar text color
### `--navbar-active-color`
- **Description**: Text color for active navbar items
- **Light Mode Default**: `rgba(0, 0, 0, 0.9)`
- **Dark Mode Default**: `rgba(255, 255, 255, 0.9)`
- **Usage**: Active navbar item color
### `--navbar-disabled-color`
- **Description**: Text color for disabled navbar items
- **Light Mode Default**: `rgba(0, 0, 0, 0.3)`
- **Dark Mode Default**: `rgba(255, 255, 255, 0.3)`
- **Usage**: Disabled navbar item color
### `--navbar-brand-padding-y`
- **Description**: Vertical padding for navbar brand
- **Default**: `0.3125rem`
- **Usage**: Navbar brand vertical spacing
### `--navbar-brand-margin-end`
- **Description**: Right margin for navbar brand
copilot-pull-request-reviewer[bot] commented 2026-02-07 17:55:39 +00:00 (Migrated from github.com)
Review
Copy Link

Documentation mismatch: --navbar-color defaults are documented as Bootstrap’s rgba values, but in the actual scheme files it’s set to var(--nav-text-color) (white/gray in this template). Please update the documented defaults to match the template’s real variable values.

- **Default**: `var(--nav-text-color)`
Documentation mismatch: `--navbar-color` defaults are documented as Bootstrap’s rgba values, but in the actual scheme files it’s set to `var(--nav-text-color)` (white/gray in this template). Please update the documented defaults to match the template’s real variable values. ```suggestion - **Default**: `var(--nav-text-color)` ```
- **Default**: `1rem`
- **Usage**: Space after navbar brand
### `--navbar-brand-font-size`
- **Description**: Font size for navbar brand
- **Default**: `1.25rem`
- **Usage**: Navbar brand text size
### `--navbar-brand-color`
- **Description**: Color for navbar brand
- **Default**: Inherits from `--navbar-color`
- **Usage**: Navbar brand text color
### `--navbar-brand-active-color`
- **Description**: Color for navbar brand when active
- **Default**: Inherits from `--navbar-active-color`
- **Usage**: Active navbar brand color
### `--navbar-toggler-padding-x`
- **Description**: Horizontal padding for navbar toggler button
- **Default**: `0.75rem`
- **Usage**: Toggler button horizontal spacing
### `--navbar-toggler-padding-y`
- **Description**: Vertical padding for navbar toggler button
- **Default**: `0.25rem`
- **Usage**: Toggler button vertical spacing
### `--navbar-toggler-font-size`
- **Description**: Font size for navbar toggler icon
- **Default**: `1.25rem`
- **Usage**: Toggler icon size
### `--navbar-toggler-border-color`
- **Description**: Border color for navbar toggler
- **Light Mode Default**: `rgba(0, 0, 0, 0.1)`
- **Dark Mode Default**: `rgba(255, 255, 255, 0.1)`
- **Usage**: Toggler button border
### `--navbar-toggler-border-radius`
- **Description**: Border radius for navbar toggler
- **Default**: `0.25rem`
- **Usage**: Toggler button corner rounding
### `--navbar-toggler-focus-width`
- **Description**: Width of focus outline on toggler
- **Default**: `0.25rem`
- **Usage**: Focus indicator width
### `--navbar-toggler-transition`
- **Description**: CSS transition for toggler state changes
- **Default**: `box-shadow 0.15s ease-in-out`
- **Usage**: Toggler animation
### `--nav-link-padding-x`
- **Description**: Horizontal padding for nav links
- **Default**: `0.5rem`
- **Usage**: Nav link horizontal spacing
### `--nav-link-padding-y`
- **Description**: Vertical padding for nav links
- **Default**: `0.5rem`
- **Usage**: Nav link vertical spacing
### `--nav-link-font-weight`
- **Description**: Font weight for nav links
- **Default**: `400`
- **Usage**: Nav link text weight
### `--nav-link-color`
- **Description**: Color for nav links
- **Default**: Inherits from `--navbar-color`
- **Usage**: Nav link text color
### `--nav-link-active-color`
- **Description**: Color for active nav links
- **Default**: Inherits from `--navbar-active-color`
- **Usage**: Active nav link color
### `--nav-link-disabled-color`
- **Description**: Color for disabled nav links
- **Default**: Inherits from `--navbar-disabled-color`
- **Usage**: Disabled nav link color
---
## Offcanvas Variables
### `--offcanvas-color`
- **Description**: Text color for offcanvas content
- **Light Mode Default**: `var(--body-color)`
- **Dark Mode Default**: `var(--body-color)`
- **Usage**: Offcanvas text color
### `--offcanvas-padding-x`
- **Description**: Horizontal padding for offcanvas content
- **Default**: `1.5rem`
- **Usage**: Offcanvas horizontal spacing
### `--offcanvas-padding-y`
- **Description**: Vertical padding for offcanvas content
- **Default**: `1.5rem`
- **Usage**: Offcanvas vertical spacing
---
## Header Background
### `--header-background-image`
@@ -385,6 +535,112 @@ Dark mode ranges are inverted for better contrast on dark backgrounds.
---
## Button Utilities
### `--btn-border-radius`
- **Description**: Border radius for buttons
- **Default**: `0.25rem`
- **Usage**: Button corner rounding
### `--btn-box-shadow`
- **Description**: Box shadow for buttons
- **Default**: `inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075)`
- **Usage**: Button shadow styling
---
## Card Variables
### `--card-spacer-x`
- **Description**: Horizontal spacing for card padding
- **Default**: `1rem`
- **Usage**: Card horizontal padding
### `--card-spacer-y`
- **Description**: Vertical spacing for card padding
- **Default**: `1rem`
- **Usage**: Card vertical padding
### `--card-title-spacer-y`
- **Description**: Spacing below card title
- **Default**: `0.5rem`
- **Usage**: Card title bottom margin
### `--card-border-width`
- **Description**: Width of card border
- **Default**: `1px`
- **Usage**: Card border thickness
### `--card-border-color`
- **Description**: Color of card border
- **Light Mode Default**: `rgba(0, 0, 0, 0.125)`
- **Dark Mode Default**: `rgba(255, 255, 255, 0.125)`
- **Usage**: Card border color
### `--card-border-radius`
- **Description**: Border radius for cards
- **Default**: `0.25rem`
- **Usage**: Card corner rounding
### `--card-box-shadow`
- **Description**: Box shadow for cards
- **Default**: `none`
- **Usage**: Card shadow effect
### `--card-inner-border-radius`
- **Description**: Inner border radius for nested card elements
- **Default**: `calc(0.25rem - 1px)`
- **Usage**: Inner card element corners
### `--card-cap-padding-x`
- **Description**: Horizontal padding for card header/footer
- **Default**: `1rem`
- **Usage**: Card cap horizontal spacing
### `--card-cap-padding-y`
- **Description**: Vertical padding for card header/footer
- **Default**: `0.5rem`
- **Usage**: Card cap vertical spacing
### `--card-cap-bg`
- **Description**: Background color for card header/footer
- **Light Mode Default**: `rgba(0, 0, 0, 0.03)`
- **Dark Mode Default**: `rgba(255, 255, 255, 0.03)`
- **Usage**: Card cap background
### `--card-cap-color`
- **Description**: Text color for card header/footer
- **Default**: Inherits from body color
- **Usage**: Card cap text color
### `--card-height`
- **Description**: Height constraint for cards
- **Default**: `auto`
- **Usage**: Card height control
### `--card-color`
- **Description**: Text color for card content
- **Default**: Inherits from body color
- **Usage**: Card text color
### `--card-bg`
- **Description**: Background color for cards
- **Light Mode Default**: `#fff`
- **Dark Mode Default**: `#212529`
- **Usage**: Card background
### `--card-img-overlay-padding`
- **Description**: Padding for card image overlays
- **Default**: `1rem`
- **Usage**: Card image overlay spacing
### `--card-group-margin`
- **Description**: Margin between cards in card groups
- **Default**: `0.75rem`
- **Usage**: Card group spacing
---
## Form Colors
### Focus Ring
@@ -419,6 +675,462 @@ Dark mode ranges are inverted for better contrast on dark backgrounds.
---
## Responsive Tokens & Breakpoints
### Breakpoint Variables
#### `--bp-xs`
- **Description**: Extra small breakpoint
- **Default**: `0px`
- **Usage**: Mobile devices
#### `--bp-sm`
- **Description**: Small breakpoint
- **Default**: `576px`
- **Usage**: Small tablets, large phones
#### `--bp-md`
- **Description**: Medium breakpoint
- **Default**: `768px`
- **Usage**: Tablets
#### `--bp-lg`
- **Description**: Large breakpoint
- **Default**: `992px`
- **Usage**: Desktops
#### `--bp-xl`
- **Description**: Extra large breakpoint
- **Default**: `1200px`
- **Usage**: Large desktops
### Responsive Utilities
#### `--nav-toggle-size`
- **Description**: Size of navigation toggle button
- **Default**: `40px`
- **Usage**: Mobile menu toggle button dimensions
#### `--bg-opacity`
- **Description**: Background opacity for overlay elements
- **Default**: `0.5`
- **Usage**: Overlay transparency
#### `--padding-x`
- **Description**: General horizontal padding utility
- **Default**: `1rem`
- **Usage**: Horizontal spacing utility
#### `--padding-y`
- **Description**: General vertical padding utility
- **Default**: `1rem`
- **Usage**: Vertical spacing utility
---
## VirtueMart Variables
### VM Surfaces
#### `--vm-surface`
- **Description**: Primary VirtueMart surface background
- **Light Mode Default**: `#ffffff`
- **Dark Mode Default**: `#1e1e1e`
- **Usage**: Main VM component backgrounds
#### `--vm-surface-2`
- **Description**: Secondary VirtueMart surface background
- **Light Mode Default**: `#f8f9fa`
- **Dark Mode Default**: `#2d2d2d`
- **Usage**: Alternate VM backgrounds
#### `--vm-text`
- **Description**: Default VirtueMart text color
- **Light Mode Default**: `#212529`
- **Dark Mode Default**: `#e9ecef`
- **Usage**: VM body text
#### `--vm-text-strong`
- **Description**: Strong/emphasized VirtueMart text
- **Light Mode Default**: `#000000`
- **Dark Mode Default**: `#ffffff`
- **Usage**: VM headings, emphasized text
#### `--vm-text-muted`
- **Description**: Muted VirtueMart text
- **Light Mode Default**: `#6c757d`
- **Dark Mode Default**: `#adb5bd`
- **Usage**: VM secondary text, captions
#### `--vm-border`
- **Description**: Border color for VirtueMart components
- **Light Mode Default**: `#dee2e6`
- **Dark Mode Default**: `#495057`
- **Usage**: VM borders, dividers
#### `--vm-price-color`
- **Description**: Color for product prices
- **Light Mode Default**: `#198754`
- **Dark Mode Default**: `#20c997`
- **Usage**: Product price display
### VM Layout
#### `--vm-container-max-width`
- **Description**: Maximum width for VM containers
- **Default**: `1200px`
- **Usage**: VM content width constraint
#### `--vm-section-gap`
- **Description**: Gap between VM sections
- **Default**: `2rem`
- **Usage**: VM section spacing
#### `--vm-block-radius`
- **Description**: Border radius for VM blocks
- **Default**: `0.375rem`
- **Usage**: VM component corner rounding
#### `--vm-block-shadow`
- **Description**: Shadow for VM blocks
- **Default**: `0 2px 4px rgba(0, 0, 0, 0.1)`
- **Usage**: VM component shadows
### VM Typography
#### `--vm-title-1-size`
- **Description**: Size for h1 titles in VM
- **Default**: `2.5rem`
- **Usage**: VM main headings
#### `--vm-title-1-weight`
- **Description**: Font weight for h1 titles
- **Default**: `700`
- **Usage**: VM main heading weight
#### `--vm-title-2-size`
- **Description**: Size for h2 titles in VM
- **Default**: `2rem`
- **Usage**: VM section headings
#### `--vm-title-2-weight`
- **Description**: Font weight for h2 titles
- **Default**: `600`
- **Usage**: VM section heading weight
#### `--vm-title-3-size`
- **Description**: Size for h3 titles in VM
- **Default**: `1.75rem`
- **Usage**: VM subsection headings
#### `--vm-title-3-weight`
- **Description**: Font weight for h3 titles
- **Default**: `600`
- **Usage**: VM subsection heading weight
#### `--vm-title-4-size`
- **Description**: Size for h4 titles in VM
- **Default**: `1.5rem`
- **Usage**: VM component headings
#### `--vm-title-4-weight`
- **Description**: Font weight for h4 titles
- **Default**: `500`
- **Usage**: VM component heading weight
#### `--vm-title-5-size`
- **Description**: Size for h5 titles in VM
- **Default**: `1.25rem`
- **Usage**: VM small headings
#### `--vm-title-5-weight`
- **Description**: Font weight for h5 titles
- **Default**: `500`
- **Usage**: VM small heading weight
### VM Controls
#### `--vm-input-border`
- **Description**: Border style for VM inputs
- **Light Mode Default**: `1px solid #ced4da`
- **Dark Mode Default**: `1px solid #495057`
- **Usage**: VM form input borders
#### `--vm-input-bg`
- **Description**: Background color for VM inputs
- **Light Mode Default**: `#ffffff`
- **Dark Mode Default**: `#212529`
- **Usage**: VM form input backgrounds
#### `--vm-input-text`
- **Description**: Text color for VM inputs
- **Light Mode Default**: `#212529`
- **Dark Mode Default**: `#e9ecef`
- **Usage**: VM form input text
#### `--vm-qty-width`
- **Description**: Width for quantity input fields
- **Default**: `80px`
- **Usage**: Product quantity selectors
#### `--vm-cart-dropdown-min-width`
- **Description**: Minimum width for cart dropdown
- **Default**: `300px`
- **Usage**: Shopping cart dropdown sizing
### VM Alerts
#### `--vm-alert-success-bg`
- **Description**: Background for success alerts
- **Light Mode Default**: `#d1e7dd`
- **Dark Mode Default**: `#0f5132`
- **Usage**: VM success messages
#### `--vm-alert-error-bg`
- **Description**: Background for error alerts
- **Light Mode Default**: `#f8d7da`
- **Dark Mode Default**: `#842029`
- **Usage**: VM error messages
#### `--vm-availability-in-stock`
- **Description**: Color for in-stock indicator
- **Light Mode Default**: `#198754`
- **Dark Mode Default**: `#20c997`
- **Usage**: Product availability display
#### `--vm-availability-out-of-stock`
- **Description**: Color for out-of-stock indicator
- **Light Mode Default**: `#dc3545`
- **Dark Mode Default**: `#ea868f`
- **Usage**: Product unavailability display
### VM Buttons
#### `--vm-btn-padding-x`
- **Description**: Horizontal padding for VM buttons
- **Default**: `1rem`
- **Usage**: VM button horizontal spacing
#### `--vm-btn-padding-y`
- **Description**: Vertical padding for VM buttons
- **Default**: `0.5rem`
- **Usage**: VM button vertical spacing
#### `--vm-btn-radius`
- **Description**: Border radius for VM buttons
- **Default**: `0.25rem`
- **Usage**: VM button corner rounding
#### `--vm-btn-shadow`
- **Description**: Shadow for VM buttons
- **Default**: `0 2px 4px rgba(0, 0, 0, 0.1)`
- **Usage**: VM button shadows
#### `--vm-btn-primary-bg`
- **Description**: Background for primary VM buttons
- **Light Mode Default**: `#0d6efd`
- **Dark Mode Default**: `#0a58ca`
- **Usage**: Primary VM action buttons
#### `--vm-btn-primary-text`
- **Description**: Text color for primary VM buttons
- **Default**: `#ffffff`
- **Usage**: Primary VM button text
#### `--vm-btn-secondary-bg`
- **Description**: Background for secondary VM buttons
- **Light Mode Default**: `#6c757d`
- **Dark Mode Default**: `#565e64`
- **Usage**: Secondary VM action buttons
#### `--vm-btn-secondary-text`
- **Description**: Text color for secondary VM buttons
- **Default**: `#ffffff`
- **Usage**: Secondary VM button text
#### `--vm-btn-add-to-cart-bg`
- **Description**: Background for add-to-cart button
- **Light Mode Default**: `#198754`
- **Dark Mode Default**: `#146c43`
- **Usage**: Add to cart button styling
### VM Image Overlays
#### `--vm-overlay-gap`
- **Description**: Gap in image overlay elements
- **Default**: `0.5rem`
- **Usage**: Spacing in product image overlays
#### `--vm-overlay-top`
- **Description**: Top position for overlay elements
- **Default**: `1rem`
- **Usage**: Overlay vertical positioning
#### `--vm-overlay-right`
- **Description**: Right position for overlay elements
- **Default**: `1rem`
- **Usage**: Overlay horizontal positioning
#### `--vm-overlay-btn-size`
- **Description**: Size for overlay buttons
- **Default**: `40px`
- **Usage**: Quick view, wishlist button dimensions
#### `--vm-overlay-btn-bg`
- **Description**: Background for overlay buttons
- **Light Mode Default**: `rgba(255, 255, 255, 0.9)`
- **Dark Mode Default**: `rgba(0, 0, 0, 0.9)`
- **Usage**: Overlay button background
#### `--vm-overlay-btn-text`
- **Description**: Text color for overlay buttons
- **Light Mode Default**: `#212529`
- **Dark Mode Default**: `#e9ecef`
- **Usage**: Overlay button text
#### `--vm-overlay-btn-hover-bg`
- **Description**: Background for overlay buttons on hover
- **Light Mode Default**: `#ffffff`
- **Dark Mode Default**: `#000000`
- **Usage**: Overlay button hover state
#### `--vm-overlay-btn-radius`
- **Description**: Border radius for overlay buttons
- **Default**: `50%`
- **Usage**: Circular overlay buttons
#### `--vm-overlay-btn-shadow`
- **Description**: Shadow for overlay buttons
- **Default**: `0 2px 8px rgba(0, 0, 0, 0.15)`
- **Usage**: Overlay button shadows
### VM Vendor Menu
#### `--vm-vendor-menu-bg`
- **Description**: Background for vendor menu
copilot-pull-request-reviewer[bot] commented 2026-02-07 17:55:41 +00:00 (Migrated from github.com)
Review
Copy Link

Documentation mismatch: --padding-x / --padding-y are documented with a 1rem default, but the color scheme files set them to 0.15rem. Please update the docs to reflect the current defaults so users don’t end up with unexpected spacing when customizing.

- **Default**: `0.15rem`
- **Usage**: Horizontal spacing utility

#### `--padding-y`
- **Description**: General vertical padding utility
- **Default**: `0.15rem`
Documentation mismatch: `--padding-x` / `--padding-y` are documented with a `1rem` default, but the color scheme files set them to `0.15rem`. Please update the docs to reflect the current defaults so users don’t end up with unexpected spacing when customizing. ```suggestion - **Default**: `0.15rem` - **Usage**: Horizontal spacing utility #### `--padding-y` - **Description**: General vertical padding utility - **Default**: `0.15rem` ```
- **Light Mode Default**: `#ffffff`
- **Dark Mode Default**: `#212529`
- **Usage**: Vendor menu background
#### `--vm-vendor-menu-text`
- **Description**: Text color for vendor menu
- **Light Mode Default**: `#212529`
- **Dark Mode Default**: `#e9ecef`
- **Usage**: Vendor menu text
#### `--vm-vendor-menu-border`
- **Description**: Border for vendor menu
- **Light Mode Default**: `1px solid #dee2e6`
- **Dark Mode Default**: `1px solid #495057`
- **Usage**: Vendor menu borders
#### `--vm-vendor-menu-hover-bg`
- **Description**: Background on hover for vendor menu items
- **Light Mode Default**: `#f8f9fa`
- **Dark Mode Default**: `#2d2d2d`
- **Usage**: Vendor menu hover state
#### `--vm-vendor-menu-active-bg`
- **Description**: Background for active vendor menu items
- **Light Mode Default**: `#e9ecef`
- **Dark Mode Default**: `#343a40`
- **Usage**: Active vendor menu item
#### `--vm-vendor-menu-active-text`
- **Description**: Text color for active vendor menu items
- **Light Mode Default**: `#0d6efd`
- **Dark Mode Default**: `#6ea8fe`
- **Usage**: Active vendor menu text
#### `--vm-vendor-menu-padding-x`
- **Description**: Horizontal padding for vendor menu items
- **Default**: `1rem`
- **Usage**: Vendor menu item horizontal spacing
#### `--vm-vendor-menu-padding-y`
- **Description**: Vertical padding for vendor menu items
- **Default**: `0.75rem`
- **Usage**: Vendor menu item vertical spacing
#### `--vm-vendor-menu-font-size`
- **Description**: Font size for vendor menu
- **Default**: `0.875rem`
- **Usage**: Vendor menu text size
#### `--vm-vendor-menu-font-weight`
- **Description**: Font weight for vendor menu
- **Default**: `400`
- **Usage**: Vendor menu text weight
#### `--vm-vendor-menu-radius`
- **Description**: Border radius for vendor menu
- **Default**: `0.25rem`
- **Usage**: Vendor menu corner rounding
#### `--vm-vendor-menu-shadow`
- **Description**: Shadow for vendor menu
- **Default**: `0 2px 4px rgba(0, 0, 0, 0.1)`
- **Usage**: Vendor menu drop shadow
#### `--vm-vendor-menu-width`
- **Description**: Width for vendor menu
- **Default**: `250px`
- **Usage**: Vendor menu sizing
#### `--vm-vendor-menu-item-gap`
- **Description**: Gap between vendor menu items
- **Default**: `0.25rem`
- **Usage**: Vendor menu item spacing
#### `--vm-vendor-menu-icon-size`
- **Description**: Size for vendor menu icons
- **Default**: `1.25rem`
- **Usage**: Vendor menu icon dimensions
---
## Gable Variables
### `--gab-blue`
- **Description**: Gable primary blue color
- **Default**: `#1e88e5`
- **Usage**: Gable brand blue accent
### `--gab-green`
- **Description**: Gable green color
- **Default**: `#43a047`
- **Usage**: Gable success/positive indicators
### `--gab-red`
- **Description**: Gable red color
- **Default**: `#e53935`
- **Usage**: Gable error/alert indicators
### `--gab-orange`
- **Description**: Gable orange color
- **Default**: `#fb8c00`
- **Usage**: Gable warning indicators
### `--gab-gray1`
- **Description**: Gable light gray
- **Light Mode Default**: `#f5f5f5`
- **Dark Mode Default**: `#424242`
- **Usage**: Gable light backgrounds
### `--gab-gray2`
- **Description**: Gable medium gray
- **Light Mode Default**: `#e0e0e0`
- **Dark Mode Default**: `#616161`
- **Usage**: Gable medium backgrounds, borders
### `--gab-gray3`
- **Description**: Gable dark gray
- **Light Mode Default**: `#9e9e9e`
- **Dark Mode Default**: `#9e9e9e`
- **Usage**: Gable text, icons
---
## Usage Examples
### Example 1: Custom Brand Colors
@@ -453,6 +1165,39 @@ Dark mode ranges are inverted for better contrast on dark backgrounds.
}
```
### Example 4: Custom Card Styling
```css
:root[data-bs-theme="light"] {
--card-border-radius: 0.5rem;
--card-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--card-spacer-x: 1.5rem;
--card-spacer-y: 1.5rem;
}
```
### Example 5: VirtueMart Custom Colors
```css
:root[data-bs-theme="light"] {
--vm-btn-primary-bg: #0d6efd;
--vm-btn-add-to-cart-bg: #198754;
--vm-price-color: #dc3545;
--vm-surface: #ffffff;
}
```
### Example 6: Responsive Navbar
```css
:root[data-bs-theme="light"] {
--navbar-padding-x: 1.5rem;
--navbar-padding-y: 0.75rem;
--nav-toggle-size: 48px;
--navbar-toggler-border-radius: 0.5rem;
}
```
---
## Tips for Customization
@@ -491,4 +1236,5 @@ Dark mode ranges are inverted for better contrast on dark backgrounds.
| Date | Change Summary | Author |
| ---------- | ----------------------------------------------------- | --------------- |
| 2026-01-30 | Initial CSS variables reference documentation created | GitHub Copilot |
| 2026-02-07 | Added missing CSS variable documentation | GitHub Copilot |
| 2026-01-30 | Initial CSS variables reference documentation created | GitHub Copilot |

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

@@ -1,4 +1,4 @@
; ; Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
; Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
;
; This file is part of a Moko Consulting project.
;
@@ -12,24 +12,26 @@
; BRIEF: English (GB) system language strings for template metadata and installer
;
TPL_MOKOCASSIOPEIA="MokoCassiopeia Site template"
TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE-METISMENU="Collapsible Dropdown"
TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN-METISMENU="Dropdown"
TPL_MOKOCASSIOPEIA_GOOGLE_FIELDSET_LABEL="Google"
TPL_MOKOCASSIOPEIA_DRAWERS_FIELDSET_LABEL="Drawers"
TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE_METISMENU="Collapsible Dropdown"
TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN_METISMENU="Dropdown"
TPL_MOKOCASSIOPEIA_POSITION_BANNER="Banner"
TPL_MOKOCASSIOPEIA_POSITION_BELOW-TOP="Below Top"
TPL_MOKOCASSIOPEIA_POSITION_BOTTOM-A="Bottom-A"
TPL_MOKOCASSIOPEIA_POSITION_BOTTOM-B="Bottom-B"
TPL_MOKOCASSIOPEIA_POSITION_BELOW_TOP="Below Top"
TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_A="Bottom-A"
TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_B="Bottom-B"
TPL_MOKOCASSIOPEIA_POSITION_BREADCRUMBS="Breadcrumbs"
TPL_MOKOCASSIOPEIA_POSITION_DEBUG="Debug"
TPL_MOKOCASSIOPEIA_POSITION_FOOTER="Footer"
TPL_MOKOCASSIOPEIA_POSITION_MAIN-BOTTOM="Main-bottom"
TPL_MOKOCASSIOPEIA_POSITION_MAIN-TOP="Main-top"
TPL_MOKOCASSIOPEIA_POSITION_MAIN_BOTTOM="Main-bottom"
TPL_MOKOCASSIOPEIA_POSITION_MAIN_TOP="Main-top"
TPL_MOKOCASSIOPEIA_POSITION_MENU="Menu"
TPL_MOKOCASSIOPEIA_POSITION_SEARCH="Search"
TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR-LEFT="Sidebar-left"
TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR-RIGHT="Sidebar-right"
TPL_MOKOCASSIOPEIA_POSITION_TOP-A="Top-a"
TPL_MOKOCASSIOPEIA_POSITION_TOP-B="Top-b"
TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR_LEFT="Sidebar-left"
TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR_RIGHT="Sidebar-right"
TPL_MOKOCASSIOPEIA_POSITION_TOP_A="Top-a"
TPL_MOKOCASSIOPEIA_POSITION_TOP_B="Top-b"
TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar"
TPL_MOKOCASSIOPEIA_POSITION_DRAWER-LEFT="Drawer-Left"
TPL_MOKOCASSIOPEIA_POSITION_DRAWER-RIGHT="Drawer-Right"
TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="<h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia 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>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_POSITION_DRAWER_LEFT="Drawer-Left"
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>"

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

@@ -1,4 +1,4 @@
; ; Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
; Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
;
; This file is part of a Moko Consulting project.
;
@@ -12,24 +12,26 @@
; BRIEF: English (US) system language strings for template metadata and installer
;
TPL_MOKOCASSIOPEIA="MokoCassiopeia Site template"
TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE-METISMENU="Collapsible Dropdown"
TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN-METISMENU="Dropdown"
TPL_MOKOCASSIOPEIA_GOOGLE_FIELDSET_LABEL="Google"
TPL_MOKOCASSIOPEIA_DRAWERS_FIELDSET_LABEL="Drawers"
TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE_METISMENU="Collapsible Dropdown"
TPL_MOKOCASSIOPEIA_MOD_MENU_LAYOUT_DROPDOWN_METISMENU="Dropdown"
TPL_MOKOCASSIOPEIA_POSITION_BANNER="Banner"
TPL_MOKOCASSIOPEIA_POSITION_BELOW-TOP="Below Top"
TPL_MOKOCASSIOPEIA_POSITION_BOTTOM-A="Bottom-A"
TPL_MOKOCASSIOPEIA_POSITION_BOTTOM-B="Bottom-B"
TPL_MOKOCASSIOPEIA_POSITION_BELOW_TOP="Below Top"
TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_A="Bottom-A"
TPL_MOKOCASSIOPEIA_POSITION_BOTTOM_B="Bottom-B"
TPL_MOKOCASSIOPEIA_POSITION_BREADCRUMBS="Breadcrumbs"
TPL_MOKOCASSIOPEIA_POSITION_DEBUG="Debug"
TPL_MOKOCASSIOPEIA_POSITION_FOOTER="Footer"
TPL_MOKOCASSIOPEIA_POSITION_MAIN-BOTTOM="Main-bottom"
TPL_MOKOCASSIOPEIA_POSITION_MAIN-TOP="Main-top"
TPL_MOKOCASSIOPEIA_POSITION_MAIN_BOTTOM="Main-bottom"
TPL_MOKOCASSIOPEIA_POSITION_MAIN_TOP="Main-top"
TPL_MOKOCASSIOPEIA_POSITION_MENU="Menu"
TPL_MOKOCASSIOPEIA_POSITION_SEARCH="Search"
TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR-LEFT="Sidebar-left"
TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR-RIGHT="Sidebar-right"
TPL_MOKOCASSIOPEIA_POSITION_TOP-A="Top-a"
TPL_MOKOCASSIOPEIA_POSITION_TOP-B="Top-b"
TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR_LEFT="Sidebar-left"
TPL_MOKOCASSIOPEIA_POSITION_SIDEBAR_RIGHT="Sidebar-right"
TPL_MOKOCASSIOPEIA_POSITION_TOP_A="Top-a"
TPL_MOKOCASSIOPEIA_POSITION_TOP_B="Top-b"
TPL_MOKOCASSIOPEIA_POSITION_TOPBAR="Top Bar"
TPL_MOKOCASSIOPEIA_POSITION_DRAWER-LEFT="Drawer-Left"
TPL_MOKOCASSIOPEIA_POSITION_DRAWER-RIGHT="Drawer-Right"
TPL_MOKOCASSIOPEIA_XML_DESCRIPTION="<h3>MokoCassiopeia Template Description</h3> <p> <strong>MokoCassiopeia 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>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_POSITION_DRAWER_LEFT="Drawer-Left"
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>"

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

@@ -1,4 +1,4 @@
; Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
; Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
;
; This file is part of a Moko Consulting project.
;
@@ -24,7 +24,6 @@ TPL_MOKOCASSIOPEIA_FLUID="Fluid"
; ===== Custom Code tab =====
TPL_MOKOCASSIOPEIA_CUSTOM_CODE_FIELDSET="Custom Code"
COM_TEMPLATES_CUSTOM_HEAD_FIELDSET_LABEL="Custom Head"
TPL_MOKOCASSIOPEIA_CUSTOM_HEAD_START_LABEL="Custom Head: Start"
TPL_MOKOCASSIOPEIA_CUSTOM_HEAD_START_DESC="This content will be inserted at the beginning of the &lt;head&gt; tag"
TPL_MOKOCASSIOPEIA_CUSTOM_HEAD_END_LABEL="Custom Head: End"
@@ -33,14 +32,14 @@ TPL_MOKOCASSIOPEIA_OFFLINEEMBED_LABEL="Offline Page Embed Code"
TPL_MOKOCASSIOPEIA_OFFLINEEMBED_DESC="In addition to the 'Offline message' defined in 'Global Configuration', this will be displayed on the offline page.<i>Use for Mailchimp code and Social Icons</i>"
; ===== Drawers =====
COM_TEMPLATES_DRAWERS_FIELDSET_LABEL="Drawers"
TPL_MOKOCASSIOPEIA_DRAWERS_FIELDSET_LABEL="Drawers"
TPL_MOKOCASSIOPEIA_DRAWER_LEFT_ICON_LABEL="Drawer Left Icon CSS"
TPL_MOKOCASSIOPEIA_DRAWER_LEFT_ICON_DESC="Enter the Font-Awesome class for the left drawer toggle (e.g. 'fas fa-chevron-left')."
TPL_MOKOCASSIOPEIA_DRAWER_RIGHT_ICON_LABEL="Drawer Right Icon CSS"
TPL_MOKOCASSIOPEIA_DRAWER_RIGHT_ICON_DESC="Enter the Font-Awesome class for the right drawer toggle (e.g. 'fas fa-chevron-right')."
; ===== Google =====
COM_TEMPLATES_GOOGLE_FIELDSET_LABEL="Google"
TPL_MOKOCASSIOPEIA_GOOGLE_FIELDSET_LABEL="Google"
TPL_MOKOCASSIOPEIA_GOOGLE_NOTE_TEXT="<h3>PLEASE NOTE:</h3>If fields are left blank, relative Google features will not be used"
TPL_MOKOCASSIOPEIA_GOOGLETAGMANAGER_LABEL="Use Google Tag Manager?"
TPL_MOKOCASSIOPEIA_GOOGLETAGMANAGER_DESC="Do you want to use Google Tag Manager?<br>More information on Google Tag Manager can be found <a target='_blank' href='https://support.google.com/tagmanager/answer/14842164'>here.</a>"
@@ -62,6 +61,7 @@ TPL_MOKOCASSIOPEIA_FA7KITCODE_DESC="<i>If left blank, Font Awesome 7 Free will b
; ===== Typography (Theme tab) =====
TPL_MOKOCASSIOPEIA_FONT_LABEL="Fonts Scheme"
TPL_MOKOCASSIOPEIA_FONT_LABEL_DESC="Select a font scheme for your site. Local fonts are loaded from the template folder, while web fonts are loaded from external sources (Google Fonts). The default is Roboto (local). See the note below for important privacy and performance considerations."
TPL_MOKOCASSIOPEIA_FONT_GROUP_LOCAL="Fonts from Folder"
TPL_MOKOCASSIOPEIA_FONT_GROUP_WEB="Fonts from Web"
TPL_MOKOCASSIOPEIA_FONT_NOTE_TEXT="Loading fonts from external sources might be against privacy regulations in some countries.<br>Loading fonts from a local folder might have a performance impact on your site."
@@ -74,11 +74,12 @@ TPL_MOKOCASSIOPEIA_TOC="Table of Contents"
; ===== Color palette choices (shared) =====
TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard"
TPL_MOKOCASSIOPEIA_COLOR_NAME_ALTERNATIVE="Alternative"
TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom"
; New labels for Theme tab dropdowns
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette"
TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL="Dark color 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_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."
; ===== Theme tab (core feature strings) =====
TPL_MOKO_THEME_FIELDSET="Theme"

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

@@ -1,4 +1,4 @@
; ; Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
; Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
;
; This file is part of a Moko Consulting project.
;
@@ -12,8 +12,8 @@
; BRIEF: English (US) language strings for the MokoCassiopeia Joomla template
;
; ===== Template meta =====
MOKOCASSIOPEIA="MOKOCASSIOPEIA Site template"
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>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>"
MOKOCASSIOPEIA="MokoCassiopeia Site template"
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>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>"
; ===== System / layout =====
TPL_MOKOCASSIOPEIA_DEVELOPMENTMODE_LABEL="Development Mode"
@@ -24,7 +24,6 @@ TPL_MOKOCASSIOPEIA_FLUID="Fluid"
; ===== Custom Code tab =====
TPL_MOKOCASSIOPEIA_CUSTOM_CODE_FIELDSET="Custom Code"
COM_TEMPLATES_CUSTOM_HEAD_FIELDSET_LABEL="Custom Head"
TPL_MOKOCASSIOPEIA_CUSTOM_HEAD_START_LABEL="Custom Head: Start"
TPL_MOKOCASSIOPEIA_CUSTOM_HEAD_START_DESC="This content will be inserted at the beginning of the &lt;head&gt; tag"
TPL_MOKOCASSIOPEIA_CUSTOM_HEAD_END_LABEL="Custom Head: End"
@@ -33,14 +32,14 @@ TPL_MOKOCASSIOPEIA_OFFLINEEMBED_LABEL="Offline Page Embed Code"
TPL_MOKOCASSIOPEIA_OFFLINEEMBED_DESC="In addition to the 'Offline message' defined in 'Global Configuration', this will be displayed on the offline page.<i>Use for Mailchimp code and Social Icons</i>"
; ===== Drawers =====
COM_TEMPLATES_DRAWERS_FIELDSET_LABEL="Drawers"
TPL_MOKOCASSIOPEIA_DRAWERS_FIELDSET_LABEL="Drawers"
TPL_MOKOCASSIOPEIA_DRAWER_LEFT_ICON_LABEL="Drawer Left Icon CSS"
TPL_MOKOCASSIOPEIA_DRAWER_LEFT_ICON_DESC="Enter the Font-Awesome class for the left drawer toggle (e.g. 'fas fa-chevron-left')."
TPL_MOKOCASSIOPEIA_DRAWER_RIGHT_ICON_LABEL="Drawer Right Icon CSS"
TPL_MOKOCASSIOPEIA_DRAWER_RIGHT_ICON_DESC="Enter the Font-Awesome class for the right drawer toggle (e.g. 'fas fa-chevron-right')."
; ===== Google =====
COM_TEMPLATES_GOOGLE_FIELDSET_LABEL="Google"
TPL_MOKOCASSIOPEIA_GOOGLE_FIELDSET_LABEL="Google"
TPL_MOKOCASSIOPEIA_GOOGLE_NOTE_TEXT="<h3>PLEASE NOTE:</h3>If fields are left blank, relative Google features will not be used"
TPL_MOKOCASSIOPEIA_GOOGLETAGMANAGER_LABEL="Use Google Tag Manager?"
TPL_MOKOCASSIOPEIA_GOOGLETAGMANAGER_DESC="Do you want to use Google Tag Manager?<br>More information on Google Tag Manager can be found <a target='_blank' href='https://support.google.com/tagmanager/answer/14842164'>here.</a>"
@@ -62,6 +61,7 @@ TPL_MOKOCASSIOPEIA_FA7KITCODE_DESC="<i>If left blank, Font Awesome 7 Free will b
; ===== Typography (Theme tab) =====
TPL_MOKOCASSIOPEIA_FONT_LABEL="Fonts Scheme"
TPL_MOKOCASSIOPEIA_FONT_LABEL_DESC="Select a font scheme for your site. Local fonts are loaded from the template folder, while web fonts are loaded from external sources (Google Fonts). The default is Roboto (local). See the note below for important privacy and performance considerations."
TPL_MOKOCASSIOPEIA_FONT_GROUP_LOCAL="Fonts from Folder"
TPL_MOKOCASSIOPEIA_FONT_GROUP_WEB="Fonts from Web"
TPL_MOKOCASSIOPEIA_FONT_NOTE_TEXT="Loading fonts from external sources might be against privacy regulations in some countries.<br>Loading fonts from a local folder might have a performance impact on your site."
@@ -74,11 +74,12 @@ TPL_MOKOCASSIOPEIA_TOC="Table of Contents"
; ===== Color palette choices (shared) =====
TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD="Standard"
TPL_MOKOCASSIOPEIA_COLOR_NAME_ALTERNATIVE="Alternative"
TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM="Custom"
; New labels for Theme tab dropdowns
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL="Light color palette"
TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC="Select a color palette for light mode. <strong>Standard</strong> uses the default blue theme with comprehensive styling for all components. <strong>Custom</strong> allows you to create your own color scheme - copy the template file from <code>templates/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_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."
; ===== Theme tab (core feature strings) =====
TPL_MOKO_THEME_FIELDSET="Theme"

355
src/media/css/colors/dark/colors_alternative.css
View File

@@ -1,355 +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/moko-cassiopeia/css/global/dark/colors_alternative.css
VERSION: 03.05.00
BRIEF: Alternative dark mode color definitions for MokoCassiopeia template
*/
/* -----------------------------------------------
* DARK THEME
* --------------------------------------------- */
:root[data-bs-theme='dark']{
/* System hint for native widgets */
color-scheme: dark;
/* Brand & links */
--color-primary: #112855;
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #6fb3ff;
--mainmenu-nav-link-color: #fff;
--color-link: #224FAA;
--color-hover: #224FAA;
/* Header background (kept same image; works over dark bg) */
--header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); --header-background-attachment: fixed;
--header-background-repeat: repeat;
--header-background-size: auto;
/* Section containers */
--container-below-topbar-bg-image: ;
--container-below-topbar-bg-color: ;
--container-below-topbar-bg-position: center;
--container-below-topbar-bg-attachment: fixed;
--container-below-topbar-bg-repeat: no-repeat;
--container-below-topbar-bg-size: cover;
--container-below-topbar-border: ;
--container-below-topbar-border-radius: ;
--container-top-a-bg-image: ;
--container-top-a-bg-color: ;
--container-top-a-bg-position: center;
--container-top-a-bg-attachment: fixed;
--container-top-a-bg-repeat: no-repeat;
--container-top-a-bg-size: cover;
--container-top-a-border: ;
--container-top-a-border-radius: ;
--container-top-b-bg-image: ;
--container-top-b-bg-color: ;
--container-top-b-bg-position: center;
--container-top-b-bg-attachment: fixed;
--container-top-b-bg-repeat: no-repeat;
--container-top-b-bg-size: cover;
--container-top-b-border: ;
--container-top-b-border-radius: ;
--container-toc-bg: ;
--container-toc-color: #dbe3ff;
--container-sidebar-bg-image: ;
--container-sidebar-bg-color: ;
--container-sidebar-bg-position: center;
--container-sidebar-bg-attachment: scroll;
--container-sidebar-bg-repeat: repeat;
--container-sidebar-bg-size: auto;
--container-sidebar-border: ;
--container-sidebar-border-radius: ;
--container-bottom-a-bg-image: ;
--container-bottom-a-bg-color: ;
--container-bottom-a-bg-position: center;
--container-bottom-a-bg-attachment: fixed;
--container-bottom-a-bg-repeat: no-repeat;
--container-bottom-a-bg-size: cover;
--container-bottom-a-border: ;
--container-bottom-a-border-radius: 5px;
--container-bottom-b-bg-image: ;
--container-bottom-b-bg-color: ;
--container-bottom-b-bg-position: center;
--container-bottom-b-bg-attachment: fixed;
--container-bottom-b-bg-repeat: no-repeat;
--container-bottom-b-bg-size: cover;
--container-bottom-b-border: ;
--container-bottom-b-border-radius: ;
/* Nav & accents */
--nav-text-color: var(--mainmenu-nav-link-color);
--nav-bg-color: var(--color-link);
--border: 5px;
--muted-color: #6d757e;
--hr-color: var(--border-color, #dfe3e7);
--link-active-color: var(--link-color);
--code-color-ink: var(--code-color, #e93f8e);
--border-color-soft: var(--border-color, #dfe3e7);
--kbd-bg: var(--secondary-bg, #eaedf0);
--kbd-ink: var(--body-bg, #fff);
--toc-bg: var(--secondary-bg, #eaedf0);
--toc-ink: var(--color-primary, #112855);
--selection-bg: var(--highlight-bg, #fbeea8);
--selection-ink: var(--body-color, #22262a);
/* Palette */
--blue: #91a4ff;
--black: #000;
--indigo: #b19cff;
--purple: #c0a5ff;
--pink: #ff8fc0;
--red: #ff7a73;
--orange: #ff9c4d;
--yellow: #ffd166;
--green: #78d694;
--teal: #76e3ff;
--cyan: #6fb7ff;
--white: #fff;
/* Grays tuned for dark */
--gray-100: #161a20;
--gray-200: #1b2027;
--gray-300: #222831;
--gray-400: #2b323b;
--gray-500: #36404a;
--gray-600: #48525d;
--gray-700: #5b6672;
--gray-800: #cfd6de;
--gray-900: #e6ebf1;
/* Contextuals (keep brand hues) */
--primary: #010156;
--secondary: #48525d;
--success: #4aa664;
--info: #4f7aa0;
--warning: #c77a00;
--danger: #c23a31;
--light: #1b2027;
--dark: #0f1318;
/* RGB helpers */
--primary-rgb: 1,1,86;
--secondary-rgb: 72,82,93;
--success-rgb: 74,166,100;
--info-rgb: 79,122,160;
--warning-rgb: 199,122,0;
--danger-rgb: 194,58,49;
--light-rgb: 27,32,39;
--dark-rgb: 15,19,24;
/* Emphasis & subtle variants */
--primary-text-emphasis: #c7ccff;
--secondary-text-emphasis: #cfd6de;
--success-text-emphasis: #bde8c9;
--info-text-emphasis: #bcd6ee;
--warning-text-emphasis: #ffd9a6;
--danger-text-emphasis: #ffb7b2;
--light-text-emphasis: #d2d8df;
--dark-text-emphasis: #d2d8df;
--primary-bg-subtle: #0b1030;
--secondary-bg-subtle: #1e2430;
--success-bg-subtle: #0f2a1b;
--info-bg-subtle: #0d2232;
--warning-bg-subtle: #2a1e06;
--danger-bg-subtle: #2d1110;
--light-bg-subtle: #12161d;
--dark-bg-subtle: #1e2430;
--primary-border-subtle: #2b3a7a;
--secondary-border-subtle: #2b323b;
--success-border-subtle: #2b5b40;
--info-border-subtle: #254861;
--warning-border-subtle: #5a3c0e;
--danger-border-subtle: #5c2723;
--light-border-subtle: #222831;
--dark-border-subtle: #2b323b;
/* Typography & layout */
--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--body-font-size: 1rem;
--body-font-weight: 400;
--body-line-height: 1.5;
--body-color: #e6ebf1;
--body-color-rgb: 230, 235, 241;
--body-bg: #0e1318;
--body-bg-rgb: 14, 19, 24;
--emphasis-color: #fff;
--emphasis-color-rgb: 255, 255, 255;
--secondary-color: #e6ebf1bf;
--secondary-color-rgb: 230, 235, 241;
--secondary-bg: #151b22;
--secondary-bg-rgb: 21, 27, 34;
--tertiary-color: #e6ebf180;
--tertiary-color-rgb: 230, 235, 241;
--tertiary-bg: #10151b;
--tertiary-bg-rgb: 16, 21, 27;
--heading-color: #f1f5f9;
--link-color: #8ab4f8;
--link-color-rgb: 138, 180, 248;
--link-decoration: underline;
--link-hover-color: #c3d6ff;
--link-hover-color-rgb: 195, 214, 255;
--code-color: #ff7abd;
--highlight-color: #111;
--highlight-bg: #ffe28a1a;
--border-width: 1px;
--border-style: solid;
--border-color: #2b323b;
--border-color-translucent: #ffffff26;
--border-radius: .25rem;
--border-radius-sm: .2rem;
--border-radius-lg: .3rem;
--border-radius-xl: .3rem;
--border-radius-xxl: 2rem;
--border-radius-2xl: var(--border-radius-xxl);
--border-radius-pill: 50rem;
--box-shadow: 0 .5rem 1rem #00000066;
--box-shadow-sm: 0 .125rem .25rem #00000040;
--box-shadow-lg: 0 1rem 3rem #00000080;
--box-shadow-inset: inset 0 1px 2px #00000040;
--focus-ring-width: .25rem;
--focus-ring-opacity: .6;
--focus-ring-color: #5472ff66;
--form-valid-color: #78d694;
--form-valid-border-color: #78d694;
--form-invalid-color: #ff8e86;
--form-invalid-border-color: #ff8e86;
}
.btn {
--btn-padding-x: 1rem;
--btn-padding-y: 0.6rem;
--btn-font-family: ;
--btn-font-size: 1rem;
--btn-font-weight: 400;
--btn-line-height: 1.5;
--btn-color: var(--white);
--btn-bg: transparent;
--btn-border-width: 1px;
--btn-border-color: transparent;
--btn-border-radius: 0.25rem;
--btn-active-border-color: transparent;
--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
--btn-disabled-opacity: 0.65;
--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
display: inline-block;
padding: var(--btn-padding-y) var(--btn-padding-x);
font-family: var(--btn-font-family);
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
line-height: var(--btn-line-height);
color: var(--btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: var(--btn-border-width) solid var(--btn-border-color);
border-radius: var(--btn-border-radius);
background-color: var(--btn-bg);
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
-o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
/* Buttons — inherit brand hues; ensure strong contrast on dark bg */
.btn-primary {
--btn-color: hsl(0, 0%, 100%);
--btn-bg: hsl(240, 98%, 17%);
--btn-border-color: hsl(240, 98%, 17%);
--btn-hover-color: hsl(0, 0%, 100%);
--btn-hover-bg: #010149;
--btn-hover-border-color: #010145;
--btn-focus-shadow-rgb: 84, 114, 255;
--btn-active-color: hsl(0, 0%, 100%);
--btn-active-bg: #010145;
--btn-active-border-color: #010141;
}
.btn-secondary {
--btn-color: var(--nav-text-color);
--btn-bg: var(--nav-bg-color);
--btn-border-color: #3a4250;
--btn-hover-color: #fff;
--btn-hover-bg: #1b2a55;
--btn-hover-border-color: #162448;
--btn-focus-shadow-rgb: 84, 114, 255;
--btn-active-color: #fff;
--btn-active-bg: #162448;
--btn-active-border-color: #12203f;
}
/* Outline buttons on dark: keep readable borders */
.btn-outline-light {
--btn-color: #e6ebf1;
--btn-border-color: #e6ebf1;
--btn-hover-color: #111;
--btn-hover-bg: #e6ebf1;
--btn-hover-border-color: #e6ebf1;
--btn-active-color: #111;
--btn-active-bg: #d7dce2;
--btn-active-border-color: #d7dce2;
--gradient: none;
}
/* Links as buttons */
.btn-link {
--btn-font-weight: 400;
--btn-color: var(--link-color);
--btn-bg: transparent;
--btn-border-color: transparent;
--btn-hover-color: var(--link-hover-color);
--btn-hover-border-color: transparent;
--btn-active-color: var(--link-hover-color);
--btn-active-border-color: transparent;
--btn-disabled-color: #6d7781;
--btn-disabled-border-color: transparent;
--btn-box-shadow: none;
--btn-focus-shadow-rgb: 84, 114, 255;
text-decoration: underline;
}
.btn-secondary {
--btn-color: var(--nav-text-color);
--btn-bg: var(--nav-bg-color);
}

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

@@ -10,7 +10,7 @@
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/moko-cassiopeia/css/global/dark/colors_standard.css
PATH: ./media/templates/site/mokocassiopeia/css/global/dark/colors_standard.css
VERSION: 03.05.00
BRIEF: Standard dark mode color definitions for MokoCassiopeia template
*/
@@ -20,242 +20,403 @@
* --------------------------------------------- */
:root[data-bs-theme='dark']{
/* System hint for native widgets */
color-scheme: dark;
color-scheme: dark;
/* Brand & links */
--color-primary: #112855;
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #6fb3ff;
/* ===== BRAND & THEME COLORS ===== */
--color-primary: #112855;
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #6fb3ff;
--mainmenu-nav-link-color: #fff;
/* ===== NAVIGATION ===== */
--mainmenu-nav-link-color: #fff;
--nav-text-color: gray;
--nav-bg-color: var(--color-primary);
--color-link: white;
--color-hover: gray;
--color-active: var(--mainmenu-nav-link-color);
/* ===== 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);
/* Header background (kept same image; works over dark bg) */
--header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); --header-background-attachment: fixed;
--header-background-repeat: repeat;
--header-background-size: auto;
/* ===== OFFCANVAS ===== */
--offcanvas-color: var(--body-color);
--offcanvas-padding-x: 1rem;
--offcanvas-padding-y: 1rem;
/* Section containers */
--container-below-topbar-bg-image: ;
--container-below-topbar-bg-color: ;
--container-below-topbar-bg-position: center;
--container-below-topbar-bg-attachment: fixed;
--container-below-topbar-bg-repeat: no-repeat;
--container-below-topbar-bg-size: cover;
--container-below-topbar-border: ;
--container-below-topbar-border-radius: ;
/* ===== 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;
--container-top-a-bg-image: ;
--container-top-a-bg-color: ;
--container-top-a-bg-position: center;
--container-top-a-bg-attachment: fixed;
--container-top-a-bg-repeat: no-repeat;
--container-top-a-bg-size: cover;
--container-top-a-border: ;
--container-top-a-border-radius: ;
/* ===== 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;
--container-top-b-bg-image: ;
--container-top-b-bg-color: ;
--container-top-b-bg-position: center;
--container-top-b-bg-attachment: fixed;
--container-top-b-bg-repeat: no-repeat;
--container-top-b-bg-size: cover;
--container-top-b-border: ;
--container-top-b-border-radius: ;
/* ===== 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;
--container-toc-bg: ;
--container-toc-color: #dbe3ff;
/* ===== BREAKPOINTS ===== */
--bp-xs: 0;
--bp-sm: 576px;
--bp-md: 768px;
--bp-lg: 992px;
--bp-xl: 1200px;
--container-sidebar-bg-image: ;
--container-sidebar-bg-color: ;
--container-sidebar-bg-position: center;
--container-sidebar-bg-attachment: scroll;
--container-sidebar-bg-repeat: repeat;
--container-sidebar-bg-size: auto;
--container-sidebar-border: ;
--container-sidebar-border-radius: ;
/* ===== 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;
--container-bottom-a-bg-image: ;
--container-bottom-a-bg-color: ;
--container-bottom-a-bg-position: center;
--container-bottom-a-bg-attachment: fixed;
--container-bottom-a-bg-repeat: no-repeat;
--container-bottom-a-bg-size: cover;
--container-bottom-a-border: ;
--container-bottom-a-border-radius: 5px;
/* ===== 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;
--container-bottom-b-bg-image: ;
--container-bottom-b-bg-color: ;
--container-bottom-b-bg-position: center;
--container-bottom-b-bg-attachment: fixed;
--container-bottom-b-bg-repeat: no-repeat;
--container-bottom-b-bg-size: cover;
--container-bottom-b-border: ;
--container-bottom-b-border-radius: ;
/* ===== 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;
/* Nav & accents */
--nav-text-color: gray;
--nav-bg-color: var(--color-primary);
--border: 5px;
/* ===== 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;
--muted-color: #6d757e;
--hr-color: var(--border-color, #dfe3e7);
--link-active-color: var(--link-color);
--code-color-ink: var(--code-color, #e93f8e);
--border-color-soft: var(--border-color, #dfe3e7);
--kbd-bg: var(--secondary-bg, #eaedf0);
--kbd-ink: var(--body-bg, #fff);
--toc-bg: var(--secondary-bg, #eaedf0);
--toc-ink: var(--color-primary, #112855);
--selection-bg: var(--highlight-bg, #fbeea8);
--selection-ink: var(--body-color, #22262a);
/* ===== 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;
/* Palette */
--blue: #91a4ff;
--black: #000;
--indigo: #b19cff;
--purple: #c0a5ff;
--pink: #ff8fc0;
--red: #ff7a73;
--orange: #ff9c4d;
--yellow: #ffd166;
--green: #78d694;
--teal: #76e3ff;
--cyan: #6fb7ff;
--white: #fff;
/* 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;
/* Grays tuned for dark */
--gray-100: #161a20;
--gray-200: #1b2027;
--gray-300: #222831;
--gray-400: #2b323b;
--gray-500: #36404a;
--gray-600: #48525d;
--gray-700: #5b6672;
--gray-800: #cfd6de;
--gray-900: #e6ebf1;
/* 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;
/* Contextuals (keep brand hues) */
--primary: #010156;
--secondary: #48525d;
--success: #4aa664;
--info: #4f7aa0;
--warning: #c77a00;
--danger: #c23a31;
--light: #1b2027;
--dark: #0f1318;
/* TOC Container */
--container-toc-bg: var(--secondary-bg);
--container-toc-color: #dbe3ff;
/* RGB helpers */
--primary-rgb: 1,1,86;
--secondary-rgb: 72,82,93;
--success-rgb: 74,166,100;
--info-rgb: 79,122,160;
--warning-rgb: 199,122,0;
--danger-rgb: 194,58,49;
--light-rgb: 27,32,39;
--dark-rgb: 15,19,24;
/* 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;
/* Emphasis & subtle variants */
--primary-text-emphasis: #c7ccff;
--secondary-text-emphasis: #cfd6de;
--success-text-emphasis: #bde8c9;
--info-text-emphasis: #bcd6ee;
--warning-text-emphasis: #ffd9a6;
--danger-text-emphasis: #ffb7b2;
--light-text-emphasis: #d2d8df;
--dark-text-emphasis: #d2d8df;
/* 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;
--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;
/* 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;
--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;
/* ===== 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;
/* Typography & layout */
--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;
/* ===== 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;
--body-color: #e6ebf1;
--body-color-rgb: 230, 235, 241;
--body-bg: #0e1318;
--body-bg-rgb: 14, 19, 24;
/* ===== 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;
--form-valid-color: #78d694;
--form-valid-border-color: #78d694;
--form-invalid-color: #ff8e86;
--form-invalid-border-color: #ff8e86;
--emphasis-color: #fff;
--emphasis-color-rgb: 255, 255, 255;
/* ===== 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);
--secondary-color: #e6ebf1bf;
--secondary-color-rgb: 230, 235, 241;
/* ===== 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;
--secondary-bg: #151b22;
--secondary-bg-rgb: 21, 27, 34;
/* ===== 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);
--tertiary-color: #e6ebf180;
--tertiary-color-rgb: 230, 235, 241;
--tertiary-bg: #10151b;
--tertiary-bg-rgb: 16, 21, 27;
/* 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);
--heading-color: #f1f5f9;
/* 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;
--link-color: #8ab4f8;
--link-color-rgb: 138, 180, 248;
--link-decoration: underline;
--link-hover-color: #c3d6ff;
--link-hover-color-rgb: 195, 214, 255;
/* 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;
--code-color: #ff7abd;
--highlight-color: #111;
--highlight-bg: #ffe28a1a;
/* 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);
--border-width: 1px;
--border-style: solid;
--border-color: #2b323b;
--border-color-translucent: #ffffff26;
/* 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);
--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;
/* 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);
--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;
/* 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);
--focus-ring-width: .25rem;
--focus-ring-opacity: .6;
--focus-ring-color: #5472ff66;
--form-valid-color: #78d694;
--form-valid-border-color: #78d694;
--form-invalid-color: #ff8e86;
--form-invalid-border-color: #ff8e86;
/* ===== 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: ;
--btn-font-family: inherit;
--btn-font-size: 1rem;
--btn-font-weight: 400;
--btn-line-height: 1.5;

555
src/media/css/colors/light/colors_alternative.css
View File

@@ -1,555 +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/moko-cassiopeia/css/global/light/colors_alternative.css
VERSION: 03.05.00
BRIEF: Alternative light mode color definitions for MokoCassiopeia template
*/
/* -----------------------------------------------
* LIGHT THEME
* --------------------------------------------- */
:root[data-bs-theme="light"] {
color-scheme: light;
--color-primary: #112855;
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #3f8ff0;
--mainmenu-nav-link-color: white;
--color-link: #224FAA;
--color-hover: var(--accent-color-primary);
--header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
--header-background-attachment: fixed;
--header-background-repeat: repeat;
--header-background-size: auto;
--container-below-topbar-bg-image: ;
--container-below-topbar-bg-color ;
--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: ;
--container-below-topbar-border-radius: ;
--container-top-a-bg-image: ;
--container-top-a-bg-color: ;
--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: ;
--container-top-a-border-radius: ;
--container-top-b-bg-image: ;
--container-top-b-bg-color: ;
--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: ;
--container-top-b-border-radius: ;
--container-toc-bg: var(--mainmenu-nav-link-color);
--container-toc-color: var(--color-primary);
--container-sidebar-bg-image: ;
--container-sidebar-bg-color: ;
--container-sidebar-bg-position: auto;
--container-sidebar-bg-attachment: scroll;
--container-sidebar-bg-repeat: repeat;
--container-sidebar-bg-size: auto;
--container-sidebar-border: ;
--container-sidebar-border-radius: ;
--container-bottom-a-bg-image: ;
--container-bottom-a-bg-color: ;
--container-bottom-a-bg-position: auto;
--container-bottom-a-bg-attachment: fixed;
--container-bottom-a-bg-repeat: repeat;
--container-bottom-a-bg-size: auto;
--container-bottom-a-border: ;
--container-bottom-a-border-radius: ;
--container-bottom-b-bg-image: ;
--container-bottom-b-bg-color: ;
--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: ;
--container-bottom-b-border-radius: ;
--nav-text-color: var(--mainmenu-nav-link-color);
--nav-bg-color: var(--color-link);
--border: 5px;
--muted-color: #6d757e;
--hr-color: var(--border-color, #dfe3e7);
--link-active-color: var(--link-color);
--code-color-ink: var(--code-color, #e93f8e);
--border-color-soft: var(--border-color, #dfe3e7);
--kbd-bg: var(--secondary-bg, #eaedf0);
--kbd-ink: var(--body-bg, #fff);
--toc-bg: var(--secondary-bg, #eaedf0);
--toc-ink: var(--color-primary, #112855);
--selection-bg: var(--highlight-bg, #fbeea8);
--selection-ink: var(--body-color, #22262a);
--blue: #010156;
--black: #000;
--indigo: #6812f3;
--purple: #6f42c2;
--pink: #e93f8e;
--red: #a51f18;
--orange: #fd7e17;
--yellow: #ad6200;
--green: #448344;
--teal: #5abfdd;
--cyan: #30638d;
--white: #fff;
--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;
--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;
--white-rgb: 255, 255, 255;
--black-rgb: 0, 0, 0;
--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;
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
--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;
--emphasis-color: #000;
--emphasis-color-rgb: 0, 0, 0;
--secondary-color: #22262abf;
--secondary-color-rgb: 34, 38, 42;
--secondary-bg: #eaedf0;
--secondary-bg-rgb: 234, 237, 240;
--tertiary-color: #22262a80;
--tertiary-color-rgb: 34, 38, 42;
--tertiary-bg: #f9fafb;
--tertiary-bg-rgb: 249, 250, 251;
--heading-color: inherit;
--link-color: #224faa;
--link-color-rgb: 34, 79, 170;
--link-decoration: underline;
--link-hover-color: #424077;
--link-hover-color-rgb: 66, 64, 119;
--code-color: #e93f8e;
--highlight-color: #22262a;
--highlight-bg: #fbeea8;
--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;
--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-ring-width: .25rem;
--focus-ring-opacity: .25;
--focus-ring-color: #01015640;
--form-valid-color: #448344;
--form-valid-border-color: #448344;
--form-invalid-color: #a51f18;
--form-invalid-border-color: #a51f18;
}
.btn {
--btn-padding-x: 1rem;
--btn-padding-y: 0.6rem;
--btn-font-family: ;
--btn-font-size: 1rem;
--btn-font-weight: 400;
--btn-line-height: 1.5;
--btn-color: 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: --nav-text-color;
--btn-bg: --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;
}

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

File diff suppressed because it is too large Load Diff

2
src/media/css/editor.css
View File

@@ -10,7 +10,7 @@
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/moko-cassiopeia/css/editor.css
PATH: ./media/templates/site/mokocassiopeia/css/editor.css
VERSION: 03.05.00
BRIEF: Stylesheet for Joomla editor content within MokoCassiopeia template
*/

13
src/media/css/fonts/osaka.css Normal file
View File

@@ -0,0 +1,13 @@
/**
* @package MokoCassiopeia
* @copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
* @license GNU General Public License version 3 or later
*/
@font-face {
font-family: 'Osaka';
src: url('../../fonts/osaka-re.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

2
src/media/css/system/searchtools/searchtools.css
View File

@@ -10,7 +10,7 @@
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/moko-cassiopeia/css/system/searchtools/searchtools.css
PATH: ./media/templates/site/mokocassiopeia/css/system/searchtools/searchtools.css
VERSION: 03.05.00
BRIEF: Stylesheet for Joomla search tools integration in MokoCassiopeia template
*/

2
src/media/css/template-rtl.css
View File

@@ -10,7 +10,7 @@
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/moko-cassiopeia/css/template-rtl.css
PATH: ./media/templates/site/mokocassiopeia/css/template-rtl.css
VERSION: 03.05.00
BRIEF: Right-to-left (RTL) layout stylesheet for MokoCassiopeia template
*/

469
src/media/css/template.css
View File

@@ -10,7 +10,7 @@
# FILE INFORMATION
DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/moko-cassiopeia/css/template.css
PATH: ./media/templates/site/mokocassiopeia/css/template.css
VERSION: 03.05.00
BRIEF: Main stylesheet providing layout, typography, and component styles for MokoCassiopeia
*/
@@ -2601,10 +2601,10 @@ progress {
font-size: 1rem;
font-weight: 400;
line-height: 1;
color: hsl(210, 11%, 15%);
background-color: var(--body-color);
color: var(--input-color);
background-color: var(--input-bg);
background-clip: padding-box;
border: 1px solid hsl(210, 14%, 83%);
border: 1px solid var(--input-border-color);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -2633,12 +2633,12 @@ progress {
}
.form-control:focus {
color: hsl(210, 11%, 15%);
background-color: var(--body-color);
border-color: #8894aa;
color: var(--input-color);
background-color: var(--input-bg);
border-color: var(--input-focus-border-color);
outline: 0;
-webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
-webkit-box-shadow: var(--input-focus-box-shadow);
box-shadow: var(--input-focus-box-shadow);
}
.form-control::-webkit-date-and-time-value {
@@ -2646,32 +2646,33 @@ progress {
}
.form-control::-webkit-input-placeholder {
color: hsl(210, 7%, 46%);
color: var(--input-placeholder-color);
opacity: 1;
}
.form-control::-moz-placeholder {
color: hsl(210, 7%, 46%);
color: var(--input-placeholder-color);
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: hsl(210, 7%, 46%);
color: var(--input-placeholder-color);
opacity: 1;
}
.form-control::-ms-input-placeholder {
color: hsl(210, 7%, 46%);
color: var(--input-placeholder-color);
opacity: 1;
}
.form-control::placeholder {
color: hsl(210, 7%, 46%);
color: var(--input-placeholder-color);
opacity: 1;
}
.form-control:disabled {
background-color: hsl(210, 16%, 93%);
background-color: var(--input-disabled-bg);
border-color: var(--input-disabled-border-color);
opacity: 1;
}
@@ -14011,10 +14012,6 @@ meter {
border-bottom-left-radius: 0;
}
.article-index .toclink.active {
color: currentColor;
}
.j-main-container .alert {
margin: 0.75rem;
}
@@ -14182,7 +14179,6 @@ meter {
.form-control {
max-width: 100%;
background-color: var(--body-color);
}
.form-control.input-xlarge {
@@ -14372,7 +14368,6 @@ fieldset>* {
.container-header nav {
padding: 0;
margin-top: 0.25em;
}
.container-header .site-description {
@@ -14411,7 +14406,6 @@ fieldset>* {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-bottom: 0.3em;
background-color: var(--nav-bg-color);
border-width: var(--border-width);
border-top: solid var(--accent-color-primary);
@@ -14592,6 +14586,7 @@ li.current a {
.container-header .mod-finder {
color: var(--body-color);
margin-block-end: 0;
}
.container-header .mod-finder a {
@@ -14614,7 +14609,7 @@ li.current a {
}
.icon-white {
color: var(--body-color);
color: var(--body-bg);
}
.input-group-text::before {
@@ -16782,103 +16777,7 @@ body:not(.has-sidebar-right) .site-grid .container-component {
form .form-control,
form .form-select {
border-color: #C7C7C7
}
/* --- TOC right-rail container (non-invasive) --- */
.container-toc-right {
float: right;
width: 280px;
margin: 0 0 1.25rem 1.25rem;
/* gap from main content */
position: relative;
z-index: 1;
color: var(--container-toc-color);
}
/* Make the inner nav sticky without touching bootstrap-toc styles */
.container-toc-right>nav[id='toc'] {
position: sticky;
top: 6rem;
/* adjust to sit below your header/nav */
max-height: calc(100vh - 7rem);
overflow: auto;
background: var(--container-toc-bg);
border: 1px solid rgba(0, 0, 0, .08);
border-radius: .75rem;
padding: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}
/* Optional: title spacing if you render a heading inside #toc */
.container-toc-right>nav[id='toc']>.toc-title {
margin: 0 0 .5rem 0;
font-weight: 600;
border-bottom: 1px solid rgba(0, 0, 0, .06);
padding-bottom: .5rem;
}
/* Responsive: stack on smaller screens */
@media (max-width: 991.98px) {
.container-toc-right {
float: none;
width: 100%;
margin: 1rem 0;
}
.container-toc-right>nav[id='toc'] {
position: relative;
top: auto;
max-height: 300px;
}
}
/* --- TOC left-rail container (non-invasive) --- */
.container-toc-left {
float: left;
width: 280px;
margin: 0 1.25rem 1.25rem 0;
/* space on right side for main content */
position: relative;
z-index: 1;
color: var(--container-toc-color);
}
/* Make the inner nav sticky without altering bootstrap-toc core styles */
.container-toc-left>nav[id='toc'] {
position: sticky;
top: 6rem;
/* adjust if your site header height differs */
max-height: calc(100vh - 7rem);
overflow: auto;
background: var(--bs-body-bg, #fff);
border: 1px solid rgba(0, 0, 0, .08);
border-radius: .75rem;
padding: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}
/* Optional: TOC title styling */
.container-toc-left>nav[id='toc']>.toc-title {
margin: 0 0 .5rem 0;
font-weight: 600;
border-bottom: 1px solid rgba(0, 0, 0, .06);
padding-bottom: .5rem;
}
/* Responsive: stack under content on smaller screens */
@media (max-width: 991.98px) {
.container-toc-left {
float: none;
width: 100%;
margin: 1rem 0;
}
.container-toc-left>nav[id='toc'] {
position: relative;
top: auto;
max-height: 300px;
}
border-color: var(--input-border-color);
}
.container-below-topbar {
@@ -18288,6 +18187,138 @@ nav[data-toggle=toc] .nav-link.active+ul{
}
.site-title {
color: var(--nav-bg-color);
font-family: 'Osaka', sans-serif;
font-weight: 600;
font-size: 1.5rem;
text-decoration: none;
margin-left: var(--padding-x);
}
.container-header .navbar-brand .site-title {
color: var(--nav-bg-color);
text-decoration: none;
}
.container-header .navbar-brand a {
text-decoration: none;
}
.brand-logo {
text-decoration: none;
}
/* Enhanced search button styling */
.mod-finder__search.input-group button,
.container-search button[type="submit"] {
background-color: var(--color-primary);
color: var(--mainmenu-nav-link-color);
border-color: var(--color-primary);
padding: 0.6rem 1rem;
border-radius: 0 0.25rem 0.25rem 0;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.mod-finder__search.input-group button:hover,
.container-search button[type="submit"]:hover {
background-color: var(--color-hover);
border-color: var(--color-hover);
}
.mod-finder__search.input-group button:focus,
.container-search button[type="submit"]:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
}
/* Enhanced container-search styling */
.container-header .container-search {
position: relative;
}
.container-search .mod-finder__search.input-group {
display: flex;
align-items: stretch;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
overflow: hidden;
transition: box-shadow 0.2s ease-in-out;
}
.container-search .mod-finder__search.input-group:focus-within {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.container-search .form-control,
.container-search .awesomplete input {
border-right: none;
padding: 0.6rem 1rem;
font-size: 0.95rem;
border-radius: 0.25rem 0 0 0.25rem;
}
.container-search .form-control:focus,
.container-search .awesomplete input:focus {
border-color: var(--input-focus-border-color);
box-shadow: none;
}
.container-search button[type="submit"],
.container-search .input-group button {
display: flex;
align-items: center;
justify-content: center;
min-width: 3rem;
font-weight: 500;
}
.container-search .icon-search {
font-size: 1rem;
color: var(--nav-bg-color);
}
/* Responsive header menu and search layout improvements */
@media (max-width: 991.98px) {
.container-header .container-nav {
flex-direction: column;
}
.container-header .container-nav nav {
width: 100%;
margin-bottom: 1rem;
}
.container-header .container-search {
width: 100%;
margin-top: 0.5rem;
}
.mod-finder__search.input-group {
max-width: 100%;
}
}
@media (min-width: 992px) {
.container-header .container-nav {
display: flex;
flex-direction: row;
align-items: center;
gap: 2rem;
}
.container-header .container-nav nav {
flex: 1;
}
.container-header .container-search {
flex: 0 0 auto;
min-width: 300px;
margin-top: 0;
}
}
/* Base renderer for Joomla icon-* using Font Awesome Free */
[class^="icon-"]::before,
[class*=" icon-"]::before {
@@ -18326,3 +18357,201 @@ nav[data-toggle=toc] .nav-link.active+ul{
.icon-check::before { content: "\f00c"; }
.icon-plus::before { content: "\f067"; }
.icon-minus::before { content: "\f068"; }
/* ===== BOOTSTRAP & JOOMLA BUTTONS ===== */
.btn-primary {
--btn-color: white;
--btn-bg: var(--color-primary);
--btn-border-color: var(--color-primary);
--btn-hover-bg: color-mix(in srgb, var(--color-primary) 85%, black);
--btn-hover-border-color: color-mix(in srgb, var(--color-primary) 85%, black);
}
.btn-secondary {
--btn-color: var(--body-bg);
--btn-bg: var(--secondary);
--btn-border-color: var(--secondary);
--btn-hover-bg: color-mix(in srgb, var(--secondary) 85%, black);
--btn-hover-border-color: color-mix(in srgb, var(--secondary) 85%, black);
}
.btn-success {
--btn-color: white;
--btn-bg: var(--success);
--btn-border-color: var(--success);
--btn-hover-bg: color-mix(in srgb, var(--success) 85%, black);
--btn-hover-border-color: color-mix(in srgb, var(--success) 85%, black);
}
.btn-info {
--btn-color: white;
--btn-bg: var(--info);
--btn-border-color: var(--info);
--btn-hover-bg: color-mix(in srgb, var(--info) 85%, black);
--btn-hover-border-color: color-mix(in srgb, var(--info) 85%, black);
}
.btn-warning {
--btn-color: white;
--btn-bg: var(--warning);
--btn-border-color: var(--warning);
--btn-hover-bg: color-mix(in srgb, var(--warning) 85%, black);
--btn-hover-border-color: color-mix(in srgb, var(--warning) 85%, black);
}
.btn-danger {
--btn-color: white;
--btn-bg: var(--danger);
--btn-border-color: var(--danger);
--btn-hover-bg: color-mix(in srgb, var(--danger) 85%, black);
--btn-hover-border-color: color-mix(in srgb, var(--danger) 85%, black);
}
.btn-light {
--btn-color: var(--body-color);
--btn-bg: var(--light);
--btn-border-color: var(--light);
--btn-hover-bg: color-mix(in srgb, var(--light) 90%, black);
--btn-hover-border-color: color-mix(in srgb, var(--light) 90%, black);
}
.btn-dark {
--btn-color: white;
--btn-bg: var(--dark);
--btn-border-color: var(--dark);
--btn-hover-bg: color-mix(in srgb, var(--dark) 85%, black);
--btn-hover-border-color: color-mix(in srgb, var(--dark) 85%, black);
}
/* Outline button variants */
.btn-outline-primary {
--btn-color: var(--color-primary);
--btn-border-color: var(--color-primary);
--btn-hover-color: white;
--btn-hover-bg: var(--color-primary);
--btn-hover-border-color: var(--color-primary);
}
.btn-outline-secondary {
--btn-color: var(--secondary);
--btn-border-color: var(--secondary);
--btn-hover-color: white;
--btn-hover-bg: var(--secondary);
--btn-hover-border-color: var(--secondary);
copilot-pull-request-reviewer[bot] commented 2026-02-07 17:55:40 +00:00 (Migrated from github.com)
Review
Copy Link

.site-title is set to color: var(--nav-bg-color), but the header/nav container also uses background-color: var(--nav-bg-color). This will make the site title text effectively invisible in the header. Use a foreground variable instead (e.g., --nav-text-color / --mainmenu-nav-link-color).

`.site-title` is set to `color: var(--nav-bg-color)`, but the header/nav container also uses `background-color: var(--nav-bg-color)`. This will make the site title text effectively invisible in the header. Use a foreground variable instead (e.g., `--nav-text-color` / `--mainmenu-nav-link-color`).
}
.btn-outline-success {
--btn-color: var(--success);
--btn-border-color: var(--success);
--btn-hover-color: white;
--btn-hover-bg: var(--success);
--btn-hover-border-color: var(--success);
}
.btn-outline-info {
--btn-color: var(--info);
--btn-border-color: var(--info);
--btn-hover-color: white;
--btn-hover-bg: var(--info);
--btn-hover-border-color: var(--info);
}
.btn-outline-warning {
--btn-color: var(--warning);
--btn-border-color: var(--warning);
--btn-hover-color: white;
--btn-hover-bg: var(--warning);
--btn-hover-border-color: var(--warning);
}
.btn-outline-danger {
--btn-color: var(--danger);
--btn-border-color: var(--danger);
--btn-hover-color: white;
--btn-hover-bg: var(--danger);
--btn-hover-border-color: var(--danger);
}
.btn-outline-light {
--btn-color: var(--light);
--btn-border-color: var(--light);
--btn-hover-color: var(--body-color);
--btn-hover-bg: var(--light);
--btn-hover-border-color: var(--light);
}
.btn-outline-dark {
--btn-color: var(--dark);
--btn-border-color: var(--dark);
--btn-hover-color: white;
--btn-hover-bg: var(--dark);
--btn-hover-border-color: var(--dark);
}
/* ===== BOOTSTRAP & JOOMLA ALERTS ===== */
.alert-primary {
--alert-bg: color-mix(in srgb, var(--primary) 10%, var(--body-bg));
--alert-color: color-mix(in srgb, var(--primary) 90%, black);
--alert-border-color: color-mix(in srgb, var(--primary) 20%, var(--body-bg));
}
.alert-secondary {
--alert-bg: color-mix(in srgb, var(--secondary) 10%, var(--body-bg));
--alert-color: color-mix(in srgb, var(--secondary) 90%, black);
--alert-border-color: color-mix(in srgb, var(--secondary) 20%, var(--body-bg));
}
.alert-success {
--alert-bg: color-mix(in srgb, var(--success) 10%, var(--body-bg));
--alert-color: color-mix(in srgb, var(--success) 90%, black);
--alert-border-color: color-mix(in srgb, var(--success) 20%, var(--body-bg));
}
.alert-info {
--alert-bg: color-mix(in srgb, var(--info) 10%, var(--body-bg));
--alert-color: color-mix(in srgb, var(--info) 90%, black);
--alert-border-color: color-mix(in srgb, var(--info) 20%, var(--body-bg));
}
.alert-warning {
copilot-pull-request-reviewer[bot] commented 2026-02-07 17:55:42 +00:00 (Migrated from github.com)
Review
Copy Link

.container-search .icon-search is forced to color: var(--nav-bg-color), which can override the icon color inside the styled submit button (the button text/icon color is otherwise set via color: var(--mainmenu-nav-link-color)). Consider letting the icon inherit from the button (or set it to the same foreground variable) to avoid low-contrast icons.

	color: inherit;
`.container-search .icon-search` is forced to `color: var(--nav-bg-color)`, which can override the icon color inside the styled submit button (the button text/icon color is otherwise set via `color: var(--mainmenu-nav-link-color)`). Consider letting the icon inherit from the button (or set it to the same foreground variable) to avoid low-contrast icons. ```suggestion color: inherit; ```
--alert-bg: color-mix(in srgb, var(--warning) 10%, var(--body-bg));
--alert-color: color-mix(in srgb, var(--warning) 90%, black);
--alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg));
}
.alert-danger {
--alert-bg: color-mix(in srgb, var(--danger) 10%, var(--body-bg));
--alert-color: color-mix(in srgb, var(--danger) 90%, black);
--alert-border-color: color-mix(in srgb, var(--danger) 20%, var(--body-bg));
}
.alert-light {
--alert-bg: var(--light);
--alert-color: var(--body-color);
--alert-border-color: color-mix(in srgb, var(--light) 85%, black);
}
.alert-dark {
--alert-bg: var(--dark);
--alert-color: white;
--alert-border-color: var(--dark);
}
/* Joomla-specific alert mappings */
.alert-message {
--alert-bg: var(--alert-info, color-mix(in srgb, var(--info) 10%, var(--body-bg)));
--alert-color: color-mix(in srgb, var(--info) 90%, black);
--alert-border-color: color-mix(in srgb, var(--info) 20%, var(--body-bg));
}
.alert-error {
--alert-bg: var(--alert-danger, color-mix(in srgb, var(--danger) 10%, var(--body-bg)));
--alert-color: color-mix(in srgb, var(--danger) 90%, black);
--alert-border-color: color-mix(in srgb, var(--danger) 20%, var(--body-bg));
}
.alert-notice {
--alert-bg: var(--alert-warning, color-mix(in srgb, var(--warning) 10%, var(--body-bg)));
--alert-color: color-mix(in srgb, var(--warning) 90%, black);
--alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg));
}

43
src/media/js/template.js
View File

@@ -11,17 +11,12 @@
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/moko-cassiopeia/js/template.js
VERSION: 03.06.01
BRIEF: Consolidated JavaScript for MokoCassiopeia template including theme, TOC, and utilities
BRIEF: Consolidated JavaScript for MokoCassiopeia template including theme and utilities
*/
(function (win, doc) {
"use strict";
// ========================================================================
// BOOTSTRAP TOC (inline minified version)
// ========================================================================
!function(a){"use strict";window.Toc={helpers:{findOrFilter:function(e,t){var n=e.find(t);return e.filter(t).add(n).filter(":not([data-toc-skip])")},generateUniqueIdBase:function(e){return a(e).text().trim().replace(/\'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\\n\t\b\v]/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase()||e.tagName.toLowerCase()},generateUniqueId:function(e){for(var t=this.generateUniqueIdBase(e),n=0;;n++){var r=t;if(0<n&&(r+="-"+n),!document.getElementById(r))return r}},generateAnchor:function(e){if(e.id)return e.id;var t=this.generateUniqueId(e);return e.id=t},createNavList:function(){return a('<ul class="nav navbar-nav"></ul>')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('<a class="nav-link"></a>');n.attr("href","#"+e),n.text(t);var r=a("<li></li>");return r.append(n),r},generateNavItem:function(e){var t=this.generateAnchor(e),n=a(e),r=n.data("toc-text")||n.text();return this.generateNavEl(t,r)},getTopLevel:function(e){for(var t=1;t<=6;t++){if(1<this.findOrFilter(e,"h"+t).length)return t}return 1},getHeadings:function(e,t){var n="h"+t,r="h"+(t+1);return this.findOrFilter(e,n+","+r)},getNavLevel:function(e){return parseInt(e.tagName.charAt(1),10)},populateNav:function(r,a,e){var i,s=r,c=this;e.each(function(e,t){var n=c.generateNavItem(t);c.getNavLevel(t)===a?s=r:i&&s===r&&(s=c.createChildNavList(i)),s.append(n),i=n})},parseOps:function(e){var t;return(t=e.jquery?{$nav:e}:e).$scope=t.$scope||a(document.body),t}},init:function(e){(e=this.helpers.parseOps(e)).$nav.attr("data-toggle","toc");var t=this.helpers.createChildNavList(e.$nav),n=this.helpers.getTopLevel(e.$scope),r=this.helpers.getHeadings(e.$scope,n);this.helpers.populateNav(t,n,r)}},a(function(){a('nav[data-toggle="toc"]').each(function(e,t){var n=a(t);Toc.init(n)})})}(jQuery);
// ========================================================================
// THEME INITIALIZATION (Early theme application)
// ========================================================================
@@ -196,36 +191,21 @@
}
}
/**
* Initialize Bootstrap TOC if #toc element exists.
*/
function initTOC() {
if (typeof win.Toc !== "undefined" && doc.querySelector("#toc")) {
win.Toc.init({
$nav: $("#toc"),
$scope: $("main")
});
}
}
/**
* Initialize offcanvas drawer buttons for left/right drawers.
* Bootstrap handles drawers automatically via data-bs-toggle="offcanvas"
* This function is kept for backwards compatibility but only runs if drawers exist.
*/
function initDrawers() {
var leftBtn = doc.querySelector(".drawer-toggle-left");
var rightBtn = doc.querySelector(".drawer-toggle-right");
if (leftBtn) {
leftBtn.addEventListener("click", function () {
var target = doc.querySelector(leftBtn.getAttribute("data-bs-target"));
if (target && typeof bootstrap !== 'undefined') new bootstrap.Offcanvas(target).show();
});
}
if (rightBtn) {
rightBtn.addEventListener("click", function () {
var target = doc.querySelector(rightBtn.getAttribute("data-bs-target"));
if (target && typeof bootstrap !== 'undefined') new bootstrap.Offcanvas(target).show();
});
// Check if any drawer buttons exist before initializing
var hasDrawers = doc.querySelector(".drawer-toggle-left") || doc.querySelector(".drawer-toggle-right");
if (!hasDrawers) {
return; // No drawers, skip initialization
}
// Bootstrap 5 handles offcanvas automatically via data-bs-toggle attribute
// No manual initialization needed if Bootstrap is loaded correctly
// The buttons already have data-bs-toggle="offcanvas" and data-bs-target="#drawer-*"
}
/**
@@ -305,7 +285,6 @@
win.addEventListener("scroll", handleScroll);
// Init features
initTOC();
initDrawers();
initBackTop();
}

38
src/templates/component.php
View File

@@ -1,5 +1,5 @@
<?php
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
@@ -45,21 +45,6 @@ $params_custom_head_start = $this->params->get('custom_head_start', null);
$params_custom_head_end = $this->params->get('custom_head_end', null);
$params_developmentmode = $this->params->get('developmentmode', false);
// Bootstrap behaviors (assets handled via WAM)
HTMLHelper::_('bootstrap.framework');
HTMLHelper::_('bootstrap.alert');
HTMLHelper::_('bootstrap.button');
HTMLHelper::_('bootstrap.carousel');
HTMLHelper::_('bootstrap.collapse');
HTMLHelper::_('bootstrap.dropdown');
HTMLHelper::_('bootstrap.modal');
HTMLHelper::_('bootstrap.offcanvas');
HTMLHelper::_('bootstrap.popover');
HTMLHelper::_('bootstrap.scrollspy');
HTMLHelper::_('bootstrap.tab');
HTMLHelper::_('bootstrap.tooltip');
HTMLHelper::_('bootstrap.toast');
// Detecting Active Variables
$option = $input->getCmd('option', '');
$view = $input->getCmd('view', '');
@@ -85,14 +70,6 @@ $templatePath = 'media/templates/site/mokocassiopeia';
// Core template CSS
$wa->useStyle('template.base'); // css/template.css
$wa->useStyle('template.vendor.social-media-demo'); // css/user.css
// Optional vendor CSS
$wa->useStyle('vendor.bootstrap-toc');
// Optional demo/showcase CSS (available for use, not loaded by default)
// To use: Add 'template.global.social-media-demo' to your article/module
// $wa->useStyle('template.global.social-media-demo');
// Color theme (light + optional dark)
$colorLightKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName));
@@ -102,28 +79,29 @@ $darkKey = 'template.dark.' . $colorDarkKey;
try {
$wa->useStyle('template.light.colors_standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/global/light/colors_standard.css');
$wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/colors/light/colors_standard.css');
}
try {
$wa->useStyle('template.dark.colors_standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/global/dark/colors_standard.css');
$wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/colors/dark/colors_standard.css');
}
try {
$wa->useStyle($lightKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/light/' . $colorLightKey . '.css');
$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/colors/light/' . $colorLightKey . '.css');
}
try {
$wa->useStyle($darkKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/global/dark/' . $colorDarkKey . '.css');
$wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/colors/dark/' . $colorDarkKey . '.css');
}
// Scripts
$wa->useScript('template.js');
$wa->useScript('theme-init.js');
$wa->useScript('vendor.bootstrap-toc.js');
// Load Osaka font for site title
$wa->useStyle('template.font.osaka');
/**
* VirtueMart detection:

2
src/templates/custom.php
View File

@@ -1,5 +1,5 @@
<?php
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.

57
src/templates/error.php
View File

@@ -1,5 +1,5 @@
<?php
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
@@ -41,23 +41,9 @@ $params_custom_head_start = $params->get('custom_head_start', '');
$params_custom_head_end = $params->get('custom_head_end', '');
$params_developmentmode = $params->get('developmentmode', false);
// Bootstrap behaviors (assets handled via WAM)
HTMLHelper::_('bootstrap.framework');
HTMLHelper::_('bootstrap.loadCss', true);
HTMLHelper::_('bootstrap.alert');
HTMLHelper::_('bootstrap.button');
HTMLHelper::_('bootstrap.carousel');
HTMLHelper::_('bootstrap.collapse');
HTMLHelper::_('bootstrap.dropdown');
HTMLHelper::_('bootstrap.modal');
HTMLHelper::_('bootstrap.offcanvas');
HTMLHelper::_('bootstrap.popover');
HTMLHelper::_('bootstrap.scrollspy');
HTMLHelper::_('bootstrap.tab');
HTMLHelper::_('bootstrap.tooltip');
HTMLHelper::_('bootstrap.toast');
// ------------------ Params ------------------
$fluidContainer = (bool) $params->get('fluidContainer', 0);
$wrapper = $fluidContainer ? 'wrapper-fluid' : 'wrapper-static';
$stickyHeader = (bool) $params->get('stickyHeader', 0);
// Drawer icon params (escaped)
@@ -72,11 +58,7 @@ $templatePath = 'media/templates/site/mokocassiopeia';
// ===========================
// Core template CSS
$wa->useStyle('template.global.base'); // css/template.css
$wa->useStyle('template.global.social-media-demo'); // css/global/social-media-demo.css
// Optional vendor CSS
$wa->useStyle('vendor.bootstrap-toc');
$wa->useStyle('template.base'); // css/template.css
// Color theme (light + optional dark)
$colorLightKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName));
@@ -86,29 +68,35 @@ $darkKey = 'template.dark.' . $colorDarkKey;
try {
$wa->useStyle('template.light.colors_standard');
copilot-pull-request-reviewer[bot] commented 2026-02-07 17:55:42 +00:00 (Migrated from github.com)
Review
Copy Link

$wrapper is computed from fluidContainer but never used anywhere in this file. Either apply it in the error page markup (as done in index.php) or remove it to avoid dead code.
`$wrapper` is computed from `fluidContainer` but never used anywhere in this file. Either apply it in the error page markup (as done in index.php) or remove it to avoid dead code. ```suggestion ```
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/global/light/colors_standard.css');
$wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/colors/light/colors_standard.css');
}
try {
$wa->useStyle('template.dark.colors_standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/global/dark/colors_standard.css');
$wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/colors/dark/colors_standard.css');
}
try {
$wa->useStyle($lightKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/light/' . $colorLightKey . '.css');
$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/colors/light/' . $colorLightKey . '.css');
}
try {
$wa->useStyle($darkKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/global/dark/' . $colorDarkKey . '.css');
$wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/colors/dark/' . $colorDarkKey . '.css');
}
// Scripts
$wa->useScript('template.js');
$wa->useScript('theme-init.js');
$wa->useScript('darkmode-toggle.js');
$wa->useScript('vendor.bootstrap-toc.js');
// Load Osaka font for site title
$wa->useStyle('template.font.osaka');
// Smart Bootstrap component loading - only load what's needed
if ($this->countModules('drawer-left', true) || $this->countModules('drawer-right', true)) {
// Load Bootstrap Offcanvas component for drawers
HTMLHelper::_('bootstrap.offcanvas');
}
// Meta
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');
@@ -169,13 +157,12 @@ if ($logoFile !== '') {
false,
0
);
} elseif ($this->params->get('siteTitle')) {
$brandHtml = '<span class="site-title" title="' . $sitename . '">'
. htmlspecialchars($this->params->get('siteTitle'), ENT_COMPAT, 'UTF-8')
. '</span>';
} else {
// Fallback to a bundled image (relative to media paths)
$brandHtml = HTMLHelper::_('image', 'full_logo.png', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0);
// If no logo file, show the title (defaults to "MokoCassiopeia" if not set)
$siteTitle = $this->params->get('siteTitle', 'MokoCassiopeia');
$brandHtml = '<span class="site-title" title="' . $sitename . '">'
. htmlspecialchars($siteTitle, ENT_COMPAT, 'UTF-8')
. '</span>';
}
// ------------------ Error details ------------------

2
src/templates/html/com_content/article/toc-left.php
View File

@@ -3,7 +3,7 @@
* @package Joomla.Site
* @subpackage Templates.MokoCassiopeia
*
* @copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
* @copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
* @license GNU General Public License version 3 or later; see LICENSE.txt
*
* FILE INFORMATION

2
src/templates/html/com_content/article/toc-right.php
View File

@@ -3,7 +3,7 @@
* @package Joomla.Site
* @subpackage Templates.MokoCassiopeia
*
* @copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
* @copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
* @license GNU General Public License version 3 or later; see LICENSE.txt
*
* FILE INFORMATION

47
src/templates/index.php
View File

@@ -1,5 +1,5 @@
<?php
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
@@ -61,22 +61,7 @@ $params_developmentmode = $this->params->get('developmentmode', false);
$params_theme_enabled = $this->params->get('theme_enabled', 1);
$params_theme_fab_enabled = $this->params->get('theme_fab_enabled', 1);
$params_theme_fab_pos = $this->params->get('theme_fab_pos', 'br');
/*
// Bootstrap behaviors (assets handled via WAM)
HTMLHelper::_('bootstrap.framework');
HTMLHelper::_('bootstrap.alert');
HTMLHelper::_('bootstrap.button');
HTMLHelper::_('bootstrap.carousel');
HTMLHelper::_('bootstrap.collapse');
HTMLHelper::_('bootstrap.dropdown');
HTMLHelper::_('bootstrap.modal');
HTMLHelper::_('bootstrap.offcanvas');
HTMLHelper::_('bootstrap.popover');
HTMLHelper::_('bootstrap.scrollspy');
HTMLHelper::_('bootstrap.tab');
HTMLHelper::_('bootstrap.tooltip');
HTMLHelper::_('bootstrap.toast');
*/
// Detecting Active Variables
$option = $input->getCmd('option', '');
$view = $input->getCmd('view', '');
@@ -112,30 +97,33 @@ $darkKey = 'template.dark.' . $colorDarkKey;
try {
$wa->useStyle('template.light.colors_standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/global/light/colors_standard.css');
$wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/colors/light/colors_standard.css');
}
try {
$wa->useStyle('template.dark.colors_standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/global/dark/colors_standard.css');
$wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/colors/dark/colors_standard.css');
}
try {
$wa->useStyle($lightKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/light/' . $colorLightKey . '.css');
$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/colors/light/' . $colorLightKey . '.css');
}
try {
$wa->useStyle($darkKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/global/dark/' . $colorDarkKey . '.css');
$wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/colors/dark/' . $colorDarkKey . '.css');
}
// Scripts
$wa->useScript('template.js');
// Load Osaka font for site title
$wa->useStyle('template.font.osaka');
// Load GTM script if GTM is enabled
if (!empty($params_googletagmanager) && !empty($params_googletagmanagerid)) {
$wa->useScript('gtm.js');
@@ -205,13 +193,12 @@ if ($logoFile !== '') {
false,
0
);
} elseif ($this->params->get('siteTitle')) {
$brandHtml = '<span class="site-title" title="' . $sitename . '">'
. htmlspecialchars($this->params->get('siteTitle'), ENT_COMPAT, 'UTF-8')
. '</span>';
} else {
// Fallback to a bundled image (relative to media paths)
$brandHtml = HTMLHelper::_('image', 'full_logo.png', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0);
// If no logo file, show the title (defaults to "MokoCassiopeia" if not set)
$siteTitle = $this->params->get('siteTitle', 'MokoCassiopeia');
$brandHtml = '<span class="site-title" title="' . $sitename . '">'
. htmlspecialchars($siteTitle, ENT_COMPAT, 'UTF-8')
. '</span>';
}
// Layout flags
@@ -221,6 +208,12 @@ if ($this->countModules('sidebar-right', true)) { $hasClass .= ' has-sidebar-rig
if ($this->countModules('drawer-left', true)) { $hasClass .= ' has-drawer-left'; }
if ($this->countModules('drawer-right', true)) { $hasClass .= ' has-drawer-right'; }
// Smart Bootstrap component loading - only load what's needed
if ($this->countModules('drawer-left', true) || $this->countModules('drawer-right', true)) {
// Load Bootstrap Offcanvas component for drawers
HTMLHelper::_('bootstrap.offcanvas');
}
// Container
$wrapper = $this->params->get('fluidContainer') ? 'wrapper-fluid' : 'wrapper-static';
$stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : '';

20
src/templates/joomla.asset.json
View File

@@ -4,7 +4,7 @@
"description": "MokoCassiopeia template assets",
"license": "GPL-3.0-or-later",
"x-header": {
"copyright_year": 2025,
"copyright_year": 2026,
"author": "Jonathan Miller",
"owner": "Moko Consulting",
"contact": "hello@mokoconsulting.tech",
@@ -46,6 +46,12 @@
"uri": "media/templates/site/mokocassiopeia/css/user.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.font.osaka",
"type": "style",
"uri": "media/templates/site/mokocassiopeia/css/fonts/osaka.css",
"attributes": {"media": "all"}
},
{
"name": "template.editor",
"type": "style",
@@ -70,18 +76,6 @@
"uri": "media/templates/site/mokocassiopeia/css/colors/light/colors_standard.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_alternative",
"type": "style",
"uri": "media/templates/site/mokocassiopeia/css/colors/light/colors_alternative.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_alternative.min",
"type": "style",
"uri": "media/templates/site/mokocassiopeia/css/colors/light/colors_alternative.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.light.colors_custom",
"type": "style",

2
src/templates/offline.php
View File

@@ -1,5 +1,5 @@
<?php
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.

26
src/templates/templateDetails.xml
View File

@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- =========================================================================
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
This file is part of a Moko Consulting project.
@@ -35,12 +35,12 @@
https://mokoconsulting.tech/index.php?option=com_ars&amp;view=update&amp;task=stream&amp;format=xml&amp;id=1
</server>
</updateservers>
<name>mokocassiopeia</name>
<name>MokoCassiopeia</name>
<version>03.06.03</version>
<creationDate>2025-12-23</creationDate>
<creationDate>2026-01-30</creationDate>
<author>Jonathan Miller || Moko Consulting</author>
<authorEmail>hello@mokoconsulting.tech</authorEmail>
<copyright>(C)GNU General Public License Version 3 - 2025 Moko Consulting</copyright>
<copyright>(C)GNU General Public License Version 3 - 2026 Moko Consulting</copyright>
<description>TPL_MOKOCASSIOPEIA_XML_DESCRIPTION</description>
<inheritable>1</inheritable>
<files>
@@ -114,7 +114,7 @@
</fieldset>
<!-- Google tab -->
<fieldset name="google">
<fieldset name="google" label="TPL_MOKOCASSIOPEIA_GOOGLE_FIELDSET_LABEL">
<field name="googletagmanager" type="radio" label="TPL_MOKOCASSIOPEIA_GOOGLETAGMANAGER_LABEL" description="TPL_MOKOCASSIOPEIA_GOOGLETAGMANAGER_DESC" layout="joomla.form.field.radio.switcher" filter="boolean">
<option value="0">JNO</option>
<option value="1">JYES</option>
@@ -134,7 +134,7 @@
</fieldset>
<!-- Drawers tab -->
<fieldset name="drawers">
<fieldset name="drawers" label="TPL_MOKOCASSIOPEIA_DRAWERS_FIELDSET_LABEL">
<field name="drawerLeftIcon" type="text" default="fa-solid fa-chevron-right" label="TPL_MOKOCASSIOPEIA_DRAWER_LEFT_ICON_LABEL" description="TPL_MOKOCASSIOPEIA_DRAWER_LEFT_ICON_DESC" filter="string" />
<field name="drawerRightIcon" type="text" default="fa-solid fa-chevron-left" label="TPL_MOKOCASSIOPEIA_DRAWER_RIGHT_ICON_LABEL" description="TPL_MOKOCASSIOPEIA_DRAWER_RIGHT_ICON_DESC" filter="string" />
</fieldset>
@@ -189,23 +189,21 @@
<!-- Variables & Palettes -->
<field name="theme_sep_vars" type="spacer" label="Variables &amp; Palettes" hr="false" class="text fw-bold" />
<field name="colorLightName" type="list" label="TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL" default="colors_standard">
<field name="colorLightName" type="list" label="TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_LABEL" hint="TPL_MOKOCASSIOPEIA_COLOR_LIGHT_NAME_DESC" default="colors_standard">
<option value="colors_standard">TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD</option>
<option value="colors_alternative">TPL_MOKOCASSIOPEIA_COLOR_NAME_ALTERNATIVE</option>
<option value="colors_custom">TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM</option>
</field>
<field name="colorDarkName" type="list" label="TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL" default="colors_standard">
<field name="colorDarkName" type="list" label="TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_LABEL" hint="TPL_MOKOCASSIOPEIA_COLOR_DARK_NAME_DESC" default="colors_standard">
<option value="colors_standard">TPL_MOKOCASSIOPEIA_COLOR_NAME_STANDARD</option>
<option value="colors_alternative">TPL_MOKOCASSIOPEIA_COLOR_NAME_ALTERNATIVE</option>
<option value="colors_custom">TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM</option>
</field>
<!-- Typography -->
<field name="theme_sep_typo" type="spacer" label="Typography" hr="false" class="text fw-bold" />
<field name="useFontScheme" type="groupedlist" label="TPL_MOKOCASSIOPEIA_FONT_LABEL" default="0">
<field name="useFontScheme" type="groupedlist" label="TPL_MOKOCASSIOPEIA_FONT_LABEL" description="TPL_MOKOCASSIOPEIA_FONT_LABEL_DESC" default="media/templates/site/mokocassiopeia/css/colors/fonts-local_roboto.css">
<option value="0">JNONE</option>
<group label="TPL_MOKOCASSIOPEIA_FONT_GROUP_LOCAL">
<option value="media/templates/site/mokocassiopeia/css/global/fonts-local_roboto.css">Roboto (local)</option>
<option value="media/templates/site/mokocassiopeia/css/colors/fonts-local_roboto.css">Roboto (local)</option>
</group>
<group label="TPL_MOKOCASSIOPEIA_FONT_GROUP_WEB">
<option value="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;300;400;700&amp;display=swap">Fira Sans (web)</option>
@@ -220,8 +218,8 @@
<option value="0">JNO</option>
<option value="1">JYES</option>
</field>
<field name="logoFile" type="media" default="media/templates/site/mokocassiopeia/images/logo.svg" label="TPL_MOKOCASSIOPEIA_LOGO_LABEL" showon="brand:1" />
<field name="siteTitle" type="text" default="" label="TPL_MOKOCASSIOPEIA_TITLE" filter="string" showon="brand:1" />
<field name="logoFile" type="media" label="TPL_MOKOCASSIOPEIA_LOGO_LABEL" showon="brand:1" />
<field name="siteTitle" type="text" default="MokoCassiopeia" label="TPL_MOKOCASSIOPEIA_TITLE" filter="string" showon="brand:1" />
<field name="siteDescription" type="text" default="" label="TPL_MOKOCASSIOPEIA_TAGLINE_LABEL" description="TPL_MOKOCASSIOPEIA_TAGLINE_DESC" filter="string" showon="brand:1" />
<field name="fA6KitCode" type="text" default="" label="TPL_MOKOCASSIOPEIA_FA7KITCODE_LABEL" description="TPL_MOKOCASSIOPEIA_FA7KITCODE_DESC" filter="string" />

424
templates/colors_custom.css Normal file
View File

@@ -0,0 +1,424 @@
@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.Templates
PATH: ./templates/colors_custom_dark.css
VERSION: 03.06.03
BRIEF: Template for custom dark mode color definitions
# USAGE INSTRUCTIONS
1. Copy this file to:
`media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css`
or
`media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css` `
2. Customize the CSS variables below to match your brand colors for dark mode
3. In Joomla admin, go to System → Site Templates → MokoCassiopeia
4. Under Theme tab, set "Dark Mode Palette" to "Custom"
5. Save and view your site in dark mode to see the custom colors
copilot-pull-request-reviewer[bot] commented 2026-02-07 17:55:40 +00:00 (Migrated from github.com)
Review
Copy Link

File header/usage text is inconsistent with the actual file: the PATH/BRIEF still reference a dark-only filename, and the light palette copy-path line has a stray trailing backtick. Please update the header and instructions to match templates/colors_custom.css and remove the stray character to avoid confusing users following the copy instructions.

 PATH: ./templates/colors_custom.css
 VERSION: 03.06.03
 BRIEF: Template for custom color definitions (copy for dark or light palettes)
 
 # USAGE INSTRUCTIONS
 1. Copy this file to:
     `media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css`
     or
     `media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css`
 2. Customize the CSS variables below to match your brand colors for the selected palette
 3. In Joomla admin, go to System → Site Templates → MokoCassiopeia
 4. Under Theme tab, set the corresponding "Dark Mode Palette" or "Light Mode Palette" to "Custom"
 5. Save and view your site with the selected palette to see the custom colors
File header/usage text is inconsistent with the actual file: the PATH/BRIEF still reference a dark-only filename, and the light palette copy-path line has a stray trailing backtick. Please update the header and instructions to match `templates/colors_custom.css` and remove the stray character to avoid confusing users following the copy instructions. ```suggestion PATH: ./templates/colors_custom.css VERSION: 03.06.03 BRIEF: Template for custom color definitions (copy for dark or light palettes) # USAGE INSTRUCTIONS 1. Copy this file to: `media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css` or `media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css` 2. Customize the CSS variables below to match your brand colors for the selected palette 3. In Joomla admin, go to System → Site Templates → MokoCassiopeia 4. Under Theme tab, set the corresponding "Dark Mode Palette" or "Light Mode Palette" to "Custom" 5. Save and view your site with the selected palette to see the custom colors ```
NOTE: This file is excluded from version control (.gitignore) to prevent
fork-specific customizations from being committed to the repository.
*/
/* -----------------------------------------------
* CUSTOM DARK THEME
* --------------------------------------------- */
:root[data-bs-theme='dark']{
color-scheme: dark;
/* ===== BRAND & THEME COLORS ===== */
--color-primary: #112855;
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #6fb3ff;
copilot-pull-request-reviewer[bot] commented 2026-02-07 17:55:41 +00:00 (Migrated from github.com)
Review
Copy Link

The custom palette template instructs users to copy this file for both light and dark custom palettes, but the file only defines variables under :root[data-bs-theme='dark']. If copied to the light palette location, it will have no effect in light mode. Consider including both a light and dark :root block in this template (or provide separate light/dark template files and update the instructions accordingly).

The custom palette template instructs users to copy this file for both light and dark custom palettes, but the file only defines variables under :root[data-bs-theme='dark']. If copied to the light palette location, it will have no effect in light mode. Consider including both a light and dark :root block in this template (or provide separate light/dark template files and update the instructions accordingly).
/* ===== 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;
--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;
/* ===== 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;
/* ===== 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: ;
--container-below-topbar-bg-color: ;
--container-below-topbar-bg-position: center;
--container-below-topbar-bg-attachment: fixed;
--container-below-topbar-bg-repeat: no-repeat;
--container-below-topbar-bg-size: cover;
--container-below-topbar-border: ;
--container-below-topbar-border-radius: ;
/* Top A Container */
--container-top-a-bg-image: ;
--container-top-a-bg-color: ;
--container-top-a-bg-position: center;
--container-top-a-bg-attachment: fixed;
--container-top-a-bg-repeat: no-repeat;
--container-top-a-bg-size: cover;
--container-top-a-border: ;
--container-top-a-border-radius: ;
/* Top B Container */
--container-top-b-bg-image: ;
--container-top-b-bg-color: ;
--container-top-b-bg-position: center;
--container-top-b-bg-attachment: fixed;
--container-top-b-bg-repeat: no-repeat;
--container-top-b-bg-size: cover;
--container-top-b-border: ;
--container-top-b-border-radius: ;
/* TOC Container */
--container-toc-bg: ;
--container-toc-color: #dbe3ff;
/* Sidebar Container */
--container-sidebar-bg-image: ;
--container-sidebar-bg-color: ;
--container-sidebar-bg-position: center;
--container-sidebar-bg-attachment: scroll;
--container-sidebar-bg-repeat: repeat;
--container-sidebar-bg-size: auto;
--container-sidebar-border: ;
--container-sidebar-border-radius: ;
/* Bottom A Container */
--container-bottom-a-bg-image: ;
--container-bottom-a-bg-color: ;
--container-bottom-a-bg-position: center;
--container-bottom-a-bg-attachment: fixed;
--container-bottom-a-bg-repeat: no-repeat;
--container-bottom-a-bg-size: cover;
--container-bottom-a-border: ;
--container-bottom-a-border-radius: ;
/* Bottom B Container */
--container-bottom-b-bg-image: ;
--container-bottom-b-bg-color: ;
--container-bottom-b-bg-position: center;
--container-bottom-b-bg-attachment: fixed;
--container-bottom-b-bg-repeat: no-repeat;
--container-bottom-b-bg-size: cover;
--container-bottom-b-border: ;
--container-bottom-b-border-radius: ;
/* ===== 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-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;
--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;
}

245
templates/colors_custom_dark.css
View File

@@ -1,245 +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.Templates
PATH: ./templates/colors_custom_dark.css
VERSION: 03.06.03
BRIEF: Template for custom dark mode color definitions
# USAGE INSTRUCTIONS
1. Copy this file to: media/templates/site/mokocassiopeia/css/colors/dark/colors_custom.css
2. Customize the CSS variables below to match your brand colors for dark mode
3. In Joomla admin, go to System → Site Templates → MokoCassiopeia
4. Under Theme tab, set "Dark Mode Palette" to "Custom"
5. Save and view your site in dark mode to see the custom colors
NOTE: This file is excluded from version control (.gitignore) to prevent
fork-specific customizations from being committed to the repository.
*/
/* -----------------------------------------------
* CUSTOM DARK THEME
* --------------------------------------------- */
:root[data-bs-theme='dark']{
/* System hint for native widgets */
color-scheme: dark;
/* ===== PRIMARY BRAND COLORS ===== */
/* Main brand color used throughout the template */
--color-primary: #112855;
/* Accent colors for interactive elements */
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #6fb3ff;
/* ===== LINK COLORS ===== */
/* Color for hyperlinks in dark mode */
--color-link: white;
/* Color when hovering over links */
--color-hover: gray;
/* Active link color */
--color-active: var(--mainmenu-nav-link-color);
/* ===== NAVIGATION ===== */
/* Text color in main menu */
--mainmenu-nav-link-color: #fff;
/* Background color for navigation */
--nav-text-color: gray;
--nav-bg-color: var(--color-primary);
/* ===== HEADER BACKGROUND ===== */
/* Background image for header section (same as light mode) */
--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: ;
--container-below-topbar-bg-color: ;
--container-below-topbar-bg-position: center;
--container-below-topbar-bg-attachment: fixed;
--container-below-topbar-bg-repeat: no-repeat;
--container-below-topbar-bg-size: cover;
--container-below-topbar-border: ;
--container-below-topbar-border-radius: ;
/* Top A Container */
--container-top-a-bg-image: ;
--container-top-a-bg-color: ;
--container-top-a-bg-position: center;
--container-top-a-bg-attachment: fixed;
--container-top-a-bg-repeat: no-repeat;
--container-top-a-bg-size: cover;
--container-top-a-border: ;
--container-top-a-border-radius: ;
/* Top B Container */
--container-top-b-bg-image: ;
--container-top-b-bg-color: ;
--container-top-b-bg-position: center;
--container-top-b-bg-attachment: fixed;
--container-top-b-bg-repeat: no-repeat;
--container-top-b-bg-size: cover;
--container-top-b-border: ;
--container-top-b-border-radius: ;
/* Table of Contents Container */
--container-toc-bg: ;
--container-toc-color: #dbe3ff;
/* Sidebar Container */
--container-sidebar-bg-image: ;
--container-sidebar-bg-color: ;
--container-sidebar-bg-position: center;
--container-sidebar-bg-attachment: scroll;
--container-sidebar-bg-repeat: repeat;
--container-sidebar-bg-size: auto;
--container-sidebar-border: ;
--container-sidebar-border-radius: ;
/* Bottom A Container */
--container-bottom-a-bg-image: ;
--container-bottom-a-bg-color: ;
--container-bottom-a-bg-position: center;
--container-bottom-a-bg-attachment: fixed;
--container-bottom-a-bg-repeat: no-repeat;
--container-bottom-a-bg-size: cover;
--container-bottom-a-border: ;
--container-bottom-a-border-radius: ;
/* Bottom B Container */
--container-bottom-b-bg-image: ;
--container-bottom-b-bg-color: ;
--container-bottom-b-bg-position: center;
--container-bottom-b-bg-attachment: fixed;
--container-bottom-b-bg-repeat: no-repeat;
--container-bottom-b-bg-size: cover;
--container-bottom-b-border: ;
--container-bottom-b-border-radius: ;
/* ===== BOOTSTRAP 5 COLOR PALETTE (Dark Mode) ===== */
/* Lightened colors for dark mode visibility */
--blue: #91a4ff;
--black: #000;
--indigo: #b19cff;
--purple: #c0a5ff;
--pink: #ff8fc0;
--red: #ff7a73;
--orange: #ff9c4d;
--yellow: #ffd166;
--green: #78d694;
--teal: #76e3ff;
--cyan: #6fb7ff;
--white: #fff;
/* Gray scale tuned for dark mode */
--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;
/* Contextual colors (adjusted for dark backgrounds) */
--primary: #010156;
--secondary: #48525d;
--success: #4aa664;
--info: #4f7aa0;
--warning: #c77a00;
--danger: #c23a31;
--light: #1b2027;
--dark: #0f1318;
/* ===== BODY & TYPOGRAPHY ===== */
--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
--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;
/* ===== ADDITIONAL THEME COLORS ===== */
--muted-color: #6d757e;
--hr-color: var(--border-color, #dfe3e7);
--link-active-color: var(--link-color);
--code-color: #ff7abd;
--code-color-ink: var(--code-color, #e93f8e);
--border-color-soft: var(--border-color, #dfe3e7);
--kbd-bg: var(--secondary-bg, #eaedf0);
--kbd-ink: var(--body-bg, #fff);
--toc-bg: var(--secondary-bg, #eaedf0);
--toc-ink: var(--color-primary, #112855);
--selection-bg: var(--highlight-bg, #fbeea8);
--selection-ink: var(--body-color, #22262a);
--emphasis-color: #fff;
--emphasis-color-rgb: 255, 255, 255;
--secondary-color: #e6ebf1bf;
--secondary-color-rgb: 230, 235, 241;
--secondary-bg: #151b22;
--secondary-bg-rgb: 21, 27, 34;
--tertiary-color: #e6ebf180;
--tertiary-color-rgb: 230, 235, 241;
--tertiary-bg: #10151b;
--tertiary-bg-rgb: 16, 21, 27;
--heading-color: #f1f5f9;
--link-color: #8ab4f8;
--link-color-rgb: 138, 180, 248;
--link-decoration: underline;
--link-hover-color: #c3d6ff;
--link-hover-color-rgb: 195, 214, 255;
--highlight-color: #111;
--highlight-bg: #ffe28a1a;
/* ===== BORDERS & SHADOWS ===== */
--border: 5px;
--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-pill: 50rem;
--box-shadow: 0 .5rem 1rem #00000066;
--box-shadow-sm: 0 .125rem .25rem #00000040;
--box-shadow-lg: 0 1rem 3rem #00000080;
--box-shadow-inset: inset 0 1px 2px #00000040;
/* ===== FORM COLORS ===== */
--focus-ring-width: .25rem;
--focus-ring-opacity: .6;
--focus-ring-color: #5472ff66;
--form-valid-color: #78d694;
--form-valid-border-color: #78d694;
--form-invalid-color: #ff8e86;
--form-invalid-border-color: #ff8e86;
}

227
templates/colors_custom_light.css
View File

@@ -1,227 +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.Templates
PATH: ./templates/colors_custom_light.css
VERSION: 03.06.03
BRIEF: Template for custom light mode color definitions
# USAGE INSTRUCTIONS
1. Copy this file to: media/templates/site/mokocassiopeia/css/colors/light/colors_custom.css
2. Customize the CSS variables below to match your brand colors
3. In Joomla admin, go to System → Site Templates → MokoCassiopeia
4. Under Theme tab, set "Light Mode Palette" to "Custom"
5. Save and view your site to see the custom colors
NOTE: This file is excluded from version control (.gitignore) to prevent
fork-specific customizations from being committed to the repository.
*/
/* -----------------------------------------------
* CUSTOM LIGHT THEME
* --------------------------------------------- */
:root[data-bs-theme="light"] {
color-scheme: light;
/* ===== PRIMARY BRAND COLORS ===== */
/* Main brand color used throughout the template */
--color-primary: #112855;
/* Accent colors for interactive elements */
--accent-color-primary: #3f8ff0;
--accent-color-secondary: #3f8ff0;
/* ===== LINK COLORS ===== */
/* Color for hyperlinks */
--color-link: #224FAA;
/* Color when hovering over links */
--color-hover: var(--accent-color-primary);
/* ===== NAVIGATION ===== */
/* Text color in main menu */
--mainmenu-nav-link-color: white;
/* Background color for navigation */
--nav-text-color: white;
--nav-bg-color: var(--color-link);
/* ===== HEADER BACKGROUND ===== */
/* Background image for header section */
--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: ;
--container-below-topbar-bg-color: ;
--container-below-topbar-bg-position: center;
--container-below-topbar-bg-attachment: fixed;
--container-below-topbar-bg-repeat: repeat;
--container-below-topbar-bg-size: auto;
--container-below-topbar-border: ;
--container-below-topbar-border-radius: ;
/* Top A Container */
--container-top-a-bg-image: ;
--container-top-a-bg-color: ;
--container-top-a-bg-position: center;
--container-top-a-bg-attachment: fixed;
--container-top-a-bg-repeat: repeat;
--container-top-a-bg-size: auto;
--container-top-a-border: ;
--container-top-a-border-radius: ;
/* Top B Container */
--container-top-b-bg-image: ;
--container-top-b-bg-color: ;
--container-top-b-bg-position: center;
--container-top-b-bg-attachment: fixed;
--container-top-b-bg-repeat: repeat;
--container-top-b-bg-size: auto;
--container-top-b-border: ;
--container-top-b-border-radius: ;
/* Table of Contents Container */
--container-toc-bg: var(--mainmenu-nav-link-color);
--container-toc-color: var(--color-primary);
/* Sidebar Container */
--container-sidebar-bg-image: ;
--container-sidebar-bg-color: ;
--container-sidebar-bg-position: center;
--container-sidebar-bg-attachment: scroll;
--container-sidebar-bg-repeat: repeat;
--container-sidebar-bg-size: auto;
--container-sidebar-border: ;
--container-sidebar-border-radius: ;
/* Bottom A Container */
--container-bottom-a-bg-image: ;
--container-bottom-a-bg-color: ;
--container-bottom-a-bg-position: center;
--container-bottom-a-bg-attachment: fixed;
--container-bottom-a-bg-repeat: repeat;
--container-bottom-a-bg-size: auto;
--container-bottom-a-border: ;
--container-bottom-a-border-radius: ;
/* Bottom B Container */
--container-bottom-b-bg-image: ;
--container-bottom-b-bg-color: ;
--container-bottom-b-bg-position: center;
--container-bottom-b-bg-attachment: fixed;
--container-bottom-b-bg-repeat: repeat;
--container-bottom-b-bg-size: auto;
--container-bottom-b-border: ;
--container-bottom-b-border-radius: ;
/* ===== BOOTSTRAP 5 COLOR PALETTE ===== */
/* Standard Bootstrap color variables */
--blue: #010156;
--black: #000;
--indigo: #6812f3;
--purple: #6f42c2;
--pink: #e93f8e;
--red: #a51f18;
--orange: #fd7e17;
--yellow: #ad6200;
--green: #448344;
--teal: #5abfdd;
--cyan: #30638d;
--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;
/* Contextual colors */
--primary: #010156;
--secondary: #6d757e;
--success: #448344;
--info: #30638d;
--warning: #ad6200;
--danger: #a51f18;
--light: #f9fafb;
--dark: #353b41;
/* ===== BODY & TYPOGRAPHY ===== */
--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--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;
/* ===== ADDITIONAL THEME COLORS ===== */
--muted-color: #6d757e;
--hr-color: var(--border-color, #dfe3e7);
--link-active-color: var(--link-color);
--code-color: #e93f8e;
--code-color-ink: var(--code-color, #e93f8e);
--border-color-soft: var(--border-color, #dfe3e7);
--kbd-bg: var(--secondary-bg, #eaedf0);
--kbd-ink: var(--body-bg, #fff);
--toc-bg: var(--secondary-bg, #eaedf0);
--toc-ink: var(--color-primary, #112855);
--selection-bg: var(--highlight-bg, #fbeea8);
--selection-ink: var(--body-color, #22262a);
--emphasis-color: #000;
--emphasis-color-rgb: 0, 0, 0;
--secondary-color: #22262abf;
--secondary-bg: #eaedf0;
--tertiary-color: #22262a80;
--tertiary-bg: #f9fafb;
--heading-color: inherit;
--link-color: #224faa;
--link-color-rgb: 34, 79, 170;
--link-decoration: underline;
--link-hover-color: #424077;
--link-hover-color-rgb: 66, 64, 119;
--highlight-color: #22262a;
--highlight-bg: #fbeea8;
/* ===== BORDERS & SHADOWS ===== */
--border: 5px;
--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-pill: 50rem;
--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;
/* ===== FORM COLORS ===== */
--focus-ring-width: .25rem;
--focus-ring-opacity: .25;
--focus-ring-color: #01015640;
--form-valid-color: #448344;
--form-valid-border-color: #448344;
--form-invalid-color: #a51f18;
--form-invalid-border-color: #a51f18;
}