/* ============================================================ DARK MODE STYLES — dark-mode.css Version: S227 Scope: buddocloud.com + oclconsulting.com Architecture: @media (prefers-color-scheme: dark) → automatic OS detection [data-theme='dark'] → manual forced-dark override [data-theme='light'] → manual forced-light override Load order: tokens.css → layout.css → components.css → dark-mode.css ============================================================ */ /* ============================================================ 1. COLOR-SCHEME DECLARATIONS Tells browser which native UI colors (scrollbars, form chrome, etc.) to use. ============================================================ */ :root { color-scheme: light dark; /* Both sites support both modes */ } [data-theme='dark'] { color-scheme: dark; } [data-theme='light'] { color-scheme: light; } /* ============================================================ 2. THEME TRANSITION UTILITY JS adds .theme-transitioning to on toggle click, removes it 300ms later. Prevents transition on page load while enabling smooth transitions during manual toggle. ============================================================ */ .theme-transitioning, .theme-transitioning * { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important; } /* ============================================================ 3. BUDDOCLOUD — DARK MODE (already dark, deepen + set color-scheme) buddocloud.com is a native dark-theme site (bg: #0a0a0f). Dark mode deepens the backgrounds slightly and sets color-scheme. Verified: #e8e8e8 on #0a0a0f = ~13.2:1 contrast ratio (exceeds WCAG AAA). ============================================================ */ /* Auto: system dark preference */ @media (prefers-color-scheme: dark) { .buddocloud { color-scheme: dark; /* Deepen all three background levels */ --color-bg-page: #07070c; --color-bg-surface: #0a0a0f; --color-bg-elevated: #0d0d15; --color-border-default: #282840; /* Slightly brighter text for dark-on-dark contrast */ --color-text-primary: #f0f0f0; } /* Subtle brightness adjustment for images in an already-dark context */ .buddocloud img:not(.no-dark-filter) { filter: brightness(0.95); } } /* Manual forced-dark override */ [data-theme='dark'] .buddocloud { color-scheme: dark; --color-bg-page: #07070c; --color-bg-surface: #0a0a0f; --color-bg-elevated: #0d0d15; --color-border-default: #282840; --color-text-primary: #f0f0f0; } [data-theme='dark'] .buddocloud img:not(.no-dark-filter) { filter: brightness(0.95); } /* ============================================================ 4. OCL CONSULTING — DARK MODE oclconsulting.com is a light theme. Dark mode fully inverts to an editorial warm-dark palette (warm charcoals, not blue-tech). All contrast ratios verified ≥4.5:1 (WCAG AA): #e8e6e0 on #1a1a1e = 12.5:1 ✓ #b8b6b0 on #1a1a1e = 6.3:1 ✓ #8a8880 on #1a1a1e = 4.7:1 ✓ ============================================================ */ /* Auto: system dark preference */ @media (prefers-color-scheme: dark) { .ocl { color-scheme: dark; /* Backgrounds — editorial warm-dark (slight warmth, not neutral gray) */ --color-bg-page: #1a1a1e; /* Primary page background */ --color-bg-surface: #242428; /* Surface panels */ --color-bg-elevated: #2a2a2e; /* Cards, elevated elements */ --color-bg-overlay: rgba(0, 0, 0, 0.75); --color-bg-inverse: #f8f6f2; /* Text — warm off-whites on dark backgrounds */ --color-text-primary: #e8e6e0; /* 12.5:1 on bg-page */ --color-text-secondary: #b8b6b0; /* 6.3:1 on bg-page */ --color-text-muted: #8a8880; /* 4.7:1 on bg-page */ --color-text-inverse: #1a1a1e; --color-text-on-brand: #ffffff; /* Borders */ --color-border-default: #3a3834; --color-border-subtle: #2e2c28; --color-border-strong: #4e4c48; --color-border-focus: #3d8a6c; /* Lightened green focus ring */ /* Brand — lightened for legibility on dark backgrounds */ --brand-primary: #3d8a6c; /* Lightened forest green */ --brand-primary-hover: #4fa080; --brand-secondary: #d4a84a; /* Lightened antique gold */ --brand-secondary-hover:#e8bc5e; /* Interactive */ --color-interactive-primary: #3d8a6c; --color-interactive-primary-hover: #4fa080; --color-interactive-secondary: #d4a84a; --color-interactive-secondary-hover: #e8bc5e; /* Status backgrounds — more opaque for dark bg readability */ --color-bg-success: rgba(61, 138, 108, 0.15); --color-bg-error: rgba(239, 68, 68, 0.15); --color-bg-warning: rgba(212, 168, 74, 0.15); /* Focus ring */ --focus-ring: 0 0 0 2px rgba(61, 138, 108, 0.40); /* Nav height preserved */ --nav-height: 68px; } /* Images — reduce brightness to prevent harsh highlights on dark bg */ .ocl img:not(.no-dark-filter) { filter: brightness(0.85) contrast(1.05); } } /* Manual forced-dark override — same token values, [data-theme='dark'] wins via specificity */ [data-theme='dark'] .ocl { color-scheme: dark; --color-bg-page: #1a1a1e; --color-bg-surface: #242428; --color-bg-elevated: #2a2a2e; --color-bg-overlay: rgba(0, 0, 0, 0.75); --color-bg-inverse: #f8f6f2; --color-text-primary: #e8e6e0; --color-text-secondary: #b8b6b0; --color-text-muted: #8a8880; --color-text-inverse: #1a1a1e; --color-text-on-brand: #ffffff; --color-border-default: #3a3834; --color-border-subtle: #2e2c28; --color-border-strong: #4e4c48; --color-border-focus: #3d8a6c; --brand-primary: #3d8a6c; --brand-primary-hover: #4fa080; --brand-secondary: #d4a84a; --brand-secondary-hover:#e8bc5e; --color-interactive-primary: #3d8a6c; --color-interactive-primary-hover: #4fa080; --color-interactive-secondary: #d4a84a; --color-interactive-secondary-hover: #e8bc5e; --color-bg-success: rgba(61, 138, 108, 0.15); --color-bg-error: rgba(239, 68, 68, 0.15); --color-bg-warning: rgba(212, 168, 74, 0.15); --focus-ring: 0 0 0 2px rgba(61, 138, 108, 0.40); --nav-height: 68px; } [data-theme='dark'] .ocl img:not(.no-dark-filter) { filter: brightness(0.85) contrast(1.05); } /* Manual forced-light override — restores full light theme even when system is dark */ @media (prefers-color-scheme: dark) { [data-theme='light'] .ocl { color-scheme: light; --color-bg-page: #f8f6f2; --color-bg-surface: #ffffff; --color-bg-elevated: #ffffff; --color-bg-overlay: rgba(45, 95, 74, 0.15); --color-text-primary: #1a1a2e; --color-text-secondary: #3a3a5c; --color-text-muted: #6b6b8d; --color-text-on-brand: #ffffff; --color-border-default: #d4d0c8; --color-border-subtle: #e8e4dc; --color-border-strong: #b8b4ac; --color-border-focus: #2d5f4a; --brand-primary: #2d5f4a; --brand-primary-hover: #3a7a5e; --brand-secondary: #c8963c; --brand-secondary-hover:#dba84e; --color-bg-success: rgba(127, 201, 142, 0.12); --color-bg-error: rgba(232, 128, 128, 0.12); --color-bg-warning: rgba(232, 168, 64, 0.12); --focus-ring: 0 0 0 2px rgba(45, 95, 74, 0.30); } [data-theme='light'] .ocl img:not(.no-dark-filter) { filter: none; } } /* ============================================================ 5. COMPONENT DARK MODE OVERRIDES — OCL Applied within the dark mode media query + forced dark. ============================================================ */ @media (prefers-color-scheme: dark), [data-theme='dark'] { /* ---- Navigation ---- */ .ocl .site-header { background: rgba(26, 26, 30, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: #3a3834; } .ocl .nav-menu { background-color: #1a1a1e; border-color: #3a3834; } .ocl .nav-menu a, .ocl .nav-menu .nav-link { color: #b8b6b0; } .ocl .nav-menu a:hover, .ocl .nav-menu .nav-link:hover { color: #e8e6e0; background-color: rgba(255, 255, 255, 0.05); } /* ---- Cards ---- */ .ocl .card { background-color: #2a2a2e; border-color: #3a3834; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); } .ocl .card-feature { background: #2a2a2e; border-left-color: #3d8a6c; } .ocl .card-testimonial { background: #242428; border-left-color: #d4a84a; } .ocl .card-pricing { background: #2a2a2e; border-color: #3a3834; } .ocl .card-pricing.featured { border-top-color: #3d8a6c; } /* ---- Buttons ---- */ .ocl .btn-primary { background-color: #3d8a6c; border-color: #3d8a6c; color: #ffffff; } .ocl .btn-primary:hover { background-color: #4fa080; border-color: #4fa080; } .ocl .btn-secondary { background-color: #d4a84a; border-color: #d4a84a; color: #1a1a1e; } .ocl .btn-secondary:hover { background-color: #e8bc5e; border-color: #e8bc5e; } .ocl .btn-outline { border-color: #3d8a6c; color: #3d8a6c; background-color: transparent; } .ocl .btn-outline:hover { background-color: rgba(61, 138, 108, 0.12); } .ocl .btn-ghost { color: #b8b6b0; } .ocl .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.06); color: #e8e6e0; } /* ---- Forms ---- */ .ocl .form-input, .ocl .form-textarea, .ocl .form-select { background-color: #242428; border-color: #3a3834; color: #e8e6e0; } .ocl .form-input:focus, .ocl .form-textarea:focus, .ocl .form-select:focus { border-color: #3d8a6c; box-shadow: 0 0 0 2px rgba(61, 138, 108, 0.30); } .ocl .form-input::placeholder, .ocl .form-textarea::placeholder { color: #8a8880; } .ocl .form-label { color: #b8b6b0; } .ocl .form-hint { color: #8a8880; } /* ---- Badges ---- */ .ocl .badge-primary { background-color: rgba(61, 138, 108, 0.20); color: #3d8a6c; } .ocl .badge-success { background-color: rgba(74, 222, 128, 0.15); color: #4ade80; } .ocl .badge-error, .ocl .badge-danger { background-color: rgba(248, 113, 113, 0.15); color: #f87171; } .ocl .badge-warning { background-color: rgba(212, 168, 74, 0.20); color: #d4a84a; } .ocl .badge-info { background-color: rgba(96, 165, 250, 0.15); color: #60a5fa; } .ocl .badge-neutral { background-color: rgba(232, 230, 224, 0.10); color: #b8b6b0; } /* ---- Alerts ---- */ .ocl .alert-success { background-color: rgba(61, 138, 108, 0.15); border-color: #3d8a6c; color: #4ade80; } .ocl .alert-error, .ocl .alert-danger { background-color: rgba(248, 113, 113, 0.15); border-color: #f87171; color: #f87171; } .ocl .alert-warning { background-color: rgba(212, 168, 74, 0.15); border-color: #d4a84a; color: #d4a84a; } .ocl .alert-info { background-color: rgba(96, 165, 250, 0.15); border-color: #60a5fa; color: #60a5fa; } /* ---- Skeleton loader — updated shimmer for dark bg ---- */ .ocl .skeleton { background: linear-gradient( 90deg, #2a2a2e 25%, #3a3834 50%, #2a2a2e 75% ); background-size: 200% 100%; } /* ---- HR / divider ---- */ .ocl hr, .ocl .divider { border-top-color: #3a3834; } /* ---- Code blocks ---- */ .ocl .code-block, .ocl pre { background-color: #0c0c10; border-color: #2e2c28; color: #e8e6e0; } .ocl code:not(pre code) { background-color: rgba(61, 138, 108, 0.12); color: #3d8a6c; } /* ---- OCL-specific sections ---- */ .ocl .service-card { background: #2a2a2e; border-left-color: #3d8a6c; } .ocl .pricing-col { background: #2a2a2e; border-color: #3a3834; } .ocl .pricing-col.featured { border-top-color: #3d8a6c; } .ocl .ocl-testimonial { border-left-color: #d4a84a; background: #242428; } /* ---- Tooltips ---- */ .ocl .tooltip-content { background: #1a1a1e; border-color: #3a3834; color: #e8e6e0; } } /* ============================================================ 6. COMPONENT DARK MODE OVERRIDES — buddocloud buddocloud is already dark-native. These rules reinforce/deepen under explicit dark mode declarations. ============================================================ */ @media (prefers-color-scheme: dark), [data-theme='dark'] { /* Forms — ensure inputs look correct in deepened dark */ .buddocloud .form-input, .buddocloud .form-textarea, .buddocloud .form-select { background-color: #07070c; border-color: #1e1e2e; color: #f0f0f0; } .buddocloud .form-input:focus, .buddocloud .form-textarea:focus, .buddocloud .form-select:focus { border-color: #4fb3ff; box-shadow: 0 0 0 2px rgba(79, 179, 255, 0.25); } .buddocloud .form-input::placeholder, .buddocloud .form-textarea::placeholder { color: #6b6b8d; } /* Cards — deepen on explicit dark mode */ .buddocloud .card, .buddocloud .glass-card { background-color: #0d0d15; border-color: #1e1e2e; } /* Site header reinforcement */ .buddocloud .site-header { background: rgba(7, 7, 12, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: #1e1e2e; } /* Nav menu */ .buddocloud .nav-menu { background-color: #07070c; border-color: #1e1e2e; } /* Terminal block deepening */ .buddocloud .terminal-block { background-color: #030306; border-color: #1e1e2e; } } /* ============================================================ 7. IMAGE HANDLING IN DARK MODE ============================================================ */ @media (prefers-color-scheme: dark), [data-theme='dark'] { /* ---- OCL photos — reduce harsh highlights on dark bg ---- */ /* brightness(0.85) prevents clipped whites; contrast(1.05) compensates for flatness */ .ocl img:not(.no-dark-filter) { filter: brightness(0.85) contrast(1.05); } /* ---- buddocloud — minimal adjustment (already dark context) ---- */ .buddocloud img:not(.no-dark-filter) { filter: brightness(0.95); } /* ---- Logo inversion — opt-in only for dark monochrome logos ---- */ /* Do NOT auto-apply — use class manually on single-color dark logos */ .logo-invert-dark { filter: invert(1); } /* ---- Background image containers — add darkening overlay ---- */ .has-bg-img { position: relative; } .has-bg-img::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); pointer-events: none; z-index: 1; } /* ---- Opt-out — elements exempt from dark mode image treatments ---- */ .no-dark-filter { filter: none !important; } /* ---- SVG icon dark treatment (opt-in for hardcoded-dark SVGs) ---- */ .icon-dark-invert { filter: brightness(0) invert(1); } } /* ============================================================ 8. SELECTION COLORS ============================================================ */ /* buddocloud — always blue-tinted (dark site, no media query needed) */ .buddocloud ::selection { background: rgba(79, 179, 255, 0.30); color: #ffffff; } /* OCL light — default green-tinted */ .ocl ::selection { background: rgba(45, 95, 74, 0.25); color: #1a1a2e; } /* OCL dark mode — warmer tint on dark bg */ @media (prefers-color-scheme: dark), [data-theme='dark'] { .ocl ::selection { background: rgba(61, 138, 108, 0.40); color: #e8e6e0; } } /* ============================================================ 9. SCROLLBAR STYLING (WebKit) buddocloud: always dark scrollbar (dark-native site) OCL: dark scrollbar in dark mode only ============================================================ */ /* buddocloud — always dark (already a dark-theme site) */ .buddocloud ::-webkit-scrollbar { width: 8px; height: 8px; } .buddocloud ::-webkit-scrollbar-track { background: #07070c; } .buddocloud ::-webkit-scrollbar-thumb { background: #2e2e42; border-radius: 4px; } .buddocloud ::-webkit-scrollbar-thumb:hover { background: #4fb3ff; } /* OCL — dark scrollbar in dark mode only */ @media (prefers-color-scheme: dark), [data-theme='dark'] { .ocl ::-webkit-scrollbar { width: 8px; height: 8px; } .ocl ::-webkit-scrollbar-track { background: #1a1a1e; } .ocl ::-webkit-scrollbar-thumb { background: #3a3834; border-radius: 4px; } .ocl ::-webkit-scrollbar-thumb:hover { background: #3d8a6c; } } /* ============================================================ 10. FOCUS RING IN DARK MODE ============================================================ */ @media (prefers-color-scheme: dark), [data-theme='dark'] { .ocl :focus-visible { outline-color: #3d8a6c; box-shadow: var(--focus-ring, 0 0 0 2px rgba(61, 138, 108, 0.40)); } .buddocloud :focus-visible { outline-color: #4fb3ff; box-shadow: var(--focus-ring, 0 0 0 2px rgba(79, 179, 255, 0.40)); } } /* ============================================================ 11. MARK / HIGHLIGHT IN DARK MODE ============================================================ */ @media (prefers-color-scheme: dark), [data-theme='dark'] { .ocl mark { background: rgba(212, 168, 74, 0.30); color: #e8e6e0; } .buddocloud mark { background: rgba(255, 184, 0, 0.25); color: #f0f0f0; } } /* ============================================================ 12. PRINT — ALWAYS LIGHT Print always renders in light mode regardless of dark mode state. ============================================================ */ @media print { .buddocloud, .ocl { --color-bg-page: #ffffff; --color-bg-surface: #ffffff; --color-bg-elevated: #ffffff; --color-text-primary: #000000; --color-text-secondary:#333333; color-scheme: light; } }