/* * MGEveryday Brand CSS Custom Properties — v2.0 * Source of truth: .github/brand/BRAND_GUIDE.md * * Design: technical, plain, clean. Blue primary, light default. * * Google Fonts import (add to ): * */ /* ============================================ 1. Brand Core ============================================ */ :root { /* Typography */ --mge-font-body: 'Inter', system-ui, sans-serif; --mge-font-heading: 'Space Grotesk', 'Inter', sans-serif; --mge-font-mono: 'JetBrains Mono', monospace; /* Product Accents (fixed — independent of theme) */ --mge-pbn: #E8590C; /* Paint by Numbers — Orange */ --mge-dbn: #0891B2; /* Diamond by Numbers — Cyan */ --mge-dot: #DC2626; /* Dotting Points — Red */ --mge-pix: #7C3AED; /* Fuse Beads / Pixel — Violet */ --mge-dcl: #65A30D; /* Colorful Dotting — Lime */ --mge-acc: #6B7280; /* Accessories — Gray */ /* Semantic */ --mge-success: #10B981; --mge-error: #EF4444; --mge-warning: #F59E0B; --mge-info: #3B82F6; /* Spacing (4px grid) */ --mge-space-1: 0.25rem; --mge-space-2: 0.5rem; --mge-space-3: 0.75rem; --mge-space-4: 1rem; --mge-space-6: 1.5rem; --mge-space-8: 2rem; --mge-space-10: 2.5rem; --mge-space-12: 3rem; --mge-space-16: 4rem; /* Layout */ --navbar-h: 48px; /* Radii */ --mge-radius: 6px; --mge-radius-lg: 10px; --mge-radius-full: 9999px; /* Transitions */ --mge-transition: 150ms ease; --mge-transition-slow:200ms ease; } /* ============================================ 2. Light Theme (default) ============================================ */ :root, [data-theme="light"], [data-bs-theme="light"] { --mge-bg: #FFFFFF; --mge-bg-alt: #F9FAFB; --mge-bg-card: #FFFFFF; --mge-border: #E5E7EB; --mge-border-h: #D1D5DB; --mge-text: #1F2937; --mge-text-2: #4B5563; --mge-text-3: #9CA3AF; --mge-primary: #2563EB; --mge-primary-text: #FFFFFF; --mge-code-bg: #F3F4F6; --mge-hand-fill: #1F2937; } /* ============================================ 3. Dark Theme ============================================ */ [data-theme="dark"], [data-bs-theme="dark"] { --mge-bg: #111111; --mge-bg-alt: #191919; --mge-bg-card: #1A1A1A; --mge-border: #2A2A2A; --mge-border-h: #3A3A3A; --mge-text: #E5E7EB; --mge-text-2: #9CA3AF; --mge-text-3: #6B7280; --mge-primary: #3B82F6; --mge-primary-text: #FFFFFF; --mge-code-bg: #1E1E1E; --mge-hand-fill: #E5E7EB; } /* ============================================ 4. Bootstrap 5 Overrides ============================================ */ :root, [data-bs-theme="light"] { --bs-primary: #2563EB; --bs-primary-rgb: 37, 99, 235; --bs-secondary: #6B7280; --bs-secondary-rgb: 107, 114, 128; --bs-success: var(--mge-success); --bs-success-rgb: 16, 185, 129; --bs-danger: var(--mge-error); --bs-danger-rgb: 239, 68, 68; --bs-warning: var(--mge-warning); --bs-warning-rgb: 245, 158, 11; --bs-info: var(--mge-info); --bs-info-rgb: 59, 130, 246; --bs-body-font-family: var(--mge-font-body); --bs-body-color: #4B5563; --bs-body-bg: #FFFFFF; --bs-border-color: #E5E7EB; --bs-border-radius: var(--mge-radius); } [data-bs-theme="dark"] { --bs-body-bg: #111111; --bs-body-color: #E5E7EB; --bs-border-color: #2A2A2A; --bs-primary: #3B82F6; --bs-primary-rgb: 59, 130, 246; } /* ============================================ 5. Typography ============================================ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--mge-font-heading); color: var(--mge-text); letter-spacing: -0.01em; font-weight: 600; } code, pre, .font-mono { font-family: var(--mge-font-mono); } .mge-prose { max-width: 65ch; } /* ============================================ 6. Component Styles ============================================ */ /* --- Buttons --- */ .btn-mge-primary { background-color: var(--mge-primary); color: var(--mge-primary-text); border: 1px solid transparent; border-radius: var(--mge-radius); font-weight: 500; transition: all var(--mge-transition); } .btn-mge-primary:hover { filter: brightness(1.1); color: var(--mge-primary-text); } .btn-mge-primary:focus-visible { outline: 2px solid var(--mge-primary); outline-offset: 2px; } .btn-mge-outline { background-color: transparent; color: var(--mge-text-2); border: 1px solid var(--mge-border); border-radius: var(--mge-radius); font-weight: 500; transition: all var(--mge-transition); } .btn-mge-outline:hover { border-color: var(--mge-border-h); color: var(--mge-text); } /* --- Cards --- */ .mge-card { background: var(--mge-bg-card); border: 1px solid var(--mge-border); border-radius: var(--mge-radius-lg); padding: var(--mge-space-6); transition: border-color var(--mge-transition-slow); } .mge-card:hover { border-color: var(--mge-border-h); } /* --- Product Badges --- */ .mge-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.45rem; border-radius: var(--mge-radius-full); font-size: 0.6rem; font-weight: 600; font-family: var(--mge-font-mono); letter-spacing: 0.03em; color: #FFFFFF; text-transform: uppercase; } .mge-badge-pbn { background-color: var(--mge-pbn); } .mge-badge-dbn { background-color: var(--mge-dbn); } .mge-badge-dot { background-color: var(--mge-dot); } .mge-badge-pix { background-color: var(--mge-pix); } .mge-badge-dcl { background-color: var(--mge-dcl); } .mge-badge-acc { background-color: var(--mge-acc); } /* --- Product Cards --- */ .mge-product-card { position: relative; background: var(--mge-bg-card); border: 1px solid var(--mge-border); border-radius: var(--mge-radius-lg); overflow: hidden; text-align: center; padding: var(--mge-space-4); transition: border-color var(--mge-transition-slow); } .mge-product-card:hover { border-color: var(--mge-border-h); } /* Product code — subtle, muted */ .mge-product-code { font-family: var(--mge-font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.06em; color: var(--mge-text-3); text-transform: uppercase; } .mge-product-card h3 { font-size: 0.85rem; font-weight: 600; } .mge-product-card p { color: var(--mge-text-3); font-size: 0.72rem; } /* --- Navigation --- */ .mge-navbar { background-color: var(--mge-bg); border-bottom: 1px solid var(--mge-border); } .mge-navbar .nav-link { color: var(--mge-text-3); font-weight: 500; font-size: 0.72rem; transition: color var(--mge-transition); padding: 0.5rem 0; border-bottom: 1.5px solid transparent; } .mge-navbar .nav-link:hover { color: var(--mge-text-2); } .mge-navbar .nav-link.active { color: var(--mge-text); border-bottom-color: var(--mge-primary); } /* --- Focus States --- */ .mge-focus:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--mge-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mge-primary) 15%, transparent); } /* --- Code Blocks --- */ .mge-code-block { background: var(--mge-code-bg); border: 1px solid var(--mge-border); border-radius: var(--mge-radius); padding: var(--mge-space-4); overflow-x: auto; } .mge-code-block code { font-family: var(--mge-font-mono); font-size: 0.75rem; line-height: 1.7; color: var(--mge-text-2); } /* ============================================ 7. Utility Classes ============================================ */ .text-mge-primary { color: var(--mge-primary) !important; } .text-mge-text { color: var(--mge-text) !important; } .text-mge-muted { color: var(--mge-text-3) !important; } .text-mge-success { color: var(--mge-success) !important; } .text-mge-error { color: var(--mge-error) !important; } .bg-mge-bg { background-color: var(--mge-bg) !important; } .bg-mge-alt { background-color: var(--mge-bg-alt) !important; } .bg-mge-card { background-color: var(--mge-bg-card) !important; } .bg-mge-primary { background-color: var(--mge-primary) !important; } .border-mge { border-color: var(--mge-border) !important; } .border-mge-primary{ border-color: var(--mge-primary) !important; } .font-heading { font-family: var(--mge-font-heading) !important; } .font-mono { font-family: var(--mge-font-mono) !important; }