/* Theme Name: Toologee Theme URI: https://toologee.com Author: Toologee Author URI: https://toologee.com Description: A premium, self-contained WordPress theme delivering 212 fast, private, 100% client-side browser tools across 13 categories — Image, Text, Developer, Calculator, PDF, Unit, Utility, CSS & Design, Advanced Dev, Social & SEO, Finance, Audio & Video, and Fun & Lifestyle. Clean /tools/{slug}/ URLs, built-in SEO, JSON-LD, XML sitemap for every tool, auto-created legal pages (AdSense-ready), dark mode, and a polished glassmorphism design. No page builders or extra plugins required. Version: 2.0.4 Requires at least: 5.5 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: toologee Tags: tools, utilities, one-column, custom-colors, translation-ready */ /* ============================================================ Toologee — Design System Custom CSS3 (no frameworks). SaaS / command-center aesthetic. Light + dark themes via CSS variables on . ============================================================ */ :root{ /* Brand blue family */ --brand-900:#0b1f4d; --brand-800:#13316f; --brand-700:#1d4ed8; --brand-600:#2563eb; --brand-500:#3b82f6; --brand-400:#60a5fa; --brand-300:#93c5fd; --brand-100:#dbeafe; --accent-cyan:#06b6d4; /* Neutrals */ --ink-900:#0f172a; --ink-700:#334155; --ink-500:#64748b; --ink-400:#94a3b8; --line:#e2e8f0; --line-soft:#eef2f7; --bg:#f5f8fc; --bg-2:#eef3fb; --card:#ffffff; --card-glass:rgba(255,255,255,.78); --panel-glass:rgba(255,255,255,.85); --header-bg:rgba(255,255,255,.72); --header-line:rgba(226,232,240,.9); --input-bg:#ffffff; --menu-bg:#ffffff; --white:#ffffff; --orb-1:rgba(96,165,250,.20); --orb-2:rgba(6,182,212,.12); --check-a:#f1f5f9; --check-b:#ffffff; --footer-grad:linear-gradient(180deg,#ffffff,#eef3fb); --soft-strong:#cfe0fe; --warn-bg:#fef3c7; --warn-ink:#92400e; /* Category accents */ --cat-image:#2563eb; --cat-text:#7c3aed; --cat-dev:#0ea5e9; --cat-calc:#059669; --cat-pdf:#dc2626; --cat-unit:#d97706; --cat-util:#0891b2; --cat-cssgen:#a855f7; --cat-devit:#14b8a6; --cat-social:#ec4899; --cat-finance:#22c55e; --cat-media:#f97316; --cat-fun:#eab308; --radius:18px; --radius-sm:12px; --radius-lg:26px; --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 2px 6px rgba(15,23,42,.05); --shadow:0 10px 30px -12px rgba(15,23,42,.18),0 4px 12px -6px rgba(15,23,42,.10); --shadow-lg:0 30px 60px -22px rgba(15,23,42,.30); --ring:0 0 0 4px rgba(37,99,235,.18); --font-display:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif; --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; --maxw:1200px; --header-h:70px; } /* ---------- Dark theme ---------- */ [data-theme="dark"]{ --brand-100:#1c2f55; --ink-900:#e8eef8; --ink-700:#c3cfdf; --ink-500:#8fa0b5; --ink-400:#67788e; --line:#243147; --line-soft:#1c2739; --bg:#0b1220; --bg-2:#111a2c; --card:#131d31; --card-glass:rgba(19,29,49,.82); --panel-glass:rgba(19,29,49,.88); --header-bg:rgba(11,18,32,.75); --header-line:rgba(36,49,71,.9); --input-bg:#0e1626; --menu-bg:#15203a; --orb-1:rgba(37,99,235,.16); --orb-2:rgba(6,182,212,.10); --check-a:#1a2438; --check-b:#101a2c; --footer-grad:linear-gradient(180deg,#0b1220,#0e1626); --soft-strong:#24406e; --warn-bg:#3a2d10; --warn-ink:#fbbf24; --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3); --shadow:0 10px 30px -12px rgba(0,0,0,.55),0 4px 12px -6px rgba(0,0,0,.4); --shadow-lg:0 30px 60px -22px rgba(0,0,0,.7); --ring:0 0 0 4px rgba(59,130,246,.28); } [data-theme="dark"] .brand{color:var(--ink-900)} [data-theme="dark"] .result-box{background:#0a101d;border:1px solid var(--line)} [data-theme="dark"] .result-pill{background:var(--brand-100);color:#bfdbfe} *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; overflow-x:clip; font-family:var(--font-body); color:var(--ink-900); background: radial-gradient(1100px 500px at 85% -10%, var(--orb-1), transparent 60%), radial-gradient(900px 500px at -10% 0%, var(--orb-2), transparent 55%), var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; transition:background .3s,color .3s; } a{color:var(--brand-600);text-decoration:none} a:hover{color:var(--brand-500)} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;color:var(--ink-900);margin:0 0 .5em} p{margin:0 0 1em} .container{max-width:var(--maxw);margin:0 auto;padding:0 22px} .muted{color:var(--ink-500)} .center{text-align:center} /* Accessibility: skip link + screen reader text */ .skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--brand-600);color:#fff;padding:10px 18px;border-radius:0 0 12px 0;font-weight:700} .skip-link:focus{left:0;color:#fff} .screen-reader-text{position:absolute!important;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;word-wrap:normal!important} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:50;height:var(--header-h); display:flex;align-items:center; background:var(--header-bg); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border-bottom:1px solid var(--header-line); transition:box-shadow .25s; } .site-header.scrolled{box-shadow:var(--shadow)} .site-header .container{display:flex;align-items:center;gap:18px;width:100%} .brand{display:flex;align-items:center;gap:11px;flex:none;font-family:var(--font-display);font-weight:800;font-size:1.12rem;color:var(--ink-900);white-space:nowrap} .brand .logo{ width:38px;height:38px;border-radius:11px;flex:none; background:linear-gradient(135deg,var(--brand-600),var(--accent-cyan)); display:grid;place-items:center;color:#fff;font-weight:800; box-shadow:0 6px 16px -6px rgba(37,99,235,.6); } .brand .logo svg{width:22px;height:22px;display:block} .brand small{display:block;font-size:.62rem;font-weight:600;letter-spacing:.12em;color:var(--brand-500);text-transform:uppercase} .nav{display:flex;gap:4px;margin-left:8px;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:visible;align-items:center} .nav a{padding:9px 12px;border-radius:10px;font-weight:600;font-size:.9rem;color:var(--ink-700);transition:.18s;flex:none;white-space:nowrap} .nav-more{position:relative;flex:none} .nav-more-btn{padding:9px 12px;border-radius:10px;font-weight:600;font-size:.9rem;color:var(--ink-700);background:none;border:none;cursor:pointer;font-family:inherit;white-space:nowrap;transition:.18s} .nav-more-btn:hover,.nav-more.open .nav-more-btn{background:var(--bg-2);color:var(--brand-500)} .nav-more-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--menu-bg);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;display:none;flex-direction:column;z-index:60} .nav-more.open .nav-more-menu{display:flex} .nav-more-menu a{padding:10px 12px;border-radius:9px;font-weight:600;font-size:.9rem;color:var(--ink-700);white-space:nowrap} .nav-more-menu a:hover{background:var(--bg-2);color:var(--brand-500)} .nav a:hover{background:var(--bg-2);color:var(--brand-500)} /* Theme toggle */ .theme-toggle{flex:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:1.05rem;display:grid;place-items:center;transition:.18s} .theme-toggle:hover{transform:translateY(-1px);border-color:var(--brand-400);box-shadow:var(--shadow-sm)} /* Search */ .search-wrap{position:relative;flex:none;width:240px;margin-left:6px;display:flex;align-items:center;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--input-bg);transition:.18s} .search-wrap:focus-within{border-color:var(--brand-500);box-shadow:var(--ring)} .search-wrap .s-icon{flex:none;margin-right:8px;color:var(--ink-400);font-size:.9rem;line-height:1;pointer-events:none} .search-wrap input#siteSearch{flex:1;min-width:0;width:auto;height:100%;padding:0;border:0;border-radius:0;background:transparent;font-size:.95rem;color:var(--ink-900);font-family:inherit;transition:none} .search-wrap input#siteSearch:focus{outline:none;border:0;box-shadow:none} .search-results{ position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--menu-bg);border:1px solid var(--line); border-radius:14px;box-shadow:var(--shadow-lg);max-height:60vh;overflow:auto;display:none;z-index:60;padding:6px; } .search-results.open{display:block} .search-results a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;color:var(--ink-700)} .search-results a:hover,.search-results a.active{background:var(--bg-2)} .search-results .r-cat{margin-left:auto;font-size:.72rem;color:var(--ink-400)} .search-empty{padding:14px;color:var(--ink-500);font-size:.9rem} .menu-btn{display:none;margin-left:auto;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--ink-900);cursor:pointer;font-size:1.2rem} /* ---------- Hero ---------- */ .hero{padding:74px 0 30px;text-align:center;position:relative} .hero::before,.hero::after{ content:"";position:absolute;border-radius:50%;filter:blur(60px);z-index:-1;pointer-events:none; animation:orbFloat 14s ease-in-out infinite alternate; } .hero::before{width:380px;height:380px;left:-90px;top:-40px;background:radial-gradient(circle,var(--orb-1),transparent 70%)} .hero::after{width:420px;height:420px;right:-110px;top:60px;background:radial-gradient(circle,var(--orb-2),transparent 70%);animation-delay:-7s} @keyframes orbFloat{from{transform:translateY(-14px) scale(1)}to{transform:translateY(18px) scale(1.08)}} .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px; background:var(--card-glass);border:1px solid var(--line);font-size:.8rem;font-weight:600;color:var(--brand-500); box-shadow:var(--shadow-sm);margin-bottom:22px} .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--cat-calc);box-shadow:0 0 0 4px rgba(5,150,105,.18);animation:pulse 2.4s infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(5,150,105,.18)}50%{box-shadow:0 0 0 7px rgba(5,150,105,.07)}} .hero h1{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:800;letter-spacing:-.02em;margin-bottom:.35em} .hero h1 .grad{background:linear-gradient(120deg,var(--brand-500),var(--accent-cyan),var(--brand-500));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6s linear infinite} @keyframes gradShift{to{background-position:200% center}} .hero p.lead{font-size:clamp(1.02rem,2vw,1.2rem);color:var(--ink-500);max-width:640px;margin:0 auto 26px} .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .stats{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:40px} .stat{text-align:center} .stat b{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:800;color:var(--brand-500)} .stat span{font-size:.82rem;color:var(--ink-500)} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;justify-content:center; padding:13px 22px;border-radius:13px;font-weight:700;font-size:.96rem;cursor:pointer; border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s;font-family:inherit;text-align:center} .btn:active{transform:translateY(1px)} .btn-primary{background:linear-gradient(135deg,var(--brand-600),var(--brand-700));color:#fff; box-shadow:0 12px 26px -12px rgba(37,99,235,.8)} .btn-primary:hover{color:#fff;box-shadow:0 16px 32px -12px rgba(37,99,235,.9);transform:translateY(-2px)} .btn-ghost{background:var(--card-glass);border-color:var(--line);color:var(--ink-700)} .btn-ghost:hover{border-color:var(--brand-400);color:var(--brand-500);transform:translateY(-2px)} .btn-soft{background:var(--brand-100);color:var(--brand-700)} [data-theme="dark"] .btn-soft{color:#bfdbfe} .btn-soft:hover{background:var(--soft-strong)} .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none} .btn-block{width:100%} /* ---------- Category chips ---------- */ .cat-bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:34px 0 8px} .chip{padding:9px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:600; font-size:.88rem;color:var(--ink-700);cursor:pointer;transition:.18s;box-shadow:var(--shadow-sm)} .chip:hover{transform:translateY(-2px);border-color:var(--brand-300)} .chip.active{background:var(--brand-600);color:#fff;border-color:var(--brand-600)} /* ---------- Tool grid ---------- */ .section{padding:40px 0} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap} .section-head h2{font-size:1.5rem;display:flex;align-items:center;gap:11px;margin:0} .cat-dot{width:11px;height:11px;border-radius:4px} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px} .tool-card{ position:relative;display:flex;flex-direction:column;gap:8px;padding:20px; background:var(--card-glass);backdrop-filter:blur(8px); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm); transition:transform .18s,box-shadow .25s,border-color .2s;overflow:hidden} .tool-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent,var(--brand-600));opacity:0;transition:.25s} .tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} .tool-card:hover::before{opacity:1} .tool-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.35rem; background:color-mix(in srgb,var(--accent,var(--brand-600)) 14%,var(--card));color:var(--accent,var(--brand-600))} .tool-card h3{font-size:1.02rem;margin:6px 0 0} .tool-card p{font-size:.85rem;color:var(--ink-500);margin:0;flex:1} .tool-card .go{font-size:.82rem;font-weight:700;color:var(--accent,var(--brand-600));display:inline-flex;align-items:center;gap:6px;margin-top:6px;transition:gap .18s} .tool-card:hover .go{gap:10px} .tool-card .badge{position:absolute;top:16px;right:16px;font-size:.66rem;font-weight:700;color:var(--ink-400)} .hidden{display:none!important} /* Reveal on scroll */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease} .reveal.in-view{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} /* ---------- Tool page layout ---------- */ .breadcrumbs{padding:18px 0 4px;font-size:.85rem;color:var(--ink-500)} .breadcrumbs ol{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0} .breadcrumbs a{color:var(--ink-500)} .breadcrumbs a:hover{color:var(--brand-500)} .breadcrumbs li+li::before{content:"/";margin-right:8px;color:var(--ink-400)} .tool-hero{padding:8px 0 6px} .tool-hero .kicker{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent,var(--brand-600));display:flex;align-items:center;gap:8px} .tool-hero h1{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:.2em 0 .25em} .tool-hero p{font-size:1.05rem;color:var(--ink-500);max-width:720px} .tool-panel{ background:var(--panel-glass);backdrop-filter:blur(10px); border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow);padding:26px;margin:18px 0 8px;position:relative} .tool-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:linear-gradient(90deg,var(--accent,var(--brand-600)),transparent 70%);opacity:.7} @media(min-width:760px){.tool-panel{padding:32px}} /* Dropzone */ .dropzone{ border:2px dashed var(--brand-300);border-radius:var(--radius); background:linear-gradient(180deg,color-mix(in srgb,var(--brand-100) 35%,transparent),transparent); padding:40px 20px;text-align:center;cursor:pointer;transition:.2s} .dropzone:hover,.dropzone.drag{border-color:var(--brand-600);background:color-mix(in srgb,var(--brand-100) 55%,transparent);transform:translateY(-1px)} .dropzone .dz-ico{font-size:2.4rem;margin-bottom:8px} .dropzone h4{margin:0 0 4px;font-size:1.05rem} .dropzone p{margin:0 0 14px;color:var(--ink-500);font-size:.9rem} .dropzone input[type=file]{display:none} /* Form rows */ .field{margin-bottom:16px} .field>label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--ink-700)} .row{display:grid;gap:14px} @media(min-width:620px){.row.cols-2{grid-template-columns:1fr 1fr}.row.cols-3{grid-template-columns:repeat(3,1fr)}} input[type=text],input[type=number],input[type=password],input[type=date],input[type=time],input[type=datetime-local],input[type=url],input[type=email],select,textarea{ width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:.96rem; font-family:inherit;color:var(--ink-900);background:var(--input-bg);transition:.18s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:var(--ring)} textarea{min-height:150px;resize:vertical;line-height:1.55} textarea.mono,input.mono{font-family:var(--font-mono);font-size:.9rem} .inline{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .range-wrap{display:flex;align-items:center;gap:14px} input[type=range]{flex:1;accent-color:var(--brand-600)} .checkline{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--ink-700);cursor:pointer} .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} /* Progress */ .progress{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:18px 0 4px;display:none} .progress.show{display:block} .progress > i{display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--brand-500),var(--accent-cyan));transition:width .2s} /* Output / preview */ .preview{margin-top:18px;display:none} .preview.show{display:block} .preview-grid{display:grid;gap:16px} @media(min-width:680px){.preview-grid.two{grid-template-columns:1fr 1fr}} .preview img,.preview canvas{max-width:100%;border-radius:14px;border:1px solid var(--line);background: conic-gradient(var(--check-a) 25%,var(--check-b) 0 50%,var(--check-a) 0 75%,var(--check-b) 0) 0/22px 22px} .result-box{background:var(--ink-900);color:#e2e8f0;border-radius:14px;padding:16px 18px; font-family:var(--font-mono);font-size:.9rem;white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:420px} [data-theme="light"] .result-box, :root .result-box{background:#0f172a} .result-pill{display:inline-block;background:var(--brand-100);color:var(--brand-800);font-family:var(--font-display); font-weight:800;font-size:2rem;padding:10px 22px;border-radius:14px;margin:6px 0} .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:.95rem} .kv b{color:var(--ink-700);font-weight:600} .kv span{color:var(--ink-900)} .note{font-size:.84rem;color:var(--ink-500);background:var(--bg-2);border-radius:10px;padding:10px 14px;margin-top:12px} .note.warn{background:var(--warn-bg);color:var(--warn-ink)} .badge-soft{display:inline-block;font-size:.72rem;font-weight:700;color:var(--brand-700);background:var(--brand-100);padding:3px 10px;border-radius:999px} .thumb-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .thumb-list .t{position:relative;width:90px} .thumb-list .t img,.thumb-list .t canvas{width:90px;height:90px;object-fit:cover;border-radius:10px} .thumb-list .t span{font-size:.7rem;color:var(--ink-500);display:block;text-align:center;margin-top:3px} .swatch{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:inline-block;vertical-align:middle} /* ---------- SEO content ---------- */ .content{max-width:820px;margin:36px auto 0} .content h2{font-size:1.5rem;margin-top:1.6em} .content h3{font-size:1.12rem;margin-top:1.3em} .content ol,.content ul{padding-left:1.3em} .content li{margin-bottom:.5em} .content p{color:var(--ink-700)} .steps{list-style:none;counter-reset:s;padding:0} .steps li{counter-increment:s;position:relative;padding:14px 16px 14px 58px;background:var(--card);border:1px solid var(--line); border-radius:14px;margin-bottom:10px;box-shadow:var(--shadow-sm);color:var(--ink-700)} .steps li::before{content:counter(s);position:absolute;left:14px;top:50%;transform:translateY(-50%); width:30px;height:30px;border-radius:9px;background:var(--brand-600);color:#fff;font-weight:800; font-family:var(--font-display);display:grid;place-items:center} /* FAQ accordion */ .faq{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:10px;background:var(--card)} .faq button{width:100%;text-align:left;padding:16px 18px;background:none;border:none;cursor:pointer; font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink-900); display:flex;justify-content:space-between;gap:14px;align-items:center} .faq button .ic{transition:.2s;color:var(--brand-600);font-size:1.3rem;line-height:1} .faq.open button .ic{transform:rotate(45deg)} .faq .ans{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 18px} .faq.open .ans{max-height:600px;padding-bottom:16px} .faq .ans p{margin:0;color:var(--ink-500)} .feature-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:14px 0} .feature{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;transition:transform .18s,box-shadow .2s} .feature:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .feature .fi{font-size:1.5rem} .feature h4{margin:8px 0 4px;font-size:1rem} .feature p{font-size:.88rem;color:var(--ink-500);margin:0} /* Related */ .related{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} .related a{padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--card);font-weight:600; font-size:.9rem;color:var(--ink-700);transition:.18s;box-shadow:var(--shadow-sm)} .related a:hover{border-color:var(--brand-300);transform:translateY(-2px);color:var(--brand-500)} .related a b{display:block;margin-bottom:4px;color:var(--ink-900)} .related a span{font-weight:400;font-size:.8rem;color:var(--ink-500)} /* ---------- Footer ---------- */ .site-footer{margin-top:60px;background:var(--footer-grad);border-top:1px solid var(--line);padding:46px 0 30px} .footer-grid{display:grid;gap:30px;grid-template-columns:1.4fr repeat(3,1fr)} @media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}} .footer-grid h5{font-family:var(--font-display);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin:0 0 12px} .footer-grid a{display:block;color:var(--ink-700);font-size:.9rem;padding:4px 0} .footer-grid a:hover{color:var(--brand-500)} .footer-legal{display:flex;gap:16px;flex-wrap:wrap} .footer-legal a{display:inline-block} .footer-bottom{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;display:flex;justify-content:space-between; gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-500)} /* Toast */ .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink-900);color:var(--bg); padding:12px 20px;border-radius:12px;font-weight:600;font-size:.9rem;opacity:0;pointer-events:none;transition:.25s;z-index:200;box-shadow:var(--shadow-lg)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* Back to top */ .to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:14px;border:1px solid var(--line); background:var(--card);color:var(--ink-700);font-size:1.2rem;cursor:pointer;box-shadow:var(--shadow); opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s;z-index:90} .to-top.show{opacity:1;pointer-events:auto;transform:none} .to-top:hover{color:var(--brand-500);border-color:var(--brand-400)} /* WordPress content pages (About, Privacy, posts…) */ .content .wp-block-image img,.content img{border-radius:14px} .content blockquote{border-left:4px solid var(--brand-500);margin:1.2em 0;padding:.4em 0 .4em 1.1em;color:var(--ink-500)} .content table{width:100%;border-collapse:collapse;margin:1em 0} .content table td,.content table th{border:1px solid var(--line);padding:9px 12px;text-align:left} .aligncenter{margin-left:auto;margin-right:auto} .alignleft{float:left;margin:0 18px 12px 0} .alignright{float:right;margin:0 0 12px 18px} .wp-caption{max-width:100%} .wp-caption-text{font-size:.82rem;color:var(--ink-500);text-align:center} .sticky{display:block} .bypostauthor{display:block} .gallery-caption{display:block} /* Mobile nav */ @media(max-width:980px){ .site-header{height:auto} .site-header .container{flex-wrap:wrap;row-gap:10px;padding-top:12px;padding-bottom:12px} .brand{flex:1 1 auto;min-width:0} .theme-toggle{flex:none;order:1} .menu-btn{display:block;flex:none;margin-left:0;order:2} .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--menu-bg); overflow:visible;white-space:normal;min-width:0;align-items:stretch;order:4; border-bottom:1px solid var(--line);padding:10px;gap:2px;box-shadow:var(--shadow)} .nav.open{display:flex} .nav a{font-size:.95rem} .search-wrap{order:3;flex:1 0 100%;width:100%;margin-left:0} .nav-more{position:static} .nav-more-btn{display:none} .nav-more-menu{position:static;display:flex;box-shadow:none;border:0;padding:0;background:transparent;min-width:0} .nav-more-menu a{font-size:.95rem} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto!important} } :focus-visible{outline:2px solid var(--brand-600);outline-offset:2px} /* large call-to-action buttons (homepage hero) */ .btn-lg{padding:15px 28px;font-size:1.04rem;border-radius:var(--radius)} .faq-list{margin-top:6px} /* Print: hide chrome, show the tool output cleanly */ @media print{ .site-header,.site-footer,.to-top,.toast,.breadcrumbs,.related,.cat-bar{display:none!important} body{background:#fff} .tool-panel{box-shadow:none;border:none} } /* Blog pagination */ .pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .page-numbers{padding:9px 15px;border-radius:11px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:.9rem;color:var(--ink-700)} .page-numbers.current{background:var(--brand-600);color:#fff;border-color:var(--brand-600)} a.page-numbers:hover{border-color:var(--brand-400);color:var(--brand-500)} /* ============================================================ BULLETPROOF RESPONSIVE / ANTI-OVERFLOW (mobile · tablet · desktop) Every rule below removes a possible cause of horizontal scroll. ============================================================ */ /* 1. Page can never scroll sideways (hidden = fallback for older mobiles, clip = modern browsers, keeps position:sticky working) */ html{overflow-x:hidden;overflow-x:clip;max-width:100%} body{overflow-x:hidden;overflow-x:clip;max-width:100%} /* 2. Media can never exceed its container */ img,svg,video,canvas,iframe,embed,object{max-width:100%;height:auto} video,iframe{height:auto} .preview img,.preview canvas{height:auto} /* 3. Grid/flex children may shrink below their content width (fixes the classic CSS "grid blowout" on narrow screens) */ .row>*,.grid>*,.kv>*,.inline>*,.feature-grid>*,.footer-grid>*,.preview-grid>*{min-width:0} .field{min-width:0} .field>input,.field>select,.field>textarea{max-width:100%} /* 4. Long unbreakable output (hashes, URLs, tokens, Base64) wraps instead of pushing the page */ .kv{grid-template-columns:auto minmax(0,1fr)} .kv b,.kv span{min-width:0;overflow-wrap:anywhere} .result-pill{max-width:100%;overflow-wrap:anywhere;word-break:break-word} .result-box{max-width:100%} .note{overflow-wrap:anywhere} .content p,.content li,.faq .ans p,.tool-card p,.tool-hero p{overflow-wrap:break-word} .search-results a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .breadcrumbs li{max-width:100%;overflow-wrap:anywhere} /* 5. Wide tables scroll inside their own box, never the page */ .tool-panel table,.content table{max-width:100%} @media(max-width:680px){ .tool-panel table,.content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} .tool-panel .preview>div[style*="overflow"]{max-width:100%} } .content pre{overflow-x:auto;max-width:100%} /* 6. Hero pieces stay inside the viewport on small screens */ .eyebrow{max-width:100%;flex-wrap:wrap;justify-content:center;text-align:center} .hero h1{overflow-wrap:break-word} .stats{gap:22px} @media(max-width:480px){ .container{padding:0 16px} .tool-panel{padding:18px} .hero{padding-top:54px} .stats{gap:16px} .stat b{font-size:1.4rem} .result-pill{font-size:1.5rem;padding:9px 16px} .btn{padding:12px 16px;font-size:.92rem} .btn-lg{padding:13px 20px;font-size:.98rem} .steps li{padding-left:52px} .dropzone{padding:28px 14px} .footer-grid{grid-template-columns:1fr} } /* 7. Toolbars & pills never force width */ .toolbar{max-width:100%} .toolbar .btn{max-width:100%;overflow-wrap:anywhere} .inline{max-width:100%} .thumb-list{max-width:100%} /* 8. Tool output areas (invoice preview, SERP preview, diff view) stay contained */ .preview{max-width:100%} .preview>div{max-width:100%} #tgl-invoice{overflow-x:auto} /* ---------- Ad slots ---------- */ .ad-slot{margin:26px auto;text-align:center;max-width:100%;overflow:hidden;min-width:0} .ad-slot .ad-tag{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);margin-bottom:6px} .ad-slot ins{max-width:100%!important}