/* ═══════════════════════════════════════════════════════════════ BBD Black & White Theme System Drop this after all other CSS files in Activates via: Toggle via: window.BBDTheme.toggle() ═══════════════════════════════════════════════════════════════ */ /* ── THEME TOGGLE BUTTON ── */ #bbd-theme-btn { position: fixed; bottom: 28px; left: 28px; z-index: 99990; width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, opacity 0.3s; outline: none; overflow: visible; background: transparent; padding: 0; } /* Orb shell */ #bbd-theme-btn .orb { position: relative; width: 52px; height: 52px; border-radius: 50%; background: #0a0a0a; border: 1.5px solid rgba(212,255,60,0.4); box-shadow: 0 0 0 0 rgba(212,255,60,0.0), 0 6px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; transition: all 0.4s ease; overflow: hidden; } /* Half-circle inner design */ #bbd-theme-btn .orb::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient( from 0deg, #d4ff3c 0deg 180deg, #050507 180deg 360deg ); opacity: 0.18; transition: opacity 0.4s; } /* Icon container */ #bbd-theme-btn .icon-wrap { position: relative; z-index: 2; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } /* Sun icon (default dark mode) */ #bbd-theme-btn .icon-sun, #bbd-theme-btn .icon-moon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1); } #bbd-theme-btn .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } #bbd-theme-btn .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); } /* Sun SVG */ #bbd-theme-btn .icon-sun svg, #bbd-theme-btn .icon-moon svg { width: 18px; height: 18px; } /* Hover state */ #bbd-theme-btn:hover .orb { border-color: rgba(212,255,60,0.75); box-shadow: 0 0 18px rgba(212,255,60,0.22), 0 8px 28px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1); transform: scale(1.07); } #bbd-theme-btn:hover .orb::before { opacity: 0.28; } /* Active press */ #bbd-theme-btn:active .orb { transform: scale(0.93); } /* Pulse ring on click */ #bbd-theme-btn .pulse-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(212,255,60,0.5); opacity: 0; pointer-events: none; transform: scale(0.8); } #bbd-theme-btn.pulsing .pulse-ring { animation: btnPulse 0.55s ease-out forwards; } @keyframes btnPulse { 0% { opacity: 0.8; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.4); } } /* Tooltip */ #bbd-theme-btn::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-6px); background: rgba(10,10,14,0.95); color: #e5e5e5; font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 4px 14px rgba(0,0,0,0.4); } #bbd-theme-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* ─ B&W Mode: flip icon states ─ */ [data-theme="bw"] #bbd-theme-btn .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); } [data-theme="bw"] #bbd-theme-btn .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="bw"] #bbd-theme-btn .orb { background: #f0f0f0; border-color: rgba(0,0,0,0.2); box-shadow: 0 0 0 0 rgba(0,0,0,0), 0 6px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.6); } [data-theme="bw"] #bbd-theme-btn .orb::before { background: conic-gradient( from 0deg, #111 0deg 180deg, #f5f5f5 180deg 360deg ); opacity: 0.22; } [data-theme="bw"] #bbd-theme-btn:hover .orb { border-color: rgba(0,0,0,0.5); box-shadow: 0 0 14px rgba(0,0,0,0.12), 0 8px 28px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.7); } [data-theme="bw"] #bbd-theme-btn .pulse-ring { border-color: rgba(0,0,0,0.35); } [data-theme="bw"] #bbd-theme-btn::after { background: rgba(240,240,240,0.97); color: #111; border-color: rgba(0,0,0,0.12); } /* Mobile positioning */ @media (max-width: 768px) { #bbd-theme-btn { bottom: 20px; left: 16px; width: 46px; height: 46px; } #bbd-theme-btn .orb { width: 46px; height: 46px; } #bbd-theme-btn::after { display: none; /* hide tooltip on mobile */ } } /* ═══════════════════════════════════════════════════════════════ BLACK & WHITE THEME — [data-theme="bw"] Every color is mapped to a pure grayscale equivalent. Accent lime → #111 (black). Text → #0a0a0a. BG → #f5f5f5. ═══════════════════════════════════════════════════════════════ */ [data-theme="bw"] { /* ── Core variables ── */ --black: #f5f5f3; --white: #0a0a0a; --mid: #eaeae8; --card: #e4e4e2; --card2: #ddddd9; --dim: #666660; --dimmer: #888882; --accent: #111111; --accent2: #444444; --cyan: #333333; --border: rgba(0,0,0,0.1); --border2: rgba(0,0,0,0.16); --glow-lime: none; --glow-coral: none; --glow-cyan: none; --shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 0 rgba(0,0,0,0.06); --shadow-lg: 0 16px 48px rgba(0,0,0,0.18), 0 1px 0 rgba(0,0,0,0.08); } /* ── Body & Background ── */ [data-theme="bw"] body { background: #f5f5f3; color: #0a0a0a; } /* Grain overlay – lighter in BW */ [data-theme="bw"] body::before, [data-theme="bw"] body::after { opacity: 0.015; } /* ── Loader ── */ [data-theme="bw"] #loader { background: #f5f5f3; animation: none; } [data-theme="bw"] .loader-word span:nth-child(1) { color: #111; } [data-theme="bw"] .loader-word span:nth-child(2) { color: #555; } [data-theme="bw"] .loader-word span:nth-child(3) { color: #222; } [data-theme="bw"] .loader { color: #111; text-shadow: none; } [data-theme="bw"] .letter { animation: glowBW 1.5s infinite alternate ease-in-out; } @keyframes glowBW { 0% { opacity: 0.3; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } } /* ── Navigation ── */ [data-theme="bw"] nav { background: rgba(245,245,243,0.96); backdrop-filter: blur(18px); box-shadow: 0 1px 0 rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.08); } [data-theme="bw"] nav.scrolled { background: rgba(245,245,243,0.98); box-shadow: 0 2px 16px rgba(0,0,0,0.1); } [data-theme="bw"] .logo { background: linear-gradient(90deg, #111, #444, #111); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="bw"] nav .logo { color: #111; } [data-theme="bw"] .nav-links li a { color: rgba(10,10,10,0.65); } [data-theme="bw"] .nav-links li a:hover { color: #0a0a0a; background: rgba(0,0,0,0.055); } [data-theme="bw"] .nav-links li a.nav-cta { background: #111; color: #f5f5f3 !important; } [data-theme="bw"] .nav-links li a.nav-cta:hover { background: #333; box-shadow: 0 4px 16px rgba(0,0,0,0.2); color: #fff !important; } [data-theme="bw"] .nav-links.active { background: rgba(245,245,243,0.99); } [data-theme="bw"] .nav-overlay { background: rgba(245,245,243,0.98); } [data-theme="bw"] .nav-overlay a { color: #0a0a0a; } [data-theme="bw"] .nav-overlay a:hover { color: #111; background: rgba(0,0,0,0.06); } [data-theme="bw"] .nav-toggle span { background: #111; } /* Mobile nav */ [data-theme="bw"] .mobile-nav { background: #f5f5f3; } [data-theme="bw"] .mobile-nav a { color: #111; } [data-theme="bw"] .mobile-nav a:hover { color: #555; } /* ── Hero Section ── */ [data-theme="bw"] header { background: #f5f5f3; } [data-theme="bw"] .hero-glow-1, [data-theme="bw"] .hero-glow-2 { display: none; } [data-theme="bw"] .hero-grid-bg { background-image: linear-gradient(rgba(0,0,0,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.055) 1px, transparent 1px); mask-image: radial-gradient(ellipse at center, black 20%, transparent 72%); } [data-theme="bw"] .eyebrow { color: #111; } [data-theme="bw"] .eyebrow::before, [data-theme="bw"] .eyebrow::after { background: #111; opacity: 0.5; } [data-theme="bw"] .hero-title { color: #0a0a0a; } [data-theme="bw"] .hero-title em { color: transparent; -webkit-text-stroke: 1.5px rgba(0,0,0,0.25); } [data-theme="bw"] .hero-title strong { color: #111; text-shadow: none; } [data-theme="bw"] .hero-sub { color: #555; } [data-theme="bw"] .trust-item { color: #666; } [data-theme="bw"] .trust-dot { background: #111; box-shadow: none; } /* ── Buttons ── */ [data-theme="bw"] .btn-primary { background: #111; color: #f5f5f3; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } [data-theme="bw"] .btn-primary:hover { background: #333; box-shadow: 0 10px 28px rgba(0,0,0,0.25); color: #fff; } [data-theme="bw"] .btn-ghost { color: #111; border-color: rgba(0,0,0,0.25); } [data-theme="bw"] .btn-ghost:hover { border-color: rgba(0,0,0,0.55); color: #0a0a0a; } /* ── Marquee strip ── */ [data-theme="bw"] .solutions-strip { background: #eaeae8; border-top-color: rgba(0,0,0,0.1); border-bottom-color: rgba(0,0,0,0.1); } [data-theme="bw"] .marquee-item { color: rgba(10,10,10,0.5); } [data-theme="bw"] .marquee-item::after { color: #111; } [data-theme="bw"] .marquee-item:hover { color: #0a0a0a; } /* ── Section labels & titles ── */ [data-theme="bw"] .sec-label { color: #111; } [data-theme="bw"] .sec-title { color: #0a0a0a; } [data-theme="bw"] .sec-title em { color: transparent; -webkit-text-stroke: 1px rgba(0,0,0,0.22); } /* ── Services ── */ [data-theme="bw"] .services-wrap { background: #f5f5f3; } [data-theme="bw"] .services-grid { background: rgba(0,0,0,0.06); } [data-theme="bw"] .svc-card { background: #f5f5f3; } [data-theme="bw"] .svc-card::before { background: linear-gradient(135deg, rgba(0,0,0,0.04), transparent 55%); } [data-theme="bw"] .svc-card:hover { background: #eaeae8; } [data-theme="bw"] .svc-num { color: rgba(0,0,0,0.06); } [data-theme="bw"] .svc-card h3 { color: #0a0a0a; } [data-theme="bw"] .svc-card p { color: #666; } [data-theme="bw"] .svc-tag { color: #111; border-color: rgba(0,0,0,0.2); } /* ── Case Studies ── */ [data-theme="bw"] .cases-wrap { background: #eaeae8; } [data-theme="bw"] .case-card { background: rgba(0,0,0,0.035); border-color: rgba(0,0,0,0.1); } [data-theme="bw"] .case-card:hover { border-color: rgba(0,0,0,0.3); } [data-theme="bw"] .case-metric { color: #111; } [data-theme="bw"] .case-name { color: #0a0a0a; } [data-theme="bw"] .case-type { color: #777; } [data-theme="bw"] .case-card p { color: rgba(10,10,10,0.52); } [data-theme="bw"] .case-bar { background: linear-gradient(90deg, #111, transparent); } /* ── Tech stack ── */ [data-theme="bw"] .tech-wrap { background: #f5f5f3; } [data-theme="bw"] .tech-chip { background: rgba(0,0,0,0.042); border-color: rgba(0,0,0,0.1); color: rgba(10,10,10,0.6); } [data-theme="bw"] .tech-chip:hover { background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.25); color: #0a0a0a; } /* ── Automation ── */ [data-theme="bw"] .auto-wrap { background: #eaeae8; } [data-theme="bw"] .auto-item { border-top-color: rgba(0,0,0,0.1); } [data-theme="bw"] .auto-item:last-child { border-bottom-color: rgba(0,0,0,0.1); } [data-theme="bw"] .auto-abbr { color: #111; background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.18); } [data-theme="bw"] .auto-text strong { color: #0a0a0a; } [data-theme="bw"] .auto-text span { color: #666; } [data-theme="bw"] .auto-visual { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.1); } [data-theme="bw"] .ring { border-color: rgba(0,0,0,0.1); } [data-theme="bw"] .ring-center { background: linear-gradient(135deg, #111, #555); box-shadow: 0 0 30px rgba(0,0,0,0.15), 0 0 60px rgba(0,0,0,0.06); } /* ── Testimonials ── */ [data-theme="bw"] .testi-wrap { background: #f5f5f3; } [data-theme="bw"] .testi-glow { display: none; } [data-theme="bw"] .testi-card { background: #eaeae8; border-color: rgba(0,0,0,0.1); } [data-theme="bw"] .testi-card:hover { border-color: rgba(0,0,0,0.2); } [data-theme="bw"] .testi-card::before { color: #111; } [data-theme="bw"] .testi-card blockquote { color: rgba(10,10,10,0.7); } [data-theme="bw"] .author-avatar { background: linear-gradient(135deg, #111, #555); color: #f5f5f3; } [data-theme="bw"] .author-name { color: #0a0a0a; } [data-theme="bw"] .author-co { color: #777; } /* ── Contact ── */ [data-theme="bw"] .contact-wrap { background: #f5f5f3; } [data-theme="bw"] .contact-glow { display: none; } [data-theme="bw"] .contact-inner > p { color: #666; } [data-theme="bw"] .contact-form { background: #eaeae8; border-color: rgba(0,0,0,0.1); } [data-theme="bw"] .form-group label { color: rgba(10,10,10,0.42); } [data-theme="bw"] .form-group input, [data-theme="bw"] .form-group textarea { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #0a0a0a; } [data-theme="bw"] .form-group input:focus, [data-theme="bw"] .form-group textarea:focus { border-color: rgba(0,0,0,0.38); background: rgba(0,0,0,0.06); } [data-theme="bw"] .form-group input::placeholder, [data-theme="bw"] .form-group textarea::placeholder { color: rgba(10,10,10,0.22); } [data-theme="bw"] .form-note { color: #777; } /* ── Tools strip ── */ [data-theme="bw"] .tools-wrap { background: #eaeae8; border-top-color: rgba(0,0,0,0.1); border-bottom-color: rgba(0,0,0,0.1); } [data-theme="bw"] .tools-label { color: rgba(10,10,10,0.35); } [data-theme="bw"] .tools-list a { color: rgba(10,10,10,0.6); border-color: rgba(0,0,0,0.12); } [data-theme="bw"] .tools-list a:hover { color: #0a0a0a; border-color: rgba(0,0,0,0.35); background: rgba(0,0,0,0.06); } /* ── Footnote ── */ [data-theme="bw"] .footnote-wrap { background: #f5f5f3; } [data-theme="bw"] .footnote-inner h4 { color: rgba(10,10,10,0.3); } [data-theme="bw"] .footnote-inner p { color: rgba(10,10,10,0.2); } /* ── Footer ── */ [data-theme="bw"] footer { background: #0a0a0a; border-top-color: rgba(255,255,255,0.06); } [data-theme="bw"] .footer-top { border-bottom-color: rgba(255,255,255,0.06); } [data-theme="bw"] .footer-brand p { color: rgba(245,244,240,0.45); } [data-theme="bw"] .footer-col h4 { color: rgba(245,244,240,0.9); } [data-theme="bw"] .footer-col ul li a { color: rgba(245,244,240,0.4); } [data-theme="bw"] .footer-col ul li a:hover { color: #f5f4f0; } [data-theme="bw"] .footer-bottom { color: rgba(245,244,240,0.3); border-top-color: rgba(255,255,255,0.06); } [data-theme="bw"] .footer-legal a { color: rgba(245,244,240,0.35); } [data-theme="bw"] .footer-legal a:hover { color: rgba(245,244,240,0.75); } [data-theme="bw"] .social-links a { background: rgba(255,255,255,0.06); color: rgba(245,244,240,0.55); border-color: rgba(255,255,255,0.08); } [data-theme="bw"] .social-links a:hover { background: rgba(255,255,255,0.12); color: #f5f4f0; } /* ── Footer categories row ── */ [data-theme="bw"] .footer-cats { background: #0a0a0a; border-top-color: rgba(255,255,255,0.06); } [data-theme="bw"] .cat-col h5 { color: rgba(245,244,240,0.6); } [data-theme="bw"] .cat-col ul li a { color: rgba(245,244,240,0.35); } [data-theme="bw"] .cat-col ul li a:hover { color: #f5f4f0; } /* ── Back to top button ── */ [data-theme="bw"] #back-to-top { background: #111; color: #f5f5f3; border-color: rgba(0,0,0,0.2); box-shadow: 0 4px 16px rgba(0,0,0,0.15); } [data-theme="bw"] #back-to-top:hover { background: #333; } /* ── Privacy popup (shadow DOM – limited reach) ── */ [data-theme="bw"] bbd-popup { filter: invert(0); } /* ── Skill cards / feature cards (if any) ── */ [data-theme="bw"] .feature, [data-theme="bw"] .card, [data-theme="bw"] .item { background: #eaeae8; border-color: rgba(0,0,0,0.1); color: #0a0a0a; } /* ── Any generic section headings ── */ [data-theme="bw"] h1, [data-theme="bw"] h2, [data-theme="bw"] h3, [data-theme="bw"] h4 { color: #0a0a0a; } [data-theme="bw"] p { color: rgba(10,10,10,0.72); } /* ── Hero section (hero-section.css overrides) ── */ [data-theme="bw"] header { background: linear-gradient(180deg, #f5f5f3, #eaeae8); color: #0a0a0a; } [data-theme="bw"] .hero-content { color: #0a0a0a; } [data-theme="bw"] .hero-content h1 { color: #0a0a0a; text-shadow: none; } [data-theme="bw"] .hero-content p { color: rgba(10,10,10,0.7); } [data-theme="bw"] .hero-content .cta-button { background: #111; color: #f5f5f3; box-shadow: 0 6px 18px rgba(0,0,0,0.2); } [data-theme="bw"] .hero-content .cta-button:hover { background: #333; color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 24px rgba(0,0,0,0.25); } /* ── Navigation-styles.css overrides ── */ [data-theme="bw"] nav ul li a { color: rgba(10,10,10,0.75); } [data-theme="bw"] nav ul li a::before { background: linear-gradient(90deg, #111, #555, #111); } [data-theme="bw"] nav ul li a::after { box-shadow: 0 0 10px rgba(0,0,0,0.12); } [data-theme="bw"] nav ul li ul { background: rgba(245,245,243,0.97); } [data-theme="bw"] nav ul li ul li a:hover { background-color: rgba(0,0,0,0.06); color: #111; } [data-theme="bw"] .nav-links.active { background: rgba(245,245,243,0.99); } /* ── Smooth transition for the entire page ── */ [data-theme="bw"] *, [data-theme="bw"] *::before, [data-theme="bw"] *::after { transition-property: background-color, color, border-color, box-shadow; transition-duration: 0.32s; transition-timing-function: ease; } /* Exclude animation-only properties from the blanket transition */ [data-theme="bw"] .loader-word span, [data-theme="bw"] .ring, [data-theme="bw"] .ring-center, [data-theme="bw"] .marquee-track, [data-theme="bw"] .hero-title strong { transition: none; } /* ── Global transition when switching themes ── */ html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.38s ease, color 0.38s ease, border-color 0.38s ease, box-shadow 0.38s ease !important; }