/* ============================================================= BJC Toolbar — Dark/Light Mode + Font Size File: bjc-toolbar.css (goes in your child theme folder) ============================================================= */ /* ---- Toolbar container ---- */ .bjc-toolbar { display: flex; align-items: center; gap: 8px; position: fixed; /* Fixed so it's always visible */ top: 16px; right: 20px; z-index: 9999; background: rgba(15, 20, 25, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(212, 168, 67, 0.2); border-radius: 50px; padding: 4px 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); transition: background 0.3s, border-color 0.3s; } /* Light mode toolbar override */ body.bjc-light .bjc-toolbar { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 4px 20px rgba(0,0,0,0.15); } /* ---- Font size buttons ---- */ .bjc-font-controls { display: flex; align-items: center; gap: 2px; } .bjc-font-btn { background: none; border: none; cursor: pointer; color: #a8a299; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; border-radius: 6px; padding: 2px 6px; transition: color 0.2s, background 0.2s; line-height: 1; } .bjc-font-btn[data-size="small"] { font-size: 11px; } .bjc-font-btn[data-size="medium"] { font-size: 14px; } .bjc-font-btn[data-size="large"] { font-size: 22px; } .bjc-font-btn:hover { color: #d4a843; background: rgba(212, 168, 67, 0.1); } .bjc-font-btn.active { color: #d4a843; background: rgba(212, 168, 67, 0.15); } body.bjc-light .bjc-font-btn { color: #666; } body.bjc-light .bjc-font-btn:hover { color: #b8922e; background: rgba(184, 146, 46, 0.1); } body.bjc-light .bjc-font-btn.active { color: #b8922e; background: rgba(184, 146, 46, 0.15); } /* Divider between font controls and mode toggle */ .bjc-font-controls::after { content: ''; display: block; width: 1px; height: 18px; background: rgba(212, 168, 67, 0.25); margin-left: 6px; } /* ---- Dark/Light toggle button ---- */ .bjc-mode-toggle { background: none; border: none; cursor: pointer; font-size: 16px; padding: 2px 4px; border-radius: 6px; transition: transform 0.3s, background 0.2s; line-height: 1; } .bjc-mode-toggle:hover { transform: scale(1.2); background: rgba(212, 168, 67, 0.1); } /* Show/hide icons based on mode */ body:not(.bjc-light) .bjc-icon-light { display: none; } body.bjc-light .bjc-icon-dark { display: none; } /* ============================================================= FONT SIZE CLASSES — applied to ============================================================= */ body.bjc-font-small { font-size: 18px !important; } body.bjc-font-medium { font-size: 24px !important; } body.bjc-font-large { font-size: 30px !important; } body.bjc-font-small p, body.bjc-font-small li, body.bjc-font-small td { font-size: 1.9rem !important; } body.bjc-font-medium p, body.bjc-font-medium li, body.bjc-font-medium td { font-size: 2.1rem !important; } body.bjc-font-large p, body.bjc-font-large li, body.bjc-font-large td { font-size: 2.5rem !important; } /* ============================================================= LIGHT MODE OVERRIDES Undoes the dark navy theme for key elements ============================================================= */ body.bjc-light, body.bjc-light .page-header, body.bjc-light .main-raised { background-color: #f5f5f0 !important; color: #1a1a1a !important; } body.bjc-light .navbar, body.bjc-light .navbar-default, body.bjc-light .navbar-ct-transparent { background: rgba(255,255,255,0.9) !important; border-bottom: 1px solid rgba(0,0,0,0.1) !important; } body.bjc-light .navbar .nav-link, body.bjc-light .navbar-nav > li > a { color: #1a1a1a !important; } body.bjc-light h1, body.bjc-light h2, body.bjc-light h3, body.bjc-light h4 { color: #1a1a1a !important; } body.bjc-light p, body.bjc-light .card-description { color: #444 !important; } body.bjc-light .card, body.bjc-light [class*="bjc-card"] { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; } body.bjc-light a { color: #b8922e !important; } body.bjc-light footer, body.bjc-light .footer { background: #1a1a1a !important; color: #f0f0f0 !important; } /* Responsive — shrink toolbar on mobile */ @media (max-width: 768px) { .bjc-toolbar { top: auto; bottom: 16px; right: 16px; } }