/* * ToolX Theme Main Styles * Optimized: Consolidated media queries, removed unused code, added dark mode * Critical (above-fold) styles are in critical.css and inlined in */ /* ========================================= Variables & Base (duplicated from critical.css for when this file loads standalone) ========================================= */ :root { --color-primary: #4f46e5; --color-primary-dark: #3730a3; --color-secondary: #06b6d4; --color-secondary-light: #67e8f9; --color-bg-light: #f8fafc; --color-bg-dark: #1e1b4b; --color-text-main: #0f172a; --color-text-muted: #64748b; --color-white: #ffffff; --color-surface: #ffffff; --font-main: 'Inter', system-ui, -apple-system, sans-serif; --radius-soft: 16px; --radius-btn: 12px; --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.08); --shadow-hover: 0 20px 50px -15px rgba(79, 70, 229, 0.2); --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.05); --container-width: 1200px; --header-height: 80px; } /* ========================================= Base Styles (fallback if critical.css missed) ========================================= */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-main); color: var(--color-text-main); background-color: var(--color-surface); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--color-secondary); } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 1.5rem; } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; margin-bottom: 1rem; color: var(--color-text-main); } h1 { font-size: 3.5rem; letter-spacing: -0.02em; } h2 { font-size: 2.5rem; } h3 { font-size: 1.5rem; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; font-weight: 600; border-radius: var(--radius-btn); transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; cursor: pointer; border: none; font-size: 1rem; } .btn-primary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: #fff; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4); color: #fff; } .btn-outline { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); } .btn-outline:hover { background: var(--color-primary); color: #fff; } .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; } .btn-lg { padding: 1rem 2rem; font-size: 1.1rem; } /* ========================================= Header ========================================= */ .site-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); z-index: 1000; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow 0.3s ease; display: flex; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .site-header.is-sticky { box-shadow: var(--shadow-soft); } .header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; } .site-title { font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 0; } .main-navigation ul { display: flex; list-style: none; gap: 2rem; } .main-navigation a { color: var(--color-text-main); font-weight: 500; } .main-navigation a:hover { color: var(--color-primary); } .site-main { padding-top: calc(var(--header-height) + 2rem); min-height: calc(100vh - 300px); } .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--color-text-main); } /* ========================================= Hero Section — Centered Search ========================================= */ .hero-section { padding: 2.5rem 0 2rem; background: linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-surface) 100%); position: relative; z-index: 50; overflow: visible; display: flex; align-items: center; max-height: 50vh; } .hero-search-centered { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 650px; margin: 0 auto; } .hero-search-centered h1 { font-size: 2.25rem; line-height: 1.1; margin-bottom: 1rem; background: linear-gradient(to right, var(--color-primary-dark), var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-subtext { font-size: 1rem; color: var(--color-text-muted); margin-bottom: 1.25rem; max-width: 500px; } /* Search Bar */ .hero-search-wrapper { position: relative; max-width: 550px; margin: 0 auto 1rem; width: 100%; } .search-form { display: flex; background: var(--color-surface); padding: 0.5rem; border-radius: 999px; box-shadow: var(--shadow-soft); border: 1px solid rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease, border-color 0.3s ease; } .search-form:focus-within { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15), var(--shadow-soft); border-color: rgba(79, 70, 229, 0.3); } .search-field { flex: 1; border: none; padding: 0.5rem 1rem; font-size: 1rem; background: transparent; outline: none; min-width: 0; font-family: var(--font-main); color: var(--color-text-main); } .search-field::placeholder { color: var(--color-text-muted); } .search-submit.btn { border-radius: 999px; padding: 0.75rem 1.5rem; white-space: nowrap; flex-shrink: 0; } /* Live search results */ .ajax-search-results { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; background: var(--color-surface); border-radius: var(--radius-soft); box-shadow: var(--shadow-hover); padding: 0.5rem; z-index: 100; max-height: 400px; overflow-y: auto; border: 1px solid rgba(0, 0, 0, 0.05); } .search-result-item { display: block; padding: 1rem; border-radius: 8px; text-decoration: none; color: var(--color-text-main); transition: background 0.2s ease; } .search-result-item:hover { background: var(--color-bg-light); } .result-title { font-weight: 600; margin-bottom: 0.25rem; display: flex; justify-content: space-between; align-items: center; } .result-excerpt { font-size: 0.875rem; color: var(--color-text-muted); } .search-no-results { padding: 1.5rem; text-align: center; color: var(--color-text-muted); font-size: 0.9rem; } /* ========================================= Footer ========================================= */ .site-footer { background-color: var(--color-bg-dark); color: #fff; padding: 4rem 0 2rem; margin-top: 4rem; } .footer-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; } .footer-widget h4 { color: #fff; margin-bottom: 1.5rem; font-size: 1.25rem; } .footer-widget ul { list-style: none; } .footer-widget ul li { margin-bottom: 0.75rem; } .footer-widget a { color: rgba(255, 255, 255, 0.7); } .footer-widget a:hover { color: var(--color-secondary-light); } .site-info { text-align: center; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; } /* ========================================= Badges ========================================= */ .badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .badge-post { background: #e2e8f0; color: #475569; } .badge-tools { background: #dcfce7; color: #166534; } /* ========================================= Sections ========================================= */ .section-padding { padding: 5rem 0; } .bg-light { background-color: var(--color-bg-light); } .section-header { margin-bottom: 3rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .section-header.text-center { text-align: center; justify-content: center; } .section-header h2 { margin-bottom: 0; } .section-header p { width: 100%; margin: 0; color: var(--color-text-muted); } .view-all { font-weight: 600; white-space: nowrap; } /* ========================================= Grid Utilities ========================================= */ .tools-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } /* ========================================= Tool Cards (Archive) ========================================= */ .tool-card { background: var(--color-surface); border-radius: var(--radius-soft); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; contain: content; } .tool-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); } .tool-thumbnail { position: relative; height: 200px; background: var(--color-bg-light); display: flex; align-items: center; justify-content: center; overflow: hidden; } .tool-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .placeholder-thumb { width: 100%; height: 100%; opacity: 0.5; } .pricing-badge { position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); color: var(--color-primary-dark); padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; } .tool-content { padding: 1.25rem; } .tool-content h3 { font-size: 1.1rem; margin-bottom: 0.5rem; } .tool-content h3 a { color: var(--color-text-main); } .tool-content h2 { font-size: 1.1rem; margin-bottom: 0.5rem; } .tool-excerpt { color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: 1.5rem; } /* Tool Card Link – makes entire card clickable */ .tool-card-link { display: block; text-decoration: none; color: inherit; } .tool-card-link:hover { color: inherit; } /* ========================================= Inline Tool Cards (Icon Left + Title Right) ========================================= */ .tool-card-inline { overflow: visible; box-shadow: var(--shadow-soft); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: var(--radius-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; contain: content; } .tool-card-inline:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .tool-card-inline .tool-card-link { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; } .tool-icon-thumb { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--color-bg-light); display: flex; align-items: center; justify-content: center; color: var(--color-primary); } .tool-icon-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; } .tool-card-inline h3 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--color-text-main); line-height: 1.3; } /* Override tools-grid for inline layout */ .latest-tools-section .tools-grid { grid-template-columns: 1fr; gap: 0.75rem; } /* ========================================= Tools Category Grid ========================================= */ .tools-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .tools-cat-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--color-surface); padding: 1.5rem; border-radius: var(--radius-soft); box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(0, 0, 0, 0.03); text-decoration: none; color: var(--color-text-main); contain: content; } .tools-cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); color: var(--color-text-main); } .tools-cat-card .cat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; flex-shrink: 0; } .tools-cat-card h3 { font-size: 1.1rem; margin-bottom: 0.25rem; } .cat-count { font-size: 0.8rem; color: var(--color-text-muted); } .icon-purple { background: #e0e7ff; color: #4338ca; } .icon-teal { background: #ccfbf1; color: #0d9488; } .icon-blue { background: #dbeafe; color: #1d4ed8; } .icon-pink { background: #fce7f3; color: #be185d; } [data-theme="dark"] .icon-purple { background: rgba(67, 56, 202, 0.2); } [data-theme="dark"] .icon-teal { background: rgba(13, 148, 136, 0.2); } [data-theme="dark"] .icon-blue { background: rgba(29, 78, 216, 0.2); } [data-theme="dark"] .icon-pink { background: rgba(190, 24, 93, 0.2); } /* ========================================= Archive Grid (View All Tools) ========================================= */ .archive-tools-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; border: 2px solid #dcfce7; margin: 20px; } .archive-tools-grid .tool-card { height: 100%; } .archive-tools-grid .tool-content h2 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--color-text-main); border: 2px solid #d1d3d1; } .no-tools-found { text-align: center; padding: 4rem 2rem; color: var(--color-text-muted); grid-column: 1 / -1; } /* WordPress Pagination */ .nav-links { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; flex-wrap: wrap; } .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.75rem; border-radius: var(--radius-btn); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; color: var(--color-text-main); background: var(--color-surface); border: 1px solid rgba(0, 0, 0, 0.08); } .nav-links .page-numbers:hover, .nav-links .page-numbers.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* ========================================= Single Tool Page ========================================= */ .single-tool-container { padding-top: 2rem; padding-bottom: 4rem; } .tool-header { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 4rem; align-items: center; } .tool-meta { margin-bottom: 1rem; } .tool-title { font-size: 3.5rem; margin-bottom: 1rem; } .tool-excerpt-large { font-size: 1.25rem; color: var(--color-text-muted); margin-bottom: 2rem; } .placeholder-hero-image { width: 100%; height: 400px; background: linear-gradient(135deg, var(--color-primary-dark), var(--color-secondary)); border-radius: var(--radius-soft); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0.9; } .tool-featured-image { width: 100%; height: auto; border-radius: var(--radius-soft); box-shadow: var(--shadow-soft); } .tool-body { display: grid; grid-template-columns: 1fr; gap: 4rem; } .tool-main-content h2 { margin-top: 2rem; margin-bottom: 1rem; } .tool-main-content p { margin-bottom: 1.5rem; font-size: 1.125rem; } .content-box { background: var(--color-bg-light); padding: 2rem; border-radius: var(--radius-soft); margin: 2rem 0; border-left: 4px solid var(--color-primary); } .sidebar-widget { background: var(--color-surface); padding: 2rem; border-radius: var(--radius-soft); box-shadow: var(--shadow-soft); border: 1px solid rgba(0, 0, 0, 0.05); } .info-list { list-style: none; margin: 0; padding: 0; } .info-list li { padding: 1rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .info-list li:last-child { border-bottom: none; padding-bottom: 0; } /* ========================================= CONSOLIDATED MEDIA QUERIES ========================================= */ /* ---- >= 480px (Small tablets) ---- */ @media (min-width: 480px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } .archive-tools-grid { grid-template-columns: repeat(2, 1fr); } .latest-tools-section .tools-grid { grid-template-columns: repeat(2, 1fr); } } /* ---- >= 640px ---- */ @media (min-width: 640px) { .tools-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } /* ---- >= 768px (Tablets) ---- */ @media (min-width: 768px) { .footer-inner { grid-template-columns: repeat(4, 1fr); } .archive-tools-grid { grid-template-columns: repeat(3, 1fr); } } /* ---- >= 992px (Desktop) ---- */ @media (min-width: 992px) { .tools-grid { grid-template-columns: repeat(4, 1fr); } .latest-tools-section .tools-grid { grid-template-columns: repeat(3, 1fr); } .tools-cat-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } .tool-header { grid-template-columns: 1fr 1fr; } .tool-body { grid-template-columns: 2fr 1fr; } } /* ---- >= 1100px (Large desktop) ---- */ @media (min-width: 1100px) { .archive-tools-grid { grid-template-columns: repeat(4, 1fr); } } /* ---- <= 768px (Mobile — consolidated) ---- */ @media (max-width: 768px) { /* Root */ :root { --header-height: 60px; } /* Typography */ h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; } .container { padding: 0 1rem; } /* Header & Nav */ .mobile-menu-toggle { display: flex; align-items: center; } .main-navigation { display: none; position: absolute; top: var(--header-height); left: 0; right: 0; background: var(--color-surface); box-shadow: var(--shadow-soft); padding: 1rem 0; border-top: 1px solid rgba(0, 0, 0, 0.05); } .main-navigation.is-open { display: block; } .main-navigation ul { flex-direction: column; gap: 0; } .main-navigation li { border-bottom: 1px solid rgba(0, 0, 0, 0.04); } .main-navigation a { display: block; padding: 0.75rem 1.5rem; } /* Hero */ .hero-section { padding: 1.5rem 0 1.25rem; max-height: auto; } .hero-search-centered h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } .hero-subtext { font-size: 0.85rem; margin-bottom: 1rem; max-width: 100%; } .hero-search-wrapper { max-width: 100%; } .search-form { padding: 0.35rem; } .search-field { padding: 0 0.75rem; font-size: 0.875rem; } .search-submit.btn { padding: 0.6rem 1rem; font-size: 0.875rem; } /* Tool Cards */ .tool-card:hover, .tool-card-inline:hover { transform: none; } .tool-thumbnail { height: 120px; } .tool-content { padding: 0.75rem 1rem; } .tool-content h3, .tool-content h2 { font-size: 0.95rem; margin-bottom: 0; } /* Inline Tool Cards */ .tool-card-inline .tool-card-link { padding: 0.75rem 1rem; gap: 0.75rem; } .tool-icon-thumb { width: 40px; height: 40px; border-radius: 10px; } .tool-icon-thumb img { border-radius: 10px; } .tool-card-inline h3 { font-size: 0.9rem; } /* Category Cards */ .tools-cat-card { padding: 1rem; flex-direction: row; align-items: center; gap: 0.75rem; } .tools-cat-card .cat-icon { width: 36px; height: 36px; margin-bottom: 0; } .tools-cat-card h3 { font-size: 0.95rem; margin-bottom: 0; } .cat-count { display: none; } /* Single Tool */ .single-tool-container { padding-top: 1rem; padding-bottom: 2rem; } .tool-title { font-size: 2rem; } .tool-excerpt-large { font-size: 1rem; margin-bottom: 1rem; } .placeholder-hero-image { height: 200px; } .tool-body { gap: 2rem; } .sidebar-widget { padding: 1.25rem; } /* Footer */ .site-footer { padding: 2.5rem 0 1.5rem; margin-top: 2rem; } .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; } .footer-widget h4 { margin-bottom: 0.75rem; font-size: 1.1rem; } .site-info { font-size: 0.8rem; padding-top: 1.5rem; margin-top: 1.5rem; } /* Sections */ .section-padding { padding: 2.5rem 0; } .section-header { margin-bottom: 1.5rem; } /* Dark mode toggle smaller */ .dark-mode-toggle { width: 36px; height: 36px; } } /* ---- <= 480px (Small mobile) ---- */ @media (max-width: 480px) { .tool-thumbnail { height: 100px; } }