/* Theme Name: OnlyTools Theme URI: https://example.com/onlytools-theme Author: Your Name Author URI: https://example.com/ Description: A clean, iOS-inspired WordPress theme for a collection of online tools. Based on the OnlyTools frontend project. Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: custom-logo, custom-background, theme-options, light, dark, responsive-layout, one-column, two-columns, three-columns, four-columns Text Domain: onlytools */ /* * Custom Styles for iOS-inspired theme and smooth transitions. * We use CSS variables to manage theme colors, which are then * toggled by adding/removing a 'dark' class on the element. */ :root { --bg-color: #f3f4f6; /* Light gray */ --text-color: #1f2937; /* Dark gray */ --header-text-color: #111827; /* Near black */ --card-bg-color: #ffffff; /* White */ --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07); --card-hover-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --icon-bg-color: #e5e7eb; /* Lighter gray for icon background */ } html.dark { --bg-color: #111827; /* Very dark blue/gray */ --text-color: #d1d5db; /* Light gray */ --header-text-color: #f9fafb; /* Off-white */ --card-bg-color: #1f2937; /* Darker gray */ --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2); --card-hover-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3); --icon-bg-color: #374151; /* Medium gray for icon background */ } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; background-color: var(--bg-color); color: var(--text-color); /* Smooth transition for all color changes */ transition: background-color 0.3s ease, color 0.3s ease; } /* Applying theme variables via Tailwind's @apply for consistency */ .themed-bg { background-color: var(--bg-color); transition: background-color 0.3s ease; } .themed-text { color: var(--text-color); transition: color 0.3s ease; } .themed-header-text { color: var(--header-text-color); transition: color 0.3s ease; } .themed-card { background-color: var(--card-bg-color); box-shadow: var(--card-shadow); transition: background-color 0.3s ease, box-shadow 0.2s ease, transform 0.2s ease; } .themed-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: var(--card-hover-shadow); } .themed-icon-bg { background-color: var(--icon-bg-color); transition: background-color 0.3s ease; }