From e8f355f32ed930a19a00f75ede53347c624a4478 Mon Sep 17 00:00:00 2001 From: Jonathan Miller Date: Sat, 18 Apr 2026 15:13:06 -0500 Subject: [PATCH] Remove custom theme CSS from tracking, update gitignore with glob Custom palettes (*.custom.css) are site-specific overrides that should not be version controlled. Glob pattern covers all locations. Co-Authored-By: Claude Opus 4.6 (1M context) --- .gitignore | 7 +- src/media/css/theme/dark.custom.css | 1149 ------------------------- src/media/css/theme/light.custom.css | 1158 -------------------------- src/templates/dark.custom.css | 1151 ------------------------- src/templates/light.custom.css | 1154 ------------------------- templates/dark.custom.css | 327 -------- templates/light.custom.css | 327 -------- 7 files changed, 5 insertions(+), 5268 deletions(-) delete mode 100644 src/media/css/theme/dark.custom.css delete mode 100644 src/media/css/theme/light.custom.css delete mode 100644 src/templates/dark.custom.css delete mode 100644 src/templates/light.custom.css delete mode 100644 templates/dark.custom.css delete mode 100644 templates/light.custom.css diff --git a/.gitignore b/.gitignore index 2efa088..6580c5c 100644 --- a/.gitignore +++ b/.gitignore @@ -198,5 +198,8 @@ venv/ *.coverage hypothesis/ -src/media/css/theme/dark.custom.css -src/media/css/theme/light.custom.css +# Custom theme palettes (site-specific, not version controlled) +src/media/css/theme/*.custom.css +src/media/css/theme/*.custom.min.css +src/templates/*.custom.css +templates/*.custom.css diff --git a/src/media/css/theme/dark.custom.css b/src/media/css/theme/dark.custom.css deleted file mode 100644 index dca2902..0000000 --- a/src/media/css/theme/dark.custom.css +++ /dev/null @@ -1,1149 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2025 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - -/* ----------------------------------------------- - * DARK CUSTOM THEME — Deep Purple - * --------------------------------------------- */ - -:root[data-bs-theme='dark']{ -color-scheme: dark; - -/* ===== BRAND & THEME COLORS ===== */ ---color-primary: #4A0E4E; ---accent-color-primary: #9B59B6; ---accent-color-secondary: #6fb3ff; - -/* ===== NAVIGATION ===== */ ---mainmenu-nav-link-color: #fff; ---nav-text-color: gray; ---nav-bg-color: var(--color-primary); - -/* ===== LINKS ===== */ ---color-link: white; ---color-hover: gray; ---color-active: var(--mainmenu-nav-link-color); ---link-color: #8ab4f8; ---link-color-rgb: 138, 180, 248; ---link-decoration: underline; ---link-hover-color: #1ABC9C; ---link-hover-color-rgb: 195, 214, 255; ---link-active-color: var(--link-color); - -/* ===== NAVBAR ===== */ ---navbar-padding-x: 1rem; ---navbar-padding-y: 0.5rem; ---navbar-color: var(--nav-text-color); ---navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; ---navbar-brand-padding-y: 0.3125rem; ---navbar-brand-margin-end: 1rem; ---navbar-brand-font-size: 1.25rem; ---navbar-brand-color: var(--nav-text-color); ---navbar-brand-active-color: var(--mainmenu-nav-link-color); ---navbar-nav-link-padding-x: 0.5rem; ---navbar-toggler-padding-y: 0.25rem; ---navbar-toggler-padding-x: 0.75rem; ---navbar-toggler-font-size: 1.25rem; ---navbar-toggler-border-color: rgba(255, 255, 255, 0.1); ---navbar-toggler-border-radius: 0.25rem; ---navbar-toggler-focus-width: 0.25rem; ---navbar-toggler-transition: box-shadow 0.15s ease-in-out; ---nav-link-padding-x: 1rem; ---nav-link-padding-y: 0.5rem; ---nav-link-font-weight: 400; ---nav-link-color: var(--nav-text-color); ---nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; - -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; ---body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---body-font-size: 1rem; ---body-font-weight: 400; ---body-line-height: 1.5; ---body-color: #e6ebf1; ---body-color-rgb: 230, 235, 241; ---body-bg: #0e1318; ---body-bg-rgb: 14, 19, 24; ---heading-color: #f1f5f9; ---emphasis-color: #fff; ---emphasis-color-rgb: 255, 255, 255; ---secondary-color: #e6ebf1bf; ---secondary-color-rgb: 230, 235, 241; ---tertiary-color: #e6ebf180; ---tertiary-color-rgb: 230, 235, 241; ---muted-color: #6d757e; ---code-color: black; ---code-color-ink: var(--code-color, #e93f8e); ---code-bg-color: lightgreen; ---highlight-color: #111; ---highlight-bg: #ffe28a1a; - -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #151b22; ---secondary-bg-rgb: 21, 27, 34; ---tertiary-bg: #10151b; ---tertiary-bg-rgb: 16, 21, 27; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); ---border: 5px; - -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #48525d; ---success: #4aa664; ---info: #4f7aa0; ---warning: #c77a00; ---danger: #c23a31; ---light: #1b2027; ---dark: #0f1318; ---primary-rgb: 1,1,86; ---secondary-rgb: 72,82,93; ---success-rgb: 74,166,100; ---info-rgb: 79,122,160; ---warning-rgb: 199,122,0; ---danger-rgb: 194,58,49; ---light-rgb: 27,32,39; ---dark-rgb: 15,19,24; ---primary-text-emphasis: #c7ccff; ---secondary-text-emphasis: #cfd6de; ---success-text-emphasis: #bde8c9; ---info-text-emphasis: #bcd6ee; ---warning-text-emphasis: #ffd9a6; ---danger-text-emphasis: #ffb7b2; ---light-text-emphasis: #d2d8df; ---dark-text-emphasis: #d2d8df; ---primary-bg-subtle: #0b1030; ---secondary-bg-subtle: #1e2430; ---success-bg-subtle: #0f2a1b; ---info-bg-subtle: #0d2232; ---warning-bg-subtle: #2a1e06; ---danger-bg-subtle: #2d1110; ---light-bg-subtle: #12161d; ---dark-bg-subtle: #1e2430; ---primary-border-subtle: #2b3a7a; ---secondary-border-subtle: #2b323b; ---success-border-subtle: #2b5b40; ---info-border-subtle: #254861; ---warning-border-subtle: #5a3c0e; ---danger-border-subtle: #5c2723; ---light-border-subtle: #222831; ---dark-border-subtle: #2b323b; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #b3c1ff; ---alert-secondary-link-color: #9fa6ad; ---alert-success-link-color: #a0e5b3; ---alert-info-link-color: #8eccf2; ---alert-warning-link-color: #ffe4a0; ---alert-danger-link-color: #ffa8a3; ---alert-light-link-color: #f0f4f8; ---alert-dark-link-color: #9fa6ad; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #8ca3ff; ---list-group-item-primary-bg: #1a2550; ---list-group-item-primary-active-bg: #223066; ---list-group-item-secondary-color: #9fa6ad; ---list-group-item-secondary-bg: #2b323b; ---list-group-item-secondary-active-bg: #363d47; ---list-group-item-success-color: #a0e5b3; ---list-group-item-success-bg: #1e3d2d; ---list-group-item-success-active-bg: #275538; ---list-group-item-info-color: #8eccf2; ---list-group-item-info-bg: #1a3448; ---list-group-item-info-active-bg: #234459; ---list-group-item-warning-color: #ffe4a0; ---list-group-item-warning-bg: #4a3410; ---list-group-item-warning-active-bg: #5c4216; ---list-group-item-danger-color: #ffa8a3; ---list-group-item-danger-bg: #4a1e1c; ---list-group-item-danger-active-bg: #5c2823; ---list-group-item-light-color: #e9ecef; ---list-group-item-light-bg: #1e2430; ---list-group-item-light-active-bg: #282f3d; ---list-group-item-dark-color: #48525d; ---list-group-item-dark-bg: #0e1318; ---list-group-item-dark-active-bg: #161b22; - -/* ===== LINK UTILITY COLORS ===== */ ---link-primary-color: hsl(240, 98%, 50%); ---link-primary-hover-color: hsl(240, 98%, 45%); ---link-secondary-color: hsl(210, 15%, 70%); ---link-secondary-hover-color: hsl(210, 15%, 65%); ---link-success-color: hsl(120, 40%, 60%); ---link-success-hover-color: hsl(120, 40%, 55%); ---link-info-color: hsl(207, 60%, 65%); ---link-info-hover-color: hsl(207, 60%, 60%); ---link-warning-color: hsl(38, 100%, 65%); ---link-warning-hover-color: hsl(38, 100%, 60%); ---link-danger-color: hsl(3, 85%, 65%); ---link-danger-hover-color: hsl(3, 85%, 60%); ---link-light-color: hsl(210, 20%, 90%); ---link-light-hover-color: hsl(210, 20%, 85%); ---link-dark-color: hsl(210, 10%, 35%); ---link-dark-hover-color: hsl(210, 10%, 30%); - -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #5a6470; ---form-legend-color: #9fa6ad; ---border-gray: #3a4250; ---subhead-color: #9fa6ad; ---box-shadow-gray: #1a2027; ---btn-active-text-gray: #7a8490; ---indicator-success-bg: var(--success); ---item-list-color: #2a2f34; ---notification-badge-bg: var(--danger); ---content-bg-gray: #2b323b; ---taba-btn-green: #5a9c2f; ---taba-btn-blue: #3d75a8; ---taba-btn-red: #c43620; ---taba-btn-gray: #6a7080; ---taba-msg-bg: #1e2430; ---toc-link-color: #9fa6ad; ---toc-link-active-color: #91a4ff; ---choices-disabled-bg: #2b323b; ---choices-input-bg: var(--body-bg); ---choices-border-light: #48525d; ---choices-arrow-color: #9fa6ad; ---choices-inner-bg: #1a2027; ---choices-focused-border: #5472ff; ---choices-dropdown-bg: var(--body-bg); ---choices-item-bg: #1a5f75; ---choices-item-border: #1a748f; ---choices-item-hover-bg: #1a748f; ---choices-item-hover-border: #1a8aa8; ---choices-item-disabled-bg: #48525d; ---choices-item-disabled-border: #36404a; ---choices-item-highlighted: #2b323b; ---choices-input-inner-bg: #1a2027; - -/* ===== STANDARD COLORS ===== */ ---blue: #91a4ff; ---indigo: #b19cff; ---purple: #c0a5ff; ---pink: #ff8fc0; ---red: #ff7a73; ---orange: #ff9c4d; ---yellow: #ffd166; ---green: #78d694; ---teal: #76e3ff; ---cyan: #6fb7ff; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #161a20; ---gray-200: #1b2027; ---gray-300: #222831; ---gray-400: #2b323b; ---gray-500: #36404a; ---gray-600: #48525d; ---gray-700: #5b6672; ---gray-800: #cfd6de; ---gray-900: #e6ebf1; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-30)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-50)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-75)); ---border-color-translucent: rgba(var(--white-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-5)); - -/* ===== HEADER BACKGROUND ===== */ ---header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); ---header-background-attachment: fixed; ---header-background-repeat: repeat; ---header-background-size: auto; - -/* ===== CONTAINER BACKGROUNDS ===== */ -/* Below Topbar Container */ ---container-below-topbar-bg-image: none; ---container-below-topbar-bg-color: transparent; ---container-below-topbar-bg-position: center; ---container-below-topbar-bg-attachment: fixed; ---container-below-topbar-bg-repeat: no-repeat; ---container-below-topbar-bg-size: cover; ---container-below-topbar-border: none; ---container-below-topbar-border-radius: 0; - -/* Top A Container */ ---container-top-a-bg-image: none; ---container-top-a-bg-color: transparent; ---container-top-a-bg-position: center; ---container-top-a-bg-attachment: fixed; ---container-top-a-bg-repeat: no-repeat; ---container-top-a-bg-size: cover; ---container-top-a-border: none; ---container-top-a-border-radius: 0; - -/* Top B Container */ ---container-top-b-bg-image: none; ---container-top-b-bg-color: transparent; ---container-top-b-bg-position: center; ---container-top-b-bg-attachment: fixed; ---container-top-b-bg-repeat: no-repeat; ---container-top-b-bg-size: cover; ---container-top-b-border: none; ---container-top-b-border-radius: 0; - -/* TOC Container */ ---container-toc-bg: var(--secondary-bg); ---container-toc-color: #dbe3ff; - -/* Sidebar Container */ ---container-sidebar-bg-image: none; ---container-sidebar-bg-color: transparent; ---container-sidebar-bg-position: center; ---container-sidebar-bg-attachment: scroll; ---container-sidebar-bg-repeat: repeat; ---container-sidebar-bg-size: auto; ---container-sidebar-border: none; ---container-sidebar-border-radius: 0; - -/* Bottom A Container */ ---container-bottom-a-bg-image: none; ---container-bottom-a-bg-color: transparent; ---container-bottom-a-bg-position: center; ---container-bottom-a-bg-attachment: fixed; ---container-bottom-a-bg-repeat: no-repeat; ---container-bottom-a-bg-size: cover; ---container-bottom-a-border: none; ---container-bottom-a-border-radius: 5px; - -/* Bottom B Container */ ---container-bottom-b-bg-image: none; ---container-bottom-b-bg-color: transparent; ---container-bottom-b-bg-position: center; ---container-bottom-b-bg-attachment: fixed; ---container-bottom-b-bg-repeat: no-repeat; ---container-bottom-b-bg-size: cover; ---container-bottom-b-border: none; ---container-bottom-b-border-radius: 0; - -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #2b323b; ---border-color-translucent: #ffffff26; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl); ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000066; ---box-shadow-sm: 0 .125rem .25rem #00000040; ---box-shadow-lg: 0 1rem 3rem #00000080; ---box-shadow-inset: inset 0 1px 2px #00000040; - -/* ===== FOCUS & FORMS ===== */ ---focus-ring-width: .25rem; ---focus-ring-opacity: .6; ---focus-ring-color: #5472ff66; ---input-color: #e6ebf1; ---input-bg: #1a2332; ---input-border-color: #3a4250; ---input-focus-border-color: #5472ff; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---input-placeholder-color: #8894aa; ---input-disabled-bg: #0f1318; ---input-disabled-border-color: #2b323b; ---input-file-button-active-bg: #2b3441; ---form-range-thumb-active-bg: #4a5766; ---form-valid-color: #78d694; ---form-valid-border-color: #78d694; ---form-invalid-color: #ff8e86; ---form-invalid-border-color: #ff8e86; - -/* ===== BUTTONS ===== */ ---btn-border-radius: var(--border-radius); ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - -/* ===== CARDS ===== */ ---card-spacer-y: 1rem; ---card-spacer-x: 1rem; ---card-title-spacer-y: 0.5rem; ---card-border-width: 1px; ---card-border-color: var(--border-color); ---card-border-radius: var(--border-radius); ---card-box-shadow: none; ---card-inner-border-radius: calc(var(--border-radius) - 1px); ---card-cap-padding-y: 0.5rem; ---card-cap-padding-x: 1rem; ---card-cap-bg: rgba(255, 255, 255, 0.03); ---card-cap-color: var(--body-color); ---card-height: auto; ---card-color: var(--body-color); ---card-bg: var(--secondary-bg); ---card-img-overlay-padding: 1rem; ---card-group-margin: 0.75rem; - -/* ===== VIRTUEMART (VM) ===== */ -/* VM Surfaces */ ---vm-surface: var(--secondary-bg); ---vm-surface-2: var(--tertiary-bg); ---vm-text: var(--body-color); ---vm-text-strong: #ffffff; ---vm-text-muted: var(--gray-700); ---vm-border: var(--border-color); ---vm-price-color: var(--success); - -/* VM Layout and Density */ ---vm-container-max-width: 1200px; ---vm-section-gap: 2rem; ---vm-block-radius: var(--border-radius); ---vm-block-shadow: var(--box-shadow-sm); - -/* VM Typography */ ---vm-category-title-size: 2rem; ---vm-subcategory-title-size: 1.5rem; ---vm-page-title-size: 1.75rem; ---vm-products-type-title-size: 1.25rem; ---vm-product-title-size: 1.125rem; ---vm-product-title-weight: 500; ---vm-products-type-title-weight: 600; ---vm-price-size: 1.5rem; ---vm-price-detail-size: 1.125rem; ---vm-price-desc-size: 0.875rem; - -/* VM Controls */ ---vm-input-radius: var(--border-radius); ---vm-input-shadow: var(--box-shadow-sm); ---vm-qty-width: 80px; ---vm-cart-dropdown-min-width: 300px; - -/* VM Alerts */ ---vm-alert-radius: var(--border-radius); ---vm-alert-shadow: var(--box-shadow-sm); ---vm-availability-bg: var(--success-bg-subtle); ---vm-availability-text: var(--success); - -/* VM Buttons */ ---vm-btn-padding-x: 1rem; ---vm-btn-padding-y: 0.5rem; ---vm-btn-radius: var(--border-radius); ---vm-btn-shadow: var(--box-shadow-sm); ---vm-btn-primary-bg: var(--primary); ---vm-btn-primary-text: #ffffff; ---vm-btn-primary-border: var(--primary); ---vm-btn-secondary-bg: var(--secondary); ---vm-btn-secondary-text: #ffffff; ---vm-btn-secondary-border: var(--secondary); - -/* VM Image Overlay Controls */ ---vm-image-overlay-gap-x: 0.5rem; ---vm-image-overlay-gap-y: 0.5rem; ---vm-image-overlay-raise: 0.25rem; ---vm-image-overlay-btn-size: 2.5rem; ---vm-image-overlay-btn-radius: 50%; ---vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); ---vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); ---vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); ---vm-image-overlay-btn-border-width: 1px; ---vm-image-overlay-btn-color: var(--body-color); ---vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - -/* VM Vendor Menu */ ---vm-vendor-menu-bg: var(--secondary-bg); ---vm-vendor-menu-border: var(--border-color); ---vm-vendor-menu-radius: var(--border-radius); ---vm-vendor-menu-shadow: var(--box-shadow-sm); ---vm-vendor-menu-item-gap: 0.25rem; ---vm-vendor-menu-item-padding-x: 1rem; ---vm-vendor-menu-item-padding-y: 0.5rem; ---vm-vendor-menu-pill-radius: 50rem; ---vm-vendor-menu-link: var(--link-color); ---vm-vendor-menu-link-hover: var(--link-hover-color); ---vm-vendor-menu-link-active: var(--primary); ---vm-vendor-menu-hover-bg: var(--tertiary-bg); - -/* ===== GABLE ===== */ ---gab-blue: #4d9fff; ---gab-green: #5cb85c; ---gab-red: #ff6b6b; ---gab-orange: #ff9f5a; ---gab-gray1: #868e96; ---gab-gray2: #adb5bd; ---gab-gray3: #ced4da; - -/* ===== HERO / BANNER OVERLAY ===== */ ---hero-height: 70vh; ---hero-color: var(--body-color); ---hero-bg-repeat: no-repeat; ---hero-bg-attachment: fixed; ---hero-bg-position: top center; ---hero-bg-size: cover; ---hero-border-bottom: solid var(--accent-color-secondary); ---hero-overlay-bg: hsla(0, 0%, 0%, 0.3); ---hero-overlay-bg-position: center; ---hero-overlay-bg-size: cover; ---hero-overlay-padding: 1em; ---hero-overlay-text-align: center; ---hero-overlay-text-color: var(--body-color); - -/* ===== HERO VARIANTS ===== */ -/* Primary — deep navy, dark overlay */ ---hero-primary-bg-color: #0d1e3a; ---hero-primary-overlay: linear-gradient(rgba(13, 30, 58, .65), rgba(13, 30, 58, .65)); ---hero-primary-color: #f1f5f9; - -/* Secondary — darker navy, heavier overlay */ ---hero-secondary-bg-color: #080f1e; ---hero-secondary-overlay: linear-gradient(rgba(8, 15, 30, .80), rgba(8, 15, 30, .80)); ---hero-secondary-color: #f1f5f9; - -/* ===== HERO CARD (inner .hero element) ===== */ -/* Default card — uses primary variant values */ ---hero-card-bg: var(--hero-primary-bg-color); ---hero-card-color: white; ---hero-card-overlay: var(--hero-primary-overlay); ---hero-card-border-radius: .5rem; ---hero-card-padding-x: 2rem; ---hero-card-padding-y: 3rem; ---hero-card-max-width: 800px; - -/* Alternative card — uses secondary variant values */ ---hero-alt-card-bg: var(--hero-secondary-bg-color); ---hero-alt-card-color: var(--hero-secondary-color); ---hero-alt-card-overlay: var(--hero-secondary-overlay); ---hero-alt-card-border-radius: .5rem; ---hero-alt-card-padding-x: 2rem; ---hero-alt-card-padding-y: 3rem; ---hero-alt-card-max-width: 600px; - -/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ ---block-color-1: var(--secondary-bg); ---block-text-1: var(--body-color); - ---block-color-2: var(--accent-color-primary); ---block-text-2: #fff; - ---block-color-3: rgba(238, 194, 52, .15); ---block-text-3: var(--body-color); - ---block-color-4: rgba(74, 166, 100, .15); ---block-text-4: var(--body-color); - -/* ===== BLOCK COLOR OVERRIDES ===== */ ---block-highlight-bg: var(--accent-color-primary); ---block-highlight-text: #fff; - ---block-cta-bg: var(--color-primary); ---block-cta-text: #f1f5f9; - ---block-alert-bg: var(--danger, #c23a31); ---block-alert-text: #fff; - -/* ===== OFFCANVAS ===== */ ---offcanvas-zindex: 1045; ---offcanvas-width: 400px; ---offcanvas-height: 30vh; ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; ---offcanvas-color: var(--body-color); ---offcanvas-bg: var(--body-bg); ---offcanvas-border-width: 1px; ---offcanvas-border-color: var(--border-color-translucent); ---offcanvas-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); - -/* ===== ACCORDION ===== */ ---accordion-color: var(--body-color); ---accordion-bg: var(--body-bg); ---accordion-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, border-radius 0.15s ease; ---accordion-border-color: var(--border-color); ---accordion-border-width: 1px; ---accordion-border-radius: 0.25rem; ---accordion-inner-border-radius: calc(0.25rem - 1px); ---accordion-btn-padding-x: 1.25rem; ---accordion-btn-padding-y: 1rem; ---accordion-btn-color: var(--body-color); ---accordion-btn-bg: var(--accordion-bg); ---accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6ebf1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-icon-width: 1.25rem; ---accordion-btn-icon-transform: rotate(-180deg); ---accordion-btn-icon-transition: transform 0.2s ease-in-out; ---accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ab4f8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-focus-border-color: var(--input-focus-border-color); ---accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---accordion-body-padding-x: 1.25rem; ---accordion-body-padding-y: 1rem; ---accordion-active-color: var(--link-color); ---accordion-active-bg: var(--secondary-bg); - -/* ===== BREADCRUMB ===== */ ---breadcrumb-padding-x: 0; ---breadcrumb-padding-y: 0; ---breadcrumb-margin-bottom: 1rem; ---breadcrumb-bg: ; ---breadcrumb-border-radius: ; ---breadcrumb-divider-color: var(--gray-600); ---breadcrumb-item-padding-x: 0.5rem; ---breadcrumb-item-active-color: var(--link-color); - -/* ===== PAGINATION ===== */ ---pagination-padding-x: 0.75rem; ---pagination-padding-y: 0.375rem; ---pagination-font-size: 1rem; ---pagination-color: var(--link-color); ---pagination-bg: var(--secondary-bg); ---pagination-border-width: 1px; ---pagination-border-color: var(--border-color); ---pagination-border-radius: 0.25rem; ---pagination-focus-color: var(--link-active-color); ---pagination-focus-bg: var(--tertiary-bg); ---pagination-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---pagination-active-color: var(--body-color); ---pagination-active-bg: hsl(240, 98%, 17%); ---pagination-active-border-color: hsl(240, 98%, 17%); ---pagination-disabled-color: var(--gray-600); ---pagination-disabled-bg: var(--secondary-bg); ---pagination-disabled-border-color: var(--border-color); - -/* ===== BADGE ===== */ ---badge-padding-x: 0.65em; ---badge-padding-y: 0.35em; ---badge-font-size: 0.75em; ---badge-font-weight: 700; ---badge-color: var(--body-color); ---badge-border-radius: 0.25rem; - -/* ===== ALERT ===== */ ---alert-bg: transparent; ---alert-padding-x: 1rem; ---alert-padding-y: 1rem; ---alert-margin-bottom: 1rem; ---alert-color: #000; ---alert-border-color: transparent; ---alert-border: 1px solid var(--alert-border-color); ---alert-border-radius: 0.25rem; - -/* ===== PROGRESS ===== */ ---progress-height: 1rem; ---progress-font-size: 0.75rem; ---progress-bg: var(--secondary-bg); ---progress-border-radius: 0.25rem; ---progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.3); ---progress-bar-color: var(--body-color); ---progress-bar-bg: hsl(240, 98%, 40%); ---progress-bar-transition: width 0.6s ease; - -/* ===== LIST GROUP ===== */ ---list-group-color: var(--body-color); ---list-group-bg: var(--secondary-bg); ---list-group-border-color: rgba(var(--white-rgb), 0.125); ---list-group-border-width: 1px; ---list-group-border-radius: 0.25rem; ---list-group-item-padding-x: 1rem; ---list-group-item-padding-y: 0.5rem; ---list-group-action-color: var(--gray-800); ---list-group-action-active-color: var(--body-color); ---list-group-action-active-bg: var(--tertiary-bg); ---list-group-disabled-color: var(--gray-600); ---list-group-disabled-bg: var(--secondary-bg); ---list-group-active-color: var(--body-color); ---list-group-active-bg: hsl(240, 98%, 17%); ---list-group-active-border-color: hsl(240, 98%, 17%); - -/* ===== DROPDOWN ===== */ ---dropdown-zindex: 1000; ---dropdown-min-width: 10rem; ---dropdown-padding-x: 0; ---dropdown-padding-y: 0.5rem; ---dropdown-spacer: 0.125rem; ---dropdown-font-size: 1rem; ---dropdown-color: var(--body-color); ---dropdown-bg: var(--secondary-bg); ---dropdown-border-color: var(--border-color-translucent); ---dropdown-border-radius: 0.25rem; ---dropdown-border-width: 1px; ---dropdown-inner-border-radius: calc(0.25rem - 1px); ---dropdown-divider-bg: var(--border-color-translucent); ---dropdown-divider-margin-y: 0.5rem; ---dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); ---dropdown-link-color: var(--body-color); ---dropdown-link-active-color: var(--body-color); ---dropdown-link-active-bg: hsl(240, 98%, 17%); ---dropdown-link-disabled-color: var(--gray-600); ---dropdown-item-padding-x: 1rem; ---dropdown-item-padding-y: 0.25rem; ---dropdown-header-color: var(--gray-600); ---dropdown-header-padding-x: 1rem; ---dropdown-header-padding-y: 0.5rem; - -/* ===== TOAST ===== */ ---toast-zindex: 1090; ---toast-padding-x: 0.75rem; ---toast-padding-y: 0.5rem; ---toast-spacing: 1em; ---toast-max-width: 350px; ---toast-font-size: 0.875rem; ---toast-color: ; ---toast-bg: rgba(21, 27, 34, 0.9); ---toast-border-width: 1px; ---toast-border-color: var(--border-color-translucent); ---toast-border-radius: 0.25rem; ---toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); ---toast-header-color: var(--gray-600); ---toast-header-bg: rgba(21, 27, 34, 0.85); ---toast-header-border-color: rgba(var(--white-rgb), var(--opacity-10)); - -/* ===== MODAL ===== */ ---modal-zindex: 1050; ---modal-width: 500px; ---modal-padding: 1rem; ---modal-margin: 0.5rem; ---modal-color: ; ---modal-bg: var(--secondary-bg); ---modal-border-color: var(--border-color-translucent); ---modal-border-width: 1px; ---modal-border-radius: 0.3rem; ---modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); ---modal-inner-border-radius: calc(0.3rem - 1px); ---modal-header-padding-x: 1rem; ---modal-header-padding-y: 1rem; ---modal-header-padding: 1rem 1rem; ---modal-header-border-color: var(--border-color); ---modal-header-border-width: 1px; ---modal-title-line-height: 1.5; ---modal-footer-gap: 0.5rem; ---modal-footer-bg: ; ---modal-footer-border-color: var(--border-color); ---modal-footer-border-width: 1px; - -/* ===== TOOLTIP ===== */ ---tooltip-zindex: 1070; ---tooltip-max-width: 200px; ---tooltip-padding-x: 0.5rem; ---tooltip-padding-y: 0.25rem; ---tooltip-margin: ; ---tooltip-font-size: 0.875rem; ---tooltip-color: var(--body-color); ---tooltip-bg: hsl(0, 0%, 0%); ---tooltip-border-radius: 0.25rem; ---tooltip-opacity: 0.9; ---tooltip-arrow-width: 0.8rem; ---tooltip-arrow-height: 0.4rem; - -/* ===== POPOVER ===== */ ---popover-zindex: 1060; ---popover-max-width: 276px; ---popover-font-size: 0.875rem; ---popover-bg: var(--secondary-bg); ---popover-border-width: 1px; ---popover-border-color: var(--border-color-translucent); ---popover-border-radius: 0.3rem; ---popover-inner-border-radius: calc(0.3rem - 1px); ---popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); ---popover-header-padding-x: 1rem; ---popover-header-padding-y: 0.5rem; ---popover-header-font-size: 1rem; ---popover-header-color: ; ---popover-header-bg: var(--tertiary-bg); ---popover-body-padding-x: 1rem; ---popover-body-padding-y: 1rem; ---popover-body-color: var(--body-color); ---popover-arrow-width: 1rem; ---popover-arrow-height: 0.5rem; ---popover-arrow-border: var(--popover-border-color); - -/* ===== SPINNER ===== */ ---spinner-width: 2rem; ---spinner-height: 2rem; ---spinner-vertical-align: -0.125em; ---spinner-border-width: 0.25em; ---spinner-animation-speed: 0.75s; - -/* ===== NAV TABS ===== */ ---nav-tabs-border-width: 1px; ---nav-tabs-border-color: var(--border-color); ---nav-tabs-border-radius: 0.25rem; ---nav-tabs-link-active-color: var(--body-color); ---nav-tabs-link-active-bg: var(--secondary-bg); ---nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--secondary-bg); - -/* ===== NAV PILLS ===== */ ---nav-pills-border-radius: 0.25rem; ---nav-pills-link-active-color: var(--body-color); ---nav-pills-link-active-bg: hsl(240, 98%, 17%); - -/* ===== TABLE ===== */ ---table-color: var(--body-color); ---table-bg: transparent; ---table-border-color: var(--border-color); ---table-accent-bg: transparent; ---table-striped-color: var(--body-color); ---table-striped-bg: rgba(var(--white-rgb), var(--opacity-5)); ---table-active-color: var(--body-color); ---table-active-bg: rgba(var(--white-rgb), 0.1); - -/* ===== FOOTER ===== */ ---footer-padding-top: 1rem; ---footer-padding-bottom: 80px; ---footer-grid-padding-y: 2.5rem; ---footer-grid-padding-x: 0.5em; - -/* ===== BACKDROP ===== */ ---backdrop-zindex: 1040; ---backdrop-bg: hsl(0, 0%, 0%); ---backdrop-opacity: 0.5; -} - -.btn { - --btn-padding-x: 1rem; - --btn-padding-y: 0.6rem; - --btn-font-family: inherit; - --btn-font-size: 1rem; - --btn-font-weight: 400; - --btn-line-height: 1.5; - --btn-color: var(--white); - --btn-bg: var(--body-bg); - --btn-border-width: 1px; - --btn-border-color: transparent; - --btn-border-radius: 0.25rem; - --btn-active-border-color: transparent; - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --btn-disabled-opacity: 0.65; - --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--btn-padding-y) var(--btn-padding-x); - font-family: var(--btn-font-family); - font-size: var(--btn-font-size); - font-weight: var(--btn-font-weight); - line-height: var(--btn-line-height); - color: var(--btn-color); - text-align: center; - text-decoration: none; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: var(--btn-border-width) solid var(--btn-border-color); - border-radius: var(--btn-border-radius); - background-color: var(--btn-bg); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -} - -/* Buttons — inherit brand hues; ensure strong contrast on dark bg */ -.btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; -} - -.btn-secondary { - --btn-color: var(--nav-text-color); - --btn-bg: var(--nav-bg-color); - --btn-border-color: #3a4250; - --btn-hover-color: #fff; - --btn-hover-bg: #1b2a55; - --btn-hover-border-color: #162448; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: #fff; - --btn-active-bg: #162448; - --btn-active-border-color: #12203f; -} - -.btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(120, 35%, 45%); - --btn-border-color: hsl(120, 35%, 45%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(120, 35%, 40%); - --btn-hover-border-color: hsl(120, 35%, 38%); - --btn-focus-shadow-rgb: 96, 180, 96; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(120, 35%, 38%); - --btn-active-border-color: hsl(120, 35%, 36%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(120, 35%, 45%); - --btn-disabled-border-color: hsl(120, 35%, 45%); -} - -.btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(207, 55%, 55%); - --btn-border-color: hsl(207, 55%, 55%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(207, 55%, 50%); - --btn-hover-border-color: hsl(207, 55%, 48%); - --btn-focus-shadow-rgb: 100, 160, 210); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(207, 55%, 48%); - --btn-active-border-color: hsl(207, 55%, 46%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(207, 55%, 55%); - --btn-disabled-border-color: hsl(207, 55%, 55%); -} - -.btn-warning { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(38, 100%, 50%); - --btn-border-color: hsl(38, 100%, 50%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(38, 100%, 45%); - --btn-hover-border-color: hsl(38, 100%, 43%); - --btn-focus-shadow-rgb: 220, 170, 40; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(38, 100%, 43%); - --btn-active-border-color: hsl(38, 100%, 41%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(38, 100%, 50%); - --btn-disabled-border-color: hsl(38, 100%, 50%); -} - -.btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(3, 82%, 50%); - --btn-border-color: hsl(3, 82%, 50%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(3, 82%, 45%); - --btn-hover-border-color: hsl(3, 82%, 43%); - --btn-focus-shadow-rgb: 220, 80, 80; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(3, 82%, 43%); - --btn-active-border-color: hsl(3, 82%, 41%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(3, 82%, 50%); - --btn-disabled-border-color: hsl(3, 82%, 50%); -} - -.btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(210, 17%, 85%); - --btn-border-color: hsl(210, 17%, 85%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 17%, 80%); - --btn-hover-border-color: hsl(210, 17%, 78%); - --btn-focus-shadow-rgb: 200, 205, 210; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 17%, 78%); - --btn-active-border-color: hsl(210, 17%, 76%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(210, 17%, 85%); - --btn-disabled-border-color: hsl(210, 17%, 85%); -} - -.btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(210, 10%, 20%); - --btn-border-color: hsl(210, 10%, 20%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 18%); - --btn-hover-border-color: hsl(210, 10%, 16%); - --btn-focus-shadow-rgb: 60, 65, 70; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 16%); - --btn-active-border-color: hsl(210, 10%, 14%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 10%, 20%); - --btn-disabled-border-color: hsl(210, 10%, 20%); -} - -.btn-outline-primary { - --btn-color: hsl(240, 98%, 40%); - --btn-border-color: hsl(240, 98%, 40%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(240, 98%, 40%); - --btn-hover-border-color: hsl(240, 98%, 40%); - --btn-focus-shadow-rgb: 80, 80, 180; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(240, 98%, 40%); - --btn-active-border-color: hsl(240, 98%, 40%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(240, 98%, 40%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(240, 98%, 40%); - --gradient: none; -} - -.btn-outline-secondary { - --btn-color: hsl(210, 20%, 60%); - --btn-border-color: hsl(210, 20%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 20%, 60%); - --btn-hover-border-color: hsl(210, 20%, 60%); - --btn-focus-shadow-rgb: 120, 140, 160; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 20%, 60%); - --btn-active-border-color: hsl(210, 20%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 20%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 20%, 60%); - --gradient: none; -} - -.btn-outline-success { - --btn-color: hsl(120, 35%, 55%); - --btn-border-color: hsl(120, 35%, 55%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(120, 35%, 55%); - --btn-hover-border-color: hsl(120, 35%, 55%); - --btn-focus-shadow-rgb: 100, 190, 100; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(120, 35%, 55%); - --btn-active-border-color: hsl(120, 35%, 55%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(120, 35%, 55%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(120, 35%, 55%); - --gradient: none; -} - -.btn-outline-info { - --btn-color: hsl(207, 55%, 65%); - --btn-border-color: hsl(207, 55%, 65%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(207, 55%, 65%); - --btn-hover-border-color: hsl(207, 55%, 65%); - --btn-focus-shadow-rgb: 110, 170, 220; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(207, 55%, 65%); - --btn-active-border-color: hsl(207, 55%, 65%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(207, 55%, 65%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(207, 55%, 65%); - --gradient: none; -} - -.btn-outline-warning { - --btn-color: hsl(38, 100%, 60%); - --btn-border-color: hsl(38, 100%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(38, 100%, 60%); - --btn-hover-border-color: hsl(38, 100%, 60%); - --btn-focus-shadow-rgb: 240, 190, 70; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(38, 100%, 60%); - --btn-active-border-color: hsl(38, 100%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(38, 100%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(38, 100%, 60%); - --gradient: none; -} - -.btn-outline-danger { - --btn-color: hsl(3, 82%, 60%); - --btn-border-color: hsl(3, 82%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(3, 82%, 60%); - --btn-hover-border-color: hsl(3, 82%, 60%); - --btn-focus-shadow-rgb: 240, 100, 100; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(3, 82%, 60%); - --btn-active-border-color: hsl(3, 82%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(3, 82%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(3, 82%, 60%); - --gradient: none; -} - -/* Outline buttons on dark: keep readable borders */ -.btn-outline-light { - --btn-color: #e6ebf1; - --btn-border-color: #e6ebf1; - --btn-hover-color: #111; - --btn-hover-bg: #e6ebf1; - --btn-hover-border-color: #e6ebf1; - --btn-active-color: #111; - --btn-active-bg: #d7dce2; - --btn-active-border-color: #d7dce2; - --gradient: none; -} - -.btn-outline-dark { - --btn-color: hsl(210, 10%, 30%); - --btn-border-color: hsl(210, 10%, 30%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 30%); - --btn-hover-border-color: hsl(210, 10%, 30%); - --btn-focus-shadow-rgb: 70, 75, 80; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 30%); - --btn-active-border-color: hsl(210, 10%, 30%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 10%, 30%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 10%, 30%); - --gradient: none; -} - -/* Links as buttons */ -.btn-link { - --btn-font-weight: 400; - --btn-color: var(--color-link); - --btn-bg: transparent; - --btn-border-color: transparent; - --btn-hover-color: var(--link-hover-color); - --btn-hover-border-color: transparent; - --btn-active-color: var(--link-hover-color); - --btn-active-border-color: transparent; - --btn-disabled-color: #6d7781; - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 84, 114, 255; - text-decoration: underline; -} diff --git a/src/media/css/theme/light.custom.css b/src/media/css/theme/light.custom.css deleted file mode 100644 index c5f7dd3..0000000 --- a/src/media/css/theme/light.custom.css +++ /dev/null @@ -1,1158 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2025 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - -/* ----------------------------------------------- - * LIGHT CUSTOM THEME — Warm Earth - * --------------------------------------------- */ - -:root[data-bs-theme="light"] { -color-scheme: light; - -/* ===== BRAND & THEME COLORS ===== */ ---color-primary: #8B4513; ---accent-color-primary: #D2691E; ---accent-color-secondary: #CD853F; - -/* ===== NAVIGATION ===== */ ---mainmenu-nav-link-color: white; ---nav-text-color: white; ---nav-bg-color: #5C3317; - -/* ===== LINKS ===== */ ---color-link: #8B4513; ---color-hover: var(--accent-color-primary); ---link-color: #8B4513; ---link-color-rgb: 139, 69, 19; ---link-decoration: underline; ---link-hover-color: #D2691E; ---link-hover-color-rgb: 210, 105, 30; ---link-active-color: var(--link-color); - -/* ===== NAVBAR ===== */ ---navbar-padding-x: 1rem; ---navbar-padding-y: 0.5rem; ---navbar-color: var(--nav-text-color); ---navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; ---navbar-brand-padding-y: 0.3125rem; ---navbar-brand-margin-end: 1rem; ---navbar-brand-font-size: 1.25rem; ---navbar-brand-color: var(--nav-text-color); ---navbar-brand-active-color: var(--mainmenu-nav-link-color); ---navbar-nav-link-padding-x: 0.5rem; ---navbar-toggler-padding-y: 0.25rem; ---navbar-toggler-padding-x: 0.75rem; ---navbar-toggler-font-size: 1.25rem; ---navbar-toggler-border-color: rgba(0, 0, 0, 0.1); ---navbar-toggler-border-radius: 0.25rem; ---navbar-toggler-focus-width: 0.25rem; ---navbar-toggler-transition: box-shadow 0.15s ease-in-out; ---nav-link-padding-x: 1rem; ---nav-link-padding-y: 0.5rem; ---nav-link-font-weight: 400; ---nav-link-color: var(--nav-text-color); ---nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; - -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; ---font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; ---body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); ---body-font-size: 1rem; ---body-font-weight: 400; ---body-line-height: 1.5; ---body-color: #22262a; ---body-color-rgb: 34, 38, 42; ---body-bg: #fff; ---body-bg-rgb: 255, 255, 255; ---heading-color: inherit; ---emphasis-color: #000; ---emphasis-color-rgb: 0, 0, 0; ---secondary-color: #22262abf; ---secondary-color-rgb: 34, 38, 42; ---tertiary-color: #22262a80; ---tertiary-color-rgb: 34, 38, 42; ---muted-color: #6d757e; ---code-color: black; ---code-color-ink: var(--code-color, #e93f8e); ---code-bg-color: lightgreen; ---highlight-color: #22262a; ---highlight-bg: #fbeea8; - -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #eaedf0; ---secondary-bg-rgb: 234, 237, 240; ---tertiary-bg: #f9fafb; ---tertiary-bg-rgb: 249, 250, 251; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); ---border: 5px; - -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #6d757e; ---success: #448344; ---info: #30638d; ---warning: #ad6200; ---danger: #a51f18; ---light: #f9fafb; ---dark: #353b41; ---primary-rgb: 1, 1, 86; ---secondary-rgb: 109, 117, 126; ---success-rgb: 68, 131, 68; ---info-rgb: 48, 99, 141; ---warning-rgb: 173, 98, 0; ---danger-rgb: 165, 31, 24; ---light-rgb: 249, 250, 251; ---dark-rgb: 53, 59, 65; ---primary-text-emphasis: #002; ---secondary-text-emphasis: #2c2f32; ---success-text-emphasis: #1b351b; ---info-text-emphasis: #132838; ---warning-text-emphasis: #452700; ---danger-text-emphasis: #420c09; ---light-text-emphasis: #484f56; ---dark-text-emphasis: #484f56; ---primary-bg-subtle: #ccd; ---secondary-bg-subtle: #e2e3e5; ---success-bg-subtle: #dae6da; ---info-bg-subtle: #d6e0e8; ---warning-bg-subtle: #efe0cc; ---danger-bg-subtle: #edd2d1; ---light-bg-subtle: #fcfcfd; ---dark-bg-subtle: #ced4da; ---primary-border-subtle: #99b; ---secondary-border-subtle: #c5c8cb; ---success-border-subtle: #b4ceb4; ---info-border-subtle: #acc1d1; ---warning-border-subtle: #dec099; ---danger-border-subtle: #dba5a2; ---light-border-subtle: #eaedf0; ---dark-border-subtle: #adb5bd; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #01012a; ---alert-secondary-link-color: #34383d; ---alert-success-link-color: #213f21; ---alert-info-link-color: #172f44; ---alert-warning-link-color: #532f00; ---alert-danger-link-color: #4f0f0b; ---alert-light-link-color: #505050; ---alert-dark-link-color: #1a1c1f; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #010134; ---list-group-item-primary-bg: #ccccdd; ---list-group-item-primary-active-bg: #b8b8c7; ---list-group-item-secondary-color: #41464c; ---list-group-item-secondary-bg: #e2e3e5; ---list-group-item-secondary-active-bg: #cbccce; ---list-group-item-success-color: #294f29; ---list-group-item-success-bg: #dae6da; ---list-group-item-success-active-bg: #c4cfc4; ---list-group-item-info-color: #1d3b55; ---list-group-item-info-bg: #d6e0e8; ---list-group-item-info-active-bg: #c1cad1; ---list-group-item-warning-color: #683b00; ---list-group-item-warning-bg: #efe0cc; ---list-group-item-warning-active-bg: #d7cab8; ---list-group-item-danger-color: #63130e; ---list-group-item-danger-bg: #edd2d1; ---list-group-item-danger-active-bg: #d5bdbc; ---list-group-item-light-color: #646464; ---list-group-item-light-bg: #fefefe; ---list-group-item-light-active-bg: #e5e5e5; ---list-group-item-dark-color: #202327; ---list-group-item-dark-bg: #d7d8d9; ---list-group-item-dark-active-bg: #c2c2c3; - -/* ===== LINK UTILITY COLORS ===== */ ---link-primary-color: hsl(240, 98%, 17%); ---link-primary-hover-color: #010145; ---link-secondary-color: hsl(210, 7%, 46%); ---link-secondary-hover-color: #575e65; ---link-success-color: hsl(120, 32%, 39%); ---link-success-hover-color: #366936; ---link-info-color: hsl(207, 49%, 37%); ---link-info-hover-color: #264f71; ---link-warning-color: hsl(34, 100%, 34%); ---link-warning-hover-color: #8a4e00; ---link-danger-color: hsl(3, 75%, 37%); ---link-danger-hover-color: #841913; ---link-light-color: hsl(210, 17%, 98%); ---link-light-hover-color: #fafbfc; ---link-dark-color: hsl(210, 10%, 23%); ---link-dark-hover-color: #2a2f34; - -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #e6e6e6; ---form-legend-color: #495057; ---border-gray: #b2bfcd; ---subhead-color: #495057; ---box-shadow-gray: #ddd; ---btn-active-text-gray: #A0A0A0; ---indicator-success-bg: var(--success); ---item-list-color: #F5F5F5; ---notification-badge-bg: var(--danger); ---content-bg-gray: #DDD; ---taba-btn-green: #7ac143; ---taba-btn-blue: #5091cd; ---taba-btn-red: #f44321; ---taba-btn-gray: #AAA; ---taba-msg-bg: #f5f5f5; ---toc-link-color: #767676; ---toc-link-active-color: #563d7c; ---choices-disabled-bg: #eaeaea; ---choices-input-bg: var(--white); ---choices-border-light: #ddd; ---choices-arrow-color: #333; ---choices-inner-bg: #f9f9f9; ---choices-focused-border: #b7b7b7; ---choices-dropdown-bg: var(--white); ---choices-item-bg: #00bcd4; ---choices-item-border: #00a5bb; ---choices-item-hover-bg: #00a5bb; ---choices-item-hover-border: #008fa1; ---choices-item-disabled-bg: #aaaaaa; ---choices-item-disabled-border: #919191; ---choices-item-highlighted: #f2f2f2; ---choices-input-inner-bg: #f9f9f9; - -/* ===== STANDARD COLORS ===== */ ---blue: #010156; ---indigo: #6812f3; ---purple: #6f42c2; ---pink: #e93f8e; ---red: #a51f18; ---orange: #fd7e17; ---yellow: #ad6200; ---green: #448344; ---teal: #5abfdd; ---cyan: #30638d; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #f9fafb; ---gray-200: #eaedf0; ---gray-300: #dfe3e7; ---gray-400: #ced4da; ---gray-500: #adb5bd; ---gray-600: #6d757e; ---gray-700: #484f56; ---gray-800: #353b41; ---gray-900: #22262a; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-15)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-25)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-30)); ---border-color-translucent: rgba(var(--black-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-15)); - -/* ===== HEADER BACKGROUND ===== */ ---header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); ---header-background-attachment: fixed; ---header-background-repeat: repeat; ---header-background-size: auto; - -/* ===== CONTAINER BACKGROUNDS ===== */ -/* Below Topbar Container */ ---container-below-topbar-bg-image: none; ---container-below-topbar-bg-color: transparent; ---container-below-topbar-bg-position: auto; ---container-below-topbar-bg-attachment: fixed; ---container-below-topbar-bg-repeat: repeat; ---container-below-topbar-bg-size: auto; ---container-below-topbar-border: none; ---container-below-topbar-border-radius: 0; - -/* Top A Container */ ---container-top-a-bg-image: none; ---container-top-a-bg-color: transparent; ---container-top-a-bg-position: auto; ---container-top-a-bg-attachment: fixed; ---container-top-a-bg-repeat: repeat; ---container-top-a-bg-size: auto; ---container-top-a-border: none; ---container-top-a-border-radius: 0; - -/* Top B Container */ ---container-top-b-bg-image: none; ---container-top-b-bg-color: transparent; ---container-top-b-bg-position: auto; ---container-top-b-bg-attachment: fixed; ---container-top-b-bg-repeat: repeat; ---container-top-b-bg-size: auto; ---container-top-b-border: none; ---container-top-b-border-radius: 0; - -/* TOC Container */ ---container-toc-bg: var(--mainmenu-nav-link-color); ---container-toc-color: var(--color-primary); - -/* Sidebar Container */ ---container-sidebar-bg-image: none; ---container-sidebar-bg-color: transparent; ---container-sidebar-bg-position: auto; ---container-sidebar-bg-attachment: scroll; ---container-sidebar-bg-repeat: repeat; ---container-sidebar-bg-size: auto; ---container-sidebar-border: none; ---container-sidebar-border-radius: 0; - -/* Bottom A Container */ ---container-bottom-a-bg-image: none; ---container-bottom-a-bg-color: transparent; ---container-bottom-a-bg-position: auto; ---container-bottom-a-bg-attachment: fixed; ---container-bottom-a-bg-repeat: repeat; ---container-bottom-a-bg-size: auto; ---container-bottom-a-border: none; ---container-bottom-a-border-radius: 0; - -/* Bottom B Container */ ---container-bottom-b-bg-image: none; ---container-bottom-b-bg-color: transparent; ---container-bottom-b-bg-position: auto; ---container-bottom-b-bg-attachment: fixed; ---container-bottom-b-bg-repeat: repeat; ---container-bottom-b-bg-size: auto; ---container-bottom-b-border: none; ---container-bottom-b-border-radius: 0; - -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #dfe3e7; ---border-color-translucent: #0000002d; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl)*2; ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000026; ---box-shadow-sm: 0 .125rem .25rem #00000013; ---box-shadow-lg: 0 1rem 3rem #0000002d; ---box-shadow-inset: inset 0 1px 2px #00000013; - -/* ===== FOCUS & FORMS ===== */ ---focus-ring-width: .25rem; ---focus-ring-opacity: .25; ---focus-ring-color: #01015640; ---input-color: hsl(210, 11%, 15%); ---input-bg: hsl(210, 20%, 98%); ---input-border-color: hsl(210, 14%, 83%); ---input-focus-border-color: #8894aa; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---input-placeholder-color: hsl(210, 7%, 46%); ---input-disabled-bg: hsl(210, 16%, 93%); ---input-disabled-border-color: hsl(210, 14%, 83%); ---input-file-button-active-bg: #dee1e4; ---form-range-thumb-active-bg: #b8bfcc; ---form-valid-color: #448344; ---form-valid-border-color: #448344; ---form-invalid-color: #a51f18; ---form-invalid-border-color: #a51f18; - -/* ===== BUTTONS ===== */ ---btn-border-radius: var(--border-radius); ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - -/* ===== CARDS ===== */ ---card-spacer-y: 1rem; ---card-spacer-x: 1rem; ---card-title-spacer-y: 0.5rem; ---card-border-width: 1px; ---card-border-color: var(--border-color); ---card-border-radius: var(--border-radius); ---card-box-shadow: none; ---card-inner-border-radius: calc(var(--border-radius) - 1px); ---card-cap-padding-y: 0.5rem; ---card-cap-padding-x: 1rem; ---card-cap-bg: rgba(0, 0, 0, 0.03); ---card-cap-color: var(--body-color); ---card-height: auto; ---card-color: var(--body-color); ---card-bg: var(--body-bg); ---card-img-overlay-padding: 1rem; ---card-group-margin: 0.75rem; - -/* ===== VIRTUEMART (VM) ===== */ -/* VM Surfaces */ ---vm-surface: #ffffff; ---vm-surface-2: #f8f9fa; ---vm-text: var(--body-color); ---vm-text-strong: #000000; ---vm-text-muted: #6c757d; ---vm-border: var(--border-color); ---vm-price-color: var(--success); - -/* VM Layout and Density */ ---vm-container-max-width: 1200px; ---vm-section-gap: 2rem; ---vm-block-radius: var(--border-radius); ---vm-block-shadow: var(--box-shadow-sm); - -/* VM Typography */ ---vm-category-title-size: 2rem; ---vm-subcategory-title-size: 1.5rem; ---vm-page-title-size: 1.75rem; ---vm-products-type-title-size: 1.25rem; ---vm-product-title-size: 1.125rem; ---vm-product-title-weight: 500; ---vm-products-type-title-weight: 600; ---vm-price-size: 1.5rem; ---vm-price-detail-size: 1.125rem; ---vm-price-desc-size: 0.875rem; - -/* VM Controls */ ---vm-input-radius: var(--border-radius); ---vm-input-shadow: var(--box-shadow-sm); ---vm-qty-width: 80px; ---vm-cart-dropdown-min-width: 300px; - -/* VM Alerts */ ---vm-alert-radius: var(--border-radius); ---vm-alert-shadow: var(--box-shadow-sm); ---vm-availability-bg: var(--success-bg-subtle); ---vm-availability-text: var(--success); - -/* VM Buttons */ ---vm-btn-padding-x: 1rem; ---vm-btn-padding-y: 0.5rem; ---vm-btn-radius: var(--border-radius); ---vm-btn-shadow: var(--box-shadow-sm); ---vm-btn-primary-bg: var(--primary); ---vm-btn-primary-text: #ffffff; ---vm-btn-primary-border: var(--primary); ---vm-btn-secondary-bg: var(--secondary); ---vm-btn-secondary-text: #ffffff; ---vm-btn-secondary-border: var(--secondary); - -/* VM Image Overlay Controls */ ---vm-image-overlay-gap-x: 0.5rem; ---vm-image-overlay-gap-y: 0.5rem; ---vm-image-overlay-raise: 0.25rem; ---vm-image-overlay-btn-size: 2.5rem; ---vm-image-overlay-btn-radius: 50%; ---vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); ---vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); ---vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); ---vm-image-overlay-btn-border-width: 1px; ---vm-image-overlay-btn-color: var(--body-color); ---vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - -/* VM Vendor Menu */ ---vm-vendor-menu-bg: var(--body-bg); ---vm-vendor-menu-border: var(--border-color); ---vm-vendor-menu-radius: var(--border-radius); ---vm-vendor-menu-shadow: var(--box-shadow-sm); ---vm-vendor-menu-item-gap: 0.25rem; ---vm-vendor-menu-item-padding-x: 1rem; ---vm-vendor-menu-item-padding-y: 0.5rem; ---vm-vendor-menu-pill-radius: 50rem; ---vm-vendor-menu-link: var(--link-color); ---vm-vendor-menu-link-hover: var(--link-hover-color); ---vm-vendor-menu-link-active: var(--primary); ---vm-vendor-menu-hover-bg: var(--secondary-bg); - -/* ===== GABLE ===== */ ---gab-blue: #0066cc; ---gab-green: #28a745; ---gab-red: #dc3545; ---gab-orange: #fd7e14; ---gab-gray1: #495057; ---gab-gray2: #6c757d; ---gab-gray3: #adb5bd; - -/* ===== HERO / BANNER OVERLAY ===== */ ---hero-height: 70vh; ---hero-color: var(--body-color); ---hero-bg-repeat: no-repeat; ---hero-bg-attachment: fixed; ---hero-bg-position: top center; ---hero-bg-size: cover; ---hero-border-bottom: solid var(--accent-color-secondary); ---hero-overlay-bg: hsla(0, 0%, 0%, 0.1); ---hero-overlay-bg-position: center; ---hero-overlay-bg-size: cover; ---hero-overlay-padding: 1em; ---hero-overlay-text-align: center; ---hero-overlay-text-color: var(--body-color); - -/* ===== HERO VARIANTS ===== */ -/* Primary — sky blue, light overlay */ ---hero-primary-bg-color: var(--color-primary); ---hero-primary-overlay: linear-gradient(rgba(163, 205, 226, .45), rgba(163, 205, 226, .45)); ---hero-primary-color: var(--color-primary); - -/* Secondary — navy, stronger overlay */ ---hero-secondary-bg-color: var(--color-primary); ---hero-secondary-overlay: linear-gradient(rgba(17, 40, 85, .75), rgba(17, 40, 85, .75)); ---hero-secondary-color: #f1f5f9; - -/* ===== HERO CARD (inner .hero element) ===== */ -/* Default card — uses primary variant values */ ---hero-card-bg: var(--hero-primary-bg-color); ---hero-card-color: white; ---hero-card-overlay: var(--hero-primary-overlay); ---hero-card-border-radius: .5rem; ---hero-card-padding-x: 2rem; ---hero-card-padding-y: 3rem; ---hero-card-max-width: 800px; - -/* Alternative card — uses secondary variant values */ ---hero-alt-card-bg: var(--hero-secondary-bg-color); ---hero-alt-card-color: var(--hero-secondary-color); ---hero-alt-card-overlay: var(--hero-secondary-overlay); ---hero-alt-card-border-radius: .5rem; ---hero-alt-card-padding-x: 2rem; ---hero-alt-card-padding-y: 3rem; ---hero-alt-card-max-width: 600px; - -/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ ---block-color-1: var(--color-primary); ---block-text-1: var(--body-color); - ---block-color-2: var(--accent-color-primary); ---block-text-2: #fff; - ---block-color-3: var(--warning, #eec234); ---block-text-3: var(--body-color); - ---block-color-4: var(--success-bg-subtle, #eef7f0); ---block-text-4: var(--body-color); - -/* ===== BLOCK COLOR OVERRIDES ===== */ ---block-highlight-bg: var(--accent-color-primary); ---block-highlight-text: #fff; - ---block-cta-bg: var(--color-primary); ---block-cta-text: #fff; - ---block-alert-bg: var(--danger, #a51f18); ---block-alert-text: #fff; - -/* ===== OFFCANVAS ===== */ ---offcanvas-zindex: 1045; ---offcanvas-width: 400px; ---offcanvas-height: 30vh; ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; ---offcanvas-color: var(--body-color); ---offcanvas-bg: var(--body-bg); ---offcanvas-border-width: 1px; ---offcanvas-border-color: var(--border-color-translucent); ---offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - -/* ===== ACCORDION ===== */ ---accordion-color: hsl(210, 11%, 15%); ---accordion-bg: var(--body-bg); ---accordion-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, border-radius 0.15s ease; ---accordion-border-color: var(--border-color); ---accordion-border-width: 1px; ---accordion-border-radius: 0.25rem; ---accordion-inner-border-radius: calc(0.25rem - 1px); ---accordion-btn-padding-x: 1.25rem; ---accordion-btn-padding-y: 1rem; ---accordion-btn-color: hsl(210, 11%, 15%); ---accordion-btn-bg: var(--accordion-bg); ---accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%28210, 11%25, 15%25%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-icon-width: 1.25rem; ---accordion-btn-icon-transform: rotate(-180deg); ---accordion-btn-icon-transition: transform 0.2s ease-in-out; ---accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-focus-border-color: var(--input-focus-border-color); ---accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---accordion-body-padding-x: 1.25rem; ---accordion-body-padding-y: 1rem; ---accordion-active-color: #0f244d; ---accordion-active-bg: #e7eaee; - -/* ===== BREADCRUMB ===== */ ---breadcrumb-padding-x: 0; ---breadcrumb-padding-y: 0; ---breadcrumb-margin-bottom: 1rem; ---breadcrumb-bg: ; ---breadcrumb-border-radius: ; ---breadcrumb-divider-color: hsl(210, 7%, 46%); ---breadcrumb-item-padding-x: 0.5rem; ---breadcrumb-item-active-color: var(--link-color); - -/* ===== PAGINATION ===== */ ---pagination-padding-x: 0.75rem; ---pagination-padding-y: 0.375rem; ---pagination-font-size: 1rem; ---pagination-color: var(--link-color); ---pagination-bg: var(--body-bg); ---pagination-border-width: 1px; ---pagination-border-color: hsl(210, 14%, 89%); ---pagination-border-radius: 0.25rem; ---pagination-focus-color: var(--link-active-color); ---pagination-focus-bg: hsl(210, 16%, 93%); ---pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---pagination-active-color: var(--body-bg); ---pagination-active-bg: hsl(240, 98%, 17%); ---pagination-active-border-color: hsl(240, 98%, 17%); ---pagination-disabled-color: hsl(210, 7%, 46%); ---pagination-disabled-bg: var(--body-bg); ---pagination-disabled-border-color: hsl(210, 14%, 89%); - -/* ===== BADGE ===== */ ---badge-padding-x: 0.65em; ---badge-padding-y: 0.35em; ---badge-font-size: 0.75em; ---badge-font-weight: 700; ---badge-color: var(--body-bg); ---badge-border-radius: 0.25rem; - -/* ===== ALERT ===== */ ---alert-bg: transparent; ---alert-padding-x: 1rem; ---alert-padding-y: 1rem; ---alert-margin-bottom: 1rem; ---alert-color: #000; ---alert-border-color: transparent; ---alert-border: 1px solid var(--alert-border-color); ---alert-border-radius: 0.25rem; - -/* ===== PROGRESS ===== */ ---progress-height: 1rem; ---progress-font-size: 0.75rem; ---progress-bg: hsl(210, 16%, 93%); ---progress-border-radius: 0.25rem; ---progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.075); ---progress-bar-color: var(--body-bg); ---progress-bar-bg: hsl(240, 98%, 17%); ---progress-bar-transition: width 0.6s ease; - -/* ===== LIST GROUP ===== */ ---list-group-color: hsl(210, 11%, 15%); ---list-group-bg: var(--body-bg); ---list-group-border-color: rgba(var(--black-rgb), 0.125); ---list-group-border-width: 1px; ---list-group-border-radius: 0.25rem; ---list-group-item-padding-x: 1rem; ---list-group-item-padding-y: 0.5rem; ---list-group-action-color: hsl(210, 9%, 31%); ---list-group-action-active-color: hsl(210, 11%, 15%); ---list-group-action-active-bg: hsl(210, 16%, 93%); ---list-group-disabled-color: hsl(210, 7%, 46%); ---list-group-disabled-bg: var(--body-bg); ---list-group-active-color: var(--body-bg); ---list-group-active-bg: hsl(240, 98%, 17%); ---list-group-active-border-color: hsl(240, 98%, 17%); - -/* ===== DROPDOWN ===== */ ---dropdown-zindex: 1000; ---dropdown-min-width: 10rem; ---dropdown-padding-x: 0; ---dropdown-padding-y: 0.5rem; ---dropdown-spacer: 0.125rem; ---dropdown-font-size: 1rem; ---dropdown-color: hsl(210, 11%, 15%); ---dropdown-bg: var(--body-bg); ---dropdown-border-color: var(--border-color-translucent); ---dropdown-border-radius: 0.25rem; ---dropdown-border-width: 1px; ---dropdown-inner-border-radius: calc(0.25rem - 1px); ---dropdown-divider-bg: var(--border-color-translucent); ---dropdown-divider-margin-y: 0.5rem; ---dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); ---dropdown-link-color: hsl(210, 11%, 15%); ---dropdown-link-active-color: var(--body-bg); ---dropdown-link-active-bg: hsl(240, 98%, 17%); ---dropdown-link-disabled-color: hsl(210, 11%, 71%); ---dropdown-item-padding-x: 1rem; ---dropdown-item-padding-y: 0.25rem; ---dropdown-header-color: hsl(210, 7%, 46%); ---dropdown-header-padding-x: 1rem; ---dropdown-header-padding-y: 0.5rem; - -/* ===== TOAST ===== */ ---toast-zindex: 1090; ---toast-padding-x: 0.75rem; ---toast-padding-y: 0.5rem; ---toast-spacing: 1em; ---toast-max-width: 350px; ---toast-font-size: 0.875rem; ---toast-color: ; ---toast-bg: rgba(255, 255, 255, 0.85); ---toast-border-width: 1px; ---toast-border-color: var(--border-color-translucent); ---toast-border-radius: 0.25rem; ---toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); ---toast-header-color: hsl(210, 7%, 46%); ---toast-header-bg: rgba(var(--white-rgb), 0.85); ---toast-header-border-color: rgba(var(--black-rgb), var(--opacity-5)); - -/* ===== MODAL ===== */ ---modal-zindex: 1050; ---modal-width: 500px; ---modal-padding: 1rem; ---modal-margin: 0.5rem; ---modal-color: ; ---modal-bg: var(--body-bg); ---modal-border-color: var(--border-color-translucent); ---modal-border-width: 1px; ---modal-border-radius: 0.3rem; ---modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); ---modal-inner-border-radius: calc(0.3rem - 1px); ---modal-header-padding-x: 1rem; ---modal-header-padding-y: 1rem; ---modal-header-padding: 1rem 1rem; ---modal-header-border-color: var(--border-color); ---modal-header-border-width: 1px; ---modal-title-line-height: 1.5; ---modal-footer-gap: 0.5rem; ---modal-footer-bg: ; ---modal-footer-border-color: var(--border-color); ---modal-footer-border-width: 1px; - -/* ===== TOOLTIP ===== */ ---tooltip-zindex: 1070; ---tooltip-max-width: 200px; ---tooltip-padding-x: 0.5rem; ---tooltip-padding-y: 0.25rem; ---tooltip-margin: ; ---tooltip-font-size: 0.875rem; ---tooltip-color: var(--body-bg); ---tooltip-bg: hsl(0, 0%, 0%); ---tooltip-border-radius: 0.25rem; ---tooltip-opacity: 0.9; ---tooltip-arrow-width: 0.8rem; ---tooltip-arrow-height: 0.4rem; - -/* ===== POPOVER ===== */ ---popover-zindex: 1060; ---popover-max-width: 276px; ---popover-font-size: 0.875rem; ---popover-bg: var(--body-bg); ---popover-border-width: 1px; ---popover-border-color: var(--border-color-translucent); ---popover-border-radius: 0.3rem; ---popover-inner-border-radius: calc(0.3rem - 1px); ---popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); ---popover-header-padding-x: 1rem; ---popover-header-padding-y: 0.5rem; ---popover-header-font-size: 1rem; ---popover-header-color: ; ---popover-header-bg: #f0f0f0; ---popover-body-padding-x: 1rem; ---popover-body-padding-y: 1rem; ---popover-body-color: hsl(210, 11%, 15%); ---popover-arrow-width: 1rem; ---popover-arrow-height: 0.5rem; ---popover-arrow-border: var(--popover-border-color); - -/* ===== SPINNER ===== */ ---spinner-width: 2rem; ---spinner-height: 2rem; ---spinner-vertical-align: -0.125em; ---spinner-border-width: 0.25em; ---spinner-animation-speed: 0.75s; - -/* ===== NAV TABS ===== */ ---nav-tabs-border-width: 1px; ---nav-tabs-border-color: hsl(210, 14%, 89%); ---nav-tabs-border-radius: 0.25rem; ---nav-tabs-link-active-color: hsl(210, 9%, 31%); ---nav-tabs-link-active-bg: var(--body-bg); ---nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) var(--body-bg); - -/* ===== NAV PILLS ===== */ ---nav-pills-border-radius: 0.25rem; ---nav-pills-link-active-color: var(--body-bg); ---nav-pills-link-active-bg: hsl(240, 98%, 17%); - -/* ===== TABLE ===== */ ---table-color: var(--body-color); ---table-bg: transparent; ---table-border-color: var(--border-color); ---table-accent-bg: transparent; ---table-striped-color: var(--body-color); ---table-striped-bg: rgba(var(--black-rgb), var(--opacity-5)); ---table-active-color: var(--body-color); ---table-active-bg: rgba(var(--black-rgb), 0.075); - -/* ===== FOOTER ===== */ ---footer-padding-top: 1rem; ---footer-padding-bottom: 80px; ---footer-grid-padding-y: 2.5rem; ---footer-grid-padding-x: 0.5em; - -/* ===== BACKDROP ===== */ ---backdrop-zindex: 1040; ---backdrop-bg: hsl(0, 0%, 0%); ---backdrop-opacity: 0.5; -} - -.btn { ---btn-padding-x: 1rem; ---btn-padding-y: 0.6rem; ---btn-font-family: inherit; ---btn-font-size: 1rem; ---btn-font-weight: 400; ---btn-line-height: 1.5; ---btn-color: hsl(210, 11%, 15%); ---btn-bg: var(--body-bg); ---btn-border-width: 1px; ---btn-border-color: transparent; ---btn-border-radius: 0.25rem; ---btn-active-border-color: transparent; ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); ---btn-disabled-opacity: 0.65; ---btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); -display: inline-block; -padding: var(--btn-padding-y) var(--btn-padding-x); -font-family: var(--btn-font-family); -font-size: var(--btn-font-size); -font-weight: var(--btn-font-weight); -line-height: var(--btn-line-height); -color: var(--btn-color); -text-align: center; -text-decoration: none; -vertical-align: middle; -cursor: pointer; --webkit-user-select: none; --moz-user-select: none; --ms-user-select: none; -user-select: none; -border: var(--btn-border-width) solid var(--btn-border-color); -border-radius: var(--btn-border-radius); -background-color: var(--btn-bg); --webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; --o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; -transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -} - -.btn-primary { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(240, 98%, 17%); ---btn-border-color: hsl(240, 98%, 17%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #010149; ---btn-hover-border-color: #010145; ---btn-focus-shadow-rgb: 39, 39, 111; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #010145; ---btn-active-border-color: #010141; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(240, 98%, 17%); ---btn-disabled-border-color: hsl(240, 98%, 17%); -} - -.btn-secondary { ---btn-color: var(--body-bg); ---btn-bg: var(--nav-bg-color); ---btn-border-color: hsl(210, 7%, 46%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #5d636b; ---btn-hover-border-color: #575e65; ---btn-focus-shadow-rgb: gray; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #575e65; ---btn-active-border-color: #52585f; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(210, 7%, 46%); ---btn-disabled-border-color: hsl(210, 7%, 46%); -} - -.btn-success { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(120, 32%, 39%); ---btn-border-color: hsl(120, 32%, 39%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #3a6f3a; ---btn-hover-border-color: #366936; ---btn-focus-shadow-rgb: 96, 150, 96; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #366936; ---btn-active-border-color: #336233; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(120, 32%, 39%); ---btn-disabled-border-color: hsl(120, 32%, 39%); -} - -.btn-info { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(207, 49%, 37%); ---btn-border-color: hsl(207, 49%, 37%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #295478; ---btn-hover-border-color: #264f71; ---btn-focus-shadow-rgb: 79, 122, 158; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #264f71; ---btn-active-border-color: #244a6a; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(207, 49%, 37%); ---btn-disabled-border-color: hsl(207, 49%, 37%); -} - -.btn-warning { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(34, 100%, 34%); ---btn-border-color: hsl(34, 100%, 34%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #935300; ---btn-hover-border-color: #8a4e00; ---btn-focus-shadow-rgb: 185, 122, 38; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #8a4e00; ---btn-active-border-color: #824a00; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(34, 100%, 34%); ---btn-disabled-border-color: hsl(34, 100%, 34%); -} - -.btn-danger { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(3, 75%, 37%); ---btn-border-color: hsl(3, 75%, 37%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #8c1a14; ---btn-hover-border-color: #841913; ---btn-focus-shadow-rgb: 179, 65, 59; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #841913; ---btn-active-border-color: #7c1712; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(3, 75%, 37%); ---btn-disabled-border-color: hsl(3, 75%, 37%); -} - -.btn-light { ---btn-color: hsl(0, 0%, 0%); ---btn-bg: hsl(210, 17%, 98%); ---btn-border-color: hsl(210, 17%, 98%); ---btn-hover-color: hsl(0, 0%, 0%); ---btn-hover-bg: #d4d5d5; ---btn-hover-border-color: #c7c8c9; ---btn-focus-shadow-rgb: 212, 213, 213; ---btn-active-color: hsl(0, 0%, 0%); ---btn-active-bg: #c7c8c9; ---btn-active-border-color: #bbbcbc; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 0%); ---btn-disabled-bg: hsl(210, 17%, 98%); ---btn-disabled-border-color: hsl(210, 17%, 98%); -} - -.btn-dark { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(210, 10%, 23%); ---btn-border-color: hsl(210, 10%, 23%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #53585e; ---btn-hover-border-color: #494f54; ---btn-focus-shadow-rgb: 83, 88, 94; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #5d6267; ---btn-active-border-color: #494f54; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(210, 10%, 23%); ---btn-disabled-border-color: hsl(210, 10%, 23%); -} - -.btn-outline-primary { ---btn-color: hsl(240, 98%, 17%); ---btn-border-color: hsl(240, 98%, 17%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(240, 98%, 17%); ---btn-hover-border-color: hsl(240, 98%, 17%); ---btn-focus-shadow-rgb: 1, 1, 86; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(240, 98%, 17%); ---btn-active-border-color: hsl(240, 98%, 17%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(240, 98%, 17%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(240, 98%, 17%); ---gradient: none; -} - -.btn-outline-secondary { ---btn-color: hsl(210, 7%, 46%); ---btn-border-color: hsl(210, 7%, 46%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(210, 7%, 46%); ---btn-hover-border-color: hsl(210, 7%, 46%); ---btn-focus-shadow-rgb: 109, 117, 126; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(210, 7%, 46%); ---btn-active-border-color: hsl(210, 7%, 46%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(210, 7%, 46%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(210, 7%, 46%); ---gradient: none; -} - -.btn-outline-success { ---btn-color: hsl(120, 32%, 39%); ---btn-border-color: hsl(120, 32%, 39%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(120, 32%, 39%); ---btn-hover-border-color: hsl(120, 32%, 39%); ---btn-focus-shadow-rgb: 68, 131, 68; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(120, 32%, 39%); ---btn-active-border-color: hsl(120, 32%, 39%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(120, 32%, 39%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(120, 32%, 39%); ---gradient: none; -} - -.btn-outline-info { ---btn-color: hsl(207, 49%, 37%); ---btn-border-color: hsl(207, 49%, 37%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(207, 49%, 37%); ---btn-hover-border-color: hsl(207, 49%, 37%); ---btn-focus-shadow-rgb: 48, 99, 141; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(207, 49%, 37%); ---btn-active-border-color: hsl(207, 49%, 37%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(207, 49%, 37%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(207, 49%, 37%); ---gradient: none; -} - -.btn-outline-warning { ---btn-color: hsl(34, 100%, 34%); ---btn-border-color: hsl(34, 100%, 34%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(34, 100%, 34%); ---btn-hover-border-color: hsl(34, 100%, 34%); ---btn-focus-shadow-rgb: 173, 98, 0; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(34, 100%, 34%); ---btn-active-border-color: hsl(34, 100%, 34%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(34, 100%, 34%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(34, 100%, 34%); ---gradient: none; -} - -.btn-outline-danger { ---btn-color: hsl(3, 75%, 37%); ---btn-border-color: hsl(3, 75%, 37%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(3, 75%, 37%); ---btn-hover-border-color: hsl(3, 75%, 37%); ---btn-focus-shadow-rgb: 165, 31, 24; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(3, 75%, 37%); ---btn-active-border-color: hsl(3, 75%, 37%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(3, 75%, 37%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(3, 75%, 37%); ---gradient: none; -} - -.btn-outline-light { ---btn-color: hsl(210, 17%, 98%); ---btn-border-color: hsl(210, 17%, 98%); ---btn-hover-color: hsl(0, 0%, 0%); ---btn-hover-bg: hsl(210, 17%, 98%); ---btn-hover-border-color: hsl(210, 17%, 98%); ---btn-focus-shadow-rgb: 249, 250, 251; ---btn-active-color: hsl(0, 0%, 0%); ---btn-active-bg: hsl(210, 17%, 98%); ---btn-active-border-color: hsl(210, 17%, 98%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(210, 17%, 98%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(210, 17%, 98%); ---gradient: none; -} - -.btn-outline-dark { ---btn-color: hsl(210, 10%, 23%); ---btn-border-color: hsl(210, 10%, 23%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(210, 10%, 23%); ---btn-hover-border-color: hsl(210, 10%, 23%); ---btn-focus-shadow-rgb: 53, 59, 65; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(210, 10%, 23%); ---btn-active-border-color: hsl(210, 10%, 23%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(210, 10%, 23%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(210, 10%, 23%); ---gradient: none; -} - -.btn-link { ---btn-font-weight: 400; ---btn-color: var(--link-color); ---btn-bg: transparent; ---btn-border-color: transparent; ---btn-hover-color: var(--link-hover-color); ---btn-hover-border-color: transparent; ---btn-active-color: var(--link-hover-color); ---btn-active-border-color: transparent; ---btn-disabled-color: hsl(210, 7%, 46%); ---btn-disabled-border-color: transparent; ---btn-box-shadow: none; ---btn-focus-shadow-rgb: 39, 39, 111; -text-decoration: underline; -} diff --git a/src/templates/dark.custom.css b/src/templates/dark.custom.css deleted file mode 100644 index 23b1fcb..0000000 --- a/src/templates/dark.custom.css +++ /dev/null @@ -1,1151 +0,0 @@ -@charset "UTF-8"; -/* ----------------------------------------------- - * CUSTOM DARK THEME - * Merged from dark.standard.css with custom overrides. - * --------------------------------------------- */ - -:root[data-bs-theme='dark']{ - -color-scheme: dark; - -/* ===== BRAND & THEME COLORS ===== */ ---color-primary: #112855; ---accent-color-primary: #df4830; ---accent-color-secondary: #a3cde2; - -/* ===== NAVIGATION ===== */ ---mainmenu-nav-link-color: #f8fbfc; ---nav-text-color: #b8c3cb; ---nav-bg-color: var(--color-primary); - -/* ===== LINKS ===== */ ---color-link: #b4def8; ---color-hover: var(--accent-color-primary); ---color-active: var(--mainmenu-nav-link-color); ---link-color: #8ab4f8; ---link-color-rgb: 138, 180, 248; ---link-decoration: underline; ---link-hover-color: var(--accent-color-primary); ---link-hover-color-rgb: 223, 72, 48; ---link-active-color: var(--link-color); - -/* ===== NAVBAR ===== */ ---navbar-padding-x: 1rem; ---navbar-padding-y: 0.5rem; ---navbar-color: var(--nav-text-color); ---navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; ---navbar-brand-padding-y: 0.3125rem; ---navbar-brand-margin-end: 1rem; ---navbar-brand-font-size: 1.25rem; ---navbar-brand-color: var(--nav-text-color); ---navbar-brand-active-color: var(--mainmenu-nav-link-color); ---navbar-nav-link-padding-x: 0.5rem; ---navbar-toggler-padding-y: 0.25rem; ---navbar-toggler-padding-x: 0.75rem; ---navbar-toggler-font-size: 1.25rem; ---navbar-toggler-border-color: rgba(255, 255, 255, 0.1); ---navbar-toggler-border-radius: 0.25rem; ---navbar-toggler-focus-width: 0.25rem; ---navbar-toggler-transition: box-shadow 0.15s ease-in-out; ---nav-link-padding-x: 1rem; ---nav-link-padding-y: 0.5rem; ---nav-link-font-weight: 400; ---nav-link-color: var(--nav-text-color); ---nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; - -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; ---body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; ---body-font-size: 1rem; ---body-font-weight: 400; ---body-line-height: 1.5; ---body-color: #e6ebf1; ---body-color-rgb: 230, 235, 241; ---body-bg: #0e1318; ---body-bg-rgb: 14, 19, 24; ---heading-color: #f1f5f9; ---emphasis-color: #fff; ---emphasis-color-rgb: 255, 255, 255; ---secondary-color: #e6ebf1bf; ---secondary-color-rgb: 230, 235, 241; ---tertiary-color: #e6ebf180; ---tertiary-color-rgb: 230, 235, 241; ---muted-color: #6d757e; ---code-color: #ff7abd; ---code-color-ink: var(--code-color, #e93f8e); ---code-bg-color: lightgreen; ---highlight-color: #111; ---highlight-bg: #ffe28a1a; - -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #151b22; ---secondary-bg-rgb: 21, 27, 34; ---tertiary-bg: #10151b; ---tertiary-bg-rgb: 16, 21, 27; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); ---border: 5px; - -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #48525d; ---success: #4aa664; ---info: #4f7aa0; ---warning: #c77a00; ---danger: #c23a31; ---light: #1b2027; ---dark: #0f1318; ---primary-rgb: 1,1,86; ---secondary-rgb: 72,82,93; ---success-rgb: 74,166,100; ---info-rgb: 79,122,160; ---warning-rgb: 199,122,0; ---danger-rgb: 194,58,49; ---light-rgb: 27,32,39; ---dark-rgb: 15,19,24; ---primary-text-emphasis: #c7ccff; ---secondary-text-emphasis: #cfd6de; ---success-text-emphasis: #bde8c9; ---info-text-emphasis: #bcd6ee; ---warning-text-emphasis: #ffd9a6; ---danger-text-emphasis: #ffb7b2; ---light-text-emphasis: #d2d8df; ---dark-text-emphasis: #d2d8df; ---primary-bg-subtle: #0b1030; ---secondary-bg-subtle: #1e2430; ---success-bg-subtle: #0f2a1b; ---info-bg-subtle: #0d2232; ---warning-bg-subtle: #2a1e06; ---danger-bg-subtle: #2d1110; ---light-bg-subtle: #12161d; ---dark-bg-subtle: #1e2430; ---primary-border-subtle: #2b3a7a; ---secondary-border-subtle: #2b323b; ---success-border-subtle: #2b5b40; ---info-border-subtle: #254861; ---warning-border-subtle: #5a3c0e; ---danger-border-subtle: #5c2723; ---light-border-subtle: #222831; ---dark-border-subtle: #2b323b; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #b3c1ff; ---alert-secondary-link-color: #9fa6ad; ---alert-success-link-color: #a0e5b3; ---alert-info-link-color: #8eccf2; ---alert-warning-link-color: #ffe4a0; ---alert-danger-link-color: #ffa8a3; ---alert-light-link-color: #f0f4f8; ---alert-dark-link-color: #9fa6ad; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #8ca3ff; ---list-group-item-primary-bg: #1a2550; ---list-group-item-primary-active-bg: #223066; ---list-group-item-secondary-color: #9fa6ad; ---list-group-item-secondary-bg: #2b323b; ---list-group-item-secondary-active-bg: #363d47; ---list-group-item-success-color: #a0e5b3; ---list-group-item-success-bg: #1e3d2d; ---list-group-item-success-active-bg: #275538; ---list-group-item-info-color: #8eccf2; ---list-group-item-info-bg: #1a3448; ---list-group-item-info-active-bg: #234459; ---list-group-item-warning-color: #ffe4a0; ---list-group-item-warning-bg: #4a3410; ---list-group-item-warning-active-bg: #5c4216; ---list-group-item-danger-color: #ffa8a3; ---list-group-item-danger-bg: #4a1e1c; ---list-group-item-danger-active-bg: #5c2823; ---list-group-item-light-color: #e9ecef; ---list-group-item-light-bg: #1e2430; ---list-group-item-light-active-bg: #282f3d; ---list-group-item-dark-color: #48525d; ---list-group-item-dark-bg: #0e1318; ---list-group-item-dark-active-bg: #161b22; - -/* ===== LINK UTILITY COLORS ===== */ ---link-primary-color: hsl(240, 98%, 50%); ---link-primary-hover-color: hsl(240, 98%, 45%); ---link-secondary-color: hsl(210, 15%, 70%); ---link-secondary-hover-color: hsl(210, 15%, 65%); ---link-success-color: hsl(120, 40%, 60%); ---link-success-hover-color: hsl(120, 40%, 55%); ---link-info-color: hsl(207, 60%, 65%); ---link-info-hover-color: hsl(207, 60%, 60%); ---link-warning-color: hsl(38, 100%, 65%); ---link-warning-hover-color: hsl(38, 100%, 60%); ---link-danger-color: hsl(3, 85%, 65%); ---link-danger-hover-color: hsl(3, 85%, 60%); ---link-light-color: hsl(210, 20%, 90%); ---link-light-hover-color: hsl(210, 20%, 85%); ---link-dark-color: hsl(210, 10%, 35%); ---link-dark-hover-color: hsl(210, 10%, 30%); - -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #5a6470; ---form-legend-color: #9fa6ad; ---border-gray: #3a4250; ---subhead-color: #9fa6ad; ---box-shadow-gray: #1a2027; ---btn-active-text-gray: #7a8490; ---indicator-success-bg: var(--success); ---item-list-color: #2a2f34; ---notification-badge-bg: var(--danger); ---content-bg-gray: #2b323b; ---taba-btn-green: #5a9c2f; ---taba-btn-blue: #3d75a8; ---taba-btn-red: #c43620; ---taba-btn-gray: #6a7080; ---taba-msg-bg: #1e2430; ---toc-link-color: #9fa6ad; ---toc-link-active-color: #91a4ff; ---choices-disabled-bg: #2b323b; ---choices-input-bg: var(--body-bg); ---choices-border-light: #48525d; ---choices-arrow-color: #9fa6ad; ---choices-inner-bg: #1a2027; ---choices-focused-border: #5472ff; ---choices-dropdown-bg: var(--body-bg); ---choices-item-bg: #1a5f75; ---choices-item-border: #1a748f; ---choices-item-hover-bg: #1a748f; ---choices-item-hover-border: #1a8aa8; ---choices-item-disabled-bg: #48525d; ---choices-item-disabled-border: #36404a; ---choices-item-highlighted: #2b323b; ---choices-input-inner-bg: #1a2027; - -/* ===== STANDARD COLORS ===== */ ---blue: #91a4ff; ---indigo: #b19cff; ---purple: #c0a5ff; ---pink: #ff8fc0; ---red: #ff7a73; ---orange: #ff9c4d; ---yellow: #ffd166; ---green: #78d694; ---teal: #76e3ff; ---cyan: #6fb7ff; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #161a20; ---gray-200: #1b2027; ---gray-300: #222831; ---gray-400: #2b323b; ---gray-500: #36404a; ---gray-600: #48525d; ---gray-700: #5b6672; ---gray-800: #cfd6de; ---gray-900: #e6ebf1; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-30)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-50)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-75)); ---border-color-translucent: rgba(var(--white-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-5)); - -/* ===== HEADER BACKGROUND ===== */ ---header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); ---header-background-attachment: fixed; ---header-background-repeat: repeat; ---header-background-size: auto; - -/* ===== CONTAINER BACKGROUNDS ===== */ -/* Below Topbar Container */ ---container-below-topbar-bg-image: none; ---container-below-topbar-bg-color: transparent; ---container-below-topbar-bg-position: center; ---container-below-topbar-bg-attachment: fixed; ---container-below-topbar-bg-repeat: no-repeat; ---container-below-topbar-bg-size: cover; ---container-below-topbar-border: none; ---container-below-topbar-border-radius: 0; - -/* Top A Container */ ---container-top-a-bg-image: none; ---container-top-a-bg-color: transparent; ---container-top-a-bg-position: center; ---container-top-a-bg-attachment: fixed; ---container-top-a-bg-repeat: no-repeat; ---container-top-a-bg-size: cover; ---container-top-a-border: none; ---container-top-a-border-radius: 0; - -/* Top B Container */ ---container-top-b-bg-image: none; ---container-top-b-bg-color: transparent; ---container-top-b-bg-position: center; ---container-top-b-bg-attachment: fixed; ---container-top-b-bg-repeat: no-repeat; ---container-top-b-bg-size: cover; ---container-top-b-border: none; ---container-top-b-border-radius: 0; - -/* TOC Container */ ---container-toc-bg: var(--secondary-bg); ---container-toc-color: #dbe3ff; - -/* Sidebar Container */ ---container-sidebar-bg-image: none; ---container-sidebar-bg-color: transparent; ---container-sidebar-bg-position: center; ---container-sidebar-bg-attachment: scroll; ---container-sidebar-bg-repeat: repeat; ---container-sidebar-bg-size: auto; ---container-sidebar-border: none; ---container-sidebar-border-radius: 0; - -/* Bottom A Container */ ---container-bottom-a-bg-image: none; ---container-bottom-a-bg-color: transparent; ---container-bottom-a-bg-position: center; ---container-bottom-a-bg-attachment: fixed; ---container-bottom-a-bg-repeat: no-repeat; ---container-bottom-a-bg-size: cover; ---container-bottom-a-border: none; ---container-bottom-a-border-radius: 5px; - -/* Bottom B Container */ ---container-bottom-b-bg-image: none; ---container-bottom-b-bg-color: transparent; ---container-bottom-b-bg-position: center; ---container-bottom-b-bg-attachment: fixed; ---container-bottom-b-bg-repeat: no-repeat; ---container-bottom-b-bg-size: cover; ---container-bottom-b-border: none; ---container-bottom-b-border-radius: 0; - -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #2b323b; ---border-color-translucent: #ffffff26; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl); ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000066; ---box-shadow-sm: 0 .125rem .25rem #00000040; ---box-shadow-lg: 0 1rem 3rem #00000080; ---box-shadow-inset: inset 0 1px 2px #00000040; - -/* ===== FOCUS & FORMS ===== */ ---focus-ring-width: .25rem; ---focus-ring-opacity: .6; ---focus-ring-color: #5472ff66; ---input-color: #e6ebf1; ---input-bg: #1a2332; ---input-border-color: #3a4250; ---input-focus-border-color: #5472ff; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---input-placeholder-color: #8894aa; ---input-disabled-bg: #0f1318; ---input-disabled-border-color: #2b323b; ---input-file-button-active-bg: #2b3441; ---form-range-thumb-active-bg: #4a5766; ---form-valid-color: #78d694; ---form-valid-border-color: #78d694; ---form-invalid-color: #ff8e86; ---form-invalid-border-color: #ff8e86; - -/* ===== BUTTONS ===== */ ---btn-border-radius: var(--border-radius); ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3); - -/* ===== CARDS ===== */ ---card-spacer-y: 1rem; ---card-spacer-x: 1rem; ---card-title-spacer-y: 0.5rem; ---card-border-width: 1px; ---card-border-color: var(--border-color); ---card-border-radius: var(--border-radius); ---card-box-shadow: none; ---card-inner-border-radius: calc(var(--border-radius) - 1px); ---card-cap-padding-y: 0.5rem; ---card-cap-padding-x: 1rem; ---card-cap-bg: rgba(255, 255, 255, 0.03); ---card-cap-color: var(--body-color); ---card-height: auto; ---card-color: var(--body-color); ---card-bg: var(--secondary-bg); ---card-img-overlay-padding: 1rem; ---card-group-margin: 0.75rem; - -/* ===== VIRTUEMART (VM) ===== */ -/* VM Surfaces */ ---vm-surface: var(--secondary-bg); ---vm-surface-2: var(--tertiary-bg); ---vm-text: var(--body-color); ---vm-text-strong: #ffffff; ---vm-text-muted: var(--gray-700); ---vm-border: var(--border-color); ---vm-price-color: var(--success); - -/* VM Layout and Density */ ---vm-container-max-width: 1200px; ---vm-section-gap: 2rem; ---vm-block-radius: var(--border-radius); ---vm-block-shadow: var(--box-shadow-sm); - -/* VM Typography */ ---vm-category-title-size: 2rem; ---vm-subcategory-title-size: 1.5rem; ---vm-page-title-size: 1.75rem; ---vm-products-type-title-size: 1.25rem; ---vm-product-title-size: 1.125rem; ---vm-product-title-weight: 500; ---vm-products-type-title-weight: 600; ---vm-price-size: 1.5rem; ---vm-price-detail-size: 1.125rem; ---vm-price-desc-size: 0.875rem; - -/* VM Controls */ ---vm-input-radius: var(--border-radius); ---vm-input-shadow: var(--box-shadow-sm); ---vm-qty-width: 80px; ---vm-cart-dropdown-min-width: 300px; - -/* VM Alerts */ ---vm-alert-radius: var(--border-radius); ---vm-alert-shadow: var(--box-shadow-sm); ---vm-availability-bg: var(--success-bg-subtle); ---vm-availability-text: var(--success); - -/* VM Buttons */ ---vm-btn-padding-x: 1rem; ---vm-btn-padding-y: 0.5rem; ---vm-btn-radius: var(--border-radius); ---vm-btn-shadow: var(--box-shadow-sm); ---vm-btn-primary-bg: var(--primary); ---vm-btn-primary-text: #ffffff; ---vm-btn-primary-border: var(--primary); ---vm-btn-secondary-bg: var(--secondary); ---vm-btn-secondary-text: #ffffff; ---vm-btn-secondary-border: var(--secondary); - -/* VM Image Overlay Controls */ ---vm-image-overlay-gap-x: 0.5rem; ---vm-image-overlay-gap-y: 0.5rem; ---vm-image-overlay-raise: 0.25rem; ---vm-image-overlay-btn-size: 2.5rem; ---vm-image-overlay-btn-radius: 50%; ---vm-image-overlay-btn-bg: rgba(0, 0, 0, 0.7); ---vm-image-overlay-btn-bg-hover: rgba(0, 0, 0, 0.85); ---vm-image-overlay-btn-border-color: rgba(255, 255, 255, 0.2); ---vm-image-overlay-btn-border-width: 1px; ---vm-image-overlay-btn-color: var(--body-color); ---vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - -/* VM Vendor Menu */ ---vm-vendor-menu-bg: var(--secondary-bg); ---vm-vendor-menu-border: var(--border-color); ---vm-vendor-menu-radius: var(--border-radius); ---vm-vendor-menu-shadow: var(--box-shadow-sm); ---vm-vendor-menu-item-gap: 0.25rem; ---vm-vendor-menu-item-padding-x: 1rem; ---vm-vendor-menu-item-padding-y: 0.5rem; ---vm-vendor-menu-pill-radius: 50rem; ---vm-vendor-menu-link: var(--link-color); ---vm-vendor-menu-link-hover: var(--link-hover-color); ---vm-vendor-menu-link-active: var(--primary); ---vm-vendor-menu-hover-bg: var(--tertiary-bg); - -/* ===== GABLE ===== */ ---gab-blue: #4d9fff; ---gab-green: #5cb85c; ---gab-red: #ff6b6b; ---gab-orange: #ff9f5a; ---gab-gray1: #868e96; ---gab-gray2: #adb5bd; ---gab-gray3: #ced4da; - -/* ===== HERO / BANNER OVERLAY ===== */ ---hero-height: 70vh; ---hero-color: var(--body-color); ---hero-bg-repeat: no-repeat; ---hero-bg-attachment: fixed; ---hero-bg-position: top center; ---hero-bg-size: cover; ---hero-border-bottom: solid var(--accent-color-secondary); ---hero-overlay-bg: hsla(0, 0%, 0%, 0.3); ---hero-overlay-bg-position: center; ---hero-overlay-bg-size: cover; ---hero-overlay-padding: 1em; ---hero-overlay-text-align: center; ---hero-overlay-text-color: var(--body-color); - -/* ===== HERO VARIANTS ===== */ -/* Primary — deep navy, dark overlay */ ---hero-primary-bg-color: #0d1e3a; ---hero-primary-overlay: linear-gradient(rgba(13, 30, 58, .65), rgba(13, 30, 58, .65)); ---hero-primary-color: #f1f5f9; - -/* Secondary — darker navy, heavier overlay */ ---hero-secondary-bg-color: #080f1e; ---hero-secondary-overlay: linear-gradient(rgba(8, 15, 30, .80), rgba(8, 15, 30, .80)); ---hero-secondary-color: #f1f5f9; - -/* ===== HERO CARD (inner .hero element) ===== */ -/* Default card — uses primary variant values */ ---hero-card-bg: var(--hero-primary-bg-color); ---hero-card-color: var(--hero-primary-color); ---hero-card-overlay: var(--hero-primary-overlay); ---hero-card-border-radius: .5rem; ---hero-card-padding-x: 2rem; ---hero-card-padding-y: 3rem; ---hero-card-max-width: 600px; - -/* Alternative card — uses secondary variant values */ ---hero-alt-card-bg: var(--hero-secondary-bg-color); ---hero-alt-card-color: var(--hero-secondary-color); ---hero-alt-card-overlay: var(--hero-secondary-overlay); ---hero-alt-card-border-radius: .5rem; ---hero-alt-card-padding-x: 2rem; ---hero-alt-card-padding-y: 3rem; ---hero-alt-card-max-width: 600px; - -/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ ---block-color-1: var(--secondary-bg); ---block-text-1: var(--body-color); - ---block-color-2: var(--accent-color-primary); ---block-text-2: #fff; - ---block-color-3: rgba(238, 194, 52, .15); ---block-text-3: var(--body-color); - ---block-color-4: rgba(74, 166, 100, .15); ---block-text-4: var(--body-color); - -/* ===== BLOCK COLOR OVERRIDES ===== */ ---block-highlight-bg: var(--accent-color-primary); ---block-highlight-text: #fff; - ---block-cta-bg: var(--color-primary); ---block-cta-text: #f1f5f9; - ---block-alert-bg: var(--danger, #c23a31); ---block-alert-text: #fff; - -/* ===== OFFCANVAS ===== */ ---offcanvas-zindex: 1045; ---offcanvas-width: 400px; ---offcanvas-height: 30vh; ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; ---offcanvas-color: var(--body-color); ---offcanvas-bg: var(--body-bg); ---offcanvas-border-width: 1px; ---offcanvas-border-color: var(--border-color-translucent); ---offcanvas-box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); - -/* ===== ACCORDION ===== */ ---accordion-color: var(--body-color); ---accordion-bg: var(--body-bg); ---accordion-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, border-radius 0.15s ease; ---accordion-border-color: var(--border-color); ---accordion-border-width: 1px; ---accordion-border-radius: 0.25rem; ---accordion-inner-border-radius: calc(0.25rem - 1px); ---accordion-btn-padding-x: 1.25rem; ---accordion-btn-padding-y: 1rem; ---accordion-btn-color: var(--body-color); ---accordion-btn-bg: var(--accordion-bg); ---accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6ebf1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-icon-width: 1.25rem; ---accordion-btn-icon-transform: rotate(-180deg); ---accordion-btn-icon-transition: transform 0.2s ease-in-out; ---accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ab4f8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-focus-border-color: var(--input-focus-border-color); ---accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---accordion-body-padding-x: 1.25rem; ---accordion-body-padding-y: 1rem; ---accordion-active-color: var(--link-color); ---accordion-active-bg: var(--secondary-bg); - -/* ===== BREADCRUMB ===== */ ---breadcrumb-padding-x: 0; ---breadcrumb-padding-y: 0; ---breadcrumb-margin-bottom: 1rem; ---breadcrumb-bg: ; ---breadcrumb-border-radius: ; ---breadcrumb-divider-color: var(--gray-600); ---breadcrumb-item-padding-x: 0.5rem; ---breadcrumb-item-active-color: var(--link-color); - -/* ===== PAGINATION ===== */ ---pagination-padding-x: 0.75rem; ---pagination-padding-y: 0.375rem; ---pagination-font-size: 1rem; ---pagination-color: var(--link-color); ---pagination-bg: var(--secondary-bg); ---pagination-border-width: 1px; ---pagination-border-color: var(--border-color); ---pagination-border-radius: 0.25rem; ---pagination-focus-color: var(--link-active-color); ---pagination-focus-bg: var(--tertiary-bg); ---pagination-focus-box-shadow: 0 0 0 0.25rem rgba(84, 114, 255, 0.25); ---pagination-active-color: var(--body-color); ---pagination-active-bg: hsl(240, 98%, 17%); ---pagination-active-border-color: hsl(240, 98%, 17%); ---pagination-disabled-color: var(--gray-600); ---pagination-disabled-bg: var(--secondary-bg); ---pagination-disabled-border-color: var(--border-color); - -/* ===== BADGE ===== */ ---badge-padding-x: 0.65em; ---badge-padding-y: 0.35em; ---badge-font-size: 0.75em; ---badge-font-weight: 700; ---badge-color: var(--body-color); ---badge-border-radius: 0.25rem; - -/* ===== ALERT ===== */ ---alert-bg: transparent; ---alert-padding-x: 1rem; ---alert-padding-y: 1rem; ---alert-margin-bottom: 1rem; ---alert-color: #000; ---alert-border-color: transparent; ---alert-border: 1px solid var(--alert-border-color); ---alert-border-radius: 0.25rem; - -/* ===== PROGRESS ===== */ ---progress-height: 1rem; ---progress-font-size: 0.75rem; ---progress-bg: var(--secondary-bg); ---progress-border-radius: 0.25rem; ---progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.3); ---progress-bar-color: var(--body-color); ---progress-bar-bg: hsl(240, 98%, 40%); ---progress-bar-transition: width 0.6s ease; - -/* ===== LIST GROUP ===== */ ---list-group-color: var(--body-color); ---list-group-bg: var(--secondary-bg); ---list-group-border-color: rgba(var(--white-rgb), 0.125); ---list-group-border-width: 1px; ---list-group-border-radius: 0.25rem; ---list-group-item-padding-x: 1rem; ---list-group-item-padding-y: 0.5rem; ---list-group-action-color: var(--gray-800); ---list-group-action-active-color: var(--body-color); ---list-group-action-active-bg: var(--tertiary-bg); ---list-group-disabled-color: var(--gray-600); ---list-group-disabled-bg: var(--secondary-bg); ---list-group-active-color: var(--body-color); ---list-group-active-bg: hsl(240, 98%, 17%); ---list-group-active-border-color: hsl(240, 98%, 17%); - -/* ===== DROPDOWN ===== */ ---dropdown-zindex: 1000; ---dropdown-min-width: 10rem; ---dropdown-padding-x: 0; ---dropdown-padding-y: 0.5rem; ---dropdown-spacer: 0.125rem; ---dropdown-font-size: 1rem; ---dropdown-color: var(--body-color); ---dropdown-bg: var(--secondary-bg); ---dropdown-border-color: var(--border-color-translucent); ---dropdown-border-radius: 0.25rem; ---dropdown-border-width: 1px; ---dropdown-inner-border-radius: calc(0.25rem - 1px); ---dropdown-divider-bg: var(--border-color-translucent); ---dropdown-divider-margin-y: 0.5rem; ---dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); ---dropdown-link-color: var(--body-color); ---dropdown-link-active-color: var(--body-color); ---dropdown-link-active-bg: hsl(240, 98%, 17%); ---dropdown-link-disabled-color: var(--gray-600); ---dropdown-item-padding-x: 1rem; ---dropdown-item-padding-y: 0.25rem; ---dropdown-header-color: var(--gray-600); ---dropdown-header-padding-x: 1rem; ---dropdown-header-padding-y: 0.5rem; - -/* ===== TOAST ===== */ ---toast-zindex: 1090; ---toast-padding-x: 0.75rem; ---toast-padding-y: 0.5rem; ---toast-spacing: 1em; ---toast-max-width: 350px; ---toast-font-size: 0.875rem; ---toast-color: ; ---toast-bg: rgba(21, 27, 34, 0.9); ---toast-border-width: 1px; ---toast-border-color: var(--border-color-translucent); ---toast-border-radius: 0.25rem; ---toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-medium); ---toast-header-color: var(--gray-600); ---toast-header-bg: rgba(21, 27, 34, 0.85); ---toast-header-border-color: rgba(var(--white-rgb), var(--opacity-10)); - -/* ===== MODAL ===== */ ---modal-zindex: 1050; ---modal-width: 500px; ---modal-padding: 1rem; ---modal-margin: 0.5rem; ---modal-color: ; ---modal-bg: var(--secondary-bg); ---modal-border-color: var(--border-color-translucent); ---modal-border-width: 1px; ---modal-border-radius: 0.3rem; ---modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); ---modal-inner-border-radius: calc(0.3rem - 1px); ---modal-header-padding-x: 1rem; ---modal-header-padding-y: 1rem; ---modal-header-padding: 1rem 1rem; ---modal-header-border-color: var(--border-color); ---modal-header-border-width: 1px; ---modal-title-line-height: 1.5; ---modal-footer-gap: 0.5rem; ---modal-footer-bg: ; ---modal-footer-border-color: var(--border-color); ---modal-footer-border-width: 1px; - -/* ===== TOOLTIP ===== */ ---tooltip-zindex: 1070; ---tooltip-max-width: 200px; ---tooltip-padding-x: 0.5rem; ---tooltip-padding-y: 0.25rem; ---tooltip-margin: ; ---tooltip-font-size: 0.875rem; ---tooltip-color: var(--body-color); ---tooltip-bg: hsl(0, 0%, 0%); ---tooltip-border-radius: 0.25rem; ---tooltip-opacity: 0.9; ---tooltip-arrow-width: 0.8rem; ---tooltip-arrow-height: 0.4rem; - -/* ===== POPOVER ===== */ ---popover-zindex: 1060; ---popover-max-width: 276px; ---popover-font-size: 0.875rem; ---popover-bg: var(--secondary-bg); ---popover-border-width: 1px; ---popover-border-color: var(--border-color-translucent); ---popover-border-radius: 0.3rem; ---popover-inner-border-radius: calc(0.3rem - 1px); ---popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); ---popover-header-padding-x: 1rem; ---popover-header-padding-y: 0.5rem; ---popover-header-font-size: 1rem; ---popover-header-color: ; ---popover-header-bg: var(--tertiary-bg); ---popover-body-padding-x: 1rem; ---popover-body-padding-y: 1rem; ---popover-body-color: var(--body-color); ---popover-arrow-width: 1rem; ---popover-arrow-height: 0.5rem; ---popover-arrow-border: var(--popover-border-color); - -/* ===== SPINNER ===== */ ---spinner-width: 2rem; ---spinner-height: 2rem; ---spinner-vertical-align: -0.125em; ---spinner-border-width: 0.25em; ---spinner-animation-speed: 0.75s; - -/* ===== NAV TABS ===== */ ---nav-tabs-border-width: 1px; ---nav-tabs-border-color: var(--border-color); ---nav-tabs-border-radius: 0.25rem; ---nav-tabs-link-active-color: var(--body-color); ---nav-tabs-link-active-bg: var(--secondary-bg); ---nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--secondary-bg); - -/* ===== NAV PILLS ===== */ ---nav-pills-border-radius: 0.25rem; ---nav-pills-link-active-color: var(--body-color); ---nav-pills-link-active-bg: hsl(240, 98%, 17%); - -/* ===== TABLE ===== */ ---table-color: var(--body-color); ---table-bg: transparent; ---table-border-color: var(--border-color); ---table-accent-bg: transparent; ---table-striped-color: var(--body-color); ---table-striped-bg: rgba(var(--white-rgb), var(--opacity-5)); ---table-active-color: var(--body-color); ---table-active-bg: rgba(var(--white-rgb), 0.1); - -/* ===== FOOTER ===== */ ---footer-padding-top: 1rem; ---footer-padding-bottom: 80px; ---footer-grid-padding-y: 2.5rem; ---footer-grid-padding-x: 0.5em; - -/* ===== BACKDROP ===== */ ---backdrop-zindex: 1040; ---backdrop-bg: hsl(0, 0%, 0%); ---backdrop-opacity: 0.5; -} - -.btn { - --btn-padding-x: 1rem; - --btn-padding-y: 0.6rem; - --btn-font-family: inherit; - --btn-font-size: 1rem; - --btn-font-weight: 400; - --btn-line-height: 1.5; - --btn-color: var(--white); - --btn-bg: var(--body-bg); - --btn-border-width: 1px; - --btn-border-color: transparent; - --btn-border-radius: 0.25rem; - --btn-active-border-color: transparent; - --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - --btn-disabled-opacity: 0.65; - --btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5); - display: inline-block; - padding: var(--btn-padding-y) var(--btn-padding-x); - font-family: var(--btn-font-family); - font-size: var(--btn-font-size); - font-weight: var(--btn-font-weight); - line-height: var(--btn-line-height); - color: var(--btn-color); - text-align: center; - text-decoration: none; - vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: var(--btn-border-width) solid var(--btn-border-color); - border-radius: var(--btn-border-radius); - background-color: var(--btn-bg); - -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; - -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -} - -/* Buttons — inherit brand hues; ensure strong contrast on dark bg */ -.btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(240, 98%, 17%); - --btn-border-color: hsl(240, 98%, 17%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #010149; - --btn-hover-border-color: #010145; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #010145; - --btn-active-border-color: #010141; -} - -.btn-secondary { - --btn-color: var(--nav-text-color); - --btn-bg: var(--nav-bg-color); - --btn-border-color: #3a4250; - --btn-hover-color: #fff; - --btn-hover-bg: #1b2a55; - --btn-hover-border-color: #162448; - --btn-focus-shadow-rgb: 84, 114, 255; - --btn-active-color: #fff; - --btn-active-bg: #162448; - --btn-active-border-color: #12203f; -} - -.btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(120, 35%, 45%); - --btn-border-color: hsl(120, 35%, 45%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(120, 35%, 40%); - --btn-hover-border-color: hsl(120, 35%, 38%); - --btn-focus-shadow-rgb: 96, 180, 96; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(120, 35%, 38%); - --btn-active-border-color: hsl(120, 35%, 36%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(120, 35%, 45%); - --btn-disabled-border-color: hsl(120, 35%, 45%); -} - -.btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(207, 55%, 55%); - --btn-border-color: hsl(207, 55%, 55%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(207, 55%, 50%); - --btn-hover-border-color: hsl(207, 55%, 48%); - --btn-focus-shadow-rgb: 100, 160, 210); - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(207, 55%, 48%); - --btn-active-border-color: hsl(207, 55%, 46%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(207, 55%, 55%); - --btn-disabled-border-color: hsl(207, 55%, 55%); -} - -.btn-warning { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(38, 100%, 50%); - --btn-border-color: hsl(38, 100%, 50%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(38, 100%, 45%); - --btn-hover-border-color: hsl(38, 100%, 43%); - --btn-focus-shadow-rgb: 220, 170, 40; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(38, 100%, 43%); - --btn-active-border-color: hsl(38, 100%, 41%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(38, 100%, 50%); - --btn-disabled-border-color: hsl(38, 100%, 50%); -} - -.btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(3, 82%, 50%); - --btn-border-color: hsl(3, 82%, 50%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(3, 82%, 45%); - --btn-hover-border-color: hsl(3, 82%, 43%); - --btn-focus-shadow-rgb: 220, 80, 80; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(3, 82%, 43%); - --btn-active-border-color: hsl(3, 82%, 41%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(3, 82%, 50%); - --btn-disabled-border-color: hsl(3, 82%, 50%); -} - -.btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: hsl(210, 17%, 85%); - --btn-border-color: hsl(210, 17%, 85%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 17%, 80%); - --btn-hover-border-color: hsl(210, 17%, 78%); - --btn-focus-shadow-rgb: 200, 205, 210; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 17%, 78%); - --btn-active-border-color: hsl(210, 17%, 76%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: hsl(210, 17%, 85%); - --btn-disabled-border-color: hsl(210, 17%, 85%); -} - -.btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: hsl(210, 10%, 20%); - --btn-border-color: hsl(210, 10%, 20%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 18%); - --btn-hover-border-color: hsl(210, 10%, 16%); - --btn-focus-shadow-rgb: 60, 65, 70; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 16%); - --btn-active-border-color: hsl(210, 10%, 14%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: hsl(210, 10%, 20%); - --btn-disabled-border-color: hsl(210, 10%, 20%); -} - -.btn-outline-primary { - --btn-color: hsl(240, 98%, 40%); - --btn-border-color: hsl(240, 98%, 40%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(240, 98%, 40%); - --btn-hover-border-color: hsl(240, 98%, 40%); - --btn-focus-shadow-rgb: 80, 80, 180; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(240, 98%, 40%); - --btn-active-border-color: hsl(240, 98%, 40%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(240, 98%, 40%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(240, 98%, 40%); - --gradient: none; -} - -.btn-outline-secondary { - --btn-color: hsl(210, 20%, 60%); - --btn-border-color: hsl(210, 20%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(210, 20%, 60%); - --btn-hover-border-color: hsl(210, 20%, 60%); - --btn-focus-shadow-rgb: 120, 140, 160; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(210, 20%, 60%); - --btn-active-border-color: hsl(210, 20%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 20%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 20%, 60%); - --gradient: none; -} - -.btn-outline-success { - --btn-color: hsl(120, 35%, 55%); - --btn-border-color: hsl(120, 35%, 55%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(120, 35%, 55%); - --btn-hover-border-color: hsl(120, 35%, 55%); - --btn-focus-shadow-rgb: 100, 190, 100; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(120, 35%, 55%); - --btn-active-border-color: hsl(120, 35%, 55%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(120, 35%, 55%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(120, 35%, 55%); - --gradient: none; -} - -.btn-outline-info { - --btn-color: hsl(207, 55%, 65%); - --btn-border-color: hsl(207, 55%, 65%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(207, 55%, 65%); - --btn-hover-border-color: hsl(207, 55%, 65%); - --btn-focus-shadow-rgb: 110, 170, 220; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(207, 55%, 65%); - --btn-active-border-color: hsl(207, 55%, 65%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(207, 55%, 65%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(207, 55%, 65%); - --gradient: none; -} - -.btn-outline-warning { - --btn-color: hsl(38, 100%, 60%); - --btn-border-color: hsl(38, 100%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(38, 100%, 60%); - --btn-hover-border-color: hsl(38, 100%, 60%); - --btn-focus-shadow-rgb: 240, 190, 70; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(38, 100%, 60%); - --btn-active-border-color: hsl(38, 100%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(38, 100%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(38, 100%, 60%); - --gradient: none; -} - -.btn-outline-danger { - --btn-color: hsl(3, 82%, 60%); - --btn-border-color: hsl(3, 82%, 60%); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: hsl(3, 82%, 60%); - --btn-hover-border-color: hsl(3, 82%, 60%); - --btn-focus-shadow-rgb: 240, 100, 100; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: hsl(3, 82%, 60%); - --btn-active-border-color: hsl(3, 82%, 60%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(3, 82%, 60%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(3, 82%, 60%); - --gradient: none; -} - -/* Outline buttons on dark: keep readable borders */ -.btn-outline-light { - --btn-color: #e6ebf1; - --btn-border-color: #e6ebf1; - --btn-hover-color: #111; - --btn-hover-bg: #e6ebf1; - --btn-hover-border-color: #e6ebf1; - --btn-active-color: #111; - --btn-active-bg: #d7dce2; - --btn-active-border-color: #d7dce2; - --gradient: none; -} - -.btn-outline-dark { - --btn-color: hsl(210, 10%, 30%); - --btn-border-color: hsl(210, 10%, 30%); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: hsl(210, 10%, 30%); - --btn-hover-border-color: hsl(210, 10%, 30%); - --btn-focus-shadow-rgb: 70, 75, 80; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: hsl(210, 10%, 30%); - --btn-active-border-color: hsl(210, 10%, 30%); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(210, 10%, 30%); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: hsl(210, 10%, 30%); - --gradient: none; -} - -/* Links as buttons */ -.btn-link { - --btn-font-weight: 400; - --btn-color: var(--color-link); - --btn-bg: transparent; - --btn-border-color: transparent; - --btn-hover-color: var(--link-hover-color); - --btn-hover-border-color: transparent; - --btn-active-color: var(--link-hover-color); - --btn-active-border-color: transparent; - --btn-disabled-color: #6d7781; - --btn-disabled-border-color: transparent; - --btn-box-shadow: none; - --btn-focus-shadow-rgb: 84, 114, 255; - text-decoration: underline; -} - -.navbar-brand img { - max-height: 100px; - width: auto; - height: auto; -} diff --git a/src/templates/light.custom.css b/src/templates/light.custom.css deleted file mode 100644 index b7be5a7..0000000 --- a/src/templates/light.custom.css +++ /dev/null @@ -1,1154 +0,0 @@ -@charset "UTF-8"; -/* ----------------------------------------------- - * CUSTOM LIGHT THEME - * Merged from light.standard.css with custom overrides. - * --------------------------------------------- */ - -:root[data-bs-theme="light"]{ - -color-scheme: light; - -/* ===== BRAND & THEME COLORS ===== */ ---color-primary: #a3cde2; ---accent-color-primary: #df4830; ---accent-color-secondary: #eec234; - -/* ===== NAVIGATION ===== */ ---mainmenu-nav-link-color: #f8fbfc; ---nav-text-color: #f8fbfc; ---nav-bg-color: #112855; - -/* ===== LINKS ===== */ ---color-link: #112855; ---color-hover: var(--accent-color-primary); ---link-color: #112855; ---link-color-rgb: 17, 40, 85; ---link-decoration: underline; ---link-hover-color: var(--accent-color-primary); ---link-hover-color-rgb: 223, 72, 48; ---link-active-color: var(--link-color); - -/* ===== NAVBAR ===== */ ---navbar-padding-x: 1rem; ---navbar-padding-y: 0.5rem; ---navbar-color: var(--nav-text-color); ---navbar-active-color: var(--mainmenu-nav-link-color); ---navbar-disabled-color: #6c757d; ---navbar-brand-padding-y: 0.3125rem; ---navbar-brand-margin-end: 1rem; ---navbar-brand-font-size: 1.25rem; ---navbar-brand-color: var(--nav-text-color); ---navbar-brand-active-color: var(--mainmenu-nav-link-color); ---navbar-nav-link-padding-x: 0.5rem; ---navbar-toggler-padding-y: 0.25rem; ---navbar-toggler-padding-x: 0.75rem; ---navbar-toggler-font-size: 1.25rem; ---navbar-toggler-border-color: rgba(0, 0, 0, 0.1); ---navbar-toggler-border-radius: 0.25rem; ---navbar-toggler-focus-width: 0.25rem; ---navbar-toggler-transition: box-shadow 0.15s ease-in-out; ---nav-link-padding-x: 1rem; ---nav-link-padding-y: 0.5rem; ---nav-link-font-weight: 400; ---nav-link-color: var(--nav-text-color); ---nav-link-active-color: var(--mainmenu-nav-link-color); ---nav-link-disabled-color: #6c757d; - -/* ===== TYPOGRAPHY & BODY ===== */ ---font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; ---font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; ---body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); ---body-font-size: 1rem; ---body-font-weight: 400; ---body-line-height: 1.5; ---body-color: #22262a; ---body-color-rgb: 34, 38, 42; ---body-bg: #fff; ---body-bg-rgb: 255, 255, 255; ---heading-color: inherit; ---emphasis-color: #000; ---emphasis-color-rgb: 0, 0, 0; ---secondary-color: #22262abf; ---secondary-color-rgb: 34, 38, 42; ---tertiary-color: #22262a80; ---tertiary-color-rgb: 34, 38, 42; ---muted-color: #6d757e; ---code-color: black; ---code-color-ink: var(--code-color, #e93f8e); ---code-bg-color: lightgreen; ---highlight-color: #22262a; ---highlight-bg: #fbeea8; - -/* ===== LAYOUT & SPACING ===== */ ---padding-x: 0.15rem; ---padding-y: 0.15rem; ---bg-opacity: 1; ---nav-toggle-size: 3rem; ---gradient: linear-gradient(180deg, #ffffff26, #fff0); ---secondary-bg: #eaedf0; ---secondary-bg-rgb: 234, 237, 240; ---tertiary-bg: #f9fafb; ---tertiary-bg-rgb: 249, 250, 251; ---hr-color: var(--border-color, #dfe3e7); ---border-color-soft: var(--border-color, #dfe3e7); ---kbd-bg: var(--secondary-bg, #eaedf0); ---kbd-ink: var(--body-bg, #fff); ---toc-bg: var(--secondary-bg, #eaedf0); ---toc-ink: var(--color-primary, #112855); ---selection-bg: var(--highlight-bg, #fbeea8); ---selection-ink: var(--body-color, #22262a); ---border: 5px; - -/* ===== BREAKPOINTS ===== */ ---bp-xs: 0; ---bp-sm: 576px; ---bp-md: 768px; ---bp-lg: 992px; ---bp-xl: 1200px; - -/* ===== BOOTSTRAP PALETTE ===== */ ---primary: #010156; ---secondary: #6d757e; ---success: #448344; ---info: #30638d; ---warning: #ad6200; ---danger: #a51f18; ---light: #f9fafb; ---dark: #353b41; ---primary-rgb: 1, 1, 86; ---secondary-rgb: 109, 117, 126; ---success-rgb: 68, 131, 68; ---info-rgb: 48, 99, 141; ---warning-rgb: 173, 98, 0; ---danger-rgb: 165, 31, 24; ---light-rgb: 249, 250, 251; ---dark-rgb: 53, 59, 65; ---primary-text-emphasis: #002; ---secondary-text-emphasis: #2c2f32; ---success-text-emphasis: #1b351b; ---info-text-emphasis: #132838; ---warning-text-emphasis: #452700; ---danger-text-emphasis: #420c09; ---light-text-emphasis: #484f56; ---dark-text-emphasis: #484f56; ---primary-bg-subtle: #ccd; ---secondary-bg-subtle: #e2e3e5; ---success-bg-subtle: #dae6da; ---info-bg-subtle: #d6e0e8; ---warning-bg-subtle: #efe0cc; ---danger-bg-subtle: #edd2d1; ---light-bg-subtle: #fcfcfd; ---dark-bg-subtle: #ced4da; ---primary-border-subtle: #99b; ---secondary-border-subtle: #c5c8cb; ---success-border-subtle: #b4ceb4; ---info-border-subtle: #acc1d1; ---warning-border-subtle: #dec099; ---danger-border-subtle: #dba5a2; ---light-border-subtle: #eaedf0; ---dark-border-subtle: #adb5bd; - -/* ===== ALERT LINK COLORS ===== */ ---alert-primary-link-color: #01012a; ---alert-secondary-link-color: #34383d; ---alert-success-link-color: #213f21; ---alert-info-link-color: #172f44; ---alert-warning-link-color: #532f00; ---alert-danger-link-color: #4f0f0b; ---alert-light-link-color: #505050; ---alert-dark-link-color: #1a1c1f; - -/* ===== LIST GROUP ITEM COLORS ===== */ ---list-group-item-primary-color: #010134; ---list-group-item-primary-bg: #ccccdd; ---list-group-item-primary-active-bg: #b8b8c7; ---list-group-item-secondary-color: #41464c; ---list-group-item-secondary-bg: #e2e3e5; ---list-group-item-secondary-active-bg: #cbccce; ---list-group-item-success-color: #294f29; ---list-group-item-success-bg: #dae6da; ---list-group-item-success-active-bg: #c4cfc4; ---list-group-item-info-color: #1d3b55; ---list-group-item-info-bg: #d6e0e8; ---list-group-item-info-active-bg: #c1cad1; ---list-group-item-warning-color: #683b00; ---list-group-item-warning-bg: #efe0cc; ---list-group-item-warning-active-bg: #d7cab8; ---list-group-item-danger-color: #63130e; ---list-group-item-danger-bg: #edd2d1; ---list-group-item-danger-active-bg: #d5bdbc; ---list-group-item-light-color: #646464; ---list-group-item-light-bg: #fefefe; ---list-group-item-light-active-bg: #e5e5e5; ---list-group-item-dark-color: #202327; ---list-group-item-dark-bg: #d7d8d9; ---list-group-item-dark-active-bg: #c2c2c3; - -/* ===== LINK UTILITY COLORS ===== */ ---link-primary-color: hsl(240, 98%, 17%); ---link-primary-hover-color: #010145; ---link-secondary-color: hsl(210, 7%, 46%); ---link-secondary-hover-color: #575e65; ---link-success-color: hsl(120, 32%, 39%); ---link-success-hover-color: #366936; ---link-info-color: hsl(207, 49%, 37%); ---link-info-hover-color: #264f71; ---link-warning-color: hsl(34, 100%, 34%); ---link-warning-hover-color: #8a4e00; ---link-danger-color: hsl(3, 75%, 37%); ---link-danger-hover-color: #841913; ---link-light-color: hsl(210, 17%, 98%); ---link-light-hover-color: #fafbfc; ---link-dark-color: hsl(210, 10%, 23%); ---link-dark-hover-color: #2a2f34; - -/* ===== COMPONENT-SPECIFIC COLORS ===== */ ---mod-finder-link-hover: #e6e6e6; ---form-legend-color: #495057; ---border-gray: #b2bfcd; ---subhead-color: #495057; ---box-shadow-gray: #ddd; ---btn-active-text-gray: #A0A0A0; ---indicator-success-bg: var(--success); ---item-list-color: #F5F5F5; ---notification-badge-bg: var(--danger); ---content-bg-gray: #DDD; ---taba-btn-green: #7ac143; ---taba-btn-blue: #5091cd; ---taba-btn-red: #f44321; ---taba-btn-gray: #AAA; ---taba-msg-bg: #f5f5f5; ---toc-link-color: #767676; ---toc-link-active-color: #563d7c; ---choices-disabled-bg: #eaeaea; ---choices-input-bg: var(--white); ---choices-border-light: #ddd; ---choices-arrow-color: #333; ---choices-inner-bg: #f9f9f9; ---choices-focused-border: #b7b7b7; ---choices-dropdown-bg: var(--white); ---choices-item-bg: #00bcd4; ---choices-item-border: #00a5bb; ---choices-item-hover-bg: #00a5bb; ---choices-item-hover-border: #008fa1; ---choices-item-disabled-bg: #aaaaaa; ---choices-item-disabled-border: #919191; ---choices-item-highlighted: #f2f2f2; ---choices-input-inner-bg: #f9f9f9; - -/* ===== STANDARD COLORS ===== */ ---blue: #010156; ---indigo: #6812f3; ---purple: #6f42c2; ---pink: #e93f8e; ---red: #a51f18; ---orange: #fd7e17; ---yellow: #ad6200; ---green: #448344; ---teal: #5abfdd; ---cyan: #30638d; ---black: #000; ---white: #fff; - -/* ===== GRAY SCALE ===== */ ---gray-100: #f9fafb; ---gray-200: #eaedf0; ---gray-300: #dfe3e7; ---gray-400: #ced4da; ---gray-500: #adb5bd; ---gray-600: #6d757e; ---gray-700: #484f56; ---gray-800: #353b41; ---gray-900: #22262a; ---white-rgb: 255, 255, 255; ---black-rgb: 0, 0, 0; - -/* ===== OPACITY UTILITIES ===== */ ---opacity-0: 0; ---opacity-5: 0.05; ---opacity-10: 0.1; ---opacity-15: 0.15; ---opacity-20: 0.2; ---opacity-25: 0.25; ---opacity-30: 0.3; ---opacity-50: 0.5; ---opacity-75: 0.75; ---opacity-100: 1; - -/* ===== COMMON SHADOW COLORS ===== */ ---shadow-color-light: rgba(var(--black-rgb), var(--opacity-15)); ---shadow-color-medium: rgba(var(--black-rgb), var(--opacity-25)); ---shadow-color-dark: rgba(var(--black-rgb), var(--opacity-30)); ---border-color-translucent: rgba(var(--black-rgb), var(--opacity-10)); ---highlight-translucent: rgba(var(--white-rgb), var(--opacity-15)); - -/* ===== HEADER BACKGROUND ===== */ ---header-background-image: url('../../../../../../media/templates/site/mokocassiopeia/images/bg.svg'); ---header-background-attachment: fixed; ---header-background-repeat: repeat; ---header-background-size: auto; - -/* ===== CONTAINER BACKGROUNDS ===== */ -/* Below Topbar Container */ ---container-below-topbar-bg-image: none; ---container-below-topbar-bg-color: transparent; ---container-below-topbar-bg-position: auto; ---container-below-topbar-bg-attachment: fixed; ---container-below-topbar-bg-repeat: repeat; ---container-below-topbar-bg-size: auto; ---container-below-topbar-border: none; ---container-below-topbar-border-radius: 0; - -/* Top A Container */ ---container-top-a-bg-image: none; ---container-top-a-bg-color: transparent; ---container-top-a-bg-position: auto; ---container-top-a-bg-attachment: fixed; ---container-top-a-bg-repeat: repeat; ---container-top-a-bg-size: auto; ---container-top-a-border: none; ---container-top-a-border-radius: 0; - -/* Top B Container */ ---container-top-b-bg-image: none; ---container-top-b-bg-color: transparent; ---container-top-b-bg-position: auto; ---container-top-b-bg-attachment: fixed; ---container-top-b-bg-repeat: repeat; ---container-top-b-bg-size: auto; ---container-top-b-border: none; ---container-top-b-border-radius: 0; - -/* TOC Container */ ---container-toc-bg: var(--mainmenu-nav-link-color); ---container-toc-color: var(--color-primary); - -/* Sidebar Container */ ---container-sidebar-bg-image: none; ---container-sidebar-bg-color: transparent; ---container-sidebar-bg-position: auto; ---container-sidebar-bg-attachment: scroll; ---container-sidebar-bg-repeat: repeat; ---container-sidebar-bg-size: auto; ---container-sidebar-border: none; ---container-sidebar-border-radius: 0; - -/* Bottom A Container */ ---container-bottom-a-bg-image: none; ---container-bottom-a-bg-color: transparent; ---container-bottom-a-bg-position: auto; ---container-bottom-a-bg-attachment: fixed; ---container-bottom-a-bg-repeat: repeat; ---container-bottom-a-bg-size: auto; ---container-bottom-a-border: none; ---container-bottom-a-border-radius: 0; - -/* Bottom B Container */ ---container-bottom-b-bg-image: none; ---container-bottom-b-bg-color: transparent; ---container-bottom-b-bg-position: auto; ---container-bottom-b-bg-attachment: fixed; ---container-bottom-b-bg-repeat: repeat; ---container-bottom-b-bg-size: auto; ---container-bottom-b-border: none; ---container-bottom-b-border-radius: 0; - -/* ===== BORDERS ===== */ ---border-width: 1px; ---border-style: solid; ---border-color: #dfe3e7; ---border-color-translucent: #0000002d; ---border-radius: .25rem; ---border-radius-sm: .2rem; ---border-radius-lg: .3rem; ---border-radius-xl: .3rem; ---border-radius-xxl: 2rem; ---border-radius-2xl: var(--border-radius-xxl)*2; ---border-radius-pill: 50rem; - -/* ===== SHADOWS ===== */ ---box-shadow: 0 .5rem 1rem #00000026; ---box-shadow-sm: 0 .125rem .25rem #00000013; ---box-shadow-lg: 0 1rem 3rem #0000002d; ---box-shadow-inset: inset 0 1px 2px #00000013; - -/* ===== FOCUS & FORMS ===== */ ---focus-ring-width: .25rem; ---focus-ring-opacity: .25; ---focus-ring-color: #01015640; ---input-color: hsl(210, 11%, 15%); ---input-bg: hsl(210, 20%, 98%); ---input-border-color: hsl(210, 14%, 83%); ---input-focus-border-color: #8894aa; ---input-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---input-placeholder-color: hsl(210, 7%, 46%); ---input-disabled-bg: hsl(210, 16%, 93%); ---input-disabled-border-color: hsl(210, 14%, 83%); ---input-file-button-active-bg: #dee1e4; ---form-range-thumb-active-bg: #b8bfcc; ---form-valid-color: #448344; ---form-valid-border-color: #448344; ---form-invalid-color: #a51f18; ---form-invalid-border-color: #a51f18; - -/* ===== BUTTONS ===== */ ---btn-border-radius: var(--border-radius); ---btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); - -/* ===== CARDS ===== */ ---card-spacer-y: 1rem; ---card-spacer-x: 1rem; ---card-title-spacer-y: 0.5rem; ---card-border-width: 1px; ---card-border-color: var(--border-color); ---card-border-radius: var(--border-radius); ---card-box-shadow: none; ---card-inner-border-radius: calc(var(--border-radius) - 1px); ---card-cap-padding-y: 0.5rem; ---card-cap-padding-x: 1rem; ---card-cap-bg: rgba(0, 0, 0, 0.03); ---card-cap-color: var(--body-color); ---card-height: auto; ---card-color: var(--body-color); ---card-bg: var(--body-bg); ---card-img-overlay-padding: 1rem; ---card-group-margin: 0.75rem; - -/* ===== VIRTUEMART (VM) ===== */ -/* VM Surfaces */ ---vm-surface: #ffffff; ---vm-surface-2: #f8f9fa; ---vm-text: var(--body-color); ---vm-text-strong: #000000; ---vm-text-muted: #6c757d; ---vm-border: var(--border-color); ---vm-price-color: var(--success); - -/* VM Layout and Density */ ---vm-container-max-width: 1200px; ---vm-section-gap: 2rem; ---vm-block-radius: var(--border-radius); ---vm-block-shadow: var(--box-shadow-sm); - -/* VM Typography */ ---vm-category-title-size: 2rem; ---vm-subcategory-title-size: 1.5rem; ---vm-page-title-size: 1.75rem; ---vm-products-type-title-size: 1.25rem; ---vm-product-title-size: 1.125rem; ---vm-product-title-weight: 500; ---vm-products-type-title-weight: 600; ---vm-price-size: 1.5rem; ---vm-price-detail-size: 1.125rem; ---vm-price-desc-size: 0.875rem; - -/* VM Controls */ ---vm-input-radius: var(--border-radius); ---vm-input-shadow: var(--box-shadow-sm); ---vm-qty-width: 80px; ---vm-cart-dropdown-min-width: 300px; - -/* VM Alerts */ ---vm-alert-radius: var(--border-radius); ---vm-alert-shadow: var(--box-shadow-sm); ---vm-availability-bg: var(--success-bg-subtle); ---vm-availability-text: var(--success); - -/* VM Buttons */ ---vm-btn-padding-x: 1rem; ---vm-btn-padding-y: 0.5rem; ---vm-btn-radius: var(--border-radius); ---vm-btn-shadow: var(--box-shadow-sm); ---vm-btn-primary-bg: var(--primary); ---vm-btn-primary-text: #ffffff; ---vm-btn-primary-border: var(--primary); ---vm-btn-secondary-bg: var(--secondary); ---vm-btn-secondary-text: #ffffff; ---vm-btn-secondary-border: var(--secondary); - -/* VM Image Overlay Controls */ ---vm-image-overlay-gap-x: 0.5rem; ---vm-image-overlay-gap-y: 0.5rem; ---vm-image-overlay-raise: 0.25rem; ---vm-image-overlay-btn-size: 2.5rem; ---vm-image-overlay-btn-radius: 50%; ---vm-image-overlay-btn-bg: rgba(255, 255, 255, 0.9); ---vm-image-overlay-btn-bg-hover: rgba(255, 255, 255, 1); ---vm-image-overlay-btn-border-color: rgba(0, 0, 0, 0.1); ---vm-image-overlay-btn-border-width: 1px; ---vm-image-overlay-btn-color: var(--body-color); ---vm-image-overlay-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - -/* VM Vendor Menu */ ---vm-vendor-menu-bg: var(--body-bg); ---vm-vendor-menu-border: var(--border-color); ---vm-vendor-menu-radius: var(--border-radius); ---vm-vendor-menu-shadow: var(--box-shadow-sm); ---vm-vendor-menu-item-gap: 0.25rem; ---vm-vendor-menu-item-padding-x: 1rem; ---vm-vendor-menu-item-padding-y: 0.5rem; ---vm-vendor-menu-pill-radius: 50rem; ---vm-vendor-menu-link: var(--link-color); ---vm-vendor-menu-link-hover: var(--link-hover-color); ---vm-vendor-menu-link-active: var(--primary); ---vm-vendor-menu-hover-bg: var(--secondary-bg); - -/* ===== GABLE ===== */ ---gab-blue: #0066cc; ---gab-green: #28a745; ---gab-red: #dc3545; ---gab-orange: #fd7e14; ---gab-gray1: #495057; ---gab-gray2: #6c757d; ---gab-gray3: #adb5bd; - -/* ===== HERO / BANNER OVERLAY ===== */ ---hero-height: 70vh; ---hero-color: var(--body-color); ---hero-bg-repeat: no-repeat; ---hero-bg-attachment: fixed; ---hero-bg-position: top center; ---hero-bg-size: cover; ---hero-border-bottom: solid var(--accent-color-secondary); ---hero-overlay-bg: hsla(0, 0%, 0%, 0.1); ---hero-overlay-bg-position: center; ---hero-overlay-bg-size: cover; ---hero-overlay-padding: 1em; ---hero-overlay-text-align: center; ---hero-overlay-text-color: var(--body-color); - -/* ===== HERO VARIANTS ===== */ -/* Primary — sky blue, light overlay */ ---hero-primary-bg-color: var(--color-primary); ---hero-primary-overlay: linear-gradient(rgba(163, 205, 226, .45), rgba(163, 205, 226, .45)); ---hero-primary-color: #112855; - -/* Secondary — navy, stronger overlay */ ---hero-secondary-bg-color: #112855; ---hero-secondary-overlay: linear-gradient(rgba(17, 40, 85, .75), rgba(17, 40, 85, .75)); ---hero-secondary-color: #f1f5f9; - -/* ===== HERO CARD (inner .hero element) ===== */ -/* Default card — uses primary variant values */ ---hero-card-bg: var(--hero-primary-bg-color); ---hero-card-color: var(--hero-primary-color); ---hero-card-overlay: var(--hero-primary-overlay); ---hero-card-border-radius: .5rem; ---hero-card-padding-x: 2rem; ---hero-card-padding-y: 3rem; ---hero-card-max-width: 600px; - -/* Alternative card — uses secondary variant values */ ---hero-alt-card-bg: var(--hero-secondary-bg-color); ---hero-alt-card-color: var(--hero-secondary-color); ---hero-alt-card-overlay: var(--hero-secondary-overlay); ---hero-alt-card-border-radius: .5rem; ---hero-alt-card-padding-x: 2rem; ---hero-alt-card-padding-y: 3rem; ---hero-alt-card-max-width: 600px; - -/* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */ ---block-color-1: var(--color-primary); ---block-text-1: #112855; - ---block-color-2: var(--accent-color-primary); ---block-text-2: #fff; - ---block-color-3: #eec234; ---block-text-3: #22262a; - ---block-color-4: #eef7f0; ---block-text-4: #22262a; - -/* ===== BLOCK COLOR OVERRIDES ===== */ ---block-highlight-bg: var(--accent-color-primary); ---block-highlight-text: #fff; - ---block-cta-bg: #112855; ---block-cta-text: #fff; - ---block-alert-bg: var(--accent-color-primary); ---block-alert-text: #fff; - -/* ===== OFFCANVAS ===== */ ---offcanvas-zindex: 1045; ---offcanvas-width: 400px; ---offcanvas-height: 30vh; ---offcanvas-padding-x: 1rem; ---offcanvas-padding-y: 1rem; ---offcanvas-color: var(--body-color); ---offcanvas-bg: var(--body-bg); ---offcanvas-border-width: 1px; ---offcanvas-border-color: var(--border-color-translucent); ---offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - -/* ===== ACCORDION ===== */ ---accordion-color: hsl(210, 11%, 15%); ---accordion-bg: var(--body-bg); ---accordion-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, border-radius 0.15s ease; ---accordion-border-color: var(--border-color); ---accordion-border-width: 1px; ---accordion-border-radius: 0.25rem; ---accordion-inner-border-radius: calc(0.25rem - 1px); ---accordion-btn-padding-x: 1.25rem; ---accordion-btn-padding-y: 1rem; ---accordion-btn-color: hsl(210, 11%, 15%); ---accordion-btn-bg: var(--accordion-bg); ---accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl%28210, 11%25, 15%25%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-icon-width: 1.25rem; ---accordion-btn-icon-transform: rotate(-180deg); ---accordion-btn-icon-transition: transform 0.2s ease-in-out; ---accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f244d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); ---accordion-btn-focus-border-color: var(--input-focus-border-color); ---accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---accordion-body-padding-x: 1.25rem; ---accordion-body-padding-y: 1rem; ---accordion-active-color: #0f244d; ---accordion-active-bg: #e7eaee; - -/* ===== BREADCRUMB ===== */ ---breadcrumb-padding-x: 0; ---breadcrumb-padding-y: 0; ---breadcrumb-margin-bottom: 1rem; ---breadcrumb-bg: ; ---breadcrumb-border-radius: ; ---breadcrumb-divider-color: hsl(210, 7%, 46%); ---breadcrumb-item-padding-x: 0.5rem; ---breadcrumb-item-active-color: var(--link-color); - -/* ===== PAGINATION ===== */ ---pagination-padding-x: 0.75rem; ---pagination-padding-y: 0.375rem; ---pagination-font-size: 1rem; ---pagination-color: var(--link-color); ---pagination-bg: var(--body-bg); ---pagination-border-width: 1px; ---pagination-border-color: hsl(210, 14%, 89%); ---pagination-border-radius: 0.25rem; ---pagination-focus-color: var(--link-active-color); ---pagination-focus-bg: hsl(210, 16%, 93%); ---pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); ---pagination-active-color: var(--body-bg); ---pagination-active-bg: hsl(240, 98%, 17%); ---pagination-active-border-color: hsl(240, 98%, 17%); ---pagination-disabled-color: hsl(210, 7%, 46%); ---pagination-disabled-bg: var(--body-bg); ---pagination-disabled-border-color: hsl(210, 14%, 89%); - -/* ===== BADGE ===== */ ---badge-padding-x: 0.65em; ---badge-padding-y: 0.35em; ---badge-font-size: 0.75em; ---badge-font-weight: 700; ---badge-color: var(--body-bg); ---badge-border-radius: 0.25rem; - -/* ===== ALERT ===== */ ---alert-bg: transparent; ---alert-padding-x: 1rem; ---alert-padding-y: 1rem; ---alert-margin-bottom: 1rem; ---alert-color: #000; ---alert-border-color: transparent; ---alert-border: 1px solid var(--alert-border-color); ---alert-border-radius: 0.25rem; - -/* ===== PROGRESS ===== */ ---progress-height: 1rem; ---progress-font-size: 0.75rem; ---progress-bg: hsl(210, 16%, 93%); ---progress-border-radius: 0.25rem; ---progress-box-shadow: inset 0 1px 2px rgba(var(--black-rgb), 0.075); ---progress-bar-color: var(--body-bg); ---progress-bar-bg: hsl(240, 98%, 17%); ---progress-bar-transition: width 0.6s ease; - -/* ===== LIST GROUP ===== */ ---list-group-color: hsl(210, 11%, 15%); ---list-group-bg: var(--body-bg); ---list-group-border-color: rgba(var(--black-rgb), 0.125); ---list-group-border-width: 1px; ---list-group-border-radius: 0.25rem; ---list-group-item-padding-x: 1rem; ---list-group-item-padding-y: 0.5rem; ---list-group-action-color: hsl(210, 9%, 31%); ---list-group-action-active-color: hsl(210, 11%, 15%); ---list-group-action-active-bg: hsl(210, 16%, 93%); ---list-group-disabled-color: hsl(210, 7%, 46%); ---list-group-disabled-bg: var(--body-bg); ---list-group-active-color: var(--body-bg); ---list-group-active-bg: hsl(240, 98%, 17%); ---list-group-active-border-color: hsl(240, 98%, 17%); - -/* ===== DROPDOWN ===== */ ---dropdown-zindex: 1000; ---dropdown-min-width: 10rem; ---dropdown-padding-x: 0; ---dropdown-padding-y: 0.5rem; ---dropdown-spacer: 0.125rem; ---dropdown-font-size: 1rem; ---dropdown-color: hsl(210, 11%, 15%); ---dropdown-bg: var(--body-bg); ---dropdown-border-color: var(--border-color-translucent); ---dropdown-border-radius: 0.25rem; ---dropdown-border-width: 1px; ---dropdown-inner-border-radius: calc(0.25rem - 1px); ---dropdown-divider-bg: var(--border-color-translucent); ---dropdown-divider-margin-y: 0.5rem; ---dropdown-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); ---dropdown-link-color: hsl(210, 11%, 15%); ---dropdown-link-active-color: var(--body-bg); ---dropdown-link-active-bg: hsl(240, 98%, 17%); ---dropdown-link-disabled-color: hsl(210, 11%, 71%); ---dropdown-item-padding-x: 1rem; ---dropdown-item-padding-y: 0.25rem; ---dropdown-header-color: hsl(210, 7%, 46%); ---dropdown-header-padding-x: 1rem; ---dropdown-header-padding-y: 0.5rem; - -/* ===== TOAST ===== */ ---toast-zindex: 1090; ---toast-padding-x: 0.75rem; ---toast-padding-y: 0.5rem; ---toast-spacing: 1em; ---toast-max-width: 350px; ---toast-font-size: 0.875rem; ---toast-color: ; ---toast-bg: rgba(255, 255, 255, 0.85); ---toast-border-width: 1px; ---toast-border-color: var(--border-color-translucent); ---toast-border-radius: 0.25rem; ---toast-box-shadow: 0 0.5rem 1rem var(--shadow-color-light); ---toast-header-color: hsl(210, 7%, 46%); ---toast-header-bg: rgba(var(--white-rgb), 0.85); ---toast-header-border-color: rgba(var(--black-rgb), var(--opacity-5)); - -/* ===== MODAL ===== */ ---modal-zindex: 1050; ---modal-width: 500px; ---modal-padding: 1rem; ---modal-margin: 0.5rem; ---modal-color: ; ---modal-bg: var(--body-bg); ---modal-border-color: var(--border-color-translucent); ---modal-border-width: 1px; ---modal-border-radius: 0.3rem; ---modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); ---modal-inner-border-radius: calc(0.3rem - 1px); ---modal-header-padding-x: 1rem; ---modal-header-padding-y: 1rem; ---modal-header-padding: 1rem 1rem; ---modal-header-border-color: var(--border-color); ---modal-header-border-width: 1px; ---modal-title-line-height: 1.5; ---modal-footer-gap: 0.5rem; ---modal-footer-bg: ; ---modal-footer-border-color: var(--border-color); ---modal-footer-border-width: 1px; - -/* ===== TOOLTIP ===== */ ---tooltip-zindex: 1070; ---tooltip-max-width: 200px; ---tooltip-padding-x: 0.5rem; ---tooltip-padding-y: 0.25rem; ---tooltip-margin: ; ---tooltip-font-size: 0.875rem; ---tooltip-color: var(--body-bg); ---tooltip-bg: hsl(0, 0%, 0%); ---tooltip-border-radius: 0.25rem; ---tooltip-opacity: 0.9; ---tooltip-arrow-width: 0.8rem; ---tooltip-arrow-height: 0.4rem; - -/* ===== POPOVER ===== */ ---popover-zindex: 1060; ---popover-max-width: 276px; ---popover-font-size: 0.875rem; ---popover-bg: var(--body-bg); ---popover-border-width: 1px; ---popover-border-color: var(--border-color-translucent); ---popover-border-radius: 0.3rem; ---popover-inner-border-radius: calc(0.3rem - 1px); ---popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); ---popover-header-padding-x: 1rem; ---popover-header-padding-y: 0.5rem; ---popover-header-font-size: 1rem; ---popover-header-color: ; ---popover-header-bg: #f0f0f0; ---popover-body-padding-x: 1rem; ---popover-body-padding-y: 1rem; ---popover-body-color: hsl(210, 11%, 15%); ---popover-arrow-width: 1rem; ---popover-arrow-height: 0.5rem; ---popover-arrow-border: var(--popover-border-color); - -/* ===== SPINNER ===== */ ---spinner-width: 2rem; ---spinner-height: 2rem; ---spinner-vertical-align: -0.125em; ---spinner-border-width: 0.25em; ---spinner-animation-speed: 0.75s; - -/* ===== NAV TABS ===== */ ---nav-tabs-border-width: 1px; ---nav-tabs-border-color: hsl(210, 14%, 89%); ---nav-tabs-border-radius: 0.25rem; ---nav-tabs-link-active-color: hsl(210, 9%, 31%); ---nav-tabs-link-active-bg: var(--body-bg); ---nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) var(--body-bg); - -/* ===== NAV PILLS ===== */ ---nav-pills-border-radius: 0.25rem; ---nav-pills-link-active-color: var(--body-bg); ---nav-pills-link-active-bg: hsl(240, 98%, 17%); - -/* ===== TABLE ===== */ ---table-color: var(--body-color); ---table-bg: transparent; ---table-border-color: var(--border-color); ---table-accent-bg: transparent; ---table-striped-color: var(--body-color); ---table-striped-bg: rgba(var(--black-rgb), var(--opacity-5)); ---table-active-color: var(--body-color); ---table-active-bg: rgba(var(--black-rgb), 0.075); - -/* ===== FOOTER ===== */ ---footer-padding-top: 1rem; ---footer-padding-bottom: 80px; ---footer-grid-padding-y: 2.5rem; ---footer-grid-padding-x: 0.5em; - -/* ===== BACKDROP ===== */ ---backdrop-zindex: 1040; ---backdrop-bg: hsl(0, 0%, 0%); ---backdrop-opacity: 0.5; -} - -.btn { ---btn-padding-x: 1rem; ---btn-padding-y: 0.6rem; ---btn-font-family: inherit; ---btn-font-size: 1rem; ---btn-font-weight: 400; ---btn-line-height: 1.5; ---btn-color: hsl(210, 11%, 15%); ---btn-bg: var(--body-bg); ---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: #fff; ---btn-bg: #112855; ---btn-border-color: #112855; ---btn-hover-color: #fff; ---btn-hover-bg: #0d1f42; ---btn-hover-border-color: #0a1a38; ---btn-focus-shadow-rgb: 17, 40, 85; ---btn-active-color: #fff; ---btn-active-bg: #0a1a38; ---btn-active-border-color: #08152e; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #fff; ---btn-disabled-bg: #112855; ---btn-disabled-border-color: #112855; -} - -.btn-secondary { ---btn-color: var(--body-bg); ---btn-bg: var(--nav-bg-color); ---btn-border-color: hsl(210, 7%, 46%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #5d636b; ---btn-hover-border-color: #575e65; ---btn-focus-shadow-rgb: gray; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #575e65; ---btn-active-border-color: #52585f; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(210, 7%, 46%); ---btn-disabled-border-color: hsl(210, 7%, 46%); -} - -.btn-success { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(120, 32%, 39%); ---btn-border-color: hsl(120, 32%, 39%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #3a6f3a; ---btn-hover-border-color: #366936; ---btn-focus-shadow-rgb: 96, 150, 96; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #366936; ---btn-active-border-color: #336233; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(120, 32%, 39%); ---btn-disabled-border-color: hsl(120, 32%, 39%); -} - -.btn-info { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(207, 49%, 37%); ---btn-border-color: hsl(207, 49%, 37%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #295478; ---btn-hover-border-color: #264f71; ---btn-focus-shadow-rgb: 79, 122, 158; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #264f71; ---btn-active-border-color: #244a6a; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(207, 49%, 37%); ---btn-disabled-border-color: hsl(207, 49%, 37%); -} - -.btn-warning { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(34, 100%, 34%); ---btn-border-color: hsl(34, 100%, 34%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #935300; ---btn-hover-border-color: #8a4e00; ---btn-focus-shadow-rgb: 185, 122, 38; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #8a4e00; ---btn-active-border-color: #824a00; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(34, 100%, 34%); ---btn-disabled-border-color: hsl(34, 100%, 34%); -} - -.btn-danger { ---btn-color: #fff; ---btn-bg: #df4830; ---btn-border-color: #df4830; ---btn-hover-color: #fff; ---btn-hover-bg: #c03e28; ---btn-hover-border-color: #b53b26; ---btn-focus-shadow-rgb: 223, 72, 48; ---btn-active-color: #fff; ---btn-active-bg: #b53b26; ---btn-active-border-color: #aa3823; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #fff; ---btn-disabled-bg: #df4830; ---btn-disabled-border-color: #df4830; -} - -.btn-light { ---btn-color: hsl(0, 0%, 0%); ---btn-bg: hsl(210, 17%, 98%); ---btn-border-color: hsl(210, 17%, 98%); ---btn-hover-color: hsl(0, 0%, 0%); ---btn-hover-bg: #d4d5d5; ---btn-hover-border-color: #c7c8c9; ---btn-focus-shadow-rgb: 212, 213, 213; ---btn-active-color: hsl(0, 0%, 0%); ---btn-active-bg: #c7c8c9; ---btn-active-border-color: #bbbcbc; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 0%); ---btn-disabled-bg: hsl(210, 17%, 98%); ---btn-disabled-border-color: hsl(210, 17%, 98%); -} - -.btn-dark { ---btn-color: hsl(0, 0%, 100%); ---btn-bg: hsl(210, 10%, 23%); ---btn-border-color: hsl(210, 10%, 23%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: #53585e; ---btn-hover-border-color: #494f54; ---btn-focus-shadow-rgb: 83, 88, 94; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: #5d6267; ---btn-active-border-color: #494f54; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(0, 0%, 100%); ---btn-disabled-bg: hsl(210, 10%, 23%); ---btn-disabled-border-color: hsl(210, 10%, 23%); -} - -.btn-outline-primary { ---btn-color: #112855; ---btn-border-color: #112855; ---btn-hover-color: #fff; ---btn-hover-bg: #112855; ---btn-hover-border-color: #112855; ---btn-focus-shadow-rgb: 17, 40, 85; ---btn-active-color: #fff; ---btn-active-bg: #112855; ---btn-active-border-color: #112855; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #112855; ---btn-disabled-bg: transparent; ---btn-disabled-border-color: #112855; ---gradient: none; -} - -.btn-outline-secondary { ---btn-color: hsl(210, 7%, 46%); ---btn-border-color: hsl(210, 7%, 46%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(210, 7%, 46%); ---btn-hover-border-color: hsl(210, 7%, 46%); ---btn-focus-shadow-rgb: 109, 117, 126; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(210, 7%, 46%); ---btn-active-border-color: hsl(210, 7%, 46%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(210, 7%, 46%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(210, 7%, 46%); ---gradient: none; -} - -.btn-outline-success { ---btn-color: hsl(120, 32%, 39%); ---btn-border-color: hsl(120, 32%, 39%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(120, 32%, 39%); ---btn-hover-border-color: hsl(120, 32%, 39%); ---btn-focus-shadow-rgb: 68, 131, 68; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(120, 32%, 39%); ---btn-active-border-color: hsl(120, 32%, 39%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(120, 32%, 39%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(120, 32%, 39%); ---gradient: none; -} - -.btn-outline-info { ---btn-color: hsl(207, 49%, 37%); ---btn-border-color: hsl(207, 49%, 37%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(207, 49%, 37%); ---btn-hover-border-color: hsl(207, 49%, 37%); ---btn-focus-shadow-rgb: 48, 99, 141; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(207, 49%, 37%); ---btn-active-border-color: hsl(207, 49%, 37%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(207, 49%, 37%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(207, 49%, 37%); ---gradient: none; -} - -.btn-outline-warning { ---btn-color: hsl(34, 100%, 34%); ---btn-border-color: hsl(34, 100%, 34%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(34, 100%, 34%); ---btn-hover-border-color: hsl(34, 100%, 34%); ---btn-focus-shadow-rgb: 173, 98, 0; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(34, 100%, 34%); ---btn-active-border-color: hsl(34, 100%, 34%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(34, 100%, 34%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(34, 100%, 34%); ---gradient: none; -} - -.btn-outline-danger { ---btn-color: #df4830; ---btn-border-color: #df4830; ---btn-hover-color: #fff; ---btn-hover-bg: #df4830; ---btn-hover-border-color: #df4830; ---btn-focus-shadow-rgb: 223, 72, 48; ---btn-active-color: #fff; ---btn-active-bg: #df4830; ---btn-active-border-color: #df4830; ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: #df4830; ---btn-disabled-bg: transparent; ---btn-disabled-border-color: #df4830; ---gradient: none; -} - -.btn-outline-light { ---btn-color: hsl(210, 17%, 98%); ---btn-border-color: hsl(210, 17%, 98%); ---btn-hover-color: hsl(0, 0%, 0%); ---btn-hover-bg: hsl(210, 17%, 98%); ---btn-hover-border-color: hsl(210, 17%, 98%); ---btn-focus-shadow-rgb: 249, 250, 251; ---btn-active-color: hsl(0, 0%, 0%); ---btn-active-bg: hsl(210, 17%, 98%); ---btn-active-border-color: hsl(210, 17%, 98%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(210, 17%, 98%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(210, 17%, 98%); ---gradient: none; -} - -.btn-outline-dark { ---btn-color: hsl(210, 10%, 23%); ---btn-border-color: hsl(210, 10%, 23%); ---btn-hover-color: hsl(0, 0%, 100%); ---btn-hover-bg: hsl(210, 10%, 23%); ---btn-hover-border-color: hsl(210, 10%, 23%); ---btn-focus-shadow-rgb: 53, 59, 65; ---btn-active-color: hsl(0, 0%, 100%); ---btn-active-bg: hsl(210, 10%, 23%); ---btn-active-border-color: hsl(210, 10%, 23%); ---btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); ---btn-disabled-color: hsl(210, 10%, 23%); ---btn-disabled-bg: transparent; ---btn-disabled-border-color: hsl(210, 10%, 23%); ---gradient: none; -} - -.btn-link { ---btn-font-weight: 400; ---btn-color: var(--link-color); ---btn-bg: transparent; ---btn-border-color: transparent; ---btn-hover-color: var(--link-hover-color); ---btn-hover-border-color: transparent; ---btn-active-color: var(--link-hover-color); ---btn-active-border-color: transparent; ---btn-disabled-color: hsl(210, 7%, 46%); ---btn-disabled-border-color: transparent; ---btn-box-shadow: none; ---btn-focus-shadow-rgb: 39, 39, 111; -text-decoration: underline; -} diff --git a/templates/dark.custom.css b/templates/dark.custom.css deleted file mode 100644 index e8beac5..0000000 --- a/templates/dark.custom.css +++ /dev/null @@ -1,327 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2026 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - - - - # FILE INFORMATION - DEFGROUP: Joomla.Template.Site - INGROUP: MokoCassiopeia.Templates - PATH: ./templates/dark.custom.css - VERSION: 03.09.03 - BRIEF: Custom dark theme color template with Bootstrap button definitions - */ - -/* ----------------------------------------------- - * CUSTOM DARK THEME TEMPLATE - * - * Copy this file to: - * src/media/css/theme/dark.custom.css - * - * Then register it in src/joomla.asset.json under - * template.dark.custom asset. - * --------------------------------------------- */ - -:root[data-bs-theme='dark'] { - /* ===== BRAND COLORS (Customize these) ===== */ - --color-primary: #3399ff; - --accent-color-primary: #66b3ff; - --accent-color-secondary: #99ccff; - - /* ===== LINKS ===== */ - --link-color: #6bb3ff; - --link-hover-color: #99ccff; - - /* ===== BODY & TYPOGRAPHY ===== */ - --body-color: #e9ecef; - --body-bg: #0e1318; - - /* ===== BOOTSTRAP STATE COLORS ===== */ - --success: #5cb85c; - --info: #5bc0de; - --warning: #ffc107; - --danger: #d9534f; - - /* ===== NAVIGATION ===== */ - --nav-bg-color: var(--color-primary); - --nav-text-color: #ffffff; -} - -/* ===== BOOTSTRAP BUTTON VARIANTS ===== */ - -.btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--color-primary); - --btn-border-color: var(--color-primary); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #2680e6; - --btn-hover-border-color: #1f73d9; - --btn-focus-shadow-rgb: 82, 168, 255; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #1f73d9; - --btn-active-border-color: #1a66cc; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--color-primary); - --btn-disabled-border-color: var(--color-primary); -} - -.btn-secondary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: #6c757d; - --btn-border-color: #6c757d; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #5c636a; - --btn-hover-border-color: #565e64; - --btn-focus-shadow-rgb: 130, 138, 145; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #565e64; - --btn-active-border-color: #51585e; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: #6c757d; - --btn-disabled-border-color: #6c757d; -} - -.btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--success); - --btn-border-color: var(--success); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #4cae4c; - --btn-hover-border-color: #449d44; - --btn-focus-shadow-rgb: 113, 198, 113; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #449d44; - --btn-active-border-color: #398439; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--success); - --btn-disabled-border-color: var(--success); -} - -.btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--info); - --btn-border-color: var(--info); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #46b8da; - --btn-hover-border-color: #31b0d5; - --btn-focus-shadow-rgb: 116, 204, 233; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #31b0d5; - --btn-active-border-color: #269abc; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--info); - --btn-disabled-border-color: var(--info); -} - -.btn-warning { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: var(--warning); - --btn-border-color: var(--warning); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #edb100; - --btn-hover-border-color: #d39e00; - --btn-focus-shadow-rgb: 222, 170, 12; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #d39e00; - --btn-active-border-color: #c69500; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: var(--warning); - --btn-disabled-border-color: var(--warning); -} - -.btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--danger); - --btn-border-color: var(--danger); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #d43f3a; - --btn-hover-border-color: #c9302c; - --btn-focus-shadow-rgb: 223, 109, 105; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #c9302c; - --btn-active-border-color: #ac2925; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--danger); - --btn-disabled-border-color: var(--danger); -} - -.btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: #e9ecef; - --btn-border-color: #e9ecef; - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #d3d6d9; - --btn-hover-border-color: #c8cbcf; - --btn-focus-shadow-rgb: 204, 207, 210; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #c8cbcf; - --btn-active-border-color: #bdc1c5; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: #e9ecef; - --btn-disabled-border-color: #e9ecef; -} - -.btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: #2c3136; - --btn-border-color: #2c3136; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #1e2124; - --btn-hover-border-color: #191c1f; - --btn-focus-shadow-rgb: 70, 75, 80; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #191c1f; - --btn-active-border-color: #14161a; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: #2c3136; - --btn-disabled-border-color: #2c3136; -} - -/* ===== OUTLINE BUTTON VARIANTS ===== */ - -.btn-outline-primary { - --btn-color: var(--color-primary); - --btn-border-color: var(--color-primary); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: var(--color-primary); - --btn-hover-border-color: var(--color-primary); - --btn-focus-shadow-rgb: 82, 168, 255; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: var(--color-primary); - --btn-active-border-color: var(--color-primary); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--color-primary); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--color-primary); - --gradient: none; -} - -.btn-outline-secondary { - --btn-color: #8c959f; - --btn-border-color: #8c959f; - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #8c959f; - --btn-hover-border-color: #8c959f; - --btn-focus-shadow-rgb: 150, 158, 167; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #8c959f; - --btn-active-border-color: #8c959f; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: #8c959f; - --btn-disabled-bg: transparent; - --btn-disabled-border-color: #8c959f; - --gradient: none; -} - -.btn-outline-success { - --btn-color: var(--success); - --btn-border-color: var(--success); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: var(--success); - --btn-hover-border-color: var(--success); - --btn-focus-shadow-rgb: 113, 198, 113; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: var(--success); - --btn-active-border-color: var(--success); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--success); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--success); - --gradient: none; -} - -.btn-outline-info { - --btn-color: var(--info); - --btn-border-color: var(--info); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: var(--info); - --btn-hover-border-color: var(--info); - --btn-focus-shadow-rgb: 116, 204, 233; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: var(--info); - --btn-active-border-color: var(--info); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--info); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--info); - --gradient: none; -} - -.btn-outline-warning { - --btn-color: var(--warning); - --btn-border-color: var(--warning); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: var(--warning); - --btn-hover-border-color: var(--warning); - --btn-focus-shadow-rgb: 222, 170, 12; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: var(--warning); - --btn-active-border-color: var(--warning); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--warning); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--warning); - --gradient: none; -} - -.btn-outline-danger { - --btn-color: var(--danger); - --btn-border-color: var(--danger); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: var(--danger); - --btn-hover-border-color: var(--danger); - --btn-focus-shadow-rgb: 223, 109, 105; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: var(--danger); - --btn-active-border-color: var(--danger); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--danger); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--danger); - --gradient: none; -} - -.btn-outline-light { - --btn-color: #e9ecef; - --btn-border-color: #e9ecef; - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #e9ecef; - --btn-hover-border-color: #e9ecef; - --btn-focus-shadow-rgb: 204, 207, 210; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #e9ecef; - --btn-active-border-color: #e9ecef; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: #e9ecef; - --btn-disabled-bg: transparent; - --btn-disabled-border-color: #e9ecef; - --gradient: none; -} - -.btn-outline-dark { - --btn-color: #4a5057; - --btn-border-color: #4a5057; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #4a5057; - --btn-hover-border-color: #4a5057; - --btn-focus-shadow-rgb: 90, 95, 100; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #4a5057; - --btn-active-border-color: #4a5057; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: #4a5057; - --btn-disabled-bg: transparent; - --btn-disabled-border-color: #4a5057; - --gradient: none; -} diff --git a/templates/light.custom.css b/templates/light.custom.css deleted file mode 100644 index 44bed61..0000000 --- a/templates/light.custom.css +++ /dev/null @@ -1,327 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2026 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - - - - # FILE INFORMATION - DEFGROUP: Joomla.Template.Site - INGROUP: MokoCassiopeia.Templates - PATH: ./templates/light.custom.css - VERSION: 03.09.03 - BRIEF: Custom light theme color template with Bootstrap button definitions - */ - -/* ----------------------------------------------- - * CUSTOM LIGHT THEME TEMPLATE - * - * Copy this file to: - * src/media/css/theme/light.custom.css - * - * Then register it in src/joomla.asset.json under - * template.light.custom asset. - * --------------------------------------------- */ - -:root[data-bs-theme="light"] { - /* ===== BRAND COLORS (Customize these) ===== */ - --color-primary: #0066cc; - --accent-color-primary: #3399ff; - --accent-color-secondary: #66b3ff; - - /* ===== LINKS ===== */ - --link-color: #0066cc; - --link-hover-color: #0052a3; - - /* ===== BODY & TYPOGRAPHY ===== */ - --body-color: #212529; - --body-bg: #ffffff; - - /* ===== BOOTSTRAP STATE COLORS ===== */ - --success: #28a745; - --info: #17a2b8; - --warning: #ffc107; - --danger: #dc3545; - - /* ===== NAVIGATION ===== */ - --nav-bg-color: var(--color-primary); - --nav-text-color: #ffffff; -} - -/* ===== BOOTSTRAP BUTTON VARIANTS ===== */ - -.btn-primary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--color-primary); - --btn-border-color: var(--color-primary); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #0052a3; - --btn-hover-border-color: #004d99; - --btn-focus-shadow-rgb: 38, 128, 217; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #004d99; - --btn-active-border-color: #004788; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--color-primary); - --btn-disabled-border-color: var(--color-primary); -} - -.btn-secondary { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: #6c757d; - --btn-border-color: #6c757d; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #5c636a; - --btn-hover-border-color: #565e64; - --btn-focus-shadow-rgb: 130, 138, 145; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #565e64; - --btn-active-border-color: #51585e; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: #6c757d; - --btn-disabled-border-color: #6c757d; -} - -.btn-success { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--success); - --btn-border-color: var(--success); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #218838; - --btn-hover-border-color: #1e7e34; - --btn-focus-shadow-rgb: 72, 180, 97; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #1e7e34; - --btn-active-border-color: #1c7430; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--success); - --btn-disabled-border-color: var(--success); -} - -.btn-info { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--info); - --btn-border-color: var(--info); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #138496; - --btn-hover-border-color: #117a8b; - --btn-focus-shadow-rgb: 58, 176, 195; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #117a8b; - --btn-active-border-color: #10707f; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--info); - --btn-disabled-border-color: var(--info); -} - -.btn-warning { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: var(--warning); - --btn-border-color: var(--warning); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #e0a800; - --btn-hover-border-color: #d39e00; - --btn-focus-shadow-rgb: 222, 170, 12; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #d39e00; - --btn-active-border-color: #c69500; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: var(--warning); - --btn-disabled-border-color: var(--warning); -} - -.btn-danger { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: var(--danger); - --btn-border-color: var(--danger); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #c82333; - --btn-hover-border-color: #bd2130; - --btn-focus-shadow-rgb: 225, 83, 97; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #bd2130; - --btn-active-border-color: #b21f2d; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: var(--danger); - --btn-disabled-border-color: var(--danger); -} - -.btn-light { - --btn-color: hsl(0, 0%, 0%); - --btn-bg: #f8f9fa; - --btn-border-color: #f8f9fa; - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #e2e6ea; - --btn-hover-border-color: #dae0e5; - --btn-focus-shadow-rgb: 216, 217, 219; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #dae0e5; - --btn-active-border-color: #d3d9df; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 0%); - --btn-disabled-bg: #f8f9fa; - --btn-disabled-border-color: #f8f9fa; -} - -.btn-dark { - --btn-color: hsl(0, 0%, 100%); - --btn-bg: #343a40; - --btn-border-color: #343a40; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #23272b; - --btn-hover-border-color: #1d2124; - --btn-focus-shadow-rgb: 82, 88, 93; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #1d2124; - --btn-active-border-color: #171a1d; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: hsl(0, 0%, 100%); - --btn-disabled-bg: #343a40; - --btn-disabled-border-color: #343a40; -} - -/* ===== OUTLINE BUTTON VARIANTS ===== */ - -.btn-outline-primary { - --btn-color: var(--color-primary); - --btn-border-color: var(--color-primary); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: var(--color-primary); - --btn-hover-border-color: var(--color-primary); - --btn-focus-shadow-rgb: 38, 128, 217; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: var(--color-primary); - --btn-active-border-color: var(--color-primary); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--color-primary); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--color-primary); - --gradient: none; -} - -.btn-outline-secondary { - --btn-color: #6c757d; - --btn-border-color: #6c757d; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #6c757d; - --btn-hover-border-color: #6c757d; - --btn-focus-shadow-rgb: 130, 138, 145; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #6c757d; - --btn-active-border-color: #6c757d; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: #6c757d; - --btn-disabled-bg: transparent; - --btn-disabled-border-color: #6c757d; - --gradient: none; -} - -.btn-outline-success { - --btn-color: var(--success); - --btn-border-color: var(--success); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: var(--success); - --btn-hover-border-color: var(--success); - --btn-focus-shadow-rgb: 72, 180, 97; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: var(--success); - --btn-active-border-color: var(--success); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--success); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--success); - --gradient: none; -} - -.btn-outline-info { - --btn-color: var(--info); - --btn-border-color: var(--info); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: var(--info); - --btn-hover-border-color: var(--info); - --btn-focus-shadow-rgb: 58, 176, 195; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: var(--info); - --btn-active-border-color: var(--info); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--info); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--info); - --gradient: none; -} - -.btn-outline-warning { - --btn-color: var(--warning); - --btn-border-color: var(--warning); - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: var(--warning); - --btn-hover-border-color: var(--warning); - --btn-focus-shadow-rgb: 222, 170, 12; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: var(--warning); - --btn-active-border-color: var(--warning); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--warning); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--warning); - --gradient: none; -} - -.btn-outline-danger { - --btn-color: var(--danger); - --btn-border-color: var(--danger); - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: var(--danger); - --btn-hover-border-color: var(--danger); - --btn-focus-shadow-rgb: 225, 83, 97; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: var(--danger); - --btn-active-border-color: var(--danger); - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: var(--danger); - --btn-disabled-bg: transparent; - --btn-disabled-border-color: var(--danger); - --gradient: none; -} - -.btn-outline-light { - --btn-color: #f8f9fa; - --btn-border-color: #f8f9fa; - --btn-hover-color: hsl(0, 0%, 0%); - --btn-hover-bg: #f8f9fa; - --btn-hover-border-color: #f8f9fa; - --btn-focus-shadow-rgb: 216, 217, 219; - --btn-active-color: hsl(0, 0%, 0%); - --btn-active-bg: #f8f9fa; - --btn-active-border-color: #f8f9fa; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: #f8f9fa; - --btn-disabled-bg: transparent; - --btn-disabled-border-color: #f8f9fa; - --gradient: none; -} - -.btn-outline-dark { - --btn-color: #343a40; - --btn-border-color: #343a40; - --btn-hover-color: hsl(0, 0%, 100%); - --btn-hover-bg: #343a40; - --btn-hover-border-color: #343a40; - --btn-focus-shadow-rgb: 82, 88, 93; - --btn-active-color: hsl(0, 0%, 100%); - --btn-active-bg: #343a40; - --btn-active-border-color: #343a40; - --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --btn-disabled-color: #343a40; - --btn-disabled-bg: transparent; - --btn-disabled-border-color: #343a40; - --gradient: none; -}