From e4f880c6216afddd27c3dbcb1b3789332eebe792 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 7 Feb 2026 17:08:25 +0000 Subject: [PATCH] Reorganize 4 CSS variable files with consistent structure and section headers Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- .../css/colors/dark/colors_alternative.css | 876 ++++++------ src/media/css/colors/dark/colors_standard.css | 721 +++++----- .../css/colors/light/colors_alternative.css | 691 ++++----- .../css/colors/light/colors_standard.css | 1251 +++++++++-------- templates/colors_custom.css | 694 ++++----- 5 files changed, 2151 insertions(+), 2082 deletions(-) diff --git a/src/media/css/colors/dark/colors_alternative.css b/src/media/css/colors/dark/colors_alternative.css index f7ce97d..1f7a298 100644 --- a/src/media/css/colors/dark/colors_alternative.css +++ b/src/media/css/colors/dark/colors_alternative.css @@ -20,492 +20,494 @@ * --------------------------------------------- */ :root[data-bs-theme='dark']{ - /* System hint for native widgets */ - color-scheme: dark; +color-scheme: dark; - /* Brand & links */ - --color-primary: #112855; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #6fb3ff; +/* ===== BRAND & THEME COLORS ===== */ +--color-primary: #112855; +--accent-color-primary: #3f8ff0; +--accent-color-secondary: #6fb3ff; - --mainmenu-nav-link-color: #fff; +/* ===== NAVIGATION ===== */ +--mainmenu-nav-link-color: #fff; +--nav-text-color: var(--mainmenu-nav-link-color); +--nav-bg-color: var(--color-link); - --color-link: #224FAA; - --color-hover: #224FAA; +/* ===== LINKS ===== */ +--color-link: #224FAA; +--color-hover: #224FAA; +--link-color: #8ab4f8; +--link-color-rgb: 138, 180, 248; +--link-decoration: underline; +--link-hover-color: #c3d6ff; +--link-hover-color-rgb: 195, 214, 255; +--link-active-color: var(--link-color); - /* Header background (kept same image; works over dark bg) */ - --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; +/* ===== OFFCANVAS ===== */ +--offcanvas-color: var(--body-color); +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; - /* Section containers */ - --container-below-topbar-bg-image: ; - --container-below-topbar-bg-color: ; - --container-below-topbar-bg-position: center; - --container-below-topbar-bg-attachment: fixed; - --container-below-topbar-bg-repeat: no-repeat; - --container-below-topbar-bg-size: cover; - --container-below-topbar-border: ; - --container-below-topbar-border-radius: ; +/* ===== NAVBAR ===== */ +--navbar-padding-x: 1rem; +--navbar-padding-y: 0.5rem; +--navbar-color: var(--nav-text-color); +--navbar-active-color: var(--mainmenu-nav-link-color); +--navbar-disabled-color: #6c757d; +--navbar-brand-padding-y: 0.3125rem; +--navbar-brand-margin-end: 1rem; +--navbar-brand-font-size: 1.25rem; +--navbar-brand-color: var(--nav-text-color); +--navbar-brand-active-color: var(--mainmenu-nav-link-color); +--navbar-nav-link-padding-x: 0.5rem; +--navbar-toggler-padding-y: 0.25rem; +--navbar-toggler-padding-x: 0.75rem; +--navbar-toggler-font-size: 1.25rem; +--navbar-toggler-border-color: rgba(255, 255, 255, 0.1); +--navbar-toggler-border-radius: 0.25rem; +--navbar-toggler-focus-width: 0.25rem; +--navbar-toggler-transition: box-shadow 0.15s ease-in-out; +--nav-link-padding-x: 1rem; +--nav-link-padding-y: 0.5rem; +--nav-link-font-weight: 400; +--nav-link-color: var(--nav-text-color); +--nav-link-active-color: var(--mainmenu-nav-link-color); +--nav-link-disabled-color: #6c757d; - --container-top-a-bg-image: ; - --container-top-a-bg-color: ; - --container-top-a-bg-position: center; - --container-top-a-bg-attachment: fixed; - --container-top-a-bg-repeat: no-repeat; - --container-top-a-bg-size: cover; - --container-top-a-border: ; - --container-top-a-border-radius: ; +/* ===== TYPOGRAPHY & BODY ===== */ +--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--body-font-size: 1rem; +--body-font-weight: 400; +--body-line-height: 1.5; +--body-color: #e6ebf1; +--body-color-rgb: 230, 235, 241; +--body-bg: #0e1318; +--body-bg-rgb: 14, 19, 24; +--heading-color: #f1f5f9; +--emphasis-color: #fff; +--emphasis-color-rgb: 255, 255, 255; +--secondary-color: #e6ebf1bf; +--secondary-color-rgb: 230, 235, 241; +--tertiary-color: #e6ebf180; +--tertiary-color-rgb: 230, 235, 241; +--muted-color: #6d757e; +--code-color: #ff7abd; +--code-color-ink: var(--code-color, #e93f8e); +--highlight-color: #111; +--highlight-bg: #ffe28a1a; - --container-top-b-bg-image: ; - --container-top-b-bg-color: ; - --container-top-b-bg-position: center; - --container-top-b-bg-attachment: fixed; - --container-top-b-bg-repeat: no-repeat; - --container-top-b-bg-size: cover; - --container-top-b-border: ; - --container-top-b-border-radius: ; +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 1rem; +--padding-y: 1rem; +--bg-opacity: 1; +--nav-toggle-size: 3rem; +--gradient: linear-gradient(180deg, #ffffff26, #fff0); +--secondary-bg: #151b22; +--secondary-bg-rgb: 21, 27, 34; +--tertiary-bg: #10151b; +--tertiary-bg-rgb: 16, 21, 27; +--hr-color: var(--border-color, #dfe3e7); +--border-color-soft: var(--border-color, #dfe3e7); +--kbd-bg: var(--secondary-bg, #eaedf0); +--kbd-ink: var(--body-bg, #fff); +--toc-bg: var(--secondary-bg, #eaedf0); +--toc-ink: var(--color-primary, #112855); +--selection-bg: var(--highlight-bg, #fbeea8); +--selection-ink: var(--body-color, #22262a); +--border: 5px; - --container-toc-bg: ; - --container-toc-color: #dbe3ff; +/* ===== BREAKPOINTS ===== */ +--bp-xs: 0; +--bp-sm: 576px; +--bp-md: 768px; +--bp-lg: 992px; +--bp-xl: 1200px; - --container-sidebar-bg-image: ; - --container-sidebar-bg-color: ; - --container-sidebar-bg-position: center; - --container-sidebar-bg-attachment: scroll; - --container-sidebar-bg-repeat: repeat; - --container-sidebar-bg-size: auto; - --container-sidebar-border: ; - --container-sidebar-border-radius: ; +/* ===== BOOTSTRAP PALETTE ===== */ +--primary: #010156; +--secondary: #48525d; +--success: #4aa664; +--info: #4f7aa0; +--warning: #c77a00; +--danger: #c23a31; +--light: #1b2027; +--dark: #0f1318; +--primary-rgb: 1,1,86; +--secondary-rgb: 72,82,93; +--success-rgb: 74,166,100; +--info-rgb: 79,122,160; +--warning-rgb: 199,122,0; +--danger-rgb: 194,58,49; +--light-rgb: 27,32,39; +--dark-rgb: 15,19,24; +--primary-text-emphasis: #c7ccff; +--secondary-text-emphasis: #cfd6de; +--success-text-emphasis: #bde8c9; +--info-text-emphasis: #bcd6ee; +--warning-text-emphasis: #ffd9a6; +--danger-text-emphasis: #ffb7b2; +--light-text-emphasis: #d2d8df; +--dark-text-emphasis: #d2d8df; +--primary-bg-subtle: #0b1030; +--secondary-bg-subtle: #1e2430; +--success-bg-subtle: #0f2a1b; +--info-bg-subtle: #0d2232; +--warning-bg-subtle: #2a1e06; +--danger-bg-subtle: #2d1110; +--light-bg-subtle: #12161d; +--dark-bg-subtle: #1e2430; +--primary-border-subtle: #2b3a7a; +--secondary-border-subtle: #2b323b; +--success-border-subtle: #2b5b40; +--info-border-subtle: #254861; +--warning-border-subtle: #5a3c0e; +--danger-border-subtle: #5c2723; +--light-border-subtle: #222831; +--dark-border-subtle: #2b323b; - --container-bottom-a-bg-image: ; - --container-bottom-a-bg-color: ; - --container-bottom-a-bg-position: center; - --container-bottom-a-bg-attachment: fixed; - --container-bottom-a-bg-repeat: no-repeat; - --container-bottom-a-bg-size: cover; - --container-bottom-a-border: ; - --container-bottom-a-border-radius: 5px; +/* ===== STANDARD COLORS ===== */ +--blue: #91a4ff; +--indigo: #b19cff; +--purple: #c0a5ff; +--pink: #ff8fc0; +--red: #ff7a73; +--orange: #ff9c4d; +--yellow: #ffd166; +--green: #78d694; +--teal: #76e3ff; +--cyan: #6fb7ff; +--black: #000; +--white: #fff; - --container-bottom-b-bg-image: ; - --container-bottom-b-bg-color: ; - --container-bottom-b-bg-position: center; - --container-bottom-b-bg-attachment: fixed; - --container-bottom-b-bg-repeat: no-repeat; - --container-bottom-b-bg-size: cover; - --container-bottom-b-border: ; - --container-bottom-b-border-radius: ; +/* ===== GRAY SCALE ===== */ +--gray-100: #161a20; +--gray-200: #1b2027; +--gray-300: #222831; +--gray-400: #2b323b; +--gray-500: #36404a; +--gray-600: #48525d; +--gray-700: #5b6672; +--gray-800: #cfd6de; +--gray-900: #e6ebf1; +--white-rgb: 255, 255, 255; +--black-rgb: 0, 0, 0; - /* Nav & accents */ - --nav-text-color: var(--mainmenu-nav-link-color); - --nav-bg-color: var(--color-link); - --border: 5px; +/* ===== HEADER BACKGROUND ===== */ +--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); +--header-background-attachment: fixed; +--header-background-repeat: repeat; +--header-background-size: auto; - --muted-color: #6d757e; - --hr-color: var(--border-color, #dfe3e7); - --link-active-color: var(--link-color); - --code-color-ink: var(--code-color, #e93f8e); - --border-color-soft: var(--border-color, #dfe3e7); - --kbd-bg: var(--secondary-bg, #eaedf0); - --kbd-ink: var(--body-bg, #fff); - --toc-bg: var(--secondary-bg, #eaedf0); - --toc-ink: var(--color-primary, #112855); - --selection-bg: var(--highlight-bg, #fbeea8); - --selection-ink: var(--body-color, #22262a); +/* ===== CONTAINER BACKGROUNDS ===== */ +/* Below Topbar Container */ +--container-below-topbar-bg-image: ; +--container-below-topbar-bg-color: ; +--container-below-topbar-bg-position: center; +--container-below-topbar-bg-attachment: fixed; +--container-below-topbar-bg-repeat: no-repeat; +--container-below-topbar-bg-size: cover; +--container-below-topbar-border: ; +--container-below-topbar-border-radius: ; - /* Palette */ - --blue: #91a4ff; - --black: #000; - --indigo: #b19cff; - --purple: #c0a5ff; - --pink: #ff8fc0; - --red: #ff7a73; - --orange: #ff9c4d; - --yellow: #ffd166; - --green: #78d694; - --teal: #76e3ff; - --cyan: #6fb7ff; - --white: #fff; +/* Top A Container */ +--container-top-a-bg-image: ; +--container-top-a-bg-color: ; +--container-top-a-bg-position: center; +--container-top-a-bg-attachment: fixed; +--container-top-a-bg-repeat: no-repeat; +--container-top-a-bg-size: cover; +--container-top-a-border: ; +--container-top-a-border-radius: ; - /* Grays tuned for dark */ - --gray-100: #161a20; - --gray-200: #1b2027; - --gray-300: #222831; - --gray-400: #2b323b; - --gray-500: #36404a; - --gray-600: #48525d; - --gray-700: #5b6672; - --gray-800: #cfd6de; - --gray-900: #e6ebf1; +/* Top B Container */ +--container-top-b-bg-image: ; +--container-top-b-bg-color: ; +--container-top-b-bg-position: center; +--container-top-b-bg-attachment: fixed; +--container-top-b-bg-repeat: no-repeat; +--container-top-b-bg-size: cover; +--container-top-b-border: ; +--container-top-b-border-radius: ; - /* Contextuals (keep brand hues) */ - --primary: #010156; - --secondary: #48525d; - --success: #4aa664; - --info: #4f7aa0; - --warning: #c77a00; - --danger: #c23a31; - --light: #1b2027; - --dark: #0f1318; +/* TOC Container */ +--container-toc-bg: ; +--container-toc-color: #dbe3ff; - /* RGB helpers */ - --primary-rgb: 1,1,86; - --secondary-rgb: 72,82,93; - --success-rgb: 74,166,100; - --info-rgb: 79,122,160; - --warning-rgb: 199,122,0; - --danger-rgb: 194,58,49; - --light-rgb: 27,32,39; - --dark-rgb: 15,19,24; +/* Sidebar Container */ +--container-sidebar-bg-image: ; +--container-sidebar-bg-color: ; +--container-sidebar-bg-position: center; +--container-sidebar-bg-attachment: scroll; +--container-sidebar-bg-repeat: repeat; +--container-sidebar-bg-size: auto; +--container-sidebar-border: ; +--container-sidebar-border-radius: ; - /* Emphasis & subtle variants */ - --primary-text-emphasis: #c7ccff; - --secondary-text-emphasis: #cfd6de; - --success-text-emphasis: #bde8c9; - --info-text-emphasis: #bcd6ee; - --warning-text-emphasis: #ffd9a6; - --danger-text-emphasis: #ffb7b2; - --light-text-emphasis: #d2d8df; - --dark-text-emphasis: #d2d8df; +/* Bottom A Container */ +--container-bottom-a-bg-image: ; +--container-bottom-a-bg-color: ; +--container-bottom-a-bg-position: center; +--container-bottom-a-bg-attachment: fixed; +--container-bottom-a-bg-repeat: no-repeat; +--container-bottom-a-bg-size: cover; +--container-bottom-a-border: ; +--container-bottom-a-border-radius: 5px; - --primary-bg-subtle: #0b1030; - --secondary-bg-subtle: #1e2430; - --success-bg-subtle: #0f2a1b; - --info-bg-subtle: #0d2232; - --warning-bg-subtle: #2a1e06; - --danger-bg-subtle: #2d1110; - --light-bg-subtle: #12161d; - --dark-bg-subtle: #1e2430; +/* Bottom B Container */ +--container-bottom-b-bg-image: ; +--container-bottom-b-bg-color: ; +--container-bottom-b-bg-position: center; +--container-bottom-b-bg-attachment: fixed; +--container-bottom-b-bg-repeat: no-repeat; +--container-bottom-b-bg-size: cover; +--container-bottom-b-border: ; +--container-bottom-b-border-radius: ; - --primary-border-subtle: #2b3a7a; - --secondary-border-subtle: #2b323b; - --success-border-subtle: #2b5b40; - --info-border-subtle: #254861; - --warning-border-subtle: #5a3c0e; - --danger-border-subtle: #5c2723; - --light-border-subtle: #222831; - --dark-border-subtle: #2b323b; +/* ===== BORDERS ===== */ +--border-width: 1px; +--border-style: solid; +--border-color: #2b323b; +--border-color-translucent: #ffffff26; +--border-radius: .25rem; +--border-radius-sm: .2rem; +--border-radius-lg: .3rem; +--border-radius-xl: .3rem; +--border-radius-xxl: 2rem; +--border-radius-2xl: var(--border-radius-xxl); +--border-radius-pill: 50rem; - /* Typography & layout */ - --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; +/* ===== SHADOWS ===== */ +--box-shadow: 0 .5rem 1rem #00000066; +--box-shadow-sm: 0 .125rem .25rem #00000040; +--box-shadow-lg: 0 1rem 3rem #00000080; +--box-shadow-inset: inset 0 1px 2px #00000040; - --body-color: #e6ebf1; - --body-color-rgb: 230, 235, 241; - --body-bg: #0e1318; - --body-bg-rgb: 14, 19, 24; +/* ===== FOCUS & FORMS ===== */ +--focus-ring-width: .25rem; +--focus-ring-opacity: .6; +--focus-ring-color: #5472ff66; +--input-color: #e6ebf1; +--input-bg: #1a2332; +--input-border-color: #3a4250; +--input-focus-border-color: #5472ff; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); +--input-placeholder-color: #8894aa; +--input-disabled-bg: #0f1318; +--input-disabled-border-color: #2b323b; +--form-valid-color: #78d694; +--form-valid-border-color: #78d694; +--form-invalid-color: #ff8e86; +--form-invalid-border-color: #ff8e86; - --emphasis-color: #fff; - --emphasis-color-rgb: 255, 255, 255; +/* ===== BUTTONS ===== */ +--btn-border-radius: var(--border-radius); +--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - --secondary-color: #e6ebf1bf; - --secondary-color-rgb: 230, 235, 241; +/* ===== CARDS ===== */ +--card-spacer-y: 1rem; +--card-spacer-x: 1rem; +--card-title-spacer-y: 0.5rem; +--card-border-width: 1px; +--card-border-color: var(--border-color); +--card-border-radius: var(--border-radius); +--card-box-shadow: none; +--card-inner-border-radius: calc(var(--border-radius) - 1px); +--card-cap-padding-y: 0.5rem; +--card-cap-padding-x: 1rem; +--card-cap-bg: rgba(255, 255, 255, 0.03); +--card-cap-color: var(--body-color); +--card-height: auto; +--card-color: var(--body-color); +--card-bg: var(--secondary-bg); +--card-img-overlay-padding: 1rem; +--card-group-margin: 0.75rem; - --secondary-bg: #151b22; - --secondary-bg-rgb: 21, 27, 34; +/* ===== VIRTUEMART (VM) ===== */ +/* VM Surfaces */ +--vm-surface: var(--secondary-bg); +--vm-surface-2: var(--tertiary-bg); +--vm-text: var(--body-color); +--vm-text-strong: #ffffff; +--vm-text-muted: var(--gray-700); +--vm-border: var(--border-color); +--vm-price-color: var(--success); - --tertiary-color: #e6ebf180; - --tertiary-color-rgb: 230, 235, 241; - --tertiary-bg: #10151b; - --tertiary-bg-rgb: 16, 21, 27; +/* VM Layout and Density */ +--vm-container-max-width: 1200px; +--vm-section-gap: 2rem; +--vm-block-radius: var(--border-radius); +--vm-block-shadow: var(--box-shadow-sm); - --heading-color: #f1f5f9; +/* VM Typography */ +--vm-category-title-size: 2rem; +--vm-subcategory-title-size: 1.5rem; +--vm-page-title-size: 1.75rem; +--vm-products-type-title-size: 1.25rem; +--vm-product-title-size: 1.125rem; +--vm-product-title-weight: 500; +--vm-products-type-title-weight: 600; +--vm-price-size: 1.5rem; +--vm-price-detail-size: 1.125rem; +--vm-price-desc-size: 0.875rem; - --link-color: #8ab4f8; - --link-color-rgb: 138, 180, 248; - --link-decoration: underline; - --link-hover-color: #c3d6ff; - --link-hover-color-rgb: 195, 214, 255; +/* VM Controls */ +--vm-input-radius: var(--border-radius); +--vm-input-shadow: var(--box-shadow-sm); +--vm-qty-width: 80px; +--vm-cart-dropdown-min-width: 300px; - --code-color: #ff7abd; - --highlight-color: #111; - --highlight-bg: #ffe28a1a; +/* VM Alerts */ +--vm-alert-radius: var(--border-radius); +--vm-alert-shadow: var(--box-shadow-sm); +--vm-availability-bg: var(--success-bg-subtle); +--vm-availability-text: var(--success); - --border-width: 1px; - --border-style: solid; - --border-color: #2b323b; - --border-color-translucent: #ffffff26; +/* VM Buttons */ +--vm-btn-padding-x: 1rem; +--vm-btn-padding-y: 0.5rem; +--vm-btn-radius: var(--border-radius); +--vm-btn-shadow: var(--box-shadow-sm); +--vm-btn-primary-bg: var(--primary); +--vm-btn-primary-text: #ffffff; +--vm-btn-primary-border: var(--primary); +--vm-btn-secondary-bg: var(--secondary); +--vm-btn-secondary-text: #ffffff; +--vm-btn-secondary-border: var(--secondary); - --border-radius: .25rem; - --border-radius-sm: .2rem; - --border-radius-lg: .3rem; - --border-radius-xl: .3rem; - --border-radius-xxl: 2rem; - --border-radius-2xl: var(--border-radius-xxl); - --border-radius-pill: 50rem; +/* VM Image Overlay Controls */ +--vm-image-overlay-gap-x: 0.5rem; +--vm-image-overlay-gap-y: 0.5rem; +--vm-image-overlay-raise: 0.25rem; +--vm-image-overlay-btn-size: 2.5rem; +--vm-image-overlay-btn-radius: 50%; +--vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); +--vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); +--vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); +--vm-image-overlay-btn-border-width: 1px; +--vm-image-overlay-btn-color: var(--body-color); +--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - --box-shadow: 0 .5rem 1rem #00000066; - --box-shadow-sm: 0 .125rem .25rem #00000040; - --box-shadow-lg: 0 1rem 3rem #00000080; - --box-shadow-inset: inset 0 1px 2px #00000040; +/* VM Vendor Menu */ +--vm-vendor-menu-bg: var(--secondary-bg); +--vm-vendor-menu-border: var(--border-color); +--vm-vendor-menu-radius: var(--border-radius); +--vm-vendor-menu-shadow: var(--box-shadow-sm); +--vm-vendor-menu-item-gap: 0.25rem; +--vm-vendor-menu-item-padding-x: 1rem; +--vm-vendor-menu-item-padding-y: 0.5rem; +--vm-vendor-menu-pill-radius: 50rem; +--vm-vendor-menu-link: var(--link-color); +--vm-vendor-menu-link-hover: var(--link-hover-color); +--vm-vendor-menu-link-active: var(--primary); +--vm-vendor-menu-hover-bg: var(--tertiary-bg); - --focus-ring-width: .25rem; - --focus-ring-opacity: .6; - --focus-ring-color: #5472ff66; - - --form-valid-color: #78d694; - --form-valid-border-color: #78d694; - --form-invalid-color: #ff8e86; - --form-invalid-border-color: #ff8e86; - - /* Offcanvas (moved from template.css) */ - --offcanvas-color: var(--body-color); - --offcanvas-padding-x: 1rem; - --offcanvas-padding-y: 1rem; - - /* Navbar */ - --navbar-padding-x: 1rem; - --navbar-padding-y: 0.5rem; - --navbar-color: var(--nav-text-color); - --navbar-active-color: var(--mainmenu-nav-link-color); - --navbar-disabled-color: #6c757d; - --navbar-brand-padding-y: 0.3125rem; - --navbar-brand-margin-end: 1rem; - --navbar-brand-font-size: 1.25rem; - --navbar-brand-color: var(--nav-text-color); - --navbar-brand-active-color: var(--mainmenu-nav-link-color); - --navbar-nav-link-padding-x: 0.5rem; - --navbar-toggler-padding-y: 0.25rem; - --navbar-toggler-padding-x: 0.75rem; - --navbar-toggler-font-size: 1.25rem; - --navbar-toggler-border-color: rgba(255, 255, 255, 0.1); - --navbar-toggler-border-radius: 0.25rem; - --navbar-toggler-focus-width: 0.25rem; - --navbar-toggler-transition: box-shadow 0.15s ease-in-out; - --nav-link-padding-x: 1rem; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: 400; - --nav-link-color: var(--nav-text-color); - --nav-link-active-color: var(--mainmenu-nav-link-color); - --nav-link-disabled-color: #6c757d; - - /* Responsive tokens */ - --nav-toggle-size: 3rem; - --bp-xs: 0; - --bp-sm: 576px; - --bp-md: 768px; - --bp-lg: 992px; - --bp-xl: 1200px; - - /* Utility opacity defaults */ - --bg-opacity: 1; - - /* Layout padding */ - --padding-x: 1rem; - --padding-y: 1rem; - - /* Button utilities */ - --btn-border-radius: var(--border-radius); - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - - /* Card variables */ - --card-spacer-y: 1rem; - --card-spacer-x: 1rem; - --card-title-spacer-y: 0.5rem; - --card-border-width: 1px; - --card-border-color: var(--border-color); - --card-border-radius: var(--border-radius); - --card-box-shadow: none; - --card-inner-border-radius: calc(var(--border-radius) - 1px); - --card-cap-padding-y: 0.5rem; - --card-cap-padding-x: 1rem; - --card-cap-bg: rgba(255, 255, 255, 0.03); - --card-cap-color: var(--body-color); - --card-height: auto; - --card-color: var(--body-color); - --card-bg: var(--secondary-bg); - --card-img-overlay-padding: 1rem; - --card-group-margin: 0.75rem; - - /* VirtueMart surfaces */ - --vm-surface: var(--secondary-bg); - --vm-surface-2: var(--tertiary-bg); - --vm-text: var(--body-color); - --vm-text-strong: #ffffff; - --vm-text-muted: var(--gray-700); - --vm-border: var(--border-color); - --vm-price-color: var(--success); - - /* VM layout and density */ - --vm-container-max-width: 1200px; - --vm-section-gap: 2rem; - --vm-block-radius: var(--border-radius); - --vm-block-shadow: var(--box-shadow-sm); - - /* VM typography */ - --vm-category-title-size: 2rem; - --vm-subcategory-title-size: 1.5rem; - --vm-page-title-size: 1.75rem; - --vm-products-type-title-size: 1.25rem; - --vm-product-title-size: 1.125rem; - --vm-product-title-weight: 500; - --vm-products-type-title-weight: 600; - --vm-price-size: 1.5rem; - --vm-price-detail-size: 1.125rem; - --vm-price-desc-size: 0.875rem; - - /* VM controls */ - --vm-input-radius: var(--border-radius); - --vm-input-shadow: var(--box-shadow-sm); - --vm-qty-width: 80px; - --vm-cart-dropdown-min-width: 300px; - - /* VM alerts */ - --vm-alert-radius: var(--border-radius); - --vm-alert-shadow: var(--box-shadow-sm); - --vm-availability-bg: var(--success-bg-subtle); - --vm-availability-text: var(--success); - - /* VM buttons */ - --vm-btn-padding-x: 1rem; - --vm-btn-padding-y: 0.5rem; - --vm-btn-radius: var(--border-radius); - --vm-btn-shadow: var(--box-shadow-sm); - --vm-btn-primary-bg: var(--primary); - --vm-btn-primary-text: #ffffff; - --vm-btn-primary-border: var(--primary); - --vm-btn-secondary-bg: var(--secondary); - --vm-btn-secondary-text: #ffffff; - --vm-btn-secondary-border: var(--secondary); - - /* VM image overlay controls */ - --vm-image-overlay-gap-x: 0.5rem; - --vm-image-overlay-gap-y: 0.5rem; - --vm-image-overlay-raise: 0.25rem; - --vm-image-overlay-btn-size: 2.5rem; - --vm-image-overlay-btn-radius: 50%; - --vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); - --vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); - --vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); - --vm-image-overlay-btn-border-width: 1px; - --vm-image-overlay-btn-color: var(--body-color); - --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - - /* VM vendor menu tokens */ - --vm-vendor-menu-bg: var(--secondary-bg); - --vm-vendor-menu-border: var(--border-color); - --vm-vendor-menu-radius: var(--border-radius); - --vm-vendor-menu-shadow: var(--box-shadow-sm); - --vm-vendor-menu-item-gap: 0.25rem; - --vm-vendor-menu-item-padding-x: 1rem; - --vm-vendor-menu-item-padding-y: 0.5rem; - --vm-vendor-menu-pill-radius: 50rem; - --vm-vendor-menu-link: var(--link-color); - --vm-vendor-menu-link-hover: var(--link-hover-color); - --vm-vendor-menu-link-active: var(--primary); - --vm-vendor-menu-hover-bg: var(--tertiary-bg); - - /* Gable colors */ - --gab-blue: #4d9fff; - --gab-green: #5cb85c; - --gab-red: #ff6b6b; - --gab-orange: #ff9f5a; - --gab-gray1: #868e96; - --gab-gray2: #adb5bd; - --gab-gray3: #ced4da; +/* ===== GABLE ===== */ +--gab-blue: #4d9fff; +--gab-green: #5cb85c; +--gab-red: #ff6b6b; +--gab-orange: #ff9f5a; +--gab-gray1: #868e96; +--gab-gray2: #adb5bd; +--gab-gray3: #ced4da; } .btn { - --btn-padding-x: 1rem; - --btn-padding-y: 0.6rem; - --btn-font-family: ; - --btn-font-size: 1rem; - --btn-font-weight: 400; - --btn-line-height: 1.5; - --btn-color: var(--white); - --btn-bg: transparent; - --btn-border-width: 1px; - --btn-border-color: transparent; - --btn-border-radius: 0.25rem; - --btn-active-border-color: transparent; - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --btn-disabled-opacity: 0.65; - --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--btn-padding-y) var(--btn-padding-x); - font-family: var(--btn-font-family); - font-size: var(--btn-font-size); - font-weight: var(--btn-font-weight); - line-height: var(--btn-line-height); - color: var(--btn-color); - text-align: center; - text-decoration: none; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: var(--btn-border-width) solid var(--btn-border-color); - border-radius: var(--btn-border-radius); - background-color: var(--btn-bg); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +--btn-padding-x: 1rem; +--btn-padding-y: 0.6rem; +--btn-font-family: ; +--btn-font-size: 1rem; +--btn-font-weight: 400; +--btn-line-height: 1.5; +--btn-color: var(--white); +--btn-bg: transparent; +--btn-border-width: 1px; +--btn-border-color: transparent; +--btn-border-radius: 0.25rem; +--btn-active-border-color: transparent; +--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); +--btn-disabled-opacity: 0.65; +--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); +display: inline-block; +padding: var(--btn-padding-y) var(--btn-padding-x); +font-family: var(--btn-font-family); +font-size: var(--btn-font-size); +font-weight: var(--btn-font-weight); +line-height: var(--btn-line-height); +color: var(--btn-color); +text-align: center; +text-decoration: none; +vertical-align: middle; +cursor: pointer; +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +border: var(--btn-border-width) solid var(--btn-border-color); +border-radius: var(--btn-border-radius); +background-color: var(--btn-bg); +-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +-o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } -/* Buttons — inherit brand hues; ensure strong contrast on dark bg */ .btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; +--btn-color: hsl(0, 0%, 100%); +--btn-bg: hsl(240, 98%, 17%); +--btn-border-color: hsl(240, 98%, 17%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: #010149; +--btn-hover-border-color: #010145; +--btn-focus-shadow-rgb: 84, 114, 255; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: #010145; +--btn-active-border-color: #010141; } .btn-secondary { - --btn-color: var(--nav-text-color); - --btn-bg: var(--nav-bg-color); - --btn-border-color: #3a4250; - --btn-hover-color: #fff; - --btn-hover-bg: #1b2a55; - --btn-hover-border-color: #162448; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: #fff; - --btn-active-bg: #162448; - --btn-active-border-color: #12203f; +--btn-color: var(--nav-text-color); +--btn-bg: var(--nav-bg-color); +--btn-border-color: #3a4250; +--btn-hover-color: #fff; +--btn-hover-bg: #1b2a55; +--btn-hover-border-color: #162448; +--btn-focus-shadow-rgb: 84, 114, 255; +--btn-active-color: #fff; +--btn-active-bg: #162448; +--btn-active-border-color: #12203f; } -/* Outline buttons on dark: keep readable borders */ .btn-outline-light { - --btn-color: #e6ebf1; - --btn-border-color: #e6ebf1; - --btn-hover-color: #111; - --btn-hover-bg: #e6ebf1; - --btn-hover-border-color: #e6ebf1; - --btn-active-color: #111; - --btn-active-bg: #d7dce2; - --btn-active-border-color: #d7dce2; - --gradient: none; +--btn-color: #e6ebf1; +--btn-border-color: #e6ebf1; +--btn-hover-color: #111; +--btn-hover-bg: #e6ebf1; +--btn-hover-border-color: #e6ebf1; +--btn-active-color: #111; +--btn-active-bg: #d7dce2; +--btn-active-border-color: #d7dce2; +--gradient: none; } -/* Links as buttons */ .btn-link { - --btn-font-weight: 400; - --btn-color: var(--link-color); - --btn-bg: transparent; - --btn-border-color: transparent; - --btn-hover-color: var(--link-hover-color); - --btn-hover-border-color: transparent; - --btn-active-color: var(--link-hover-color); - --btn-active-border-color: transparent; - --btn-disabled-color: #6d7781; - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 84, 114, 255; - text-decoration: underline; +--btn-font-weight: 400; +--btn-color: var(--link-color); +--btn-bg: transparent; +--btn-border-color: transparent; +--btn-hover-color: var(--link-hover-color); +--btn-hover-border-color: transparent; +--btn-active-color: var(--link-hover-color); +--btn-active-border-color: transparent; +--btn-disabled-color: #6d7781; +--btn-disabled-border-color: transparent; +--btn-box-shadow: none; +--btn-focus-shadow-rgb: 84, 114, 255; +text-decoration: underline; } .btn-secondary { - --btn-color: var(--nav-text-color); - --btn-bg: var(--nav-bg-color); +--btn-color: var(--nav-text-color); +--btn-bg: var(--nav-bg-color); } diff --git a/src/media/css/colors/dark/colors_standard.css b/src/media/css/colors/dark/colors_standard.css index daf4c3a..4b34ea1 100644 --- a/src/media/css/colors/dark/colors_standard.css +++ b/src/media/css/colors/dark/colors_standard.css @@ -20,402 +20,397 @@ * --------------------------------------------- */ :root[data-bs-theme='dark']{ - /* System hint for native widgets */ - color-scheme: dark; +color-scheme: dark; - /* Brand & links */ - --color-primary: #112855; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #6fb3ff; +/* ===== BRAND & THEME COLORS ===== */ +--color-primary: #112855; +--accent-color-primary: #3f8ff0; +--accent-color-secondary: #6fb3ff; - --mainmenu-nav-link-color: #fff; +/* ===== NAVIGATION ===== */ +--mainmenu-nav-link-color: #fff; +--nav-text-color: gray; +--nav-bg-color: var(--color-primary); - --color-link: white; - --color-hover: gray; - --color-active: var(--mainmenu-nav-link-color); +/* ===== LINKS ===== */ +--color-link: white; +--color-hover: gray; +--color-active: var(--mainmenu-nav-link-color); +--link-color: #8ab4f8; +--link-color-rgb: 138, 180, 248; +--link-decoration: underline; +--link-hover-color: #c3d6ff; +--link-hover-color-rgb: 195, 214, 255; +--link-active-color: var(--link-color); - /* Header background (kept same image; works over dark bg) */ - --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; +/* ===== OFFCANVAS ===== */ +--offcanvas-color: var(--body-color); +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; - /* Section containers */ - --container-below-topbar-bg-image: ; - --container-below-topbar-bg-color: ; - --container-below-topbar-bg-position: center; - --container-below-topbar-bg-attachment: fixed; - --container-below-topbar-bg-repeat: no-repeat; - --container-below-topbar-bg-size: cover; - --container-below-topbar-border: ; - --container-below-topbar-border-radius: ; +/* ===== NAVBAR ===== */ +--navbar-padding-x: 1rem; +--navbar-padding-y: 0.5rem; +--navbar-color: var(--nav-text-color); +--navbar-active-color: var(--mainmenu-nav-link-color); +--navbar-disabled-color: #6c757d; +--navbar-brand-padding-y: 0.3125rem; +--navbar-brand-margin-end: 1rem; +--navbar-brand-font-size: 1.25rem; +--navbar-brand-color: var(--nav-text-color); +--navbar-brand-active-color: var(--mainmenu-nav-link-color); +--navbar-nav-link-padding-x: 0.5rem; +--navbar-toggler-padding-y: 0.25rem; +--navbar-toggler-padding-x: 0.75rem; +--navbar-toggler-font-size: 1.25rem; +--navbar-toggler-border-color: rgba(255, 255, 255, 0.1); +--navbar-toggler-border-radius: 0.25rem; +--navbar-toggler-focus-width: 0.25rem; +--navbar-toggler-transition: box-shadow 0.15s ease-in-out; +--nav-link-padding-x: 1rem; +--nav-link-padding-y: 0.5rem; +--nav-link-font-weight: 400; +--nav-link-color: var(--nav-text-color); +--nav-link-active-color: var(--mainmenu-nav-link-color); +--nav-link-disabled-color: #6c757d; - --container-top-a-bg-image: ; - --container-top-a-bg-color: ; - --container-top-a-bg-position: center; - --container-top-a-bg-attachment: fixed; - --container-top-a-bg-repeat: no-repeat; - --container-top-a-bg-size: cover; - --container-top-a-border: ; - --container-top-a-border-radius: ; +/* ===== TYPOGRAPHY & BODY ===== */ +--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--body-font-size: 1rem; +--body-font-weight: 400; +--body-line-height: 1.5; +--body-color: #e6ebf1; +--body-color-rgb: 230, 235, 241; +--body-bg: #0e1318; +--body-bg-rgb: 14, 19, 24; +--heading-color: #f1f5f9; +--emphasis-color: #fff; +--emphasis-color-rgb: 255, 255, 255; +--secondary-color: #e6ebf1bf; +--secondary-color-rgb: 230, 235, 241; +--tertiary-color: #e6ebf180; +--tertiary-color-rgb: 230, 235, 241; +--muted-color: #6d757e; +--code-color: #ff7abd; +--code-color-ink: var(--code-color, #e93f8e); +--highlight-color: #111; +--highlight-bg: #ffe28a1a; - --container-top-b-bg-image: ; - --container-top-b-bg-color: ; - --container-top-b-bg-position: center; - --container-top-b-bg-attachment: fixed; - --container-top-b-bg-repeat: no-repeat; - --container-top-b-bg-size: cover; - --container-top-b-border: ; - --container-top-b-border-radius: ; +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 1rem; +--padding-y: 1rem; +--bg-opacity: 1; +--nav-toggle-size: 3rem; +--gradient: linear-gradient(180deg, #ffffff26, #fff0); +--secondary-bg: #151b22; +--secondary-bg-rgb: 21, 27, 34; +--tertiary-bg: #10151b; +--tertiary-bg-rgb: 16, 21, 27; +--hr-color: var(--border-color, #dfe3e7); +--border-color-soft: var(--border-color, #dfe3e7); +--kbd-bg: var(--secondary-bg, #eaedf0); +--kbd-ink: var(--body-bg, #fff); +--toc-bg: var(--secondary-bg, #eaedf0); +--toc-ink: var(--color-primary, #112855); +--selection-bg: var(--highlight-bg, #fbeea8); +--selection-ink: var(--body-color, #22262a); +--border: 5px; - --container-toc-bg: ; - --container-toc-color: #dbe3ff; +/* ===== BREAKPOINTS ===== */ +--bp-xs: 0; +--bp-sm: 576px; +--bp-md: 768px; +--bp-lg: 992px; +--bp-xl: 1200px; - --container-sidebar-bg-image: ; - --container-sidebar-bg-color: ; - --container-sidebar-bg-position: center; - --container-sidebar-bg-attachment: scroll; - --container-sidebar-bg-repeat: repeat; - --container-sidebar-bg-size: auto; - --container-sidebar-border: ; - --container-sidebar-border-radius: ; +/* ===== BOOTSTRAP PALETTE ===== */ +--primary: #010156; +--secondary: #48525d; +--success: #4aa664; +--info: #4f7aa0; +--warning: #c77a00; +--danger: #c23a31; +--light: #1b2027; +--dark: #0f1318; +--primary-rgb: 1,1,86; +--secondary-rgb: 72,82,93; +--success-rgb: 74,166,100; +--info-rgb: 79,122,160; +--warning-rgb: 199,122,0; +--danger-rgb: 194,58,49; +--light-rgb: 27,32,39; +--dark-rgb: 15,19,24; +--primary-text-emphasis: #c7ccff; +--secondary-text-emphasis: #cfd6de; +--success-text-emphasis: #bde8c9; +--info-text-emphasis: #bcd6ee; +--warning-text-emphasis: #ffd9a6; +--danger-text-emphasis: #ffb7b2; +--light-text-emphasis: #d2d8df; +--dark-text-emphasis: #d2d8df; +--primary-bg-subtle: #0b1030; +--secondary-bg-subtle: #1e2430; +--success-bg-subtle: #0f2a1b; +--info-bg-subtle: #0d2232; +--warning-bg-subtle: #2a1e06; +--danger-bg-subtle: #2d1110; +--light-bg-subtle: #12161d; +--dark-bg-subtle: #1e2430; +--primary-border-subtle: #2b3a7a; +--secondary-border-subtle: #2b323b; +--success-border-subtle: #2b5b40; +--info-border-subtle: #254861; +--warning-border-subtle: #5a3c0e; +--danger-border-subtle: #5c2723; +--light-border-subtle: #222831; +--dark-border-subtle: #2b323b; - --container-bottom-a-bg-image: ; - --container-bottom-a-bg-color: ; - --container-bottom-a-bg-position: center; - --container-bottom-a-bg-attachment: fixed; - --container-bottom-a-bg-repeat: no-repeat; - --container-bottom-a-bg-size: cover; - --container-bottom-a-border: ; - --container-bottom-a-border-radius: 5px; +/* ===== STANDARD COLORS ===== */ +--blue: #91a4ff; +--indigo: #b19cff; +--purple: #c0a5ff; +--pink: #ff8fc0; +--red: #ff7a73; +--orange: #ff9c4d; +--yellow: #ffd166; +--green: #78d694; +--teal: #76e3ff; +--cyan: #6fb7ff; +--black: #000; +--white: #fff; - --container-bottom-b-bg-image: ; - --container-bottom-b-bg-color: ; - --container-bottom-b-bg-position: center; - --container-bottom-b-bg-attachment: fixed; - --container-bottom-b-bg-repeat: no-repeat; - --container-bottom-b-bg-size: cover; - --container-bottom-b-border: ; - --container-bottom-b-border-radius: ; +/* ===== GRAY SCALE ===== */ +--gray-100: #161a20; +--gray-200: #1b2027; +--gray-300: #222831; +--gray-400: #2b323b; +--gray-500: #36404a; +--gray-600: #48525d; +--gray-700: #5b6672; +--gray-800: #cfd6de; +--gray-900: #e6ebf1; +--white-rgb: 255, 255, 255; +--black-rgb: 0, 0, 0; - /* Nav & accents */ - --nav-text-color: gray; - --nav-bg-color: var(--color-primary); - --border: 5px; +/* ===== HEADER BACKGROUND ===== */ +--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); +--header-background-attachment: fixed; +--header-background-repeat: repeat; +--header-background-size: auto; - --muted-color: #6d757e; - --hr-color: var(--border-color, #dfe3e7); - --link-active-color: var(--link-color); - --code-color-ink: var(--code-color, #e93f8e); - --border-color-soft: var(--border-color, #dfe3e7); - --kbd-bg: var(--secondary-bg, #eaedf0); - --kbd-ink: var(--body-bg, #fff); - --toc-bg: var(--secondary-bg, #eaedf0); - --toc-ink: var(--color-primary, #112855); - --selection-bg: var(--highlight-bg, #fbeea8); - --selection-ink: var(--body-color, #22262a); +/* ===== CONTAINER BACKGROUNDS ===== */ +/* Below Topbar Container */ +--container-below-topbar-bg-image: ; +--container-below-topbar-bg-color: ; +--container-below-topbar-bg-position: center; +--container-below-topbar-bg-attachment: fixed; +--container-below-topbar-bg-repeat: no-repeat; +--container-below-topbar-bg-size: cover; +--container-below-topbar-border: ; +--container-below-topbar-border-radius: ; - /* Palette */ - --blue: #91a4ff; - --black: #000; - --indigo: #b19cff; - --purple: #c0a5ff; - --pink: #ff8fc0; - --red: #ff7a73; - --orange: #ff9c4d; - --yellow: #ffd166; - --green: #78d694; - --teal: #76e3ff; - --cyan: #6fb7ff; - --white: #fff; +/* Top A Container */ +--container-top-a-bg-image: ; +--container-top-a-bg-color: ; +--container-top-a-bg-position: center; +--container-top-a-bg-attachment: fixed; +--container-top-a-bg-repeat: no-repeat; +--container-top-a-bg-size: cover; +--container-top-a-border: ; +--container-top-a-border-radius: ; - /* Grays tuned for dark */ - --gray-100: #161a20; - --gray-200: #1b2027; - --gray-300: #222831; - --gray-400: #2b323b; - --gray-500: #36404a; - --gray-600: #48525d; - --gray-700: #5b6672; - --gray-800: #cfd6de; - --gray-900: #e6ebf1; +/* Top B Container */ +--container-top-b-bg-image: ; +--container-top-b-bg-color: ; +--container-top-b-bg-position: center; +--container-top-b-bg-attachment: fixed; +--container-top-b-bg-repeat: no-repeat; +--container-top-b-bg-size: cover; +--container-top-b-border: ; +--container-top-b-border-radius: ; - /* Contextuals (keep brand hues) */ - --primary: #010156; - --secondary: #48525d; - --success: #4aa664; - --info: #4f7aa0; - --warning: #c77a00; - --danger: #c23a31; - --light: #1b2027; - --dark: #0f1318; +/* TOC Container */ +--container-toc-bg: ; +--container-toc-color: #dbe3ff; - /* RGB helpers */ - --primary-rgb: 1,1,86; - --secondary-rgb: 72,82,93; - --success-rgb: 74,166,100; - --info-rgb: 79,122,160; - --warning-rgb: 199,122,0; - --danger-rgb: 194,58,49; - --light-rgb: 27,32,39; - --dark-rgb: 15,19,24; +/* Sidebar Container */ +--container-sidebar-bg-image: ; +--container-sidebar-bg-color: ; +--container-sidebar-bg-position: center; +--container-sidebar-bg-attachment: scroll; +--container-sidebar-bg-repeat: repeat; +--container-sidebar-bg-size: auto; +--container-sidebar-border: ; +--container-sidebar-border-radius: ; - /* Emphasis & subtle variants */ - --primary-text-emphasis: #c7ccff; - --secondary-text-emphasis: #cfd6de; - --success-text-emphasis: #bde8c9; - --info-text-emphasis: #bcd6ee; - --warning-text-emphasis: #ffd9a6; - --danger-text-emphasis: #ffb7b2; - --light-text-emphasis: #d2d8df; - --dark-text-emphasis: #d2d8df; +/* Bottom A Container */ +--container-bottom-a-bg-image: ; +--container-bottom-a-bg-color: ; +--container-bottom-a-bg-position: center; +--container-bottom-a-bg-attachment: fixed; +--container-bottom-a-bg-repeat: no-repeat; +--container-bottom-a-bg-size: cover; +--container-bottom-a-border: ; +--container-bottom-a-border-radius: 5px; - --primary-bg-subtle: #0b1030; - --secondary-bg-subtle: #1e2430; - --success-bg-subtle: #0f2a1b; - --info-bg-subtle: #0d2232; - --warning-bg-subtle: #2a1e06; - --danger-bg-subtle: #2d1110; - --light-bg-subtle: #12161d; - --dark-bg-subtle: #1e2430; +/* Bottom B Container */ +--container-bottom-b-bg-image: ; +--container-bottom-b-bg-color: ; +--container-bottom-b-bg-position: center; +--container-bottom-b-bg-attachment: fixed; +--container-bottom-b-bg-repeat: no-repeat; +--container-bottom-b-bg-size: cover; +--container-bottom-b-border: ; +--container-bottom-b-border-radius: ; - --primary-border-subtle: #2b3a7a; - --secondary-border-subtle: #2b323b; - --success-border-subtle: #2b5b40; - --info-border-subtle: #254861; - --warning-border-subtle: #5a3c0e; - --danger-border-subtle: #5c2723; - --light-border-subtle: #222831; - --dark-border-subtle: #2b323b; +/* ===== BORDERS ===== */ +--border-width: 1px; +--border-style: solid; +--border-color: #2b323b; +--border-color-translucent: #ffffff26; +--border-radius: .25rem; +--border-radius-sm: .2rem; +--border-radius-lg: .3rem; +--border-radius-xl: .3rem; +--border-radius-xxl: 2rem; +--border-radius-2xl: var(--border-radius-xxl); +--border-radius-pill: 50rem; - /* Typography & layout */ - --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; +/* ===== SHADOWS ===== */ +--box-shadow: 0 .5rem 1rem #00000066; +--box-shadow-sm: 0 .125rem .25rem #00000040; +--box-shadow-lg: 0 1rem 3rem #00000080; +--box-shadow-inset: inset 0 1px 2px #00000040; - --body-color: #e6ebf1; - --body-color-rgb: 230, 235, 241; - --body-bg: #0e1318; - --body-bg-rgb: 14, 19, 24; +/* ===== FOCUS & FORMS ===== */ +--focus-ring-width: .25rem; +--focus-ring-opacity: .6; +--focus-ring-color: #5472ff66; +--input-color: #e6ebf1; +--input-bg: #1a2332; +--input-border-color: #3a4250; +--input-focus-border-color: #5472ff; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); +--input-placeholder-color: #8894aa; +--input-disabled-bg: #0f1318; +--input-disabled-border-color: #2b323b; +--form-valid-color: #78d694; +--form-valid-border-color: #78d694; +--form-invalid-color: #ff8e86; +--form-invalid-border-color: #ff8e86; - --emphasis-color: #fff; - --emphasis-color-rgb: 255, 255, 255; +/* ===== BUTTONS ===== */ +--btn-border-radius: var(--border-radius); +--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - --secondary-color: #e6ebf1bf; - --secondary-color-rgb: 230, 235, 241; +/* ===== CARDS ===== */ +--card-spacer-y: 1rem; +--card-spacer-x: 1rem; +--card-title-spacer-y: 0.5rem; +--card-border-width: 1px; +--card-border-color: var(--border-color); +--card-border-radius: var(--border-radius); +--card-box-shadow: none; +--card-inner-border-radius: calc(var(--border-radius) - 1px); +--card-cap-padding-y: 0.5rem; +--card-cap-padding-x: 1rem; +--card-cap-bg: rgba(255, 255, 255, 0.03); +--card-cap-color: var(--body-color); +--card-height: auto; +--card-color: var(--body-color); +--card-bg: var(--secondary-bg); +--card-img-overlay-padding: 1rem; +--card-group-margin: 0.75rem; - --secondary-bg: #151b22; - --secondary-bg-rgb: 21, 27, 34; +/* ===== VIRTUEMART (VM) ===== */ +/* VM Surfaces */ +--vm-surface: var(--secondary-bg); +--vm-surface-2: var(--tertiary-bg); +--vm-text: var(--body-color); +--vm-text-strong: #ffffff; +--vm-text-muted: var(--gray-700); +--vm-border: var(--border-color); +--vm-price-color: var(--success); - --tertiary-color: #e6ebf180; - --tertiary-color-rgb: 230, 235, 241; - --tertiary-bg: #10151b; - --tertiary-bg-rgb: 16, 21, 27; +/* VM Layout and Density */ +--vm-container-max-width: 1200px; +--vm-section-gap: 2rem; +--vm-block-radius: var(--border-radius); +--vm-block-shadow: var(--box-shadow-sm); - --heading-color: #f1f5f9; +/* VM Typography */ +--vm-category-title-size: 2rem; +--vm-subcategory-title-size: 1.5rem; +--vm-page-title-size: 1.75rem; +--vm-products-type-title-size: 1.25rem; +--vm-product-title-size: 1.125rem; +--vm-product-title-weight: 500; +--vm-products-type-title-weight: 600; +--vm-price-size: 1.5rem; +--vm-price-detail-size: 1.125rem; +--vm-price-desc-size: 0.875rem; - --link-color: #8ab4f8; - --link-color-rgb: 138, 180, 248; - --link-decoration: underline; - --link-hover-color: #c3d6ff; - --link-hover-color-rgb: 195, 214, 255; +/* VM Controls */ +--vm-input-radius: var(--border-radius); +--vm-input-shadow: var(--box-shadow-sm); +--vm-qty-width: 80px; +--vm-cart-dropdown-min-width: 300px; - --code-color: #ff7abd; - --highlight-color: #111; - --highlight-bg: #ffe28a1a; +/* VM Alerts */ +--vm-alert-radius: var(--border-radius); +--vm-alert-shadow: var(--box-shadow-sm); +--vm-availability-bg: var(--success-bg-subtle); +--vm-availability-text: var(--success); - --border-width: 1px; - --border-style: solid; - --border-color: #2b323b; - --border-color-translucent: #ffffff26; +/* VM Buttons */ +--vm-btn-padding-x: 1rem; +--vm-btn-padding-y: 0.5rem; +--vm-btn-radius: var(--border-radius); +--vm-btn-shadow: var(--box-shadow-sm); +--vm-btn-primary-bg: var(--primary); +--vm-btn-primary-text: #ffffff; +--vm-btn-primary-border: var(--primary); +--vm-btn-secondary-bg: var(--secondary); +--vm-btn-secondary-text: #ffffff; +--vm-btn-secondary-border: var(--secondary); - --border-radius: .25rem; - --border-radius-sm: .2rem; - --border-radius-lg: .3rem; - --border-radius-xl: .3rem; - --border-radius-xxl: 2rem; - --border-radius-2xl: var(--border-radius-xxl); - --border-radius-pill: 50rem; +/* VM Image Overlay Controls */ +--vm-image-overlay-gap-x: 0.5rem; +--vm-image-overlay-gap-y: 0.5rem; +--vm-image-overlay-raise: 0.25rem; +--vm-image-overlay-btn-size: 2.5rem; +--vm-image-overlay-btn-radius: 50%; +--vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); +--vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); +--vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); +--vm-image-overlay-btn-border-width: 1px; +--vm-image-overlay-btn-color: var(--body-color); +--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - --box-shadow: 0 .5rem 1rem #00000066; - --box-shadow-sm: 0 .125rem .25rem #00000040; - --box-shadow-lg: 0 1rem 3rem #00000080; - --box-shadow-inset: inset 0 1px 2px #00000040; +/* VM Vendor Menu */ +--vm-vendor-menu-bg: var(--secondary-bg); +--vm-vendor-menu-border: var(--border-color); +--vm-vendor-menu-radius: var(--border-radius); +--vm-vendor-menu-shadow: var(--box-shadow-sm); +--vm-vendor-menu-item-gap: 0.25rem; +--vm-vendor-menu-item-padding-x: 1rem; +--vm-vendor-menu-item-padding-y: 0.5rem; +--vm-vendor-menu-pill-radius: 50rem; +--vm-vendor-menu-link: var(--link-color); +--vm-vendor-menu-link-hover: var(--link-hover-color); +--vm-vendor-menu-link-active: var(--primary); +--vm-vendor-menu-hover-bg: var(--tertiary-bg); - --focus-ring-width: .25rem; - --focus-ring-opacity: .6; - --focus-ring-color: #5472ff66; - - /* Forms and inputs - adapted for dark mode */ - --input-color: #e6ebf1; - --input-bg: #1a2332; - --input-border-color: #3a4250; - --input-focus-border-color: #5472ff; - --input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); - --input-placeholder-color: #8894aa; - --input-disabled-bg: #0f1318; - --input-disabled-border-color: #2b323b; - - --form-valid-color: #78d694; - --form-valid-border-color: #78d694; - --form-invalid-color: #ff8e86; - --form-invalid-border-color: #ff8e86; - - /* Offcanvas (moved from template.css) */ - --offcanvas-color: var(--body-color); - --offcanvas-padding-x: 1rem; - --offcanvas-padding-y: 1rem; - - /* Navbar */ - --navbar-padding-x: 1rem; - --navbar-padding-y: 0.5rem; - --navbar-color: var(--nav-text-color); - --navbar-active-color: var(--mainmenu-nav-link-color); - --navbar-disabled-color: #6c757d; - --navbar-brand-padding-y: 0.3125rem; - --navbar-brand-margin-end: 1rem; - --navbar-brand-font-size: 1.25rem; - --navbar-brand-color: var(--nav-text-color); - --navbar-brand-active-color: var(--mainmenu-nav-link-color); - --navbar-nav-link-padding-x: 0.5rem; - --navbar-toggler-padding-y: 0.25rem; - --navbar-toggler-padding-x: 0.75rem; - --navbar-toggler-font-size: 1.25rem; - --navbar-toggler-border-color: rgba(255, 255, 255, 0.1); - --navbar-toggler-border-radius: 0.25rem; - --navbar-toggler-focus-width: 0.25rem; - --navbar-toggler-transition: box-shadow 0.15s ease-in-out; - --nav-link-padding-x: 1rem; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: 400; - --nav-link-color: var(--nav-text-color); - --nav-link-active-color: var(--mainmenu-nav-link-color); - --nav-link-disabled-color: #6c757d; - - /* Responsive tokens */ - --nav-toggle-size: 3rem; - --bp-xs: 0; - --bp-sm: 576px; - --bp-md: 768px; - --bp-lg: 992px; - --bp-xl: 1200px; - - /* Utility opacity defaults */ - --bg-opacity: 1; - - /* Layout padding */ - --padding-x: 1rem; - --padding-y: 1rem; - - /* Button utilities */ - --btn-border-radius: var(--border-radius); - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - - /* Card variables */ - --card-spacer-y: 1rem; - --card-spacer-x: 1rem; - --card-title-spacer-y: 0.5rem; - --card-border-width: 1px; - --card-border-color: var(--border-color); - --card-border-radius: var(--border-radius); - --card-box-shadow: none; - --card-inner-border-radius: calc(var(--border-radius) - 1px); - --card-cap-padding-y: 0.5rem; - --card-cap-padding-x: 1rem; - --card-cap-bg: rgba(255, 255, 255, 0.03); - --card-cap-color: var(--body-color); - --card-height: auto; - --card-color: var(--body-color); - --card-bg: var(--secondary-bg); - --card-img-overlay-padding: 1rem; - --card-group-margin: 0.75rem; - - /* VirtueMart surfaces */ - --vm-surface: var(--secondary-bg); - --vm-surface-2: var(--tertiary-bg); - --vm-text: var(--body-color); - --vm-text-strong: #ffffff; - --vm-text-muted: var(--gray-700); - --vm-border: var(--border-color); - --vm-price-color: var(--success); - - /* VM layout and density */ - --vm-container-max-width: 1200px; - --vm-section-gap: 2rem; - --vm-block-radius: var(--border-radius); - --vm-block-shadow: var(--box-shadow-sm); - - /* VM typography */ - --vm-category-title-size: 2rem; - --vm-subcategory-title-size: 1.5rem; - --vm-page-title-size: 1.75rem; - --vm-products-type-title-size: 1.25rem; - --vm-product-title-size: 1.125rem; - --vm-product-title-weight: 500; - --vm-products-type-title-weight: 600; - --vm-price-size: 1.5rem; - --vm-price-detail-size: 1.125rem; - --vm-price-desc-size: 0.875rem; - - /* VM controls */ - --vm-input-radius: var(--border-radius); - --vm-input-shadow: var(--box-shadow-sm); - --vm-qty-width: 80px; - --vm-cart-dropdown-min-width: 300px; - - /* VM alerts */ - --vm-alert-radius: var(--border-radius); - --vm-alert-shadow: var(--box-shadow-sm); - --vm-availability-bg: var(--success-bg-subtle); - --vm-availability-text: var(--success); - - /* VM buttons */ - --vm-btn-padding-x: 1rem; - --vm-btn-padding-y: 0.5rem; - --vm-btn-radius: var(--border-radius); - --vm-btn-shadow: var(--box-shadow-sm); - --vm-btn-primary-bg: var(--primary); - --vm-btn-primary-text: #ffffff; - --vm-btn-primary-border: var(--primary); - --vm-btn-secondary-bg: var(--secondary); - --vm-btn-secondary-text: #ffffff; - --vm-btn-secondary-border: var(--secondary); - - /* VM image overlay controls */ - --vm-image-overlay-gap-x: 0.5rem; - --vm-image-overlay-gap-y: 0.5rem; - --vm-image-overlay-raise: 0.25rem; - --vm-image-overlay-btn-size: 2.5rem; - --vm-image-overlay-btn-radius: 50%; - --vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); - --vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); - --vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); - --vm-image-overlay-btn-border-width: 1px; - --vm-image-overlay-btn-color: var(--body-color); - --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - - /* VM vendor menu tokens */ - --vm-vendor-menu-bg: var(--secondary-bg); - --vm-vendor-menu-border: var(--border-color); - --vm-vendor-menu-radius: var(--border-radius); - --vm-vendor-menu-shadow: var(--box-shadow-sm); - --vm-vendor-menu-item-gap: 0.25rem; - --vm-vendor-menu-item-padding-x: 1rem; - --vm-vendor-menu-item-padding-y: 0.5rem; - --vm-vendor-menu-pill-radius: 50rem; - --vm-vendor-menu-link: var(--link-color); - --vm-vendor-menu-link-hover: var(--link-hover-color); - --vm-vendor-menu-link-active: var(--primary); - --vm-vendor-menu-hover-bg: var(--tertiary-bg); - - /* Gable colors */ - --gab-blue: #4d9fff; - --gab-green: #5cb85c; - --gab-red: #ff6b6b; - --gab-orange: #ff9f5a; - --gab-gray1: #868e96; - --gab-gray2: #adb5bd; - --gab-gray3: #ced4da; +/* ===== GABLE ===== */ +--gab-blue: #4d9fff; +--gab-green: #5cb85c; +--gab-red: #ff6b6b; +--gab-orange: #ff9f5a; +--gab-gray1: #868e96; +--gab-gray2: #adb5bd; +--gab-gray3: #ced4da; } .btn { diff --git a/src/media/css/colors/light/colors_alternative.css b/src/media/css/colors/light/colors_alternative.css index f6c5f9a..93e923e 100644 --- a/src/media/css/colors/light/colors_alternative.css +++ b/src/media/css/colors/light/colors_alternative.css @@ -20,365 +20,396 @@ * --------------------------------------------- */ :root[data-bs-theme="light"] { - color-scheme: light; - --color-primary: #112855; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #3f8ff0; +color-scheme: light; - --mainmenu-nav-link-color: white; +/* ===== BRAND & THEME COLORS ===== */ +--color-primary: #112855; +--accent-color-primary: #3f8ff0; +--accent-color-secondary: #3f8ff0; - --color-link: #224FAA; - --color-hover: var(--accent-color-primary); +/* ===== NAVIGATION ===== */ +--mainmenu-nav-link-color: white; +--nav-text-color: var(--mainmenu-nav-link-color); +--nav-bg-color: var(--color-link); - --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); - --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; +/* ===== LINKS ===== */ +--color-link: #224FAA; +--color-hover: var(--accent-color-primary); +--link-color: #224faa; +--link-color-rgb: 34, 79, 170; +--link-decoration: underline; +--link-hover-color: #424077; +--link-hover-color-rgb: 66, 64, 119; +--link-active-color: var(--link-color); - --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: ; +/* ===== OFFCANVAS ===== */ +--offcanvas-color: var(--body-color); +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; - --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: ; +/* ===== NAVBAR ===== */ +--navbar-padding-x: 1rem; +--navbar-padding-y: 0.5rem; +--navbar-color: var(--nav-text-color); +--navbar-active-color: var(--mainmenu-nav-link-color); +--navbar-disabled-color: #6c757d; +--navbar-brand-padding-y: 0.3125rem; +--navbar-brand-margin-end: 1rem; +--navbar-brand-font-size: 1.25rem; +--navbar-brand-color: var(--nav-text-color); +--navbar-brand-active-color: var(--mainmenu-nav-link-color); +--navbar-nav-link-padding-x: 0.5rem; +--navbar-toggler-padding-y: 0.25rem; +--navbar-toggler-padding-x: 0.75rem; +--navbar-toggler-font-size: 1.25rem; +--navbar-toggler-border-color: rgba(0, 0, 0, 0.1); +--navbar-toggler-border-radius: 0.25rem; +--navbar-toggler-focus-width: 0.25rem; +--navbar-toggler-transition: box-shadow 0.15s ease-in-out; +--nav-link-padding-x: 1rem; +--nav-link-padding-y: 0.5rem; +--nav-link-font-weight: 400; +--nav-link-color: var(--nav-text-color); +--nav-link-active-color: var(--mainmenu-nav-link-color); +--nav-link-disabled-color: #6c757d; - --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: ; +/* ===== TYPOGRAPHY & BODY ===== */ +--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); +--body-font-size: 1rem; +--body-font-weight: 400; +--body-line-height: 1.5; +--body-color: #22262a; +--body-color-rgb: 34, 38, 42; +--body-bg: #fff; +--body-bg-rgb: 255, 255, 255; +--heading-color: inherit; +--emphasis-color: #000; +--emphasis-color-rgb: 0, 0, 0; +--secondary-color: #22262abf; +--secondary-color-rgb: 34, 38, 42; +--tertiary-color: #22262a80; +--tertiary-color-rgb: 34, 38, 42; +--muted-color: #6d757e; +--code-color: #e93f8e; +--code-color-ink: var(--code-color, #e93f8e); +--highlight-color: #22262a; +--highlight-bg: #fbeea8; - --container-toc-bg: var(--mainmenu-nav-link-color); - --container-toc-color: var(--color-primary); +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 1rem; +--padding-y: 1rem; +--bg-opacity: 1; +--nav-toggle-size: 3rem; +--gradient: linear-gradient(180deg, #ffffff26, #fff0); +--secondary-bg: #eaedf0; +--secondary-bg-rgb: 234, 237, 240; +--tertiary-bg: #f9fafb; +--tertiary-bg-rgb: 249, 250, 251; +--hr-color: var(--border-color, #dfe3e7); +--border-color-soft: var(--border-color, #dfe3e7); +--kbd-bg: var(--secondary-bg, #eaedf0); +--kbd-ink: var(--body-bg, #fff); +--toc-bg: var(--secondary-bg, #eaedf0); +--toc-ink: var(--color-primary, #112855); +--selection-bg: var(--highlight-bg, #fbeea8); +--selection-ink: var(--body-color, #22262a); +--border: 5px; - --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: ; +/* ===== BREAKPOINTS ===== */ +--bp-xs: 0; +--bp-sm: 576px; +--bp-md: 768px; +--bp-lg: 992px; +--bp-xl: 1200px; - --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: ; +/* ===== BOOTSTRAP PALETTE ===== */ +--primary: #010156; +--secondary: #6d757e; +--success: #448344; +--info: #30638d; +--warning: #ad6200; +--danger: #a51f18; +--light: #f9fafb; +--dark: #353b41; +--primary-rgb: 1, 1, 86; +--secondary-rgb: 109, 117, 126; +--success-rgb: 68, 131, 68; +--info-rgb: 48, 99, 141; +--warning-rgb: 173, 98, 0; +--danger-rgb: 165, 31, 24; +--light-rgb: 249, 250, 251; +--dark-rgb: 53, 59, 65; +--primary-text-emphasis: #002; +--secondary-text-emphasis: #2c2f32; +--success-text-emphasis: #1b351b; +--info-text-emphasis: #132838; +--warning-text-emphasis: #452700; +--danger-text-emphasis: #420c09; +--light-text-emphasis: #484f56; +--dark-text-emphasis: #484f56; +--primary-bg-subtle: #ccd; +--secondary-bg-subtle: #e2e3e5; +--success-bg-subtle: #dae6da; +--info-bg-subtle: #d6e0e8; +--warning-bg-subtle: #efe0cc; +--danger-bg-subtle: #edd2d1; +--light-bg-subtle: #fcfcfd; +--dark-bg-subtle: #ced4da; +--primary-border-subtle: #99b; +--secondary-border-subtle: #c5c8cb; +--success-border-subtle: #b4ceb4; +--info-border-subtle: #acc1d1; +--warning-border-subtle: #dec099; +--danger-border-subtle: #dba5a2; +--light-border-subtle: #eaedf0; +--dark-border-subtle: #adb5bd; - --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: ; +/* ===== STANDARD COLORS ===== */ +--blue: #010156; +--indigo: #6812f3; +--purple: #6f42c2; +--pink: #e93f8e; +--red: #a51f18; +--orange: #fd7e17; +--yellow: #ad6200; +--green: #448344; +--teal: #5abfdd; +--cyan: #30638d; +--black: #000; +--white: #fff; - --nav-text-color: var(--mainmenu-nav-link-color); - --nav-bg-color: var(--color-link); - --border: 5px; +/* ===== GRAY SCALE ===== */ +--gray-100: #f9fafb; +--gray-200: #eaedf0; +--gray-300: #dfe3e7; +--gray-400: #ced4da; +--gray-500: #adb5bd; +--gray-600: #6d757e; +--gray-700: #484f56; +--gray-800: #353b41; +--gray-900: #22262a; +--white-rgb: 255, 255, 255; +--black-rgb: 0, 0, 0; - --muted-color: #6d757e; - --hr-color: var(--border-color, #dfe3e7); - --link-active-color: var(--link-color); - --code-color-ink: var(--code-color, #e93f8e); - --border-color-soft: var(--border-color, #dfe3e7); - --kbd-bg: var(--secondary-bg, #eaedf0); - --kbd-ink: var(--body-bg, #fff); - --toc-bg: var(--secondary-bg, #eaedf0); - --toc-ink: var(--color-primary, #112855); - --selection-bg: var(--highlight-bg, #fbeea8); - --selection-ink: var(--body-color, #22262a); +/* ===== HEADER BACKGROUND ===== */ +--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); +--header-background-attachment: fixed; +--header-background-repeat: repeat; +--header-background-size: auto; - --blue: #010156; - --black: #000; - --indigo: #6812f3; - --purple: #6f42c2; - --pink: #e93f8e; - --red: #a51f18; - --orange: #fd7e17; - --yellow: #ad6200; - --green: #448344; - --teal: #5abfdd; - --cyan: #30638d; - --white: #fff; - --gray-100: #f9fafb; - --gray-200: #eaedf0; - --gray-300: #dfe3e7; - --gray-400: #ced4da; - --gray-500: #adb5bd; - --gray-600: #6d757e; - --gray-700: #484f56; - --gray-800: #353b41; - --gray-900: #22262a; - --primary: #010156; - --secondary: #6d757e; - --success: #448344; - --info: #30638d; - --warning: #ad6200; - --danger: #a51f18; - --light: #f9fafb; - --dark: #353b41; - --primary-rgb: 1, 1, 86; - --secondary-rgb: 109, 117, 126; - --success-rgb: 68, 131, 68; - --info-rgb: 48, 99, 141; - --warning-rgb: 173, 98, 0; - --danger-rgb: 165, 31, 24; - --light-rgb: 249, 250, 251; - --dark-rgb: 53, 59, 65; - --primary-text-emphasis: #002; - --secondary-text-emphasis: #2c2f32; - --success-text-emphasis: #1b351b; - --info-text-emphasis: #132838; - --warning-text-emphasis: #452700; - --danger-text-emphasis: #420c09; - --light-text-emphasis: #484f56; - --dark-text-emphasis: #484f56; - --primary-bg-subtle: #ccd; - --secondary-bg-subtle: #e2e3e5; - --success-bg-subtle: #dae6da; - --info-bg-subtle: #d6e0e8; - --warning-bg-subtle: #efe0cc; - --danger-bg-subtle: #edd2d1; - --light-bg-subtle: #fcfcfd; - --dark-bg-subtle: #ced4da; - --primary-border-subtle: #99b; - --secondary-border-subtle: #c5c8cb; - --success-border-subtle: #b4ceb4; - --info-border-subtle: #acc1d1; - --warning-border-subtle: #dec099; - --danger-border-subtle: #dba5a2; - --light-border-subtle: #eaedf0; - --dark-border-subtle: #adb5bd; - --white-rgb: 255, 255, 255; - --black-rgb: 0, 0, 0; - --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --gradient: linear-gradient(180deg, #ffffff26, #fff0); - --body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; - --body-color: #22262a; - --body-color-rgb: 34, 38, 42; - --body-bg: #fff; - --body-bg-rgb: 255, 255, 255; - --emphasis-color: #000; - --emphasis-color-rgb: 0, 0, 0; - --secondary-color: #22262abf; - --secondary-color-rgb: 34, 38, 42; - --secondary-bg: #eaedf0; - --secondary-bg-rgb: 234, 237, 240; - --tertiary-color: #22262a80; - --tertiary-color-rgb: 34, 38, 42; - --tertiary-bg: #f9fafb; - --tertiary-bg-rgb: 249, 250, 251; - --heading-color: inherit; - --link-color: #224faa; - --link-color-rgb: 34, 79, 170; - --link-decoration: underline; - --link-hover-color: #424077; - --link-hover-color-rgb: 66, 64, 119; - --code-color: #e93f8e; - --highlight-color: #22262a; - --highlight-bg: #fbeea8; - --border-width: 1px; - --border-style: solid; - --border-color: #dfe3e7; - --border-color-translucent: #0000002d; - --border-radius: .25rem; - --border-radius-sm: .2rem; - --border-radius-lg: .3rem; - --border-radius-xl: .3rem; - --border-radius-xxl: 2rem; - --border-radius-2xl: var(--border-radius-xxl)*2; - --border-radius-pill: 50rem; - --box-shadow: 0 .5rem 1rem #00000026; - --box-shadow-sm: 0 .125rem .25rem #00000013; - --box-shadow-lg: 0 1rem 3rem #0000002d; - --box-shadow-inset: inset 0 1px 2px #00000013; - --focus-ring-width: .25rem; - --focus-ring-opacity: .25; - --focus-ring-color: #01015640; - --form-valid-color: #448344; - --form-valid-border-color: #448344; - --form-invalid-color: #a51f18; - --form-invalid-border-color: #a51f18; +/* ===== CONTAINER BACKGROUNDS ===== */ +/* Below Topbar Container */ +--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: ; - /* Offcanvas (moved from template.css) */ - --offcanvas-color: var(--body-color); - --offcanvas-padding-x: 1rem; - --offcanvas-padding-y: 1rem; +/* Top A Container */ +--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: ; - /* Navbar */ - --navbar-padding-x: 1rem; - --navbar-padding-y: 0.5rem; - --navbar-color: var(--nav-text-color); - --navbar-active-color: var(--mainmenu-nav-link-color); - --navbar-disabled-color: #6c757d; - --navbar-brand-padding-y: 0.3125rem; - --navbar-brand-margin-end: 1rem; - --navbar-brand-font-size: 1.25rem; - --navbar-brand-color: var(--nav-text-color); - --navbar-brand-active-color: var(--mainmenu-nav-link-color); - --navbar-nav-link-padding-x: 0.5rem; - --navbar-toggler-padding-y: 0.25rem; - --navbar-toggler-padding-x: 0.75rem; - --navbar-toggler-font-size: 1.25rem; - --navbar-toggler-border-color: rgba(0, 0, 0, 0.1); - --navbar-toggler-border-radius: 0.25rem; - --navbar-toggler-focus-width: 0.25rem; - --navbar-toggler-transition: box-shadow 0.15s ease-in-out; - --nav-link-padding-x: 1rem; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: 400; - --nav-link-color: var(--nav-text-color); - --nav-link-active-color: var(--mainmenu-nav-link-color); - --nav-link-disabled-color: #6c757d; +/* Top B Container */ +--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: ; - /* Responsive tokens */ - --nav-toggle-size: 3rem; - --bp-xs: 0; - --bp-sm: 576px; - --bp-md: 768px; - --bp-lg: 992px; - --bp-xl: 1200px; +/* TOC Container */ +--container-toc-bg: var(--mainmenu-nav-link-color); +--container-toc-color: var(--color-primary); - /* Utility opacity defaults */ - --bg-opacity: 1; +/* Sidebar Container */ +--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: ; - /* Layout padding */ - --padding-x: 1rem; - --padding-y: 1rem; +/* Bottom A Container */ +--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: ; - /* Button utilities */ - --btn-border-radius: var(--border-radius); - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); +/* Bottom B Container */ +--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: ; - /* Card variables */ - --card-spacer-y: 1rem; - --card-spacer-x: 1rem; - --card-title-spacer-y: 0.5rem; - --card-border-width: 1px; - --card-border-color: var(--border-color); - --card-border-radius: var(--border-radius); - --card-box-shadow: none; - --card-inner-border-radius: calc(var(--border-radius) - 1px); - --card-cap-padding-y: 0.5rem; - --card-cap-padding-x: 1rem; - --card-cap-bg: rgba(0, 0, 0, 0.03); - --card-cap-color: var(--body-color); - --card-height: auto; - --card-color: var(--body-color); - --card-bg: var(--body-bg); - --card-img-overlay-padding: 1rem; - --card-group-margin: 0.75rem; +/* ===== BORDERS ===== */ +--border-width: 1px; +--border-style: solid; +--border-color: #dfe3e7; +--border-color-translucent: #0000002d; +--border-radius: .25rem; +--border-radius-sm: .2rem; +--border-radius-lg: .3rem; +--border-radius-xl: .3rem; +--border-radius-xxl: 2rem; +--border-radius-2xl: var(--border-radius-xxl)*2; +--border-radius-pill: 50rem; - /* VirtueMart surfaces */ - --vm-surface: #ffffff; - --vm-surface-2: #f8f9fa; - --vm-text: var(--body-color); - --vm-text-strong: #000000; - --vm-text-muted: #6c757d; - --vm-border: var(--border-color); - --vm-price-color: var(--success); +/* ===== SHADOWS ===== */ +--box-shadow: 0 .5rem 1rem #00000026; +--box-shadow-sm: 0 .125rem .25rem #00000013; +--box-shadow-lg: 0 1rem 3rem #0000002d; +--box-shadow-inset: inset 0 1px 2px #00000013; - /* VM layout and density */ - --vm-container-max-width: 1200px; - --vm-section-gap: 2rem; - --vm-block-radius: var(--border-radius); - --vm-block-shadow: var(--box-shadow-sm); +/* ===== FOCUS & FORMS ===== */ +--focus-ring-width: .25rem; +--focus-ring-opacity: .25; +--focus-ring-color: #01015640; +--input-color: hsl(210, 11%, 15%); +--input-bg: hsl(210, 20%, 98%); +--input-border-color: hsl(210, 14%, 83%); +--input-focus-border-color: #8894aa; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); +--input-placeholder-color: hsl(210, 7%, 46%); +--input-disabled-bg: hsl(210, 16%, 93%); +--input-disabled-border-color: hsl(210, 14%, 83%); +--form-valid-color: #448344; +--form-valid-border-color: #448344; +--form-invalid-color: #a51f18; +--form-invalid-border-color: #a51f18; - /* VM typography */ - --vm-category-title-size: 2rem; - --vm-subcategory-title-size: 1.5rem; - --vm-page-title-size: 1.75rem; - --vm-products-type-title-size: 1.25rem; - --vm-product-title-size: 1.125rem; - --vm-product-title-weight: 500; - --vm-products-type-title-weight: 600; - --vm-price-size: 1.5rem; - --vm-price-detail-size: 1.125rem; - --vm-price-desc-size: 0.875rem; +/* ===== BUTTONS ===== */ +--btn-border-radius: var(--border-radius); +--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - /* VM controls */ - --vm-input-radius: var(--border-radius); - --vm-input-shadow: var(--box-shadow-sm); - --vm-qty-width: 80px; - --vm-cart-dropdown-min-width: 300px; +/* ===== CARDS ===== */ +--card-spacer-y: 1rem; +--card-spacer-x: 1rem; +--card-title-spacer-y: 0.5rem; +--card-border-width: 1px; +--card-border-color: var(--border-color); +--card-border-radius: var(--border-radius); +--card-box-shadow: none; +--card-inner-border-radius: calc(var(--border-radius) - 1px); +--card-cap-padding-y: 0.5rem; +--card-cap-padding-x: 1rem; +--card-cap-bg: rgba(0, 0, 0, 0.03); +--card-cap-color: var(--body-color); +--card-height: auto; +--card-color: var(--body-color); +--card-bg: var(--body-bg); +--card-img-overlay-padding: 1rem; +--card-group-margin: 0.75rem; - /* VM alerts */ - --vm-alert-radius: var(--border-radius); - --vm-alert-shadow: var(--box-shadow-sm); - --vm-availability-bg: var(--success-bg-subtle); - --vm-availability-text: var(--success); +/* ===== VIRTUEMART (VM) ===== */ +/* VM Surfaces */ +--vm-surface: #ffffff; +--vm-surface-2: #f8f9fa; +--vm-text: var(--body-color); +--vm-text-strong: #000000; +--vm-text-muted: #6c757d; +--vm-border: var(--border-color); +--vm-price-color: var(--success); - /* VM buttons */ - --vm-btn-padding-x: 1rem; - --vm-btn-padding-y: 0.5rem; - --vm-btn-radius: var(--border-radius); - --vm-btn-shadow: var(--box-shadow-sm); - --vm-btn-primary-bg: var(--primary); - --vm-btn-primary-text: #ffffff; - --vm-btn-primary-border: var(--primary); - --vm-btn-secondary-bg: var(--secondary); - --vm-btn-secondary-text: #ffffff; - --vm-btn-secondary-border: var(--secondary); +/* VM Layout and Density */ +--vm-container-max-width: 1200px; +--vm-section-gap: 2rem; +--vm-block-radius: var(--border-radius); +--vm-block-shadow: var(--box-shadow-sm); - /* VM image overlay controls */ - --vm-image-overlay-gap-x: 0.5rem; - --vm-image-overlay-gap-y: 0.5rem; - --vm-image-overlay-raise: 0.25rem; - --vm-image-overlay-btn-size: 2.5rem; - --vm-image-overlay-btn-radius: 50%; - --vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); - --vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); - --vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); - --vm-image-overlay-btn-border-width: 1px; - --vm-image-overlay-btn-color: var(--body-color); - --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +/* VM Typography */ +--vm-category-title-size: 2rem; +--vm-subcategory-title-size: 1.5rem; +--vm-page-title-size: 1.75rem; +--vm-products-type-title-size: 1.25rem; +--vm-product-title-size: 1.125rem; +--vm-product-title-weight: 500; +--vm-products-type-title-weight: 600; +--vm-price-size: 1.5rem; +--vm-price-detail-size: 1.125rem; +--vm-price-desc-size: 0.875rem; - /* VM vendor menu tokens */ - --vm-vendor-menu-bg: var(--body-bg); - --vm-vendor-menu-border: var(--border-color); - --vm-vendor-menu-radius: var(--border-radius); - --vm-vendor-menu-shadow: var(--box-shadow-sm); - --vm-vendor-menu-item-gap: 0.25rem; - --vm-vendor-menu-item-padding-x: 1rem; - --vm-vendor-menu-item-padding-y: 0.5rem; - --vm-vendor-menu-pill-radius: 50rem; - --vm-vendor-menu-link: var(--link-color); - --vm-vendor-menu-link-hover: var(--link-hover-color); - --vm-vendor-menu-link-active: var(--primary); - --vm-vendor-menu-hover-bg: var(--secondary-bg); +/* VM Controls */ +--vm-input-radius: var(--border-radius); +--vm-input-shadow: var(--box-shadow-sm); +--vm-qty-width: 80px; +--vm-cart-dropdown-min-width: 300px; - /* Gable colors */ - --gab-blue: #0066cc; - --gab-green: #28a745; - --gab-red: #dc3545; - --gab-orange: #fd7e14; - --gab-gray1: #495057; - --gab-gray2: #6c757d; - --gab-gray3: #adb5bd; +/* VM Alerts */ +--vm-alert-radius: var(--border-radius); +--vm-alert-shadow: var(--box-shadow-sm); +--vm-availability-bg: var(--success-bg-subtle); +--vm-availability-text: var(--success); + +/* VM Buttons */ +--vm-btn-padding-x: 1rem; +--vm-btn-padding-y: 0.5rem; +--vm-btn-radius: var(--border-radius); +--vm-btn-shadow: var(--box-shadow-sm); +--vm-btn-primary-bg: var(--primary); +--vm-btn-primary-text: #ffffff; +--vm-btn-primary-border: var(--primary); +--vm-btn-secondary-bg: var(--secondary); +--vm-btn-secondary-text: #ffffff; +--vm-btn-secondary-border: var(--secondary); + +/* VM Image Overlay Controls */ +--vm-image-overlay-gap-x: 0.5rem; +--vm-image-overlay-gap-y: 0.5rem; +--vm-image-overlay-raise: 0.25rem; +--vm-image-overlay-btn-size: 2.5rem; +--vm-image-overlay-btn-radius: 50%; +--vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); +--vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); +--vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); +--vm-image-overlay-btn-border-width: 1px; +--vm-image-overlay-btn-color: var(--body-color); +--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + +/* VM Vendor Menu */ +--vm-vendor-menu-bg: var(--body-bg); +--vm-vendor-menu-border: var(--border-color); +--vm-vendor-menu-radius: var(--border-radius); +--vm-vendor-menu-shadow: var(--box-shadow-sm); +--vm-vendor-menu-item-gap: 0.25rem; +--vm-vendor-menu-item-padding-x: 1rem; +--vm-vendor-menu-item-padding-y: 0.5rem; +--vm-vendor-menu-pill-radius: 50rem; +--vm-vendor-menu-link: var(--link-color); +--vm-vendor-menu-link-hover: var(--link-hover-color); +--vm-vendor-menu-link-active: var(--primary); +--vm-vendor-menu-hover-bg: var(--secondary-bg); + +/* ===== GABLE ===== */ +--gab-blue: #0066cc; +--gab-green: #28a745; +--gab-red: #dc3545; +--gab-orange: #fd7e14; +--gab-gray1: #495057; +--gab-gray2: #6c757d; +--gab-gray3: #adb5bd; } .btn { diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css index 1c4404a..a0c410e 100644 --- a/src/media/css/colors/light/colors_standard.css +++ b/src/media/css/colors/light/colors_standard.css @@ -20,702 +20,723 @@ * --------------------------------------------- */ :root[data-bs-theme="light"] { - color-scheme: light; - --color-primary: #112855; - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #3f8ff0; +color-scheme: light; - --mainmenu-nav-link-color: white; +/* ===== BRAND & THEME COLORS ===== */ +--color-primary: #112855; +--accent-color-primary: #3f8ff0; +--accent-color-secondary: #3f8ff0; - --color-link: #224FAA; - --color-hover: var(--accent-color-primary); +/* ===== NAVIGATION ===== */ +--mainmenu-nav-link-color: white; +--nav-text-color: white; +--nav-bg-color: var(--color-link); - --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); - --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; +/* ===== LINKS ===== */ +--color-link: #224FAA; +--color-hover: var(--accent-color-primary); +--link-color: #224faa; +--link-color-rgb: 34, 79, 170; +--link-decoration: underline; +--link-hover-color: #424077; +--link-hover-color-rgb: 66, 64, 119; +--link-active-color: var(--link-color); - --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: ; +/* ===== OFFCANVAS ===== */ +--offcanvas-color: var(--body-color); +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; - --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: ; +/* ===== NAVBAR ===== */ +--navbar-padding-x: 1rem; +--navbar-padding-y: 0.5rem; +--navbar-color: var(--nav-text-color); +--navbar-active-color: var(--mainmenu-nav-link-color); +--navbar-disabled-color: #6c757d; +--navbar-brand-padding-y: 0.3125rem; +--navbar-brand-margin-end: 1rem; +--navbar-brand-font-size: 1.25rem; +--navbar-brand-color: var(--nav-text-color); +--navbar-brand-active-color: var(--mainmenu-nav-link-color); +--navbar-nav-link-padding-x: 0.5rem; +--navbar-toggler-padding-y: 0.25rem; +--navbar-toggler-padding-x: 0.75rem; +--navbar-toggler-font-size: 1.25rem; +--navbar-toggler-border-color: rgba(0, 0, 0, 0.1); +--navbar-toggler-border-radius: 0.25rem; +--navbar-toggler-focus-width: 0.25rem; +--navbar-toggler-transition: box-shadow 0.15s ease-in-out; +--nav-link-padding-x: 1rem; +--nav-link-padding-y: 0.5rem; +--nav-link-font-weight: 400; +--nav-link-color: var(--nav-text-color); +--nav-link-active-color: var(--mainmenu-nav-link-color); +--nav-link-disabled-color: #6c757d; - --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: ; +/* ===== TYPOGRAPHY & BODY ===== */ +--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); +--body-font-size: 1rem; +--body-font-weight: 400; +--body-line-height: 1.5; +--body-color: #22262a; +--body-color-rgb: 34, 38, 42; +--body-bg: #fff; +--body-bg-rgb: 255, 255, 255; +--heading-color: inherit; +--emphasis-color: #000; +--emphasis-color-rgb: 0, 0, 0; +--secondary-color: #22262abf; +--secondary-color-rgb: 34, 38, 42; +--tertiary-color: #22262a80; +--tertiary-color-rgb: 34, 38, 42; +--muted-color: #6d757e; +--code-color: #e93f8e; +--code-color-ink: var(--code-color, #e93f8e); +--highlight-color: #22262a; +--highlight-bg: #fbeea8; - --container-toc-bg: var(--mainmenu-nav-link-color); - --container-toc-color: var(--color-primary); +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 1rem; +--padding-y: 1rem; +--bg-opacity: 1; +--nav-toggle-size: 3rem; +--gradient: linear-gradient(180deg, #ffffff26, #fff0); +--secondary-bg: #eaedf0; +--secondary-bg-rgb: 234, 237, 240; +--tertiary-bg: #f9fafb; +--tertiary-bg-rgb: 249, 250, 251; +--hr-color: var(--border-color, #dfe3e7); +--border-color-soft: var(--border-color, #dfe3e7); +--kbd-bg: var(--secondary-bg, #eaedf0); +--kbd-ink: var(--body-bg, #fff); +--toc-bg: var(--secondary-bg, #eaedf0); +--toc-ink: var(--color-primary, #112855); +--selection-bg: var(--highlight-bg, #fbeea8); +--selection-ink: var(--body-color, #22262a); +--border: 5px; - --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: ; +/* ===== BREAKPOINTS ===== */ +--bp-xs: 0; +--bp-sm: 576px; +--bp-md: 768px; +--bp-lg: 992px; +--bp-xl: 1200px; - --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: ; +/* ===== BOOTSTRAP PALETTE ===== */ +--primary: #010156; +--secondary: #6d757e; +--success: #448344; +--info: #30638d; +--warning: #ad6200; +--danger: #a51f18; +--light: #f9fafb; +--dark: #353b41; +--primary-rgb: 1, 1, 86; +--secondary-rgb: 109, 117, 126; +--success-rgb: 68, 131, 68; +--info-rgb: 48, 99, 141; +--warning-rgb: 173, 98, 0; +--danger-rgb: 165, 31, 24; +--light-rgb: 249, 250, 251; +--dark-rgb: 53, 59, 65; +--primary-text-emphasis: #002; +--secondary-text-emphasis: #2c2f32; +--success-text-emphasis: #1b351b; +--info-text-emphasis: #132838; +--warning-text-emphasis: #452700; +--danger-text-emphasis: #420c09; +--light-text-emphasis: #484f56; +--dark-text-emphasis: #484f56; +--primary-bg-subtle: #ccd; +--secondary-bg-subtle: #e2e3e5; +--success-bg-subtle: #dae6da; +--info-bg-subtle: #d6e0e8; +--warning-bg-subtle: #efe0cc; +--danger-bg-subtle: #edd2d1; +--light-bg-subtle: #fcfcfd; +--dark-bg-subtle: #ced4da; +--primary-border-subtle: #99b; +--secondary-border-subtle: #c5c8cb; +--success-border-subtle: #b4ceb4; +--info-border-subtle: #acc1d1; +--warning-border-subtle: #dec099; +--danger-border-subtle: #dba5a2; +--light-border-subtle: #eaedf0; +--dark-border-subtle: #adb5bd; - --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: ; +/* ===== STANDARD COLORS ===== */ +--blue: #010156; +--indigo: #6812f3; +--purple: #6f42c2; +--pink: #e93f8e; +--red: #a51f18; +--orange: #fd7e17; +--yellow: #ad6200; +--green: #448344; +--teal: #5abfdd; +--cyan: #30638d; +--black: #000; +--white: #fff; - --nav-text-color: white; - --nav-bg-color: var(--color-link); - --border: 5px; +/* ===== GRAY SCALE ===== */ +--gray-100: #f9fafb; +--gray-200: #eaedf0; +--gray-300: #dfe3e7; +--gray-400: #ced4da; +--gray-500: #adb5bd; +--gray-600: #6d757e; +--gray-700: #484f56; +--gray-800: #353b41; +--gray-900: #22262a; +--white-rgb: 255, 255, 255; +--black-rgb: 0, 0, 0; - --muted-color: #6d757e; - --hr-color: var(--border-color, #dfe3e7); - --link-active-color: var(--link-color); - --code-color-ink: var(--code-color, #e93f8e); - --border-color-soft: var(--border-color, #dfe3e7); - --kbd-bg: var(--secondary-bg, #eaedf0); - --kbd-ink: var(--body-bg, #fff); - --toc-bg: var(--secondary-bg, #eaedf0); - --toc-ink: var(--color-primary, #112855); - --selection-bg: var(--highlight-bg, #fbeea8); - --selection-ink: var(--body-color, #22262a); +/* ===== HEADER BACKGROUND ===== */ +--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); +--header-background-attachment: fixed; +--header-background-repeat: repeat; +--header-background-size: auto; - --blue: #010156; - --black: #000; - --indigo: #6812f3; - --purple: #6f42c2; - --pink: #e93f8e; - --red: #a51f18; - --orange: #fd7e17; - --yellow: #ad6200; - --green: #448344; - --teal: #5abfdd; - --cyan: #30638d; - --white: #fff; - --gray-100: #f9fafb; - --gray-200: #eaedf0; - --gray-300: #dfe3e7; - --gray-400: #ced4da; - --gray-500: #adb5bd; - --gray-600: #6d757e; - --gray-700: #484f56; - --gray-800: #353b41; - --gray-900: #22262a; - --primary: #010156; - --secondary: #6d757e; - --success: #448344; - --info: #30638d; - --warning: #ad6200; - --danger: #a51f18; - --light: #f9fafb; - --dark: #353b41; - --primary-rgb: 1, 1, 86; - --secondary-rgb: 109, 117, 126; - --success-rgb: 68, 131, 68; - --info-rgb: 48, 99, 141; - --warning-rgb: 173, 98, 0; - --danger-rgb: 165, 31, 24; - --light-rgb: 249, 250, 251; - --dark-rgb: 53, 59, 65; - --primary-text-emphasis: #002; - --secondary-text-emphasis: #2c2f32; - --success-text-emphasis: #1b351b; - --info-text-emphasis: #132838; - --warning-text-emphasis: #452700; - --danger-text-emphasis: #420c09; - --light-text-emphasis: #484f56; - --dark-text-emphasis: #484f56; - --primary-bg-subtle: #ccd; - --secondary-bg-subtle: #e2e3e5; - --success-bg-subtle: #dae6da; - --info-bg-subtle: #d6e0e8; - --warning-bg-subtle: #efe0cc; - --danger-bg-subtle: #edd2d1; - --light-bg-subtle: #fcfcfd; - --dark-bg-subtle: #ced4da; - --primary-border-subtle: #99b; - --secondary-border-subtle: #c5c8cb; - --success-border-subtle: #b4ceb4; - --info-border-subtle: #acc1d1; - --warning-border-subtle: #dec099; - --danger-border-subtle: #dba5a2; - --light-border-subtle: #eaedf0; - --dark-border-subtle: #adb5bd; - --white-rgb: 255, 255, 255; - --black-rgb: 0, 0, 0; - --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --gradient: linear-gradient(180deg, #ffffff26, #fff0); - --body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; - --body-color: #22262a; - --body-color-rgb: 34, 38, 42; - --body-bg: #fff; - --body-bg-rgb: 255, 255, 255; - --emphasis-color: #000; - --emphasis-color-rgb: 0, 0, 0; - --secondary-color: #22262abf; - --secondary-color-rgb: 34, 38, 42; - --secondary-bg: #eaedf0; - --secondary-bg-rgb: 234, 237, 240; - --tertiary-color: #22262a80; - --tertiary-color-rgb: 34, 38, 42; - --tertiary-bg: #f9fafb; - --tertiary-bg-rgb: 249, 250, 251; - --heading-color: inherit; - --link-color: #224faa; - --link-color-rgb: 34, 79, 170; - --link-decoration: underline; - --link-hover-color: #424077; - --link-hover-color-rgb: 66, 64, 119; - --code-color: #e93f8e; - --highlight-color: #22262a; - --highlight-bg: #fbeea8; - --border-width: 1px; - --border-style: solid; - --border-color: #dfe3e7; - --border-color-translucent: #0000002d; - --border-radius: .25rem; - --border-radius-sm: .2rem; - --border-radius-lg: .3rem; - --border-radius-xl: .3rem; - --border-radius-xxl: 2rem; - --border-radius-2xl: var(--border-radius-xxl)*2; - --border-radius-pill: 50rem; - --box-shadow: 0 .5rem 1rem #00000026; - --box-shadow-sm: 0 .125rem .25rem #00000013; - --box-shadow-lg: 0 1rem 3rem #0000002d; - --box-shadow-inset: inset 0 1px 2px #00000013; - --focus-ring-width: .25rem; - --focus-ring-opacity: .25; - --focus-ring-color: #01015640; - /* Forms and inputs */ - --input-color: hsl(210, 11%, 15%); - --input-bg: hsl(210, 20%, 98%); - --input-border-color: hsl(210, 14%, 83%); - --input-focus-border-color: #8894aa; - --input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - --input-placeholder-color: hsl(210, 7%, 46%); - --input-disabled-bg: hsl(210, 16%, 93%); - --input-disabled-border-color: hsl(210, 14%, 83%); - - --form-valid-color: #448344; - --form-valid-border-color: #448344; - --form-invalid-color: #a51f18; - --form-invalid-border-color: #a51f18; +/* ===== CONTAINER BACKGROUNDS ===== */ +/* Below Topbar Container */ +--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: ; - /* Offcanvas (moved from template.css) */ - --offcanvas-color: var(--body-color); - --offcanvas-padding-x: 1rem; - --offcanvas-padding-y: 1rem; +/* Top A Container */ +--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: ; - /* Navbar */ - --navbar-padding-x: 1rem; - --navbar-padding-y: 0.5rem; - --navbar-color: var(--nav-text-color); - --navbar-active-color: var(--mainmenu-nav-link-color); - --navbar-disabled-color: #6c757d; - --navbar-brand-padding-y: 0.3125rem; - --navbar-brand-margin-end: 1rem; - --navbar-brand-font-size: 1.25rem; - --navbar-brand-color: var(--nav-text-color); - --navbar-brand-active-color: var(--mainmenu-nav-link-color); - --navbar-nav-link-padding-x: 0.5rem; - --navbar-toggler-padding-y: 0.25rem; - --navbar-toggler-padding-x: 0.75rem; - --navbar-toggler-font-size: 1.25rem; - --navbar-toggler-border-color: rgba(0, 0, 0, 0.1); - --navbar-toggler-border-radius: 0.25rem; - --navbar-toggler-focus-width: 0.25rem; - --navbar-toggler-transition: box-shadow 0.15s ease-in-out; - --nav-link-padding-x: 1rem; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: 400; - --nav-link-color: var(--nav-text-color); - --nav-link-active-color: var(--mainmenu-nav-link-color); - --nav-link-disabled-color: #6c757d; +/* Top B Container */ +--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: ; - /* Responsive tokens */ - --nav-toggle-size: 3rem; - --bp-xs: 0; - --bp-sm: 576px; - --bp-md: 768px; - --bp-lg: 992px; - --bp-xl: 1200px; +/* TOC Container */ +--container-toc-bg: var(--mainmenu-nav-link-color); +--container-toc-color: var(--color-primary); - /* Utility opacity defaults */ - --bg-opacity: 1; +/* Sidebar Container */ +--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: ; - /* Layout padding */ - --padding-x: 1rem; - --padding-y: 1rem; +/* Bottom A Container */ +--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: ; - /* Button utilities */ - --btn-border-radius: var(--border-radius); - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); +/* Bottom B Container */ +--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: ; - /* Card variables */ - --card-spacer-y: 1rem; - --card-spacer-x: 1rem; - --card-title-spacer-y: 0.5rem; - --card-border-width: 1px; - --card-border-color: var(--border-color); - --card-border-radius: var(--border-radius); - --card-box-shadow: none; - --card-inner-border-radius: calc(var(--border-radius) - 1px); - --card-cap-padding-y: 0.5rem; - --card-cap-padding-x: 1rem; - --card-cap-bg: rgba(0, 0, 0, 0.03); - --card-cap-color: var(--body-color); - --card-height: auto; - --card-color: var(--body-color); - --card-bg: var(--body-bg); - --card-img-overlay-padding: 1rem; - --card-group-margin: 0.75rem; +/* ===== BORDERS ===== */ +--border-width: 1px; +--border-style: solid; +--border-color: #dfe3e7; +--border-color-translucent: #0000002d; +--border-radius: .25rem; +--border-radius-sm: .2rem; +--border-radius-lg: .3rem; +--border-radius-xl: .3rem; +--border-radius-xxl: 2rem; +--border-radius-2xl: var(--border-radius-xxl)*2; +--border-radius-pill: 50rem; - /* VirtueMart surfaces */ - --vm-surface: #ffffff; - --vm-surface-2: #f8f9fa; - --vm-text: var(--body-color); - --vm-text-strong: #000000; - --vm-text-muted: #6c757d; - --vm-border: var(--border-color); - --vm-price-color: var(--success); +/* ===== SHADOWS ===== */ +--box-shadow: 0 .5rem 1rem #00000026; +--box-shadow-sm: 0 .125rem .25rem #00000013; +--box-shadow-lg: 0 1rem 3rem #0000002d; +--box-shadow-inset: inset 0 1px 2px #00000013; - /* VM layout and density */ - --vm-container-max-width: 1200px; - --vm-section-gap: 2rem; - --vm-block-radius: var(--border-radius); - --vm-block-shadow: var(--box-shadow-sm); +/* ===== FOCUS & FORMS ===== */ +--focus-ring-width: .25rem; +--focus-ring-opacity: .25; +--focus-ring-color: #01015640; +--input-color: hsl(210, 11%, 15%); +--input-bg: hsl(210, 20%, 98%); +--input-border-color: hsl(210, 14%, 83%); +--input-focus-border-color: #8894aa; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); +--input-placeholder-color: hsl(210, 7%, 46%); +--input-disabled-bg: hsl(210, 16%, 93%); +--input-disabled-border-color: hsl(210, 14%, 83%); +--form-valid-color: #448344; +--form-valid-border-color: #448344; +--form-invalid-color: #a51f18; +--form-invalid-border-color: #a51f18; - /* VM typography */ - --vm-category-title-size: 2rem; - --vm-subcategory-title-size: 1.5rem; - --vm-page-title-size: 1.75rem; - --vm-products-type-title-size: 1.25rem; - --vm-product-title-size: 1.125rem; - --vm-product-title-weight: 500; - --vm-products-type-title-weight: 600; - --vm-price-size: 1.5rem; - --vm-price-detail-size: 1.125rem; - --vm-price-desc-size: 0.875rem; +/* ===== BUTTONS ===== */ +--btn-border-radius: var(--border-radius); +--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - /* VM controls */ - --vm-input-radius: var(--border-radius); - --vm-input-shadow: var(--box-shadow-sm); - --vm-qty-width: 80px; - --vm-cart-dropdown-min-width: 300px; +/* ===== CARDS ===== */ +--card-spacer-y: 1rem; +--card-spacer-x: 1rem; +--card-title-spacer-y: 0.5rem; +--card-border-width: 1px; +--card-border-color: var(--border-color); +--card-border-radius: var(--border-radius); +--card-box-shadow: none; +--card-inner-border-radius: calc(var(--border-radius) - 1px); +--card-cap-padding-y: 0.5rem; +--card-cap-padding-x: 1rem; +--card-cap-bg: rgba(0, 0, 0, 0.03); +--card-cap-color: var(--body-color); +--card-height: auto; +--card-color: var(--body-color); +--card-bg: var(--body-bg); +--card-img-overlay-padding: 1rem; +--card-group-margin: 0.75rem; - /* VM alerts */ - --vm-alert-radius: var(--border-radius); - --vm-alert-shadow: var(--box-shadow-sm); - --vm-availability-bg: var(--success-bg-subtle); - --vm-availability-text: var(--success); +/* ===== VIRTUEMART (VM) ===== */ +/* VM Surfaces */ +--vm-surface: #ffffff; +--vm-surface-2: #f8f9fa; +--vm-text: var(--body-color); +--vm-text-strong: #000000; +--vm-text-muted: #6c757d; +--vm-border: var(--border-color); +--vm-price-color: var(--success); - /* VM buttons */ - --vm-btn-padding-x: 1rem; - --vm-btn-padding-y: 0.5rem; - --vm-btn-radius: var(--border-radius); - --vm-btn-shadow: var(--box-shadow-sm); - --vm-btn-primary-bg: var(--primary); - --vm-btn-primary-text: #ffffff; - --vm-btn-primary-border: var(--primary); - --vm-btn-secondary-bg: var(--secondary); - --vm-btn-secondary-text: #ffffff; - --vm-btn-secondary-border: var(--secondary); +/* VM Layout and Density */ +--vm-container-max-width: 1200px; +--vm-section-gap: 2rem; +--vm-block-radius: var(--border-radius); +--vm-block-shadow: var(--box-shadow-sm); - /* VM image overlay controls */ - --vm-image-overlay-gap-x: 0.5rem; - --vm-image-overlay-gap-y: 0.5rem; - --vm-image-overlay-raise: 0.25rem; - --vm-image-overlay-btn-size: 2.5rem; - --vm-image-overlay-btn-radius: 50%; - --vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); - --vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); - --vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); - --vm-image-overlay-btn-border-width: 1px; - --vm-image-overlay-btn-color: var(--body-color); - --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +/* VM Typography */ +--vm-category-title-size: 2rem; +--vm-subcategory-title-size: 1.5rem; +--vm-page-title-size: 1.75rem; +--vm-products-type-title-size: 1.25rem; +--vm-product-title-size: 1.125rem; +--vm-product-title-weight: 500; +--vm-products-type-title-weight: 600; +--vm-price-size: 1.5rem; +--vm-price-detail-size: 1.125rem; +--vm-price-desc-size: 0.875rem; - /* VM vendor menu tokens */ - --vm-vendor-menu-bg: var(--body-bg); - --vm-vendor-menu-border: var(--border-color); - --vm-vendor-menu-radius: var(--border-radius); - --vm-vendor-menu-shadow: var(--box-shadow-sm); - --vm-vendor-menu-item-gap: 0.25rem; - --vm-vendor-menu-item-padding-x: 1rem; - --vm-vendor-menu-item-padding-y: 0.5rem; - --vm-vendor-menu-pill-radius: 50rem; - --vm-vendor-menu-link: var(--link-color); - --vm-vendor-menu-link-hover: var(--link-hover-color); - --vm-vendor-menu-link-active: var(--primary); - --vm-vendor-menu-hover-bg: var(--secondary-bg); +/* VM Controls */ +--vm-input-radius: var(--border-radius); +--vm-input-shadow: var(--box-shadow-sm); +--vm-qty-width: 80px; +--vm-cart-dropdown-min-width: 300px; - /* Gable colors */ - --gab-blue: #0066cc; - --gab-green: #28a745; - --gab-red: #dc3545; - --gab-orange: #fd7e14; - --gab-gray1: #495057; - --gab-gray2: #6c757d; - --gab-gray3: #adb5bd; +/* VM Alerts */ +--vm-alert-radius: var(--border-radius); +--vm-alert-shadow: var(--box-shadow-sm); +--vm-availability-bg: var(--success-bg-subtle); +--vm-availability-text: var(--success); + +/* VM Buttons */ +--vm-btn-padding-x: 1rem; +--vm-btn-padding-y: 0.5rem; +--vm-btn-radius: var(--border-radius); +--vm-btn-shadow: var(--box-shadow-sm); +--vm-btn-primary-bg: var(--primary); +--vm-btn-primary-text: #ffffff; +--vm-btn-primary-border: var(--primary); +--vm-btn-secondary-bg: var(--secondary); +--vm-btn-secondary-text: #ffffff; +--vm-btn-secondary-border: var(--secondary); + +/* VM Image Overlay Controls */ +--vm-image-overlay-gap-x: 0.5rem; +--vm-image-overlay-gap-y: 0.5rem; +--vm-image-overlay-raise: 0.25rem; +--vm-image-overlay-btn-size: 2.5rem; +--vm-image-overlay-btn-radius: 50%; +--vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); +--vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); +--vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); +--vm-image-overlay-btn-border-width: 1px; +--vm-image-overlay-btn-color: var(--body-color); +--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + +/* VM Vendor Menu */ +--vm-vendor-menu-bg: var(--body-bg); +--vm-vendor-menu-border: var(--border-color); +--vm-vendor-menu-radius: var(--border-radius); +--vm-vendor-menu-shadow: var(--box-shadow-sm); +--vm-vendor-menu-item-gap: 0.25rem; +--vm-vendor-menu-item-padding-x: 1rem; +--vm-vendor-menu-item-padding-y: 0.5rem; +--vm-vendor-menu-pill-radius: 50rem; +--vm-vendor-menu-link: var(--link-color); +--vm-vendor-menu-link-hover: var(--link-hover-color); +--vm-vendor-menu-link-active: var(--primary); +--vm-vendor-menu-hover-bg: var(--secondary-bg); + +/* ===== GABLE ===== */ +--gab-blue: #0066cc; +--gab-green: #28a745; +--gab-red: #dc3545; +--gab-orange: #fd7e14; +--gab-gray1: #495057; +--gab-gray2: #6c757d; +--gab-gray3: #adb5bd; } .btn { - --btn-padding-x: 1rem; - --btn-padding-y: 0.6rem; - --btn-font-family: ; - --btn-font-size: 1rem; - --btn-font-weight: 400; - --btn-line-height: 1.5; - --btn-color: hsl(210, 11%, 15%); - --btn-bg: transparent; - --btn-border-width: 1px; - --btn-border-color: transparent; - --btn-border-radius: 0.25rem; - --btn-active-border-color: transparent; - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --btn-disabled-opacity: 0.65; - --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--btn-padding-y) var(--btn-padding-x); - font-family: var(--btn-font-family); - font-size: var(--btn-font-size); - font-weight: var(--btn-font-weight); - line-height: var(--btn-line-height); - color: var(--btn-color); - text-align: center; - text-decoration: none; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: var(--btn-border-width) solid var(--btn-border-color); - border-radius: var(--btn-border-radius); - background-color: var(--btn-bg); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +--btn-padding-x: 1rem; +--btn-padding-y: 0.6rem; +--btn-font-family: ; +--btn-font-size: 1rem; +--btn-font-weight: 400; +--btn-line-height: 1.5; +--btn-color: hsl(210, 11%, 15%); +--btn-bg: transparent; +--btn-border-width: 1px; +--btn-border-color: transparent; +--btn-border-radius: 0.25rem; +--btn-active-border-color: transparent; +--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); +--btn-disabled-opacity: 0.65; +--btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); +display: inline-block; +padding: var(--btn-padding-y) var(--btn-padding-x); +font-family: var(--btn-font-family); +font-size: var(--btn-font-size); +font-weight: var(--btn-font-weight); +line-height: var(--btn-line-height); +color: var(--btn-color); +text-align: center; +text-decoration: none; +vertical-align: middle; +cursor: pointer; +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +border: var(--btn-border-width) solid var(--btn-border-color); +border-radius: var(--btn-border-radius); +background-color: var(--btn-bg); +-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +-o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; } .btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 39, 39, 111; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(240, 98%, 17%); - --btn-disabled-border-color: hsl(240, 98%, 17%); +--btn-color: hsl(0, 0%, 100%); +--btn-bg: hsl(240, 98%, 17%); +--btn-border-color: hsl(240, 98%, 17%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: #010149; +--btn-hover-border-color: #010145; +--btn-focus-shadow-rgb: 39, 39, 111; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: #010145; +--btn-active-border-color: #010141; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(0, 0%, 100%); +--btn-disabled-bg: hsl(240, 98%, 17%); +--btn-disabled-border-color: hsl(240, 98%, 17%); } .btn-secondary { - --btn-color: var(--body-bg); - --btn-bg: var(--nav-bg-color); - --btn-border-color: hsl(210, 7%, 46%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #5d636b; - --btn-hover-border-color: #575e65; - --btn-focus-shadow-rgb: gray; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #575e65; - --btn-active-border-color: #52585f; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 7%, 46%); - --btn-disabled-border-color: hsl(210, 7%, 46%); +--btn-color: var(--body-bg); +--btn-bg: var(--nav-bg-color); +--btn-border-color: hsl(210, 7%, 46%); +--btn-hover-color: hsl(0, 0%, 100%); +--btn-hover-bg: #5d636b; +--btn-hover-border-color: #575e65; +--btn-focus-shadow-rgb: gray; +--btn-active-color: hsl(0, 0%, 100%); +--btn-active-bg: #575e65; +--btn-active-border-color: #52585f; +--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +--btn-disabled-color: hsl(0, 0%, 100%); +--btn-disabled-bg: hsl(210, 7%, 46%); +--btn-disabled-border-color: hsl(210, 7%, 46%); } .btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(120, 32%, 39%); - --btn-border-color: hsl(120, 32%, 39%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #3a6f3a; - --btn-hover-border-color: #366936; - --btn-focus-shadow-rgb: 96, 150, 96; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #366936; - --btn-active-border-color: #336233; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(120, 32%, 39%); - --btn-disabled-border-color: hsl(120, 32%, 39%); +--btn-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; +--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; } diff --git a/templates/colors_custom.css b/templates/colors_custom.css index 658ead6..d2af209 100644 --- a/templates/colors_custom.css +++ b/templates/colors_custom.css @@ -31,374 +31,394 @@ * --------------------------------------------- */ :root[data-bs-theme='dark']{ - /* System hint for native widgets */ - color-scheme: dark; +color-scheme: dark; - /* ===== PRIMARY BRAND COLORS ===== */ - /* Main brand color used throughout the template */ - --color-primary: #112855; - - /* Accent colors for interactive elements */ - --accent-color-primary: #3f8ff0; - --accent-color-secondary: #6fb3ff; +/* ===== BRAND & THEME COLORS ===== */ +--color-primary: #112855; +--accent-color-primary: #3f8ff0; +--accent-color-secondary: #6fb3ff; - /* ===== LINK COLORS ===== */ - /* Color for hyperlinks in dark mode */ - --color-link: white; - - /* Color when hovering over links */ - --color-hover: gray; - - /* Active link color */ - --color-active: var(--mainmenu-nav-link-color); +/* ===== NAVIGATION ===== */ +--mainmenu-nav-link-color: #fff; +--nav-text-color: gray; +--nav-bg-color: var(--color-primary); - /* ===== NAVIGATION ===== */ - /* Text color in main menu */ - --mainmenu-nav-link-color: #fff; - - /* Background color for navigation */ - --nav-text-color: gray; - --nav-bg-color: var(--color-primary); +/* ===== LINKS ===== */ +--color-link: white; +--color-hover: gray; +--color-active: var(--mainmenu-nav-link-color); +--link-color: #8ab4f8; +--link-color-rgb: 138, 180, 248; +--link-decoration: underline; +--link-hover-color: #c3d6ff; +--link-hover-color-rgb: 195, 214, 255; +--link-active-color: var(--link-color); - /* ===== HEADER BACKGROUND ===== */ - /* Background image for header section (same as light mode) */ - --header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); - --header-background-attachment: fixed; - --header-background-repeat: repeat; - --header-background-size: auto; +/* ===== OFFCANVAS ===== */ +--offcanvas-color: var(--body-color); +--offcanvas-padding-x: 1rem; +--offcanvas-padding-y: 1rem; - /* ===== CONTAINER BACKGROUNDS ===== */ - /* Below Topbar Container */ - --container-below-topbar-bg-image: ; - --container-below-topbar-bg-color: ; - --container-below-topbar-bg-position: center; - --container-below-topbar-bg-attachment: fixed; - --container-below-topbar-bg-repeat: no-repeat; - --container-below-topbar-bg-size: cover; - --container-below-topbar-border: ; - --container-below-topbar-border-radius: ; +/* ===== NAVBAR ===== */ +--navbar-padding-x: 1rem; +--navbar-padding-y: 0.5rem; +--navbar-color: var(--nav-text-color); +--navbar-active-color: var(--mainmenu-nav-link-color); +--navbar-disabled-color: #6c757d; +--navbar-brand-padding-y: 0.3125rem; +--navbar-brand-margin-end: 1rem; +--navbar-brand-font-size: 1.25rem; +--navbar-brand-color: var(--nav-text-color); +--navbar-brand-active-color: var(--mainmenu-nav-link-color); +--navbar-nav-link-padding-x: 0.5rem; +--navbar-toggler-padding-y: 0.25rem; +--navbar-toggler-padding-x: 0.75rem; +--navbar-toggler-font-size: 1.25rem; +--navbar-toggler-border-color: rgba(255, 255, 255, 0.1); +--navbar-toggler-border-radius: 0.25rem; +--navbar-toggler-focus-width: 0.25rem; +--navbar-toggler-transition: box-shadow 0.15s ease-in-out; +--nav-link-padding-x: 1rem; +--nav-link-padding-y: 0.5rem; +--nav-link-font-weight: 400; +--nav-link-color: var(--nav-text-color); +--nav-link-active-color: var(--mainmenu-nav-link-color); +--nav-link-disabled-color: #6c757d; - /* Top A Container */ - --container-top-a-bg-image: ; - --container-top-a-bg-color: ; - --container-top-a-bg-position: center; - --container-top-a-bg-attachment: fixed; - --container-top-a-bg-repeat: no-repeat; - --container-top-a-bg-size: cover; - --container-top-a-border: ; - --container-top-a-border-radius: ; +/* ===== TYPOGRAPHY & BODY ===== */ +--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; +--body-font-size: 1rem; +--body-font-weight: 400; +--body-line-height: 1.5; +--body-color: #e6ebf1; +--body-color-rgb: 230, 235, 241; +--body-bg: #0e1318; +--body-bg-rgb: 14, 19, 24; +--heading-color: #f1f5f9; +--emphasis-color: #fff; +--emphasis-color-rgb: 255, 255, 255; +--secondary-color: #e6ebf1bf; +--secondary-color-rgb: 230, 235, 241; +--tertiary-color: #e6ebf180; +--tertiary-color-rgb: 230, 235, 241; +--muted-color: #6d757e; +--code-color: #ff7abd; +--code-color-ink: var(--code-color, #e93f8e); +--highlight-color: #111; +--highlight-bg: #ffe28a1a; - /* Top B Container */ - --container-top-b-bg-image: ; - --container-top-b-bg-color: ; - --container-top-b-bg-position: center; - --container-top-b-bg-attachment: fixed; - --container-top-b-bg-repeat: no-repeat; - --container-top-b-bg-size: cover; - --container-top-b-border: ; - --container-top-b-border-radius: ; +/* ===== LAYOUT & SPACING ===== */ +--padding-x: 1rem; +--padding-y: 1rem; +--bg-opacity: 1; +--nav-toggle-size: 3rem; +--gradient: linear-gradient(180deg, #ffffff26, #fff0); +--secondary-bg: #151b22; +--secondary-bg-rgb: 21, 27, 34; +--tertiary-bg: #10151b; +--tertiary-bg-rgb: 16, 21, 27; +--hr-color: var(--border-color, #dfe3e7); +--border-color-soft: var(--border-color, #dfe3e7); +--kbd-bg: var(--secondary-bg, #eaedf0); +--kbd-ink: var(--body-bg, #fff); +--toc-bg: var(--secondary-bg, #eaedf0); +--toc-ink: var(--color-primary, #112855); +--selection-bg: var(--highlight-bg, #fbeea8); +--selection-ink: var(--body-color, #22262a); +--border: 5px; - /* Table of Contents Container */ - --container-toc-bg: ; - --container-toc-color: #dbe3ff; +/* ===== BREAKPOINTS ===== */ +--bp-xs: 0; +--bp-sm: 576px; +--bp-md: 768px; +--bp-lg: 992px; +--bp-xl: 1200px; - /* Sidebar Container */ - --container-sidebar-bg-image: ; - --container-sidebar-bg-color: ; - --container-sidebar-bg-position: center; - --container-sidebar-bg-attachment: scroll; - --container-sidebar-bg-repeat: repeat; - --container-sidebar-bg-size: auto; - --container-sidebar-border: ; - --container-sidebar-border-radius: ; +/* ===== BOOTSTRAP PALETTE ===== */ +--primary: #010156; +--secondary: #48525d; +--success: #4aa664; +--info: #4f7aa0; +--warning: #c77a00; +--danger: #c23a31; +--light: #1b2027; +--dark: #0f1318; +--primary-rgb: 1,1,86; +--secondary-rgb: 72,82,93; +--success-rgb: 74,166,100; +--info-rgb: 79,122,160; +--warning-rgb: 199,122,0; +--danger-rgb: 194,58,49; +--light-rgb: 27,32,39; +--dark-rgb: 15,19,24; +--primary-text-emphasis: #c7ccff; +--secondary-text-emphasis: #cfd6de; +--success-text-emphasis: #bde8c9; +--info-text-emphasis: #bcd6ee; +--warning-text-emphasis: #ffd9a6; +--danger-text-emphasis: #ffb7b2; +--light-text-emphasis: #d2d8df; +--dark-text-emphasis: #d2d8df; +--primary-bg-subtle: #0b1030; +--secondary-bg-subtle: #1e2430; +--success-bg-subtle: #0f2a1b; +--info-bg-subtle: #0d2232; +--warning-bg-subtle: #2a1e06; +--danger-bg-subtle: #2d1110; +--light-bg-subtle: #12161d; +--dark-bg-subtle: #1e2430; +--primary-border-subtle: #2b3a7a; +--secondary-border-subtle: #2b323b; +--success-border-subtle: #2b5b40; +--info-border-subtle: #254861; +--warning-border-subtle: #5a3c0e; +--danger-border-subtle: #5c2723; +--light-border-subtle: #222831; +--dark-border-subtle: #2b323b; - /* Bottom A Container */ - --container-bottom-a-bg-image: ; - --container-bottom-a-bg-color: ; - --container-bottom-a-bg-position: center; - --container-bottom-a-bg-attachment: fixed; - --container-bottom-a-bg-repeat: no-repeat; - --container-bottom-a-bg-size: cover; - --container-bottom-a-border: ; - --container-bottom-a-border-radius: ; +/* ===== STANDARD COLORS ===== */ +--blue: #91a4ff; +--indigo: #b19cff; +--purple: #c0a5ff; +--pink: #ff8fc0; +--red: #ff7a73; +--orange: #ff9c4d; +--yellow: #ffd166; +--green: #78d694; +--teal: #76e3ff; +--cyan: #6fb7ff; +--black: #000; +--white: #fff; - /* Bottom B Container */ - --container-bottom-b-bg-image: ; - --container-bottom-b-bg-color: ; - --container-bottom-b-bg-position: center; - --container-bottom-b-bg-attachment: fixed; - --container-bottom-b-bg-repeat: no-repeat; - --container-bottom-b-bg-size: cover; - --container-bottom-b-border: ; - --container-bottom-b-border-radius: ; +/* ===== GRAY SCALE ===== */ +--gray-100: #161a20; +--gray-200: #1b2027; +--gray-300: #222831; +--gray-400: #2b323b; +--gray-500: #36404a; +--gray-600: #48525d; +--gray-700: #5b6672; +--gray-800: #cfd6de; +--gray-900: #e6ebf1; +--white-rgb: 255, 255, 255; +--black-rgb: 0, 0, 0; - /* ===== BOOTSTRAP 5 COLOR PALETTE (Dark Mode) ===== */ - /* Lightened colors for dark mode visibility */ - --blue: #91a4ff; - --black: #000; - --indigo: #b19cff; - --purple: #c0a5ff; - --pink: #ff8fc0; - --red: #ff7a73; - --orange: #ff9c4d; - --yellow: #ffd166; - --green: #78d694; - --teal: #76e3ff; - --cyan: #6fb7ff; - --white: #fff; +/* ===== HEADER BACKGROUND ===== */ +--header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); +--header-background-attachment: fixed; +--header-background-repeat: repeat; +--header-background-size: auto; - /* Gray scale tuned for dark mode */ - --gray-100: #161a20; - --gray-200: #1b2027; - --gray-300: #222831; - --gray-400: #2b323b; - --gray-500: #36404a; - --gray-600: #48525d; - --gray-700: #5b6672; - --gray-800: #cfd6de; - --gray-900: #e6ebf1; +/* ===== CONTAINER BACKGROUNDS ===== */ +/* Below Topbar Container */ +--container-below-topbar-bg-image: ; +--container-below-topbar-bg-color: ; +--container-below-topbar-bg-position: center; +--container-below-topbar-bg-attachment: fixed; +--container-below-topbar-bg-repeat: no-repeat; +--container-below-topbar-bg-size: cover; +--container-below-topbar-border: ; +--container-below-topbar-border-radius: ; - /* Contextual colors (adjusted for dark backgrounds) */ - --primary: #010156; - --secondary: #48525d; - --success: #4aa664; - --info: #4f7aa0; - --warning: #c77a00; - --danger: #c23a31; - --light: #1b2027; - --dark: #0f1318; +/* Top A Container */ +--container-top-a-bg-image: ; +--container-top-a-bg-color: ; +--container-top-a-bg-position: center; +--container-top-a-bg-attachment: fixed; +--container-top-a-bg-repeat: no-repeat; +--container-top-a-bg-size: cover; +--container-top-a-border: ; +--container-top-a-border-radius: ; - /* ===== BODY & TYPOGRAPHY ===== */ - --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; - --body-font-size: 1rem; - --body-font-weight: 400; - --body-line-height: 1.5; +/* Top B Container */ +--container-top-b-bg-image: ; +--container-top-b-bg-color: ; +--container-top-b-bg-position: center; +--container-top-b-bg-attachment: fixed; +--container-top-b-bg-repeat: no-repeat; +--container-top-b-bg-size: cover; +--container-top-b-border: ; +--container-top-b-border-radius: ; - --body-color: #e6ebf1; - --body-color-rgb: 230, 235, 241; - --body-bg: #0e1318; - --body-bg-rgb: 14, 19, 24; +/* TOC Container */ +--container-toc-bg: ; +--container-toc-color: #dbe3ff; - /* ===== ADDITIONAL THEME COLORS ===== */ - --muted-color: #6d757e; - --hr-color: var(--border-color, #dfe3e7); - --link-active-color: var(--link-color); - --code-color: #ff7abd; - --code-color-ink: var(--code-color, #e93f8e); - --border-color-soft: var(--border-color, #dfe3e7); - --kbd-bg: var(--secondary-bg, #eaedf0); - --kbd-ink: var(--body-bg, #fff); - --toc-bg: var(--secondary-bg, #eaedf0); - --toc-ink: var(--color-primary, #112855); - --selection-bg: var(--highlight-bg, #fbeea8); - --selection-ink: var(--body-color, #22262a); - - --emphasis-color: #fff; - --emphasis-color-rgb: 255, 255, 255; +/* Sidebar Container */ +--container-sidebar-bg-image: ; +--container-sidebar-bg-color: ; +--container-sidebar-bg-position: center; +--container-sidebar-bg-attachment: scroll; +--container-sidebar-bg-repeat: repeat; +--container-sidebar-bg-size: auto; +--container-sidebar-border: ; +--container-sidebar-border-radius: ; - --secondary-color: #e6ebf1bf; - --secondary-color-rgb: 230, 235, 241; - --secondary-bg: #151b22; - --secondary-bg-rgb: 21, 27, 34; +/* Bottom A Container */ +--container-bottom-a-bg-image: ; +--container-bottom-a-bg-color: ; +--container-bottom-a-bg-position: center; +--container-bottom-a-bg-attachment: fixed; +--container-bottom-a-bg-repeat: no-repeat; +--container-bottom-a-bg-size: cover; +--container-bottom-a-border: ; +--container-bottom-a-border-radius: ; - --tertiary-color: #e6ebf180; - --tertiary-color-rgb: 230, 235, 241; - --tertiary-bg: #10151b; - --tertiary-bg-rgb: 16, 21, 27; +/* Bottom B Container */ +--container-bottom-b-bg-image: ; +--container-bottom-b-bg-color: ; +--container-bottom-b-bg-position: center; +--container-bottom-b-bg-attachment: fixed; +--container-bottom-b-bg-repeat: no-repeat; +--container-bottom-b-bg-size: cover; +--container-bottom-b-border: ; +--container-bottom-b-border-radius: ; - --heading-color: #f1f5f9; +/* ===== BORDERS ===== */ +--border-width: 1px; +--border-style: solid; +--border-color: #2b323b; +--border-color-translucent: #ffffff26; +--border-radius: .25rem; +--border-radius-sm: .2rem; +--border-radius-lg: .3rem; +--border-radius-xl: .3rem; +--border-radius-xxl: 2rem; +--border-radius-pill: 50rem; - --link-color: #8ab4f8; - --link-color-rgb: 138, 180, 248; - --link-decoration: underline; - --link-hover-color: #c3d6ff; - --link-hover-color-rgb: 195, 214, 255; +/* ===== SHADOWS ===== */ +--box-shadow: 0 .5rem 1rem #00000066; +--box-shadow-sm: 0 .125rem .25rem #00000040; +--box-shadow-lg: 0 1rem 3rem #00000080; +--box-shadow-inset: inset 0 1px 2px #00000040; - --highlight-color: #111; - --highlight-bg: #ffe28a1a; +/* ===== FOCUS & FORMS ===== */ +--focus-ring-width: .25rem; +--focus-ring-opacity: .6; +--focus-ring-color: #5472ff66; +--input-color: #e6ebf1; +--input-bg: #1a2332; +--input-border-color: #3a4250; +--input-focus-border-color: #5472ff; +--input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); +--input-placeholder-color: #8894aa; +--input-disabled-bg: #0f1318; +--input-disabled-border-color: #2b323b; +--form-valid-color: #78d694; +--form-valid-border-color: #78d694; +--form-invalid-color: #ff8e86; +--form-invalid-border-color: #ff8e86; - /* ===== BORDERS & SHADOWS ===== */ - --border: 5px; - --border-width: 1px; - --border-style: solid; - --border-color: #2b323b; - --border-color-translucent: #ffffff26; +/* ===== BUTTONS ===== */ +--btn-border-radius: var(--border-radius); +--btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - --border-radius: .25rem; - --border-radius-sm: .2rem; - --border-radius-lg: .3rem; - --border-radius-xl: .3rem; - --border-radius-xxl: 2rem; - --border-radius-pill: 50rem; +/* ===== CARDS ===== */ +--card-spacer-y: 1rem; +--card-spacer-x: 1rem; +--card-title-spacer-y: 0.5rem; +--card-border-width: 1px; +--card-border-color: var(--border-color); +--card-border-radius: var(--border-radius); +--card-box-shadow: none; +--card-inner-border-radius: calc(var(--border-radius) - 1px); +--card-cap-padding-y: 0.5rem; +--card-cap-padding-x: 1rem; +--card-cap-bg: rgba(255, 255, 255, 0.03); +--card-cap-color: var(--body-color); +--card-height: auto; +--card-color: var(--body-color); +--card-bg: var(--secondary-bg); +--card-img-overlay-padding: 1rem; +--card-group-margin: 0.75rem; - --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; +/* ===== VIRTUEMART (VM) ===== */ +/* VM Surfaces */ +--vm-surface: var(--secondary-bg); +--vm-surface-2: var(--tertiary-bg); +--vm-text: var(--body-color); +--vm-text-strong: #ffffff; +--vm-text-muted: var(--gray-700); +--vm-border: var(--border-color); +--vm-price-color: var(--success); - /* ===== FORM COLORS ===== */ - --focus-ring-width: .25rem; - --focus-ring-opacity: .6; - --focus-ring-color: #5472ff66; +/* VM Layout and Density */ +--vm-container-max-width: 1200px; +--vm-section-gap: 2rem; +--vm-block-radius: var(--border-radius); +--vm-block-shadow: var(--box-shadow-sm); - --form-valid-color: #78d694; - --form-valid-border-color: #78d694; - --form-invalid-color: #ff8e86; - --form-invalid-border-color: #ff8e86; +/* VM Typography */ +--vm-category-title-size: 2rem; +--vm-subcategory-title-size: 1.5rem; +--vm-page-title-size: 1.75rem; +--vm-products-type-title-size: 1.25rem; +--vm-product-title-size: 1.125rem; +--vm-product-title-weight: 500; +--vm-products-type-title-weight: 600; +--vm-price-size: 1.5rem; +--vm-price-detail-size: 1.125rem; +--vm-price-desc-size: 0.875rem; - /* Offcanvas (moved from template.css) */ - --offcanvas-color: var(--body-color); - --offcanvas-padding-x: 1rem; - --offcanvas-padding-y: 1rem; +/* VM Controls */ +--vm-input-radius: var(--border-radius); +--vm-input-shadow: var(--box-shadow-sm); +--vm-qty-width: 80px; +--vm-cart-dropdown-min-width: 300px; - /* Navbar */ - --navbar-padding-x: 1rem; - --navbar-padding-y: 0.5rem; - --navbar-color: var(--nav-text-color); - --navbar-active-color: var(--mainmenu-nav-link-color); - --navbar-disabled-color: #6c757d; - --navbar-brand-padding-y: 0.3125rem; - --navbar-brand-margin-end: 1rem; - --navbar-brand-font-size: 1.25rem; - --navbar-brand-color: var(--nav-text-color); - --navbar-brand-active-color: var(--mainmenu-nav-link-color); - --navbar-nav-link-padding-x: 0.5rem; - --navbar-toggler-padding-y: 0.25rem; - --navbar-toggler-padding-x: 0.75rem; - --navbar-toggler-font-size: 1.25rem; - --navbar-toggler-border-color: rgba(255, 255, 255, 0.1); - --navbar-toggler-border-radius: 0.25rem; - --navbar-toggler-focus-width: 0.25rem; - --navbar-toggler-transition: box-shadow 0.15s ease-in-out; - --nav-link-padding-x: 1rem; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: 400; - --nav-link-color: var(--nav-text-color); - --nav-link-active-color: var(--mainmenu-nav-link-color); - --nav-link-disabled-color: #6c757d; +/* VM Alerts */ +--vm-alert-radius: var(--border-radius); +--vm-alert-shadow: var(--box-shadow-sm); +--vm-availability-bg: var(--success-bg-subtle); +--vm-availability-text: var(--success); - /* Responsive tokens */ - --nav-toggle-size: 3rem; - --bp-xs: 0; - --bp-sm: 576px; - --bp-md: 768px; - --bp-lg: 992px; - --bp-xl: 1200px; +/* VM Buttons */ +--vm-btn-padding-x: 1rem; +--vm-btn-padding-y: 0.5rem; +--vm-btn-radius: var(--border-radius); +--vm-btn-shadow: var(--box-shadow-sm); +--vm-btn-primary-bg: var(--primary); +--vm-btn-primary-text: #ffffff; +--vm-btn-primary-border: var(--primary); +--vm-btn-secondary-bg: var(--secondary); +--vm-btn-secondary-text: #ffffff; +--vm-btn-secondary-border: var(--secondary); - /* Utility opacity defaults */ - --bg-opacity: 1; +/* VM Image Overlay Controls */ +--vm-image-overlay-gap-x: 0.5rem; +--vm-image-overlay-gap-y: 0.5rem; +--vm-image-overlay-raise: 0.25rem; +--vm-image-overlay-btn-size: 2.5rem; +--vm-image-overlay-btn-radius: 50%; +--vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); +--vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); +--vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); +--vm-image-overlay-btn-border-width: 1px; +--vm-image-overlay-btn-color: var(--body-color); +--vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - /* Layout padding */ - --padding-x: 1rem; - --padding-y: 1rem; +/* VM Vendor Menu */ +--vm-vendor-menu-bg: var(--secondary-bg); +--vm-vendor-menu-border: var(--border-color); +--vm-vendor-menu-radius: var(--border-radius); +--vm-vendor-menu-shadow: var(--box-shadow-sm); +--vm-vendor-menu-item-gap: 0.25rem; +--vm-vendor-menu-item-padding-x: 1rem; +--vm-vendor-menu-item-padding-y: 0.5rem; +--vm-vendor-menu-pill-radius: 50rem; +--vm-vendor-menu-link: var(--link-color); +--vm-vendor-menu-link-hover: var(--link-hover-color); +--vm-vendor-menu-link-active: var(--primary); +--vm-vendor-menu-hover-bg: var(--tertiary-bg); - /* Button utilities */ - --btn-border-radius: var(--border-radius); - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - - /* Card variables */ - --card-spacer-y: 1rem; - --card-spacer-x: 1rem; - --card-title-spacer-y: 0.5rem; - --card-border-width: 1px; - --card-border-color: var(--border-color); - --card-border-radius: var(--border-radius); - --card-box-shadow: none; - --card-inner-border-radius: calc(var(--border-radius) - 1px); - --card-cap-padding-y: 0.5rem; - --card-cap-padding-x: 1rem; - --card-cap-bg: rgba(255, 255, 255, 0.03); - --card-cap-color: var(--body-color); - --card-height: auto; - --card-color: var(--body-color); - --card-bg: var(--secondary-bg); - --card-img-overlay-padding: 1rem; - --card-group-margin: 0.75rem; - - /* VirtueMart surfaces */ - --vm-surface: var(--secondary-bg); - --vm-surface-2: var(--tertiary-bg); - --vm-text: var(--body-color); - --vm-text-strong: #ffffff; - --vm-text-muted: var(--gray-700); - --vm-border: var(--border-color); - --vm-price-color: var(--success); - - /* VM layout and density */ - --vm-container-max-width: 1200px; - --vm-section-gap: 2rem; - --vm-block-radius: var(--border-radius); - --vm-block-shadow: var(--box-shadow-sm); - - /* VM typography */ - --vm-category-title-size: 2rem; - --vm-subcategory-title-size: 1.5rem; - --vm-page-title-size: 1.75rem; - --vm-products-type-title-size: 1.25rem; - --vm-product-title-size: 1.125rem; - --vm-product-title-weight: 500; - --vm-products-type-title-weight: 600; - --vm-price-size: 1.5rem; - --vm-price-detail-size: 1.125rem; - --vm-price-desc-size: 0.875rem; - - /* VM controls */ - --vm-input-radius: var(--border-radius); - --vm-input-shadow: var(--box-shadow-sm); - --vm-qty-width: 80px; - --vm-cart-dropdown-min-width: 300px; - - /* VM alerts */ - --vm-alert-radius: var(--border-radius); - --vm-alert-shadow: var(--box-shadow-sm); - --vm-availability-bg: var(--success-bg-subtle); - --vm-availability-text: var(--success); - - /* VM buttons */ - --vm-btn-padding-x: 1rem; - --vm-btn-padding-y: 0.5rem; - --vm-btn-radius: var(--border-radius); - --vm-btn-shadow: var(--box-shadow-sm); - --vm-btn-primary-bg: var(--primary); - --vm-btn-primary-text: #ffffff; - --vm-btn-primary-border: var(--primary); - --vm-btn-secondary-bg: var(--secondary); - --vm-btn-secondary-text: #ffffff; - --vm-btn-secondary-border: var(--secondary); - - /* VM image overlay controls */ - --vm-image-overlay-gap-x: 0.5rem; - --vm-image-overlay-gap-y: 0.5rem; - --vm-image-overlay-raise: 0.25rem; - --vm-image-overlay-btn-size: 2.5rem; - --vm-image-overlay-btn-radius: 50%; - --vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); - --vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); - --vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); - --vm-image-overlay-btn-border-width: 1px; - --vm-image-overlay-btn-color: var(--body-color); - --vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - - /* VM vendor menu tokens */ - --vm-vendor-menu-bg: var(--secondary-bg); - --vm-vendor-menu-border: var(--border-color); - --vm-vendor-menu-radius: var(--border-radius); - --vm-vendor-menu-shadow: var(--box-shadow-sm); - --vm-vendor-menu-item-gap: 0.25rem; - --vm-vendor-menu-item-padding-x: 1rem; - --vm-vendor-menu-item-padding-y: 0.5rem; - --vm-vendor-menu-pill-radius: 50rem; - --vm-vendor-menu-link: var(--link-color); - --vm-vendor-menu-link-hover: var(--link-hover-color); - --vm-vendor-menu-link-active: var(--primary); - --vm-vendor-menu-hover-bg: var(--tertiary-bg); - - /* Gable colors */ - --gab-blue: #4d9fff; - --gab-green: #5cb85c; - --gab-red: #ff6b6b; - --gab-orange: #ff9f5a; - --gab-gray1: #868e96; - --gab-gray2: #adb5bd; - --gab-gray3: #ced4da; +/* ===== GABLE ===== */ +--gab-blue: #4d9fff; +--gab-green: #5cb85c; +--gab-red: #ff6b6b; +--gab-orange: #ff9f5a; +--gab-gray1: #868e96; +--gab-gray2: #adb5bd; +--gab-gray3: #ced4da; }