/* SwissKnifeTools Light Blue Theme (drop-in) v2025.09 How to use: add in AFTER any existing CSS. No HTML changes required. Focuses on light-blue UI, dark text, and accessible contrasts. */ :root{ /* Core palette */ --skn-bg: #f0f7ff; /* page background */ --skn-surface: #ffffff; /* cards / panes */ --skn-surface-2:#f4f9ff; /* subtle panels */ --skn-primary-50:#eff6ff; --skn-primary-100:#dbeafe; --skn-primary-200:#bfdbfe; --skn-primary-300:#93c5fd; --skn-primary-400:#60a5fa; --skn-primary-500:#3b82f6; --skn-primary-600:#2563eb; --skn-primary-700:#1d4ed8; --skn-ink:#111827; /* main text (near-black) */ --skn-ink-soft:#475569; /* secondary text */ --skn-border:#e6eefb; /* borders */ --skn-ring:#93c5fd; /* focus ring */ --skn-shadow: 0 8px 20px rgba(16, 24, 40, 0.06); --skn-radius: 14px; --skn-radius-sm: 10px; --skn-radius-lg: 18px; /* Sizes / spacing */ --skn-pad: 1rem; --skn-gap: 1rem; --skn-gap-lg: 1.25rem; --skn-line: 1.6; } /* Base */ html, body{ background: var(--skn-bg); color: var(--skn-ink); line-height: var(--skn-line); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headers / topbars */ header, .header, .topbar, .site-header{ background: var(--skn-surface); border-bottom: 1px solid var(--skn-border); box-shadow: var(--skn-shadow); } header a, .header a, .topbar a, .site-header a{ color: var(--skn-ink); text-decoration: none; } header a:hover{ color: var(--skn-primary-700); } /* Generic containers / cards */ .card, .panel, .box, .widget, .tool-card, .calculator-card, .feature, .module{ background: var(--skn-surface); border: 1px solid var(--skn-border); border-radius: var(--skn-radius); box-shadow: var(--skn-shadow); padding: var(--skn-pad); } /* Sidebars / menus */ aside, .sidebar, .leftnav, .side-panel{ background: var(--skn-surface); border: 1px solid var(--skn-border); border-radius: var(--skn-radius); } .sidebar a, .leftnav a, .side-panel a{ display: block; padding: .625rem .75rem; color: var(--skn-ink); border-left: 4px solid transparent; border-radius: 10px; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .sidebar a:hover, .leftnav a:hover, .side-panel a:hover{ background: var(--skn-primary-100); color: var(--skn-primary-700); border-left-color: var(--skn-primary-500); transform: translateX(2px); } .sidebar .active, .leftnav .active, .side-panel .active{ background: var(--skn-primary-50); color: var(--skn-primary-700); border-left-color: var(--skn-primary-600); font-weight: 600; } /* Category tabs (unselected tabs must never be black) */ .tabs, .category-tabs{ display: flex; gap: .5rem; flex-wrap: wrap; } .tabs .tab, .category-tabs .tab, .chip, .pill{ background: var(--skn-primary-50); color: var(--skn-ink); border: 1px solid var(--skn-primary-100); border-radius: 999px; padding: .5rem .85rem; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .12s ease; } .tabs .tab:hover, .category-tabs .tab:hover{ background: var(--skn-primary-100); border-color: var(--skn-primary-200); } .tabs .tab.active, .category-tabs .tab.active{ background: var(--skn-primary-500); color: #fff; border-color: var(--skn-primary-500); } /* Buttons (no black background anywhere) */ button, .btn, input[type="button"], input[type="submit"]{ background: var(--skn-primary-600); color: #fff; border: 1px solid var(--skn-primary-600); border-radius: 12px; padding: .6rem 1rem; font-weight: 600; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease, background .2s ease; box-shadow: 0 1px 2px rgba(0,0,0,.04); } button:hover, .btn:hover{ background: var(--skn-primary-700); } button:active, .btn:active{ transform: translateY(1px); } button.secondary, .btn.secondary{ background: var(--skn-primary-100); color: var(--skn-primary-700); border-color: var(--skn-primary-200); } button.ghost, .btn.ghost{ background: transparent; color: var(--skn-primary-700); border-color: var(--skn-primary-300); } /* Inputs / selects / textareas */ input[type="text"], input[type="number"], input[type="email"], input[type="search"], select, textarea{ background: #fff; color: var(--skn-ink); border: 1px solid var(--skn-border); border-radius: 12px; padding: .6rem .8rem; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } input::placeholder, textarea::placeholder{ color: #9aa6b2; } input:focus, select:focus, textarea:focus{ border-color: var(--skn-primary-400); box-shadow: 0 0 0 4px rgba(147, 197, 253, .35); } /* Result / info boxes */ .result, .notice, .info, .summary{ background: var(--skn-primary-50); border: 1px solid var(--skn-primary-100); color: var(--skn-ink); border-radius: var(--skn-radius-sm); padding: .75rem 1rem; } /* Tables (for any converters showing tabular output) */ table{ width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--skn-radius); border: 1px solid var(--skn-border); background: var(--skn-surface); } thead th{ background: var(--skn-primary-50); color: var(--skn-ink); text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--skn-border); font-weight: 700; } tbody td{ padding: .7rem .9rem; border-bottom: 1px solid var(--skn-border); } tbody tr:hover{ background: var(--skn-surface-2); } /* Links */ a{ color: var(--skn-primary-700); } a:hover{ text-decoration: underline; } /* Footer */ footer, .site-footer{ background: var(--skn-surface); border-top: 1px solid var(--skn-border); } /* Utility helpers (non-invasive) */ .skn-shadow{ box-shadow: var(--skn-shadow) !important; } .skn-card{ background: var(--skn-surface); border: 1px solid var(--skn-border); border-radius: var(--skn-radius); } .skn-muted{ color: var(--skn-ink-soft) !important; } .skn-bg{ background: var(--skn-bg) !important; } .skn-surface{ background: var(--skn-surface) !important; } /* Hover lift for cards */ .card:hover, .tool-card:hover, .calculator-card:hover, .panel:hover{ transform: translateY(-3px); transition: transform .2s ease; } /* Ensure no element ends up with black backgrounds mistakenly */ *[style*="background: black"], *[style*="background-color: black"]{ background: var(--skn-primary-100) !important; color: var(--skn-ink) !important; }