/* ============================================ Calquto Toolbox — shared UX layer Injected on every tool page. Safe to load alongside any existing site CSS. ============================================ */ /* ---- Dark mode (applied via class on ) ---- */ html.ct-dark { background: #0f1115; color-scheme: dark; } html.ct-dark body { background: #0f1115 !important; color: #e6e8ec !important; } html.ct-dark a { color: #7dd3fc !important; } html.ct-dark input, html.ct-dark select, html.ct-dark textarea { background: #1a1d24 !important; color: #e6e8ec !important; border-color: #333844 !important; } html.ct-dark [class*="card"], html.ct-dark [class*="panel"], html.ct-dark [class*="box"] { background: #171a20 !important; border-color: #262a33 !important; } /* ---- Floating action bar (dark mode + bookmark) ---- */ .ct-fab-bar { position: fixed; bottom: 20px; right: 20px; display: flex; gap: 8px; z-index: 9999; } .ct-fab { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); background: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: transform 0.15s ease; } .ct-fab:hover { transform: scale(1.08); } html.ct-dark .ct-fab { background: #1a1d24; border-color: #333844; color: #e6e8ec; } .ct-fab.ct-active { background: #fef3c7; } html.ct-dark .ct-fab.ct-active { background: #78350f; } /* ---- Recently viewed strip (homepage) ---- */ .ct-recent-strip { max-width: 1100px; margin: 24px auto; padding: 0 16px; } .ct-recent-strip h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; margin-bottom: 10px; } html.ct-dark .ct-recent-strip h3 { color: #9aa1ac; } .ct-recent-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; } .ct-recent-chip { flex: 0 0 auto; padding: 8px 14px; border-radius: 20px; background: #f3f4f6; border: 1px solid #e5e7eb; font-size: 13px; white-space: nowrap; color: inherit; text-decoration: none; } html.ct-dark .ct-recent-chip { background: #1a1d24; border-color: #333844; } /* ---- Related tools widget (tool pages) ---- */ .ct-related { max-width: 900px; margin: 40px auto; padding: 20px 16px; border-top: 1px solid #e5e7eb; } html.ct-dark .ct-related { border-color: #262a33; } .ct-related h3 { font-size: 15px; margin-bottom: 12px; color: #374151; } html.ct-dark .ct-related h3 { color: #d1d5db; } .ct-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .ct-related-card { display: block; padding: 12px 14px; border-radius: 10px; border: 1px solid #e5e7eb; text-decoration: none; color: inherit; font-size: 14px; transition: border-color 0.15s ease; } .ct-related-card:hover { border-color: #9ca3af; } html.ct-dark .ct-related-card { border-color: #262a33; } /* ---- Newsletter strip ---- */ .ct-newsletter { max-width: 700px; margin: 30px auto; padding: 18px; border-radius: 12px; background: #f0f9ff; text-align: center; } html.ct-dark .ct-newsletter { background: #172033; } .ct-newsletter input[type="email"] { padding: 10px 12px; border-radius: 8px; border: 1px solid #d1d5db; min-width: 220px; margin: 8px 6px 0; } .ct-newsletter button { padding: 10px 16px; border-radius: 8px; border: none; background: #2563eb; color: #fff; font-weight: 600; cursor: pointer; margin-top: 8px; }