From 886262cdc1c4108886e43d0a60f1492de22fded6 Mon Sep 17 00:00:00 2001 From: Jonathan Miller Date: Wed, 20 Aug 2025 01:12:59 -0500 Subject: [PATCH] v1.15 Added CSS theme seletor (dark/light) --- language/en-GB/tpl_moko-cassiopeia.ini | 16 +- language/en-GB/tpl_moko-cassiopeia.sys.ini | 16 +- language/en-US/tpl_moko-cassiopeia.ini | 16 +- language/en-US/tpl_moko-cassiopeia.sys.ini | 15 +- .../css/global/colors_alternative.css | 1085 ++++++++++------ .../css/global/colors_standard.css | 1125 +++++++++++------ .../site/moko-cassiopeia/css/template.css | 17 +- .../css/vendor/afeld/bootstrap-toc.min.css | 4 + .../moko-cassiopeia/images/teaser_bg_sm.png | Bin 979 -> 2090 bytes .../templates/site/moko-cassiopeia/index.html | 2 + .../js/mod_gabble/gabble_com.js | 2 + .../js/mod_menu/menu-metismenu-es5.js | 2 + .../js/mod_menu/menu-metismenu.js | 2 + .../site/moko-cassiopeia/js/template.js | 2 + .../js/vendor/afeld/bootstrap-toc.min.js | 3 +- readme.md | 81 +- templates/moko-cassiopeia/component.php | 2 + templates/moko-cassiopeia/custom.php | 3 +- templates/moko-cassiopeia/error.php | 2 + .../html/com_contact/contact/default.php | 5 +- .../html/com_contact/default.php | 177 +++ .../html/com_content/article/toc-left.php | 2 + .../html/com_content/article/toc-right.php | 2 + .../html/com_content/categories/default.php | 2 + .../com_content/categories/default_items.php | 2 + .../html/com_content/category/blog.php | 2 + .../com_content/category/blog_children.php | 2 + .../html/com_content/category/blog_item.php | 2 + .../html/com_content/category/blog_links.php | 2 + .../html/com_content/category/default.php | 2 + .../com_content/category/default_articles.php | 2 + .../com_content/category/default_children.php | 2 + .../html/com_content/featured/default.php | 2 + .../com_content/featured/default_item.php | 2 + .../com_content/featured/default_links.php | 2 + .../html/com_engage/comments/default.php | 3 +- .../html/com_engage/comments/default_form.php | 3 +- .../html/com_engage/comments/default_list.php | 2 + .../com_engage/comments/default_login.php | 3 +- .../common/accordion_plans.php | 2 + .../html/com_osmembership/common/batch.php | 2 + .../com_osmembership/common/batch_nocheck.php | 2 + .../com_osmembership/common/categories.php | 2 + .../com_osmembership/common/columns_plans.php | 7 +- .../com_osmembership/common/default_plans.php | 2 + .../com_osmembership/common/group_members.php | 2 + .../common/paymentredirect.php | 2 + .../common/plan_custom_fields.php | 3 +- .../common/plan_information.php | 2 + .../com_osmembership/common/priceduration.php | 2 + .../common/pricingtable_circle_plans.php | 3 +- .../common/pricingtable_flat_plans.php | 2 + .../common/pricingtable_plans.php | 2 + .../com_osmembership/common/renew_options.php | 2 + .../common/restrictionmsg.php | 2 + .../common/subscriptions_history.php | 2 + .../common/subscriptions_pdf.php | 3 +- .../common/upgrade_options.php | 2 + .../html/com_osmembership/mplan/default.php | 2 + .../mplan/default_advanced_settings.php | 2 + .../mplan/default_general.php | 2 + .../mplan/default_group_membership.php | 2 + .../mplan/default_member_card.php | 2 + .../mplan/default_messages.php | 3 +- .../mplan/default_metadata.php | 3 +- .../mplan/default_recurring_settings.php | 2 + .../mplan/default_reminder_messages.php | 2 + .../mplan/default_reminders_settings.php | 2 + .../mplan/default_renew_options.php | 2 + .../mplan/default_renewal_discounts.php | 2 + .../mplan/default_translation.php | 2 + .../mplan/default_upgrade_options.php | 2 + .../html/com_osmembership/mplans/default.php | 3 +- .../mplans/default_search_bar.bootstrap4.php | 2 + .../mplans/default_search_bar.php | 2 + .../html/com_osmembership/plan/default.php | 3 +- .../plan/default_renew_upgrade.php | 2 + .../html/com_osmembership/plans/columns.php | 3 +- .../html/com_osmembership/plans/default.php | 3 +- .../com_osmembership/plans/pricingtable.php | 3 +- .../plans/pricingtablecircle.php | 3 +- .../plans/pricingtableflat.php | 3 +- .../html/layouts/chromes/card.php | 2 + .../html/layouts/chromes/html5.php | 2 + .../html/layouts/chromes/noCard.php | 2 + .../html/mod_custom/banner.php | 2 + .../moko-cassiopeia/html/mod_custom/hero.php | 2 + .../html/mod_gabble/default.php | 28 +- .../html/mod_menu/collapse-metismenu.php | 2 + .../html/mod_menu/dropdown-metismenu.php | 2 + .../mod_menu/dropdown-metismenu_component.php | 2 + .../mod_menu/dropdown-metismenu_heading.php | 2 + .../mod_menu/dropdown-metismenu_separator.php | 2 + .../html/mod_menu/dropdown-metismenu_url.php | 2 + .../html/mod_virtuemart_cart/default.php | 3 +- .../html/mod_virtuemart_cart/dropdown.php | 3 +- .../html/mod_virtuemart_category/all.php | 3 +- .../html/mod_virtuemart_category/current.php | 3 +- .../html/mod_virtuemart_category/default.php | 3 +- .../html/mod_virtuemart_category/wall.php | 3 +- .../mod_virtuemart_currencies/default.php | 3 +- .../mod_virtuemart_manufacturer/default.php | 3 +- .../html/mod_virtuemart_product/default.php | 3 +- .../html/mod_virtuemart_search/default.php | 3 +- .../moko-cassiopeia/html/tinymce/index.html | 5 +- templates/moko-cassiopeia/index.php | 538 ++++---- templates/moko-cassiopeia/offline.php | 2 + templates/moko-cassiopeia/templateDetails.xml | 93 +- 108 files changed, 2245 insertions(+), 1192 deletions(-) create mode 100644 media/templates/site/moko-cassiopeia/css/vendor/afeld/bootstrap-toc.min.css create mode 100644 templates/moko-cassiopeia/html/com_contact/default.php diff --git a/language/en-GB/tpl_moko-cassiopeia.ini b/language/en-GB/tpl_moko-cassiopeia.ini index a051e28..aa20e27 100644 --- a/language/en-GB/tpl_moko-cassiopeia.ini +++ b/language/en-GB/tpl_moko-cassiopeia.ini @@ -1,7 +1,13 @@ -; Joomla! Project -; (C) 2017 Open Source Matters, Inc. -; License GNU General Public License version 2 or later; see LICENSE.txt -; Note : All ini files need to be saved as UTF-8 +;--------------------------------------------------- +; Template: moko-cassiopeia +; File: en-GB.tpl_moko-cassiopeia.ini +; Version: 1.14 +; Author: Jonathan Andrew Miller +; Copyright: (C) 2025 Jonathan Andrew Miller. All rights reserved. +; License: GNU General Public License v3 or later; see LICENSE.txt +; Description: Language strings for the frontend template. +; Note: All ini files must be saved as UTF-8 without BOM. +;--------------------------------------------------- MOKO-CASSIOPEIA="MOKO-CASSIOPEIA Site template" TPL_MOKO-CASSIOPEIA_BACKTOTOP="Back to Top" @@ -52,4 +58,4 @@ TPL_MOKO-CASSIOPEIA_DRAWER_LEFT_ICON_LABEL="Drawer Left Icon CSS" TPL_MOKO-CASSIOPEIA_DRAWER_LEFT_ICON_DESC="Enter the Font-Awesome class for the left drawer toggle (e.g. 'fas fa-chevron-left')." TPL_MOKO-CASSIOPEIA_DRAWER_RIGHT_ICON_LABEL="Drawer Right Icon CSS" TPL_MOKO-CASSIOPEIA_DRAWER_RIGHT_ICON_DESC="Enter the Font-Awesome class for the right drawer toggle (e.g. 'fas fa-chevron-right')." -TPL_MOKO-CASSIOPEIA_TOC="Table of Contents" \ No newline at end of file +TPL_MOKO-CASSIOPEIA_TOC="Table of Contents" diff --git a/language/en-GB/tpl_moko-cassiopeia.sys.ini b/language/en-GB/tpl_moko-cassiopeia.sys.ini index 59c1af7..ace5322 100644 --- a/language/en-GB/tpl_moko-cassiopeia.sys.ini +++ b/language/en-GB/tpl_moko-cassiopeia.sys.ini @@ -1,7 +1,13 @@ -; Joomla! Project -; (C) 2017 Open Source Matters, Inc. -; License GNU General Public License version 2 or later; see LICENSE.txt -; Note : All ini files need to be saved as UTF-8 +;--------------------------------------------------- +; Template: moko-cassiopeia +; File: en-GB.tpl_moko-cassiopeia.sys.ini +; Version: 1.14 +; Author: Jonathan Andrew Miller +; Copyright: (C) 2025 Jonathan Andrew Miller. All rights reserved. +; License: GNU General Public License v3 or later; see LICENSE.txt +; Description: Language strings for the frontend template. +; Note: All ini files must be saved as UTF-8 without BOM. +;--------------------------------------------------- TPL_MOKO-CASSIOPEIA="Moko-Cassiopeia Site template" TPL_MOKO-CASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE-METISMENU="Collapsible Dropdown" @@ -71,4 +77,4 @@ TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION="

MOKO-CASSIOPEIA Template Description

All third-party libraries and assets remain the property of their respective authors and are credited within their source files where applicable. -

" \ No newline at end of file +

" diff --git a/language/en-US/tpl_moko-cassiopeia.ini b/language/en-US/tpl_moko-cassiopeia.ini index a051e28..6356d24 100644 --- a/language/en-US/tpl_moko-cassiopeia.ini +++ b/language/en-US/tpl_moko-cassiopeia.ini @@ -1,7 +1,13 @@ -; Joomla! Project -; (C) 2017 Open Source Matters, Inc. -; License GNU General Public License version 2 or later; see LICENSE.txt -; Note : All ini files need to be saved as UTF-8 +;--------------------------------------------------- +; Template: moko-cassiopeia +; File: en-US.tpl_moko-cassiopeia.ini +; Version: 1.14 +; Author: Jonathan Andrew Miller +; Copyright: (C) 2025 Jonathan Andrew Miller. All rights reserved. +; License: GNU General Public License v3 or later; see LICENSE.txt +; Description: Language strings for the frontend template. +; Note: All ini files must be saved as UTF-8 without BOM. +;--------------------------------------------------- MOKO-CASSIOPEIA="MOKO-CASSIOPEIA Site template" TPL_MOKO-CASSIOPEIA_BACKTOTOP="Back to Top" @@ -52,4 +58,4 @@ TPL_MOKO-CASSIOPEIA_DRAWER_LEFT_ICON_LABEL="Drawer Left Icon CSS" TPL_MOKO-CASSIOPEIA_DRAWER_LEFT_ICON_DESC="Enter the Font-Awesome class for the left drawer toggle (e.g. 'fas fa-chevron-left')." TPL_MOKO-CASSIOPEIA_DRAWER_RIGHT_ICON_LABEL="Drawer Right Icon CSS" TPL_MOKO-CASSIOPEIA_DRAWER_RIGHT_ICON_DESC="Enter the Font-Awesome class for the right drawer toggle (e.g. 'fas fa-chevron-right')." -TPL_MOKO-CASSIOPEIA_TOC="Table of Contents" \ No newline at end of file +TPL_MOKO-CASSIOPEIA_TOC="Table of Contents" diff --git a/language/en-US/tpl_moko-cassiopeia.sys.ini b/language/en-US/tpl_moko-cassiopeia.sys.ini index 706c29b..64dae6b 100644 --- a/language/en-US/tpl_moko-cassiopeia.sys.ini +++ b/language/en-US/tpl_moko-cassiopeia.sys.ini @@ -1,7 +1,13 @@ -; Joomla! Project -; (C) 2017 Open Source Matters, Inc. -; License GNU General Public License version 2 or later; see LICENSE.txt -; Note : All ini files need to be saved as UTF-8 +;--------------------------------------------------- +; Template: moko-cassiopeia +; File: en-US.tpl_moko-cassiopeia.sys.ini +; Version: 1.14 +; Author: Jonathan Andrew Miller +; Copyright: (C) 2025 Jonathan Andrew Miller. All rights reserved. +; License: GNU General Public License v3 or later; see LICENSE.txt +; Description: Language strings for the frontend template. +; Note: All ini files must be saved as UTF-8 without BOM. +;--------------------------------------------------- TPL_MOKO-CASSIOPEIA="Moko-Cassiopeia Site template" TPL_MOKO-CASSIOPEIA_MOD_MENU_LAYOUT_COLLAPSE-METISMENU="Collapsible Dropdown" @@ -38,3 +44,4 @@ Features: - Ideal for professional services, portfolios, and informational websites Code Attribution: This template is based on the original Cassiopeia template developed by the Joomla! Project and released under the GNU General Public License. Modifications and enhancements have been made by Moko Consulting in accordance with open-source licensing standards. It includes integration with Bootstrap TOC (https://afeld.github.io/bootstrap-toc/), an open-source table of content + diff --git a/media/templates/site/moko-cassiopeia/css/global/colors_alternative.css b/media/templates/site/moko-cassiopeia/css/global/colors_alternative.css index 2b0fed2..a698757 100644 --- a/media/templates/site/moko-cassiopeia/css/global/colors_alternative.css +++ b/media/templates/site/moko-cassiopeia/css/global/colors_alternative.css @@ -1,7 +1,8 @@ +/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ /*! * @package Joomla.Site * @subpackage Templates.moko-cassiopeia - * @file /media/templates/sote/moko-cassiopeia/css/global/colors_alternative.css + * @file /media/templates/sote/moko-cassiopeia/css/global/colors_standard.css * * © 2025 Moko Consulting — All Rights Reserved * @license GNU General Public License version 2 or later; see LICENSE.txt @@ -12,424 +13,772 @@ */ :root, [data-bs-theme="light"] { - --color-primary: #112855; - --color-link: #224FAA; - --color-hover: #224FAA; + color-scheme: light; - --header-background-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); - --header-background-position: auto; - --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; + --color-primary: #112855; + --color-link: #224FAA; + --color-hover: #224FAA; - --nav-text-color: white; - --nav-bg-color: #224FAA; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #3f8ff0; - --border: 5px; - --mainmenu-nav-link-color: white; + --header-background-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); + --header-background-attachment: fixed; + --header-background-repeat: repeat; + --header-background-size: auto; - --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: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; - --body-color: #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); - --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; + --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: white; + --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: 5px; + + --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: white; + --nav-bg-color: #224FAA; + --accent-color-primary: #3f8ff0; + --accent-color-secondary: #3f8ff0; + --border: 5px; + --mainmenu-nav-link-color: white; + + --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: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); + --body-font-size: 1rem; + --body-font-weight: 400; + --body-line-height: 1.5; + --body-color: #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); + --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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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; -} \ No newline at end of file + --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; +} + +/* ----------------------------------------------- + * DARK THEME — append below your light block + * --------------------------------------------- */ + +:root[data-bs-theme='dark'], [data-bs-theme='dark'] { + /* System hint for native widgets */ + color-scheme: dark; + + /* Brand & links */ + --color-primary: #c7d2ff; + --color-link: #8ab4f8; + --color-hover: #bcd1ff; + + /* 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: #0f141b; + --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: 1px solid #2b323b; + --container-below-topbar-border-radius: 8px; + + --container-top-a-bg-image: ; + --container-top-a-bg-color: #0e1319; + --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: 1px solid #2b323b; + --container-top-a-border-radius: 8px; + + --container-top-b-bg-image: ; + --container-top-b-bg-color: #0e1319; + --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: 1px solid #2b323b; + --container-top-b-border-radius: 8px; + + --container-toc-bg: #0f141b; + --container-toc-color: #dbe3ff; + + --container-sidebar-bg-image: ; + --container-sidebar-bg-color: #0c1016; + --container-sidebar-bg-position: center; + --container-sidebar-bg-attachment: scroll; + --container-sidebar-bg-repeat: repeat; + --container-sidebar-bg-size: auto; + --container-sidebar-border: 1px solid #28303a; + --container-sidebar-border-radius: 8px; + + --container-bottom-a-bg-image: ; + --container-bottom-a-bg-color: #0e141b; + --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: 1px solid #2b323b; + --container-bottom-a-border-radius: 5px; + + --container-bottom-b-bg-image: ; + --container-bottom-b-bg-color: #0e141b; + --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: 1px solid #2b323b; + --container-bottom-b-border-radius: 8px; + + /* Nav & accents */ + --nav-text-color: #fff; + --nav-bg-color: #0e1a3c; + --accent-color-primary: #3f8ff0; + --accent-color-secondary: #6fb3ff; + --border: 5px; + --mainmenu-nav-link-color: #fff; + + /* Palette */ + --blue: #91a4ff; + --black: #000; + --indigo: #b19cff; + --purple: #c0a5ff; + --pink: #ff8fc0; + --red: #ff7a73; + --orange: #ff9c4d; + --yellow: #ffd166; + --green: #78d694; + --teal: #76e3ff; + --cyan: #6fb7ff; + --white: #fff; + + /* Grays tuned for dark */ + --gray-100: #161a20; + --gray-200: #1b2027; + --gray-300: #222831; + --gray-400: #2b323b; + --gray-500: #36404a; + --gray-600: #48525d; + --gray-700: #5b6672; + --gray-800: #cfd6de; + --gray-900: #e6ebf1; + + /* Contextuals (keep brand hues) */ + --primary: #010156; + --secondary: #48525d; + --success: #4aa664; + --info: #4f7aa0; + --warning: #c77a00; + --danger: #c23a31; + --light: #1b2027; + --dark: #0f1318; + + /* RGB helpers */ + --primary-rgb: 1,1,86; + --secondary-rgb: 72,82,93; + --success-rgb: 74,166,100; + --info-rgb: 79,122,160; + --warning-rgb: 199,122,0; + --danger-rgb: 194,58,49; + --light-rgb: 27,32,39; + --dark-rgb: 15,19,24; + + /* Emphasis & subtle variants */ + --primary-text-emphasis: #c7ccff; + --secondary-text-emphasis: #cfd6de; + --success-text-emphasis: #bde8c9; + --info-text-emphasis: #bcd6ee; + --warning-text-emphasis: #ffd9a6; + --danger-text-emphasis: #ffb7b2; + --light-text-emphasis: #d2d8df; + --dark-text-emphasis: #d2d8df; + + --primary-bg-subtle: #0b1030; + --secondary-bg-subtle: #1e2430; + --success-bg-subtle: #0f2a1b; + --info-bg-subtle: #0d2232; + --warning-bg-subtle: #2a1e06; + --danger-bg-subtle: #2d1110; + --light-bg-subtle: #12161d; + --dark-bg-subtle: #1e2430; + + --primary-border-subtle: #2b3a7a; + --secondary-border-subtle: #2b323b; + --success-border-subtle: #2b5b40; + --info-border-subtle: #254861; + --warning-border-subtle: #5a3c0e; + --danger-border-subtle: #5c2723; + --light-border-subtle: #222831; + --dark-border-subtle: #2b323b; + + /* Typography & layout */ + --body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); + --body-font-size: 1rem; + --body-font-weight: 400; + --body-line-height: 1.5; + + --body-color: #e6ebf1; + --body-color-rgb: 230, 235, 241; + --body-bg: #0e1318; + --body-bg-rgb: 14, 19, 24; + + --emphasis-color: #fff; + --emphasis-color-rgb: 255, 255, 255; + + --secondary-color: #e6ebf1bf; + --secondary-color-rgb: 230, 235, 241; + + --secondary-bg: #151b22; + --secondary-bg-rgb: 21, 27, 34; + + --tertiary-color: #e6ebf180; + --tertiary-color-rgb: 230, 235, 241; + --tertiary-bg: #10151b; + --tertiary-bg-rgb: 16, 21, 27; + + --heading-color: #f1f5f9; + + --link-color: #8ab4f8; + --link-color-rgb: 138, 180, 248; + --link-decoration: underline; + --link-hover-color: #c3d6ff; + --link-hover-color-rgb: 195, 214, 255; + + --code-color: #ff7abd; + --highlight-color: #111; + --highlight-bg: #ffe28a1a; + + --border-width: 1px; + --border-style: solid; + --border-color: #2b323b; + --border-color-translucent: #ffffff26; + + --border-radius: .25rem; + --border-radius-sm: .2rem; + --border-radius-lg: .3rem; + --border-radius-xl: .3rem; + --border-radius-xxl: 2rem; + --border-radius-2xl: var(--border-radius-xxl); + --border-radius-pill: 50rem; + + --box-shadow: 0 .5rem 1rem #00000066; + --box-shadow-sm: 0 .125rem .25rem #00000040; + --box-shadow-lg: 0 1rem 3rem #00000080; + --box-shadow-inset: inset 0 1px 2px #00000040; + + --focus-ring-width: .25rem; + --focus-ring-opacity: .6; + --focus-ring-color: #5472ff66; + + --form-valid-color: #78d694; + --form-valid-border-color: #78d694; + --form-invalid-color: #ff8e86; + --form-invalid-border-color: #ff8e86; +} + +/* Buttons — inherit brand hues; ensure strong contrast on dark bg */ +[data-bs-theme='dark'] .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; +} + +[data-bs-theme='dark'] .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 */ +[data-bs-theme='dark'] .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 */ +[data-bs-theme='dark'] .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; +} + +/* ----------------------------------------------- + * OPTIONAL: small fix for .btn-secondary in light + * (uses var() so it picks up your nav colors) + * --------------------------------------------- */ +[data-bs-theme='light'] .btn-secondary, +:root .btn-secondary { + --btn-color: var(--nav-text-color); + --btn-bg: var(--nav-bg-color); +} diff --git a/media/templates/site/moko-cassiopeia/css/global/colors_standard.css b/media/templates/site/moko-cassiopeia/css/global/colors_standard.css index b3d8842..56b7725 100644 --- a/media/templates/site/moko-cassiopeia/css/global/colors_standard.css +++ b/media/templates/site/moko-cassiopeia/css/global/colors_standard.css @@ -1,3 +1,4 @@ +/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ /*! * @package Joomla.Site * @subpackage Templates.moko-cassiopeia @@ -12,480 +13,772 @@ */ :root, [data-bs-theme="light"] { - --color-primary: #112855; - --color-link: #224FAA; - --color-hover: #224FAA; + color-scheme: light; - --header-background-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); - --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; + --color-primary: #112855; + --color-link: #224FAA; + --color-hover: #224FAA; - --container-below-topbar-bg-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); - --container-below-topbar-bg-color: gray; - --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: 0px solid black; - --container-below-topbar-border-radius: 5px; + --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-top-a-bg-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); - --container-top-a-bg-color: gray; - --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: 1px solid black; - --container-top-a-border-radius: 5px; + --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-b-bg-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); - --container-top-b-bg-color: gray; - --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: 1px solid black; - --container-top-b-border-radius: 5px; + --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-toc-bg: white; - --container-toc-color: var(--color-primary); + --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-sidebar-bg-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); - --container-sidebar-bg-color: gray; - --container-sidebar-bg-position: auto; - --container-sidebar-bg-attachment: scroll; - --container-sidebar-bg-repeat: repeat; - --container-sidebar-bg-size: auto; - --container-sidebar-border: 1px solid black; - --container-sidebar-border-radius: 5px; + --container-toc-bg: white; + --container-toc-color: var(--color-primary); - --container-bottom-a-bg-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); - --container-bottom-a-bg-color: gray; - --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: 1px solid black; - --container-bottom-a-border-radius: 5px; + --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-b-bg-image: url('../../../../../media/templates/site/moko-cassiopeia/images/bg.svg'); - --container-bottom-b-bg-color: gray; - --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: 1px solid black; - --container-bottom-b-border-radius: 5px; + --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: 5px; - --nav-text-color: white; - --nav-bg-color: #224FAA; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #3f8ff0; - --border: 5px; - --mainmenu-nav-link-color: white; + --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: ; - --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: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; - --body-color: #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); - --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; + --nav-text-color: white; + --nav-bg-color: #224FAA; + --accent-color-primary: #3f8ff0; + --accent-color-secondary: #3f8ff0; + --border: 5px; + --mainmenu-nav-link-color: white; + + --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: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); + --body-font-size: 1rem; + --body-font-weight: 400; + --body-line-height: 1.5; + --body-color: #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); + --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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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; -} \ No newline at end of file + --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; +} + +/* ----------------------------------------------- + * DARK THEME — append below your light block + * --------------------------------------------- */ + +:root[data-bs-theme='dark'], [data-bs-theme='dark'] { + /* System hint for native widgets */ + color-scheme: dark; + + /* Brand & links */ + --color-primary: #112855; + --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: #0f141b; + --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: 1px solid #2b323b; + --container-below-topbar-border-radius: 8px; + + --container-top-a-bg-image: ; + --container-top-a-bg-color: #0e1319; + --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: 1px solid #2b323b; + --container-top-a-border-radius: 8px; + + --container-top-b-bg-image: ; + --container-top-b-bg-color: #0e1319; + --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: 1px solid #2b323b; + --container-top-b-border-radius: 8px; + + --container-toc-bg: #0f141b; + --container-toc-color: #dbe3ff; + + --container-sidebar-bg-image: ; + --container-sidebar-bg-color: #0c1016; + --container-sidebar-bg-position: center; + --container-sidebar-bg-attachment: scroll; + --container-sidebar-bg-repeat: repeat; + --container-sidebar-bg-size: auto; + --container-sidebar-border: 1px solid #28303a; + --container-sidebar-border-radius: 8px; + + --container-bottom-a-bg-image: ; + --container-bottom-a-bg-color: #0e141b; + --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: 1px solid #2b323b; + --container-bottom-a-border-radius: 5px; + + --container-bottom-b-bg-image: ; + --container-bottom-b-bg-color: #0e141b; + --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: 1px solid #2b323b; + --container-bottom-b-border-radius: 8px; + + /* Nav & accents */ + --nav-text-color: #fff; + --nav-bg-color: #0e1a3c; + --accent-color-primary: #3f8ff0; + --accent-color-secondary: #6fb3ff; + --border: 5px; + --mainmenu-nav-link-color: #fff; + + /* Palette */ + --blue: #91a4ff; + --black: #000; + --indigo: #b19cff; + --purple: #c0a5ff; + --pink: #ff8fc0; + --red: #ff7a73; + --orange: #ff9c4d; + --yellow: #ffd166; + --green: #78d694; + --teal: #76e3ff; + --cyan: #6fb7ff; + --white: #fff; + + /* Grays tuned for dark */ + --gray-100: #161a20; + --gray-200: #1b2027; + --gray-300: #222831; + --gray-400: #2b323b; + --gray-500: #36404a; + --gray-600: #48525d; + --gray-700: #5b6672; + --gray-800: #cfd6de; + --gray-900: #e6ebf1; + + /* Contextuals (keep brand hues) */ + --primary: #010156; + --secondary: #48525d; + --success: #4aa664; + --info: #4f7aa0; + --warning: #c77a00; + --danger: #c23a31; + --light: #1b2027; + --dark: #0f1318; + + /* RGB helpers */ + --primary-rgb: 1,1,86; + --secondary-rgb: 72,82,93; + --success-rgb: 74,166,100; + --info-rgb: 79,122,160; + --warning-rgb: 199,122,0; + --danger-rgb: 194,58,49; + --light-rgb: 27,32,39; + --dark-rgb: 15,19,24; + + /* Emphasis & subtle variants */ + --primary-text-emphasis: #c7ccff; + --secondary-text-emphasis: #cfd6de; + --success-text-emphasis: #bde8c9; + --info-text-emphasis: #bcd6ee; + --warning-text-emphasis: #ffd9a6; + --danger-text-emphasis: #ffb7b2; + --light-text-emphasis: #d2d8df; + --dark-text-emphasis: #d2d8df; + + --primary-bg-subtle: #0b1030; + --secondary-bg-subtle: #1e2430; + --success-bg-subtle: #0f2a1b; + --info-bg-subtle: #0d2232; + --warning-bg-subtle: #2a1e06; + --danger-bg-subtle: #2d1110; + --light-bg-subtle: #12161d; + --dark-bg-subtle: #1e2430; + + --primary-border-subtle: #2b3a7a; + --secondary-border-subtle: #2b323b; + --success-border-subtle: #2b5b40; + --info-border-subtle: #254861; + --warning-border-subtle: #5a3c0e; + --danger-border-subtle: #5c2723; + --light-border-subtle: #222831; + --dark-border-subtle: #2b323b; + + /* Typography & layout */ + --body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); + --body-font-size: 1rem; + --body-font-weight: 400; + --body-line-height: 1.5; + + --body-color: #e6ebf1; + --body-color-rgb: 230, 235, 241; + --body-bg: #0e1318; + --body-bg-rgb: 14, 19, 24; + + --emphasis-color: #fff; + --emphasis-color-rgb: 255, 255, 255; + + --secondary-color: #e6ebf1bf; + --secondary-color-rgb: 230, 235, 241; + + --secondary-bg: #151b22; + --secondary-bg-rgb: 21, 27, 34; + + --tertiary-color: #e6ebf180; + --tertiary-color-rgb: 230, 235, 241; + --tertiary-bg: #10151b; + --tertiary-bg-rgb: 16, 21, 27; + + --heading-color: #f1f5f9; + + --link-color: #8ab4f8; + --link-color-rgb: 138, 180, 248; + --link-decoration: underline; + --link-hover-color: #c3d6ff; + --link-hover-color-rgb: 195, 214, 255; + + --code-color: #ff7abd; + --highlight-color: #111; + --highlight-bg: #ffe28a1a; + + --border-width: 1px; + --border-style: solid; + --border-color: #2b323b; + --border-color-translucent: #ffffff26; + + --border-radius: .25rem; + --border-radius-sm: .2rem; + --border-radius-lg: .3rem; + --border-radius-xl: .3rem; + --border-radius-xxl: 2rem; + --border-radius-2xl: var(--border-radius-xxl); + --border-radius-pill: 50rem; + + --box-shadow: 0 .5rem 1rem #00000066; + --box-shadow-sm: 0 .125rem .25rem #00000040; + --box-shadow-lg: 0 1rem 3rem #00000080; + --box-shadow-inset: inset 0 1px 2px #00000040; + + --focus-ring-width: .25rem; + --focus-ring-opacity: .6; + --focus-ring-color: #5472ff66; + + --form-valid-color: #78d694; + --form-valid-border-color: #78d694; + --form-invalid-color: #ff8e86; + --form-invalid-border-color: #ff8e86; +} + +/* Buttons — inherit brand hues; ensure strong contrast on dark bg */ +[data-bs-theme='dark'] .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; +} + +[data-bs-theme='dark'] .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 */ +[data-bs-theme='dark'] .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 */ +[data-bs-theme='dark'] .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; +} + +/* ----------------------------------------------- + * OPTIONAL: small fix for .btn-secondary in light + * (uses var() so it picks up your nav colors) + * --------------------------------------------- */ +[data-bs-theme='light'] .btn-secondary, +:root .btn-secondary { + --btn-color: var(--nav-text-color); + --btn-bg: var(--nav-bg-color); +} diff --git a/media/templates/site/moko-cassiopeia/css/template.css b/media/templates/site/moko-cassiopeia/css/template.css index 22820b8..f635f2c 100644 --- a/media/templates/site/moko-cassiopeia/css/template.css +++ b/media/templates/site/moko-cassiopeia/css/template.css @@ -1,3 +1,4 @@ +/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller — | Moko Consulting|https://mokoconsulting.tech */ @charset "UTF-8"; /*! * @package Joomla.Site @@ -14255,6 +14256,12 @@ th dd { .com-contact__thumbnail { text-align: left; + margin: 2em; + padding:1rem; +} + +[data-bs-theme='dark'] .com-contact__thumbnail { + background-color: var(--nav-text-color); } @media (min-width: 1200px) { @@ -14289,9 +14296,8 @@ th dd { } .com-contact__container .com-contact__thumbnail { - grid-column: 3/5; + grid-column: 1/5; grid-row: 2/5; - margin-bottom: 1em; text-align: right; } @@ -15403,7 +15409,7 @@ iframe { } .boxed .blog-item { - background-color: hsl(0, 0%, 100%); + background-color: var(--bs-body-bg); } .boxed .blog-item figure.item-image { @@ -15944,7 +15950,7 @@ body.wrapper-fluid header>.grid-child { } footer .grid-child>div { - padding: 0 4em; + padding: 1rem 4em; } header .grid-child .navbar-brand { @@ -17300,4 +17306,5 @@ form .form-select { -moz-border-radius: var(--container-bottom-b-border-radius); border-radius: var(--container-bottom-b-border-radius); border: var(--container-bottom-b-border); -} \ No newline at end of file +} + diff --git a/media/templates/site/moko-cassiopeia/css/vendor/afeld/bootstrap-toc.min.css b/media/templates/site/moko-cassiopeia/css/vendor/afeld/bootstrap-toc.min.css new file mode 100644 index 0000000..3c62107 --- /dev/null +++ b/media/templates/site/moko-cassiopeia/css/vendor/afeld/bootstrap-toc.min.css @@ -0,0 +1,4 @@ +/*! + * Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/) + * Copyright 2015 Aidan Feldman + * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */nav[data-toggle=toc] .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}nav[data-toggle=toc] .nav>li>a:focus,nav[data-toggle=toc] .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}nav[data-toggle=toc] .nav-link.active,nav[data-toggle=toc] .nav-link.active:focus,nav[data-toggle=toc] .nav-link.active:hover{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}nav[data-toggle=toc] .nav-link+ul{display:none;padding-bottom:10px}nav[data-toggle=toc] .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}nav[data-toggle=toc] .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav>li>a:hover{padding-left:29px}nav[data-toggle=toc] .nav .nav>li>.active,nav[data-toggle=toc] .nav .nav>li>.active:focus,nav[data-toggle=toc] .nav .nav>li>.active:hover{padding-left:28px;font-weight:500}nav[data-toggle=toc] .nav-link.active+ul{display:block} \ No newline at end of file diff --git a/media/templates/site/moko-cassiopeia/images/teaser_bg_sm.png b/media/templates/site/moko-cassiopeia/images/teaser_bg_sm.png index 94d8fbe63ec636cb2426fc1d01375bc471eca668..8c1d0dacb10ece9447db216b254cfd4e5c17e46a 100644 GIT binary patch literal 2090 zcmeH|dr(wW9LIlmpZD%A%HqNTfh@Zy2!yb^iZJB1z_Kh3C>shgHVA@ZzG0O#ZPCaF zjuH8UEQa-2riDQXHlj!fq#0-eI*PO)Vu~V|fa{*l6)R|_rkeifkItRnz2EzLo%1j9Y38s)h z)!>HL$tIqSAru;v$zpT3B*o+7gfd%trDlg(zaaC9Ax153!Za}Q8+#>6Ibr7J}8 z_4&o5EVSf|y}sdrhax3o1I2R?J32X!8}I2g!CN_La^RGp;IME_gf>za^-A2#S@8+8 z6X&I-&0mnd@U=|C%2ipfuU_+3&f6O|ZQhdm-u4|kckSL&P-xn>|G>dRhd=uG_~)f% zUwnC@yrSxC_187$YU}D7FJ1orN>g*o)wUnZ?H#u|Z+G44dDz?c=%>g11A{adfe-bU zF+}z|E+OV(uvknMm*yfESv0ti#dZ(i*r{W=$t%W44TP#!(Elbo#_a2axYm|UqrArujknOT)(qBT>~v1vx<7ZH9l!KZgYE(pJ==o zgy4R@b<+6;O>@S+gClD8S?zqL4|J-YK2+6|7kZr>6=!H2R--glX%->~=|pf!+ux+n zh?DEzd4E_<-iQ_7N;lmNioGm)PKDttQ8y3Y7eM(U@p(g|$E(tp+H`<6Dy1_+2tDQXdVlW<35au*}H)5)MoFoZ2zvLtP(0m3rUk_~C8lB|V>bct3MJtKboC^1et zr3+WbC7ivtOUP13M1PgdZ7ge4h$=2e=iQ`O@!jSsGI?>uyADF@wZ7?5 zp4SLaD#UXU9@$OXbqiI6va$iqh zgQEBPoFt#E0^yW)N%Wj!`hXRR*qq7)kHc8Gix*0019*Z{h#|00VPENmK|32;1RL-~a#s32;bRa{vGf5&!@T z5&_cPe*6Fc0338hSaefwW^{L9a%BKPWN%_+AVz6&Wp{6KYjYq&Q#En5<2C>Q02Opa zSad^jWnpw_Z*Cw|X>DZyH7_zaFEKFfI7cG@00S*aL_t(YiGS^v!Hyg^3`FY@`u{)l zDL^g(a`SDyl|zw|W_Na+AU?W*g*9r5O%|(2nQwpntzYr1?|=RwVHuEZ31lM~VJycI z$zrc18=_!6FfXk| zUG~>v|9;rDsDDXq|097`6*hyxg$I%)+ByN_1e)x&8_6tDHI^kr9P}xKkZn4ZeUNfK zX29}7qL5=3fbxCl0#YIYG6Bk>z!DN9wYt(Byx16YAn1bR(I81L2!RHHEAM+j%C0H> zCfxX6fvDm)m^i2(Dma;YB6fJvk%qOaKy9dsnS#Y25PvE%;87iAh5Vi1B8NUwhMf*$ z?}N?cbNyO;WZnZfJe(R*KC@p;wtJH`>^B0#l_qckU#K>MK}!_{x4c4T+_f-l zznyzY@~RZf7hy&XIRYV?t&&vZK7Tvwb#s4%+?e}-pMJHC9)NEieE?gNwQsMT$w6}@ zc{!^2a(~CrT6OOmaQcJPeQOu->I17(#_h&KvcOn$WU~<23o}poBrjDu-)=MwEt@(c zn{JQ-nPMtq3DaPwTl9N130gX%flKhlTSLvIa87MUMvF0F%Ie(= z_Eb6ANI=Pd`|^mkRjI4s6M)b1fomV1cJ%Dk*MEne8m$XNzczpUtOw@*?7J^M^;9BX zo_%5Z+R^K?|IN|AdVJkRQfNPf&~5RsZPZC%35dS-cM8)vbH7~B%kW65?sr{#QIHsqy!*X&pB?pVh#BQLG+>I>d8 z08_aW)&x|YOw#LiR{~Kf@IcCRM`H2z_Vz4jT|)b$*4a4yE)tncz5lxGV))hspXJQr zfzlH1KYn<4*LAust^4xd=dS+ + diff --git a/media/templates/site/moko-cassiopeia/js/mod_gabble/gabble_com.js b/media/templates/site/moko-cassiopeia/js/mod_gabble/gabble_com.js index e69de29..140f8a0 100644 --- a/media/templates/site/moko-cassiopeia/js/mod_gabble/gabble_com.js +++ b/media/templates/site/moko-cassiopeia/js/mod_gabble/gabble_com.js @@ -0,0 +1,2 @@ +/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ + diff --git a/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js b/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js index 2096840..a1934cd 100644 --- a/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js +++ b/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu-es5.js @@ -1,3 +1,4 @@ +/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ (function () { 'use strict'; @@ -27,3 +28,4 @@ }); })(); + diff --git a/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js b/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js index b9b327a..34e3f8d 100644 --- a/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js +++ b/media/templates/site/moko-cassiopeia/js/mod_menu/menu-metismenu.js @@ -1,3 +1,4 @@ +/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ /** * @package Joomla.Site * @subpackage Templates.Moko-Cassiopeia @@ -23,3 +24,4 @@ document.addEventListener('DOMContentLoaded', () => { }); }); }); + diff --git a/media/templates/site/moko-cassiopeia/js/template.js b/media/templates/site/moko-cassiopeia/js/template.js index ef8f0bf..9e5ce86 100644 --- a/media/templates/site/moko-cassiopeia/js/template.js +++ b/media/templates/site/moko-cassiopeia/js/template.js @@ -1,3 +1,4 @@ +/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ /** * @package Joomla.Site * @subpackage Templates.Moko-Cassiopeia @@ -72,3 +73,4 @@ Joomla = window.Joomla || {}; document.addEventListener('joomla:updated', initTemplate); })(Joomla, document); + diff --git a/media/templates/site/moko-cassiopeia/js/vendor/afeld/bootstrap-toc.min.js b/media/templates/site/moko-cassiopeia/js/vendor/afeld/bootstrap-toc.min.js index c628326..884b327 100644 --- a/media/templates/site/moko-cassiopeia/js/vendor/afeld/bootstrap-toc.min.js +++ b/media/templates/site/moko-cassiopeia/js/vendor/afeld/bootstrap-toc.min.js @@ -1,5 +1,6 @@ +/* MOKO-COPYRIGHT: © 2025-08-10 Jonathan Miller || Moko Consulting — https://mokoconsulting.tech */ /*! * Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/) * Copyright 2015 Aidan Feldman * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */ -!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')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('');n.attr("href","#"+e),n.text(t);var r=a("
  • ");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\]\.\/\(\)\*\\\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')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('');n.attr("href","#"+e),n.text(t);var r=a("
  • ");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 -
    -
    Left
    -
    Right
    -
    +
    +
    Left
    +
    Right
    +
    ``` @@ -114,10 +114,10 @@ Moko-Cassiopeia ships a tiny script that scans within a container for headings ( ```html
    -

    Section A

    -

    ...

    -

    Subsection A.1

    -

    ...

    +

    Section A

    +

    ...

    +

    Subsection A.1

    +

    ...

    ``` @@ -143,13 +143,13 @@ You can push events from modules or overrides like so: ```html ``` @@ -163,8 +163,8 @@ Two options: ```html ``` @@ -176,15 +176,15 @@ Moko-Cassiopeia exposes custom properties for theme tuning. Example set: ```css :root { - --moko-cassiopeia-color-primary: #0b4008; - --moko-cassiopeia-color-link: #0b4008; - --moko-cassiopeia-color-hover: #000000; + --moko-cassiopeia-color-primary: #0b4008; + --moko-cassiopeia-color-link: #0b4008; + --moko-cassiopeia-color-hover: #000000; - --moko-cassiopeia-header-background-image: linear-gradient(30deg, #fefcf9, var(--accent-color-primary)); - --moko-cassiopeia-header-background-position: auto; - --moko-cassiopeia-header-background-attachment: fixed; - --moko-cassiopeia-header-background-repeat: repeat; - --moko-cassiopeia-header-background-size: auto; + --moko-cassiopeia-header-background-image: linear-gradient(30deg, #fefcf9, var(--accent-color-primary)); + --moko-cassiopeia-header-background-position: auto; + --moko-cassiopeia-header-background-attachment: fixed; + --moko-cassiopeia-header-background-repeat: repeat; + --moko-cassiopeia-header-background-size: auto; } ``` @@ -196,8 +196,8 @@ Moko-Cassiopeia exposes custom properties for theme tuning. Example set: ```html - - Action + + Action ``` @@ -205,7 +205,7 @@ Moko-Cassiopeia exposes custom properties for theme tuning. Example set: ```html ``` @@ -217,7 +217,7 @@ Moko-Cassiopeia exposes custom properties for theme tuning. Example set: $label = 'cta_hero'; ?> ``` @@ -234,7 +234,7 @@ $label = 'cta_hero'; ## Development - Source structure follows Joomla template conventions: - - '/css', '/js', '/images', '/html' (overrides), 'templateDetails.xml' + - '/css', '/js', '/images', '/html' (overrides), 'templateDetails.xml' - Scripts are enqueued via the template's 'index.php' with conditional params. - Build/compile steps (if using bundlers) are noted in 'package.json' (when applicable). @@ -245,7 +245,8 @@ $label = 'cta_hero'; ## Changelog -- 1.0.0: Initial public release with FA6, BS5, TOC, GTM/GA hooks. +- 1.15: Added CSS theme seletor (dark/light) +- 1.00: Initial public release with FA6, BS5, TOC, GTM/GA hooks. ## License diff --git a/templates/moko-cassiopeia/component.php b/templates/moko-cassiopeia/component.php index d8bbfe3..cf098c6 100644 --- a/templates/moko-cassiopeia/component.php +++ b/templates/moko-cassiopeia/component.php @@ -1,5 +1,6 @@ getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet'); + diff --git a/templates/moko-cassiopeia/custom.php b/templates/moko-cassiopeia/custom.php index 084b756..c987ece 100644 --- a/templates/moko-cassiopeia/custom.php +++ b/templates/moko-cassiopeia/custom.php @@ -1,4 +1,5 @@ -Custom code included here \ No newline at end of file +Custom code included here diff --git a/templates/moko-cassiopeia/error.php b/templates/moko-cassiopeia/error.php index 47d1c43..a39d40a 100644 --- a/templates/moko-cassiopeia/error.php +++ b/templates/moko-cassiopeia/error.php @@ -1,4 +1,5 @@ getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet'); + diff --git a/templates/moko-cassiopeia/html/com_contact/contact/default.php b/templates/moko-cassiopeia/html/com_contact/contact/default.php index e97e6d0..9286424 100644 --- a/templates/moko-cassiopeia/html/com_contact/contact/default.php +++ b/templates/moko-cassiopeia/html/com_contact/contact/default.php @@ -1,5 +1,6 @@ get('show_page_heading') ? 'h2' : 'h1';
    get('show_email_form') && ($this->item->email_to || $this->item->user_id)) : ?> - ' . Text::_('COM_CONTACT_EMAIL_FORM') . '

    '; ?> - loadTemplate('form'); ?> @@ -175,4 +174,4 @@ $htag = $tparams->get('show_page_heading') ? 'h2' : 'h1'; item->event->afterDisplayContent; ?> - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_contact/default.php b/templates/moko-cassiopeia/html/com_contact/default.php new file mode 100644 index 0000000..9286424 --- /dev/null +++ b/templates/moko-cassiopeia/html/com_contact/default.php @@ -0,0 +1,177 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Factory; +use Joomla\CMS\Helper\ContentHelper; +use Joomla\CMS\HTML\HTMLHelper; +use Joomla\CMS\Language\Text; +use Joomla\CMS\Layout\FileLayout; +use Joomla\CMS\Layout\LayoutHelper; +use Joomla\CMS\Plugin\PluginHelper; +use Joomla\CMS\Router\Route; +use Joomla\Component\Contact\Site\Helper\RouteHelper; + +$tparams = $this->item->params; +$canDo = ContentHelper::getActions('com_contact', 'category', $this->item->catid); +$canEdit = $canDo->get('core.edit') || ($canDo->get('core.edit.own') && $this->item->created_by === Factory::getUser()->id); +$htag = $tparams->get('show_page_heading') ? 'h2' : 'h1'; +?> + +
    + +
    +
    +
    + item, $tparams); ?> +
    +
    +
    + + + get('show_page_heading')) : ?> +

    + escape($tparams->get('page_heading')); ?> +

    + + + item->name && $tparams->get('show_name')) : ?> +
    + <> + item->published == 0) : ?> + + + item->name; ?> + > +
    + + +
    +
    + get('show_contact_category'); ?> + + +

    + item->category_title; ?> +

    + + item->catid, $this->item->language); ?> +

    + + escape($this->item->category_title); ?> + +

    + + + item->event->afterDisplayTitle; ?> + + get('show_contact_list') && count($this->contacts) > 1) : ?> +
    + + contacts, + 'select_contact', + 'class="form-select" onchange="document.location.href = this.value"', + 'link', + 'name', + $this->item->link + ); + ?> +
    + + + get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?> +
    + item->tagLayout = new FileLayout('joomla.content.tags'); ?> + item->tagLayout->render($this->item->tags->itemTags); ?> +
    + + + item->event->beforeDisplayContent; ?> + + params->get('show_info', 1)) : ?> +
    + ' . Text::_('COM_CONTACT_DETAILS') . ''; ?> + + item->image && $tparams->get('show_image')) : ?> +
    + $this->item->image, + 'alt' => $this->item->name, + 'itemprop' => 'image', + ] + ); ?> +
    + + + item->con_position && $tparams->get('show_position')) : ?> +
    +
    :
    +
    + item->con_position; ?> +
    +
    + + +
    + loadTemplate('address'); ?> + + get('allow_vcard')) : ?> + + + + +
    +
    + + + get('show_links')) : ?> + loadTemplate('links'); ?> + + + get('show_articles') && $this->item->user_id && $this->item->articles) : ?> + ' . Text::_('JGLOBAL_ARTICLES') . ''; ?> + + loadTemplate('articles'); ?> + + + get('show_profile') && $this->item->user_id && PluginHelper::isEnabled('user', 'profile')) : ?> + ' . Text::_('COM_CONTACT_PROFILE') . ''; ?> + + loadTemplate('profile'); ?> + + + get('show_user_custom_fields') && $this->contactUser) : ?> + loadTemplate('user_custom_fields'); ?> + +
    +
    + get('show_email_form') && ($this->item->email_to || $this->item->user_id)) : ?> + loadTemplate('form'); ?> + +
    +
    + + item->misc && $tparams->get('show_misc')) : ?> + ' . Text::_('COM_CONTACT_OTHER_INFORMATION') . ''; ?> + +
    +
    + item->misc; ?> +
    +
    + + item->event->afterDisplayContent; ?> +
    diff --git a/templates/moko-cassiopeia/html/com_content/article/toc-left.php b/templates/moko-cassiopeia/html/com_content/article/toc-left.php index 4a2ffa0..6c2e6c3 100644 --- a/templates/moko-cassiopeia/html/com_content/article/toc-left.php +++ b/templates/moko-cassiopeia/html/com_content/article/toc-left.php @@ -1,4 +1,5 @@ item->publish_down) && $this->item->publish item->event->afterDisplayContent; ?> + diff --git a/templates/moko-cassiopeia/html/com_content/article/toc-right.php b/templates/moko-cassiopeia/html/com_content/article/toc-right.php index a091c50..cb65cb7 100644 --- a/templates/moko-cassiopeia/html/com_content/article/toc-right.php +++ b/templates/moko-cassiopeia/html/com_content/article/toc-right.php @@ -1,4 +1,5 @@ item->publish_down) && $this->item->publish item->event->afterDisplayContent; ?> + diff --git a/templates/moko-cassiopeia/html/com_content/categories/default.php b/templates/moko-cassiopeia/html/com_content/categories/default.php index a1bd6b9..e7f4505 100644 --- a/templates/moko-cassiopeia/html/com_content/categories/default.php +++ b/templates/moko-cassiopeia/html/com_content/categories/default.php @@ -1,5 +1,6 @@ usePreset('com_categories.shared-categories-accordion'); echo $this->loadTemplate('items'); ?> + diff --git a/templates/moko-cassiopeia/html/com_content/categories/default_items.php b/templates/moko-cassiopeia/html/com_content/categories/default_items.php index 2ed17e9..9e2db70 100644 --- a/templates/moko-cassiopeia/html/com_content/categories/default_items.php +++ b/templates/moko-cassiopeia/html/com_content/categories/default_items.php @@ -1,5 +1,6 @@ maxLevelcat != 0 && count($this->items[$this->parent->id]) > 0) : + diff --git a/templates/moko-cassiopeia/html/com_content/category/blog.php b/templates/moko-cassiopeia/html/com_content/category/blog.php index 2e933da..f17f23d 100644 --- a/templates/moko-cassiopeia/html/com_content/category/blog.php +++ b/templates/moko-cassiopeia/html/com_content/category/blog.php @@ -1,5 +1,6 @@ params->get('show_page_heading') ? 'h2' : 'h1'; + diff --git a/templates/moko-cassiopeia/html/com_content/category/blog_children.php b/templates/moko-cassiopeia/html/com_content/category/blog_children.php index 6757330..dd9827c 100644 --- a/templates/moko-cassiopeia/html/com_content/category/blog_children.php +++ b/templates/moko-cassiopeia/html/com_content/category/blog_children.php @@ -1,5 +1,6 @@ maxLevel != 0 && count($this->children[$this->category->id]) > 0) : ? item->state == ContentComponent::CONDITION_UNPUBLISHED + diff --git a/templates/moko-cassiopeia/html/com_content/category/blog_links.php b/templates/moko-cassiopeia/html/com_content/category/blog_links.php index 83250ff..792c341 100644 --- a/templates/moko-cassiopeia/html/com_content/category/blog_links.php +++ b/templates/moko-cassiopeia/html/com_content/category/blog_links.php @@ -1,5 +1,6 @@ + diff --git a/templates/moko-cassiopeia/html/com_content/category/default.php b/templates/moko-cassiopeia/html/com_content/category/default.php index d2e30dc..0f7745b 100644 --- a/templates/moko-cassiopeia/html/com_content/category/default.php +++ b/templates/moko-cassiopeia/html/com_content/category/default.php @@ -1,5 +1,6 @@ + diff --git a/templates/moko-cassiopeia/html/com_content/category/default_articles.php b/templates/moko-cassiopeia/html/com_content/category/default_articles.php index 68407df..f079f29 100644 --- a/templates/moko-cassiopeia/html/com_content/category/default_articles.php +++ b/templates/moko-cassiopeia/html/com_content/category/default_articles.php @@ -1,5 +1,6 @@ format('Y-m-d H:i:s'); + diff --git a/templates/moko-cassiopeia/html/com_content/category/default_children.php b/templates/moko-cassiopeia/html/com_content/category/default_children.php index 21d741a..942c59a 100644 --- a/templates/moko-cassiopeia/html/com_content/category/default_children.php +++ b/templates/moko-cassiopeia/html/com_content/category/default_children.php @@ -1,5 +1,6 @@ getAuthorisedViewLevels(); + diff --git a/templates/moko-cassiopeia/html/com_content/featured/default.php b/templates/moko-cassiopeia/html/com_content/featured/default.php index fd98ab1..8214b33 100644 --- a/templates/moko-cassiopeia/html/com_content/featured/default.php +++ b/templates/moko-cassiopeia/html/com_content/featured/default.php @@ -1,5 +1,6 @@ + diff --git a/templates/moko-cassiopeia/html/com_content/featured/default_item.php b/templates/moko-cassiopeia/html/com_content/featured/default_item.php index 468e2df..07d526b 100644 --- a/templates/moko-cassiopeia/html/com_content/featured/default_item.php +++ b/templates/moko-cassiopeia/html/com_content/featured/default_item.php @@ -1,5 +1,6 @@ item->state == ContentComponent::CONDITION_UNPUBLISH item->event->afterDisplayContent; ?> + diff --git a/templates/moko-cassiopeia/html/com_content/featured/default_links.php b/templates/moko-cassiopeia/html/com_content/featured/default_links.php index 083f2b9..87ff897 100644 --- a/templates/moko-cassiopeia/html/com_content/featured/default_links.php +++ b/templates/moko-cassiopeia/html/com_content/featured/default_links.php @@ -1,5 +1,6 @@ + diff --git a/templates/moko-cassiopeia/html/com_engage/comments/default.php b/templates/moko-cassiopeia/html/com_engage/comments/default.php index 88962ef..e0ec457 100644 --- a/templates/moko-cassiopeia/html/com_engage/comments/default.php +++ b/templates/moko-cassiopeia/html/com_engage/comments/default.php @@ -1,4 +1,5 @@ - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_engage/comments/default_form.php b/templates/moko-cassiopeia/html/com_engage/comments/default_form.php index 8bfc03f..4f8f740 100644 --- a/templates/moko-cassiopeia/html/com_engage/comments/default_form.php +++ b/templates/moko-cassiopeia/html/com_engage/comments/default_form.php @@ -1,4 +1,5 @@ loadPosition('engage-after-reply'); ?> - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_engage/comments/default_list.php b/templates/moko-cassiopeia/html/com_engage/comments/default_list.php index c86aa41..4e04e3f 100644 --- a/templates/moko-cassiopeia/html/com_engage/comments/default_list.php +++ b/templates/moko-cassiopeia/html/com_engage/comments/default_list.php @@ -1,4 +1,5 @@ enabled == 1) ? 'secondary' : (($comment->ena + diff --git a/templates/moko-cassiopeia/html/com_engage/comments/default_login.php b/templates/moko-cassiopeia/html/com_engage/comments/default_login.php index 395f8f0..d08c718 100644 --- a/templates/moko-cassiopeia/html/com_engage/comments/default_login.php +++ b/templates/moko-cassiopeia/html/com_engage/comments/default_login.php @@ -1,4 +1,5 @@ - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/accordion_plans.php b/templates/moko-cassiopeia/html/com_osmembership/common/accordion_plans.php index c10ba22..734fffe 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/accordion_plans.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/accordion_plans.php @@ -1,4 +1,5 @@ + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/batch_nocheck.php b/templates/moko-cassiopeia/html/com_osmembership/common/batch_nocheck.php index e2d895a..9e43b82 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/batch_nocheck.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/batch_nocheck.php @@ -1,4 +1,5 @@ + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/categories.php b/templates/moko-cassiopeia/html/com_osmembership/common/categories.php index af9fb57..a5b5955 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/categories.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/categories.php @@ -1,4 +1,5 @@ thumb) { ?> - + - + - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/default_plans.php b/templates/moko-cassiopeia/html/com_osmembership/common/default_plans.php index 8f4b9b8..ecd9b73 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/default_plans.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/default_plans.php @@ -1,4 +1,5 @@ + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/plan_custom_fields.php b/templates/moko-cassiopeia/html/com_osmembership/common/plan_custom_fields.php index 0ce2539..c765448 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/plan_custom_fields.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/plan_custom_fields.php @@ -1,4 +1,5 @@ getFieldset('basic') as $field) currency_symbol ?: $item->currency; } ?> + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/priceduration.php b/templates/moko-cassiopeia/html/com_osmembership/common/priceduration.php index 4123b6a..0978186 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/priceduration.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/priceduration.php @@ -1,4 +1,5 @@ !important; } - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/pricingtable_flat_plans.php b/templates/moko-cassiopeia/html/com_osmembership/common/pricingtable_flat_plans.php index cab1dfc..b69920b 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/pricingtable_flat_plans.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/pricingtable_flat_plans.php @@ -1,4 +1,5 @@ ' ; } + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/pricingtable_plans.php b/templates/moko-cassiopeia/html/com_osmembership/common/pricingtable_plans.php index c3bf411..4e3e9f4 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/pricingtable_plans.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/pricingtable_plans.php @@ -1,4 +1,5 @@ ' ; } + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/renew_options.php b/templates/moko-cassiopeia/html/com_osmembership/common/renew_options.php index 0aa51d5..05b8822 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/renew_options.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/renew_options.php @@ -1,4 +1,5 @@ + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/restrictionmsg.php b/templates/moko-cassiopeia/html/com_osmembership/common/restrictionmsg.php index a8d7da7..a020cfa 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/restrictionmsg.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/restrictionmsg.php @@ -1,4 +1,5 @@ + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/subscriptions_history.php b/templates/moko-cassiopeia/html/com_osmembership/common/subscriptions_history.php index e2f7d41..89abd4b 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/subscriptions_history.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/subscriptions_history.php @@ -1,4 +1,5 @@ getClassMapping('hidden-phone'); ?> + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/subscriptions_pdf.php b/templates/moko-cassiopeia/html/com_osmembership/common/subscriptions_pdf.php index 20c2157..fd626e3 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/subscriptions_pdf.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/subscriptions_pdf.php @@ -1,4 +1,5 @@ - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_osmembership/common/upgrade_options.php b/templates/moko-cassiopeia/html/com_osmembership/common/upgrade_options.php index 929e772..f27993a 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/common/upgrade_options.php +++ b/templates/moko-cassiopeia/html/com_osmembership/common/upgrade_options.php @@ -1,4 +1,5 @@ + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default.php index 2be756e..9c549e5 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default.php @@ -1,4 +1,5 @@ item->recurring_subscription;?>" /> + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_advanced_settings.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_advanced_settings.php index d96a653..52635ba 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_advanced_settings.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_advanced_settings.php @@ -1,4 +1,5 @@ item->id && !$this->item->recurring_subscription) + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_general.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_general.php index 4e4d7fa..9ec11c0 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_general.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_general.php @@ -1,4 +1,5 @@ item->expired_date) display('description', $this->item->description, '100%', '250', '75', '10') ; ?> + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_group_membership.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_group_membership.php index 30900bf..41c26a8 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_group_membership.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_group_membership.php @@ -1,4 +1,5 @@ getClassMapping('controls'); lists['number_members_field']; ?> + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_member_card.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_member_card.php index bb13aca..1c2fe3c 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_member_card.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_member_card.php @@ -1,4 +1,5 @@ getClassMapping('controls'); display('card_layout', $this->item->card_layout, '100%', '550', '75', '8') ;?> + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_messages.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_messages.php index 5d42b84..fae9e81 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_messages.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_messages.php @@ -1,4 +1,5 @@ getClassMapping('controls');
    display('invoice_layout', $this->item->invoice_layout, '100%', '250', '75', '8'); ?>
    - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_metadata.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_metadata.php index d75b131..3028781 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_metadata.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_metadata.php @@ -1,4 +1,5 @@ getClassMapping('controls'); - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_recurring_settings.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_recurring_settings.php index b8325c9..9c17b56 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_recurring_settings.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_recurring_settings.php @@ -1,4 +1,5 @@ getClassMapping('controls'); } ?> + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_reminder_messages.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_reminder_messages.php index c30706a..8c72f6b 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_reminder_messages.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_reminder_messages.php @@ -1,4 +1,5 @@ getClassMapping('controls'); display('third_reminder_email_body', $this->item->third_reminder_email_body, '100%', '250', '75', '8'); ?> + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_reminders_settings.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_reminders_settings.php index e271945..051c8a1 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_reminders_settings.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_reminders_settings.php @@ -1,4 +1,5 @@ getClassMapping('controls'); } ?> + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_renew_options.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_renew_options.php index a54edf4..7513c9c 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_renew_options.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_renew_options.php @@ -1,4 +1,5 @@ getFieldset() as $field) { echo $field->input; } + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_renewal_discounts.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_renewal_discounts.php index ca1bd74..825f088 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_renewal_discounts.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_renewal_discounts.php @@ -1,4 +1,5 @@ getFieldset() as $field) { echo $field->input; } + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_translation.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_translation.php index d8a463b..64cf5e4 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_translation.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_translation.php @@ -1,4 +1,5 @@ languages as $language) } echo HTMLHelper::_('bootstrap.endTabSet'); + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_upgrade_options.php b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_upgrade_options.php index 8245ba7..aa67567 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplan/default_upgrade_options.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplan/default_upgrade_options.php @@ -1,4 +1,5 @@ getFieldset() as $field) { echo $field->input; } + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplans/default.php b/templates/moko-cassiopeia/html/com_osmembership/mplans/default.php index 528eec2..b9237cc 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplans/default.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplans/default.php @@ -1,4 +1,5 @@ state->filter_order_Dir; ?>" /> - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplans/default_search_bar.bootstrap4.php b/templates/moko-cassiopeia/html/com_osmembership/mplans/default_search_bar.bootstrap4.php index 2d1dd63..8318353 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplans/default_search_bar.bootstrap4.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplans/default_search_bar.bootstrap4.php @@ -1,4 +1,5 @@ bootstrapHelper->getClassMapping('pull-left'); echo $this->pagination->getLimitBox(); ?> + diff --git a/templates/moko-cassiopeia/html/com_osmembership/mplans/default_search_bar.php b/templates/moko-cassiopeia/html/com_osmembership/mplans/default_search_bar.php index 42b6f8c..f1800d4 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/mplans/default_search_bar.php +++ b/templates/moko-cassiopeia/html/com_osmembership/mplans/default_search_bar.php @@ -1,4 +1,5 @@ bootstrapHelper->getClassMapping('pull-left'); echo $this->pagination->getLimitBox(); ?> + diff --git a/templates/moko-cassiopeia/html/com_osmembership/plan/default.php b/templates/moko-cassiopeia/html/com_osmembership/plan/default.php index 3cc2423..8643c8a 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/plan/default.php +++ b/templates/moko-cassiopeia/html/com_osmembership/plan/default.php @@ -1,4 +1,5 @@ - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_osmembership/plan/default_renew_upgrade.php b/templates/moko-cassiopeia/html/com_osmembership/plan/default_renew_upgrade.php index 12065eb..2176c55 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/plan/default_renew_upgrade.php +++ b/templates/moko-cassiopeia/html/com_osmembership/plan/default_renew_upgrade.php @@ -1,4 +1,5 @@ + diff --git a/templates/moko-cassiopeia/html/com_osmembership/plans/columns.php b/templates/moko-cassiopeia/html/com_osmembership/plans/columns.php index bd6bc2e..bcee22a 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/plans/columns.php +++ b/templates/moko-cassiopeia/html/com_osmembership/plans/columns.php @@ -1,4 +1,5 @@ - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_osmembership/plans/default.php b/templates/moko-cassiopeia/html/com_osmembership/plans/default.php index 0275e35..e9980c7 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/plans/default.php +++ b/templates/moko-cassiopeia/html/com_osmembership/plans/default.php @@ -1,4 +1,5 @@ - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_osmembership/plans/pricingtable.php b/templates/moko-cassiopeia/html/com_osmembership/plans/pricingtable.php index 4da0987..0572e69 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/plans/pricingtable.php +++ b/templates/moko-cassiopeia/html/com_osmembership/plans/pricingtable.php @@ -1,4 +1,5 @@ category ? $this->category->id : 0; echo OSMembershipHelperHtml::loadCommonLayout('common/tmpl/pricingtable_plans.php', ['items' => $this->items, 'input' => $this->input, 'config' => $this->config, 'Itemid' => $this->Itemid, 'categoryId' => $this->categoryId, 'bootstrapHelper' => $this->bootstrapHelper, 'params' => $this->params]); } ?> - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_osmembership/plans/pricingtablecircle.php b/templates/moko-cassiopeia/html/com_osmembership/plans/pricingtablecircle.php index 96a9155..6361a88 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/plans/pricingtablecircle.php +++ b/templates/moko-cassiopeia/html/com_osmembership/plans/pricingtablecircle.php @@ -1,4 +1,5 @@ category ? $this->category->id : 0; echo OSMembershipHelperHtml::loadCommonLayout('common/tmpl/pricingtable_circle_plans.php', ['items' => $this->items, 'input' => $this->input, 'config' => $this->config, 'Itemid' => $this->Itemid, 'categoryId' => $this->categoryId, 'bootstrapHelper' => $this->bootstrapHelper, 'params' => $this->params]); } ?> - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/com_osmembership/plans/pricingtableflat.php b/templates/moko-cassiopeia/html/com_osmembership/plans/pricingtableflat.php index 0c2fe6b..80724d4 100644 --- a/templates/moko-cassiopeia/html/com_osmembership/plans/pricingtableflat.php +++ b/templates/moko-cassiopeia/html/com_osmembership/plans/pricingtableflat.php @@ -1,4 +1,5 @@ category ? $this->category->id : 0; echo OSMembershipHelperHtml::loadCommonLayout('common/tmpl/pricingtable_flat_plans.php', ['items' => $this->items, 'input' => $this->input, 'config' => $this->config, 'Itemid' => $this->Itemid, 'categoryId' => $this->categoryId, 'bootstrapHelper' => $this->bootstrapHelper, 'params' => $this->params]); } ?> - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/layouts/chromes/card.php b/templates/moko-cassiopeia/html/layouts/chromes/card.php index c5bbe95..c2c02c4 100644 --- a/templates/moko-cassiopeia/html/layouts/chromes/card.php +++ b/templates/moko-cassiopeia/html/layouts/chromes/card.php @@ -1,5 +1,6 @@ ' . content; ?> > + diff --git a/templates/moko-cassiopeia/html/layouts/chromes/html5.php b/templates/moko-cassiopeia/html/layouts/chromes/html5.php index 7f571be..0100966 100644 --- a/templates/moko-cassiopeia/html/layouts/chromes/html5.php +++ b/templates/moko-cassiopeia/html/layouts/chromes/html5.php @@ -1,5 +1,6 @@ ' . content; ?> > + diff --git a/templates/moko-cassiopeia/html/layouts/chromes/noCard.php b/templates/moko-cassiopeia/html/layouts/chromes/noCard.php index d18e128..f5be590 100644 --- a/templates/moko-cassiopeia/html/layouts/chromes/noCard.php +++ b/templates/moko-cassiopeia/html/layouts/chromes/noCard.php @@ -1,5 +1,6 @@ ' . content; ?> > + diff --git a/templates/moko-cassiopeia/html/mod_custom/banner.php b/templates/moko-cassiopeia/html/mod_custom/banner.php index 590ec42..2b8a89f 100644 --- a/templates/moko-cassiopeia/html/mod_custom/banner.php +++ b/templates/moko-cassiopeia/html/mod_custom/banner.php @@ -1,5 +1,6 @@ get('backgroundimage')) { content; ?> + diff --git a/templates/moko-cassiopeia/html/mod_custom/hero.php b/templates/moko-cassiopeia/html/mod_custom/hero.php index 05fc120..1ec8c73 100644 --- a/templates/moko-cassiopeia/html/mod_custom/hero.php +++ b/templates/moko-cassiopeia/html/mod_custom/hero.php @@ -1,5 +1,6 @@ get('backgroundimage')) { content; ?> + diff --git a/templates/moko-cassiopeia/html/mod_gabble/default.php b/templates/moko-cassiopeia/html/mod_gabble/default.php index 33cb740..379d70f 100644 --- a/templates/moko-cassiopeia/html/mod_gabble/default.php +++ b/templates/moko-cassiopeia/html/mod_gabble/default.php @@ -1,4 +1,5 @@ get("id")){ '; - + return; } @@ -41,7 +42,7 @@ if ( !$currentuser->get("id")){ $input = $app->input; if ($input->get('option') == 'com_gabble') { - + echo '
    @@ -50,9 +51,9 @@ if ($input->get('option') == 'com_gabble') {
    '; - + return; - + } $document->addScript('media/com_gabble/js/gabble_com.js'); @@ -60,16 +61,16 @@ $document->addScript('media/com_gabble/js/gabble_com.js'); ?>
    - +
    - +
    - +
    - +
    @@ -80,9 +81,9 @@ $document->addScript('media/com_gabble/js/gabble_com.js');
    - +
    - +

    Tabaoca

    + diff --git a/templates/moko-cassiopeia/html/mod_menu/collapse-metismenu.php b/templates/moko-cassiopeia/html/mod_menu/collapse-metismenu.php index 4cf569d..925e889 100644 --- a/templates/moko-cassiopeia/html/mod_menu/collapse-metismenu.php +++ b/templates/moko-cassiopeia/html/mod_menu/collapse-metismenu.php @@ -1,5 +1,6 @@
    + diff --git a/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu.php b/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu.php index 7a598c7..b1f1627 100644 --- a/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu.php +++ b/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu.php @@ -1,5 +1,6 @@ get('startLevel', 1); endswitch; } ?> + diff --git a/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_component.php b/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_component.php index 5843303..e8cc033 100644 --- a/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_component.php +++ b/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_component.php @@ -1,5 +1,6 @@ flink, EN if ($showAll && $item->deeper) { echo ''; } + diff --git a/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_heading.php b/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_heading.php index e136f71..6df3bd0 100644 --- a/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_heading.php +++ b/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_heading.php @@ -1,5 +1,6 @@ deeper) { } else { echo '' . $linktype . ''; } + diff --git a/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_separator.php b/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_separator.php index 9e8695e..640ae62 100644 --- a/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_separator.php +++ b/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_separator.php @@ -1,5 +1,6 @@ deeper) { } else { echo '' . $linktype . ''; } + diff --git a/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_url.php b/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_url.php index 7b4f731..391fa00 100644 --- a/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_url.php +++ b/templates/moko-cassiopeia/html/mod_menu/dropdown-metismenu_url.php @@ -1,5 +1,6 @@ flink, EN if ($showAll && $item->deeper) { echo ''; } + diff --git a/templates/moko-cassiopeia/html/mod_virtuemart_cart/default.php b/templates/moko-cassiopeia/html/mod_virtuemart_cart/default.php index 5649ec7..493e59e 100644 --- a/templates/moko-cassiopeia/html/mod_virtuemart_cart/default.php +++ b/templates/moko-cassiopeia/html/mod_virtuemart_cart/default.php @@ -1,5 +1,6 @@ -
    \ No newline at end of file +
    diff --git a/templates/moko-cassiopeia/html/mod_virtuemart_cart/dropdown.php b/templates/moko-cassiopeia/html/mod_virtuemart_cart/dropdown.php index b3c5ecf..c6389bd 100644 --- a/templates/moko-cassiopeia/html/mod_virtuemart_cart/dropdown.php +++ b/templates/moko-cassiopeia/html/mod_virtuemart_cart/dropdown.php @@ -1,5 +1,6 @@ -
    \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/mod_virtuemart_category/all.php b/templates/moko-cassiopeia/html/mod_virtuemart_category/all.php index ed02219..a0d4eff 100644 --- a/templates/moko-cassiopeia/html/mod_virtuemart_category/all.php +++ b/templates/moko-cassiopeia/html/mod_virtuemart_category/all.php @@ -1,5 +1,6 @@ get('level', 0); - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/mod_virtuemart_category/current.php b/templates/moko-cassiopeia/html/mod_virtuemart_category/current.php index 66518e9..973a2a7 100644 --- a/templates/moko-cassiopeia/html/mod_virtuemart_category/current.php +++ b/templates/moko-cassiopeia/html/mod_virtuemart_category/current.php @@ -1,5 +1,6 @@ - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/mod_virtuemart_category/default.php b/templates/moko-cassiopeia/html/mod_virtuemart_category/default.php index f0bc239..e151aa9 100644 --- a/templates/moko-cassiopeia/html/mod_virtuemart_category/default.php +++ b/templates/moko-cassiopeia/html/mod_virtuemart_category/default.php @@ -1,5 +1,6 @@ - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/mod_virtuemart_category/wall.php b/templates/moko-cassiopeia/html/mod_virtuemart_category/wall.php index 9d1130f..dcdcb3b 100644 --- a/templates/moko-cassiopeia/html/mod_virtuemart_category/wall.php +++ b/templates/moko-cassiopeia/html/mod_virtuemart_category/wall.php @@ -1,5 +1,6 @@ position == 'sidebar-left' || $module->position == 'sidebar-ri - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/mod_virtuemart_currencies/default.php b/templates/moko-cassiopeia/html/mod_virtuemart_currencies/default.php index 4daf910..d24b9a7 100644 --- a/templates/moko-cassiopeia/html/mod_virtuemart_currencies/default.php +++ b/templates/moko-cassiopeia/html/mod_virtuemart_currencies/default.php @@ -1,5 +1,6 @@ - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/mod_virtuemart_product/default.php b/templates/moko-cassiopeia/html/mod_virtuemart_product/default.php index a3b5841..9474030 100644 --- a/templates/moko-cassiopeia/html/mod_virtuemart_product/default.php +++ b/templates/moko-cassiopeia/html/mod_virtuemart_product/default.php @@ -1,5 +1,6 @@ - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/mod_virtuemart_search/default.php b/templates/moko-cassiopeia/html/mod_virtuemart_search/default.php index c517da8..6776c11 100644 --- a/templates/moko-cassiopeia/html/mod_virtuemart_search/default.php +++ b/templates/moko-cassiopeia/html/mod_virtuemart_search/default.php @@ -1,5 +1,6 @@ '; } ?> - \ No newline at end of file + diff --git a/templates/moko-cassiopeia/html/tinymce/index.html b/templates/moko-cassiopeia/html/tinymce/index.html index 2efb97f..2166c1a 100644 --- a/templates/moko-cassiopeia/html/tinymce/index.html +++ b/templates/moko-cassiopeia/html/tinymce/index.html @@ -1 +1,4 @@ - + + + + diff --git a/templates/moko-cassiopeia/index.php b/templates/moko-cassiopeia/index.php index f73dd7d..d6f0717 100644 --- a/templates/moko-cassiopeia/index.php +++ b/templates/moko-cassiopeia/index.php @@ -1,14 +1,11 @@ * @license GNU General Public License version 2 or later; see LICENSE.txt - * - * Website: https://mokoconsulting.tech - * Email: hello@mokoconsulting.tech - * Phone: +1 (931) 279-6313 */ defined('_JEXEC') or die; @@ -23,29 +20,20 @@ use Joomla\CMS\Uri\Uri; $app = Factory::getApplication(); $input = $app->getInput(); $wa = $this->getWebAssetManager(); -$params_developmentmode = $this->params->get('developmentmode', false); $params_ColorName = $this->params->get('colorName', 'colors_standard'); -if ($params_developmentmode) { - $params_googletagmanager = true; - $params_googletagmanagerid = "GTM-WX6W2ZVB -"; - $params_googleanalytics = true; - $params_googleanalyticsid = "G-NJ6Z5NWZST"; -} else { - $params_googletagmanager = $this->params->get('googletagmanager', false); - $params_googletagmanagerid = $this->params->get('googletagmanagerid', null); - $params_googleanalytics = $this->params->get('googleanalytics', false); - $params_googleanalyticsid = $this->params->get('googleanalyticsid', null); -} +$params_googletagmanager = $this->params->get('googletagmanager', false); +$params_googletagmanagerid = $this->params->get('googletagmanagerid', null); +$params_googleanalytics = $this->params->get('googleanalytics', false); +$params_googleanalyticsid = $this->params->get('googleanalyticsid', null); $params_custom_head_start = $this->params->get('custom_head_start', null); $params_custom_head_end = $this->params->get('custom_head_end', null); $params_leftIcon = htmlspecialchars( - $this->params->get('drawerLeftIcon', 'fa-solid fa-chevron-left'), - ENT_COMPAT, 'UTF-8' + $this->params->get('drawerLeftIcon', 'fa-solid fa-chevron-left'), + ENT_COMPAT, 'UTF-8' ); $params_rightIcon = htmlspecialchars( - $this->params->get('drawerRightIcon', 'fa-solid fa-chevron-right'), - ENT_COMPAT, 'UTF-8' + $this->params->get('drawerRightIcon', 'fa-solid fa-chevron-right'), + ENT_COMPAT, 'UTF-8' ); // Add Bootstrap 5 Support @@ -86,41 +74,41 @@ $params_FontScheme = $this->params->get('useFontScheme', false); $fontStyles = ''; if ($params_FontScheme) { - if (stripos($params_FontScheme, 'https://') === 0) { - $this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']); - $this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']); - $this->getPreloadManager()->preload($params_FontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']); - $wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'', 'crossorigin' => 'anonymous']); + if (stripos($params_FontScheme, 'https://') === 0) { + $this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']); + $this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']); + $this->getPreloadManager()->preload($params_FontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']); + $wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'', 'crossorigin' => 'anonymous']); - if (preg_match_all('/family=([^?:]*):/i', $params_FontScheme, $matches) > 0) { - $fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;\n'; - $fontStyles .= '--font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;\n'; - $fontStyles .= '--font-weight-normal: 400;\n'; - $fontStyles .= '--font-weight-headings: 700;'; - } - } else { - $wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']); - $this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']); - } + if (preg_match_all('/family=([^?:]*):/i', $params_FontScheme, $matches) > 0) { + $fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;\n'; + $fontStyles .= '--font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;\n'; + $fontStyles .= '--font-weight-normal: 400;\n'; + $fontStyles .= '--font-weight-headings: 700;'; + } + } else { + $wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']); + $this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']); + } } // Enable assets $wa->usePreset('template.MOKO-CASSIOPEIA.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')) - ->useStyle('template.active.language') - ->useStyle('template.user') - ->useScript('template.user') - ->addInlineStyle(":root {\n --hue: 214;\n --template-bg-light: #f0f4fb;\n --template-text-dark: #495057;\n --template-text-light: #ffffff;\n --template-link-color: #2a69b8;\n --template-special-color: #001B4C;\n $fontStyles\n }"); + ->useStyle('template.active.language') + ->useStyle('template.user') + ->useScript('template.user') + ->addInlineStyle(":root {\n --hue: 214;\n --template-bg-light: #f0f4fb;\n --template-text-dark: #495057;\n --template-text-light: #ffffff;\n --template-link-color: #2a69b8;\n --template-special-color: #001B4C;\n $fontStyles\n }"); // Override 'template.active' asset for correct dependency $wa->registerStyle('template.active', '', [], [], ['template.MOKO-CASSIOPEIA.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]); // Logo file or site title if ($this->params->get('logoFile')) { - $logo = HTMLHelper::_('image', Uri::root(false) . htmlspecialchars($this->params->get('logoFile'), ENT_QUOTES), $sitename, ['loading' => 'eager', 'decoding' => 'async'], false, 0); + $logo = HTMLHelper::_('image', Uri::root(false) . htmlspecialchars($this->params->get('logoFile'), ENT_QUOTES), $sitename, ['loading' => 'eager', 'decoding' => 'async'], false, 0); } elseif ($this->params->get('siteTitle')) { - $logo = '' . htmlspecialchars($this->params->get('siteTitle'), ENT_COMPAT, 'UTF-8') . ''; + $logo = '' . htmlspecialchars($this->params->get('siteTitle'), ENT_COMPAT, 'UTF-8') . ''; } else { - $logo = HTMLHelper::_('image', 'full_logo.png', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0); + $logo = HTMLHelper::_('image', 'full_logo.png', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0); } $hasClass = ''; @@ -139,10 +127,10 @@ $this->setMetaData('viewport', 'width=device-width, initial-scale=1'); $stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : ''; if ($this->params->get('fA6KitCode')) { - $fa6Kit = "https://kit.fontawesome.com/" . $this->params->get('fA6KitCode') . ".js"; - JHtml::_('script', $fa6Kit, ['crossorigin' => 'anonymous']); + $fa6Kit = "https://kit.fontawesome.com/" . $this->params->get('fA6KitCode') . ".js"; + JHtml::_('script', $fa6Kit, ['crossorigin' => 'anonymous']); } else { - $wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet'); + $wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet'); } // Add Bootstrap TOC CSS $this->addStyleSheet($templatePath . '/css/vendor/afeld/bootstrap-toc.min.css'); @@ -154,245 +142,257 @@ $this->addScript($templatePath . '/js/vendor/afeld/bootstrap-toc.min.js'); - - - - + + + + + - - - + + + - - - + + + - - - + - + // GA4 vs UA fallback + (function(id){ + if (/^G-/.test(id)) { + // GA4 + gtag('config', id, { + 'anonymize_ip': true + }); + } else if (/^UA-/.test(id)) { + // Legacy Universal Analytics (sunset by Google, kept for backward compat) + gtag('config', id, { + 'anonymize_ip': true + }); + console.warn('Using a UA- ID. Universal Analytics is sunset; consider migrating to GA4.'); + } else { + console.warn('Unrecognized Google Analytics ID format:', id); + } + })(''); + + -
    - countModules('topbar')) : ?> -
    - -
    - + countModules('topbar')) : ?> +
    + +
    + -
    - countModules('below-topbar')) : ?> -
    - -
    - +
    + countModules('below-topbar')) : ?> +
    + +
    + - params->get('brand', 1)) : ?> -
    -
    - - params->get('siteDescription')) : ?> -
    params->get('siteDescription')); ?>
    - -
    -
    - + params->get('brand', 1)) : ?> +
    +
    + + params->get('siteDescription')) : ?> +
    params->get('siteDescription')); ?>
    + +
    +
    + - countModules('below-logo')) : ?> - - -
    + countModules('below-logo')) : ?> + + +
    - + countModules('drawer-left')) : ?> countModules('drawer-right')) : ?> - countModules('menu', true) || $this->countModules('search', true)) : ?> -
    - countModules('menu', true)) : ?> - - - countModules('search', true)) : ?> -
    - -
    - -
    - + countModules('menu', true) || $this->countModules('search', true)) : ?> +
    + countModules('menu', true)) : ?> + + + countModules('search', true)) : ?> +
    + +
    + +
    +
    - countModules('banner', true)) : ?> -
    - -
    - + countModules('banner', true)) : ?> +
    + +
    + - countModules('top-a', true)) : ?> -
    - -
    - + countModules('top-a', true)) : ?> +
    + +
    + - countModules('top-b', true)) : ?> -
    - -
    - + countModules('top-b', true)) : ?> +
    + +
    + - countModules('sidebar-left', true)) : ?> -
    - -
    - + countModules('sidebar-left', true)) : ?> +
    + +
    + -
    - - - -
    - -
    - -
    +
    + + + +
    + +
    + +
    - countModules('sidebar-right', true)) : ?> -
    - -
    - + countModules('sidebar-right', true)) : ?> +
    + +
    + - countModules('bottom-a', true)) : ?> -
    - -
    - + countModules('bottom-a', true)) : ?> +
    + +
    + - countModules('bottom-b', true)) : ?> -
    - -
    - + countModules('bottom-b', true)) : ?> +
    + +
    +
    - countModules('footer-menu', true)) : ?> -
    - -
    - - countModules('footer', true)) : ?> -
    - -
    - + countModules('footer-menu', true)) : ?> +
    + +
    + + countModules('footer', true)) : ?> +
    + +
    +
    params->get('backTop') == 1) : ?> - - - + + + countModules('drawer-left', true)) : ?> @@ -400,10 +400,10 @@ if (!empty($params_googleanalytics) && !empty($params_googleanalyticsid)) : @@ -413,14 +413,74 @@ if (!empty($params_googleanalytics) && !empty($params_googleanalyticsid)) : +
    +
    + Light +
    + +
    + Dark + +
    +
    + + diff --git a/templates/moko-cassiopeia/offline.php b/templates/moko-cassiopeia/offline.php index d08812f..0bb13af 100644 --- a/templates/moko-cassiopeia/offline.php +++ b/templates/moko-cassiopeia/offline.php @@ -1,4 +1,5 @@ get('offline_image')){ + diff --git a/templates/moko-cassiopeia/templateDetails.xml b/templates/moko-cassiopeia/templateDetails.xml index e030330..e88aa54 100644 --- a/templates/moko-cassiopeia/templateDetails.xml +++ b/templates/moko-cassiopeia/templateDetails.xml @@ -1,25 +1,30 @@ - https://mokoconsulting.tech/updates/updates.xml + https://raw.githubusercontent.com/mokoconsulting-tech/MokoUpdates/refs/heads/main/joomla/moko-cassiopeia/updates.xml moko-cassiopeia - 1.13 - 2025-08-09 + 1.15 + 2025-08-20 Jonathan Miller || Moko Consulting - jmiller@mokoconsulting.tech + hello@mokoconsulting.tech (C)GNU General Public License Version 2 - 2025 Moko Consulting TPL_MOKO-CASSIOPEIA_XML_DESCRIPTION 1 @@ -72,29 +77,20 @@
    - + - + - - - - - - + + + + + + - - + + - + - + - +
    - + - - + + - +
    - - + +
    - - + +
    -     \ No newline at end of file +