/* ============================================================ toolpermarket — minimalist matrix (light theme) Palette: gray + grayish lake blue #397AAC (brand fill, #3-start, WCAG AA) / #205f82 (text-on-white). No emoji. ============================================================ */ @font-face{ font-family:'Work Sans'; src:url('fonts/worksans-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } :root{ --bg:#f4f5f7; /* light gray page */ --surface:#ffffff; --surface-2:#eef0f3; /* subtle section / hover */ --border:#e3e5ea; --border-strong:#d3d7df; --text:#1c2430; /* near-ink for body */ --heading:#205f82; /* darker lake-blue sibling for text on white (WCAG AA) */ --muted:#6b7280; --faint:#9aa1ad; --accent:#397aac; /* brand lake-blue fill (#3-start, WCAG AA ~6.2:1) */ --accent-soft:#e6eef4; /* lake-blue tint for fills/hover */ --accent-weak:rgba(57,122,172,.10); --radius:14px; --maxw:1120px; --mono:'SF Mono',ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif; /* category accent colors (white-text contrast >= 4.5:1, WCAG AA) */ --c-calc:#397aac; /* Calculator — brand lake-blue (base) */ --c-img:#7e3fbd; /* Image — purple */ --c-fin:#15803d; /* Finance — green */ --c-create:#c2410c; /* Create — amber */ --c-dev:#a82c27; /* Developer — crimson */ --c-pdf:#0f766e; /* PDF — teal */ --c-seo:#4338ca; /* SEO — indigo */ --c-text:#a16207; /* Text — olive */ } /* scope a category color to a subtree: - on a tool/category page colors the whole page - .card.cat-X / .rel-card.cat-X on grids colors just that card */ .cat-calculator{--accent:var(--c-calc);--accent-soft:#e6eef4;--accent-weak:rgba(57,122,172,.10)} .cat-image{--accent:var(--c-img);--accent-soft:#f1eafb;--accent-weak:rgba(126,63,189,.10)} .cat-finance{--accent:var(--c-fin);--accent-soft:#e6f3ea;--accent-weak:rgba(21,128,61,.10)} .cat-create{--accent:var(--c-create);--accent-soft:#fbeee6;--accent-weak:rgba(194,65,12,.10)} .cat-developer{--accent:var(--c-dev);--accent-soft:#f7e9e8;--accent-weak:rgba(168,44,39,.10)} .cat-pdf{--accent:var(--c-pdf);--accent-soft:#e6f2f1;--accent-weak:rgba(15,118,110,.10)} .cat-seo{--accent:var(--c-seo);--accent-soft:#eaebfb;--accent-weak:rgba(67,56,202,.10)} .cat-text{--accent:var(--c-text);--accent-soft:#f6f1e3;--accent-weak:rgba(161,98,7,.10)} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--sans);font-size:15px;line-height:1.55; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} /* ---------- top bar ---------- */ .topbar{border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20; background:rgba(244,245,247,.86);backdrop-filter:blur(10px)} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:60px} .brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em;color:var(--heading)} .brand .mark{width:34px;height:34px;border-radius:8px;background:var(--accent); display:grid;place-items:center;padding:4px} .brand .mark svg{width:100%;height:100%} .brand:hover .mark{transform:scale(1.05)} .brand .mark{transition:.15s} .brand .word{font-family:'Work Sans',var(--sans);font-weight:700;font-size:18px;letter-spacing:.2em} .brand .word .wa{color:var(--accent)} .brand .word .wb{color:var(--heading)} .nav{display:flex;gap:6px} .nav a{padding:7px 12px;border-radius:8px;color:var(--muted);font-size:14px;transition:.15s} .nav a:hover{color:var(--heading);background:var(--surface-2)} /* ---------- hero (centered) ---------- */ .hero{text-align:center;padding:74px 24px 56px} .hero h1{font-size:clamp(34px,5vw,52px);line-height:1.05;letter-spacing:-.025em;margin:0 0 14px;color:var(--heading)} .hero p{color:var(--muted);font-size:17px;max-width:560px;margin:0 auto 28px} .search{display:flex;max-width:560px;margin:0 auto;gap:8px} .search input{flex:1;background:var(--surface);border:1px solid var(--border-strong); color:var(--text);border-radius:10px;padding:13px 16px;font-size:15px;outline:none;transition:.15s} .search input::placeholder{color:var(--faint)} .search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)} .search button{background:var(--accent);color:#fff;border:0;border-radius:10px; padding:0 20px;font-weight:600;font-size:15px;cursor:pointer;transition:.15s} .search button:hover{filter:brightness(1.12)} /* ---------- category chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 40px} .chip{padding:7px 14px;border:1px solid var(--border);border-radius:999px; color:var(--muted);font-size:13.5px;cursor:pointer;transition:.15s;background:var(--surface)} .chip:hover{color:var(--heading);border-color:var(--border-strong)} .chip.active{color:#fff;border-color:var(--accent);background:var(--accent)} /* ---------- section heading ---------- */ .sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:8px 0 18px} .sec-head h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:0} /* ---------- tool grid (3 columns) ---------- */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px} .card{position:relative;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:20px;transition:transform .15s,border-color .15s,box-shadow .15s; display:flex;flex-direction:column;gap:12px;min-height:148px} .card:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:0 8px 24px rgba(32,47,77,.08)} .card .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center; font-family:var(--mono);font-weight:700;font-size:15px;color:#fff;background:var(--accent)} .card h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--heading)} .card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5} .card .tag{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:10.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border:1px solid var(--border-strong); border-radius:6px;padding:2px 7px;background:var(--bg)} .card.is-ad .tag{color:var(--faint);border-color:var(--border-strong);background:var(--bg)} /* ---------- footer ---------- */ .foot{border-top:1px solid var(--border);padding:34px 0;color:var(--faint);font-size:13px;text-align:center;background:var(--surface)} .foot .wrap{display:flex;flex-direction:column;align-items:center;gap:14px} .foot-links{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin:0;padding:0} .foot-links a{color:var(--muted);font-size:13.5px;text-decoration:none} .foot-links a:hover{color:var(--accent);text-decoration:underline} .foot-copy{margin:0;color:var(--faint);font-size:13px;max-width:660px;line-height:1.6} /* static content pages: about / privacy / terms / contact */ .legal{max-width:760px;margin:0 auto;padding:48px 24px 68px} .legal h1{font-size:30px;line-height:1.2;color:var(--heading);margin:0 0 6px;letter-spacing:-.02em} .legal .updated{color:var(--faint);font-size:13px;margin:0 0 30px} .legal h2{font-size:19px;color:var(--heading);margin:34px 0 10px} .legal p,.legal li{color:var(--text);line-height:1.72;font-size:15px} .legal ul{padding-left:22px;margin:10px 0} .legal li{margin:6px 0} .legal a{color:var(--accent);text-decoration:underline} .legal .lead{font-size:16.5px;color:var(--muted);line-height:1.7} .legal .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin:16px 0} .legal .contact-email{font-size:16.5px;margin:18px 0} .legal .contact-email .muted{color:var(--muted);font-weight:500;margin-right:4px} /* ============================================================ Category page ============================================================ */ .cat-hero{border-bottom:1px solid var(--border);background:var(--surface)} .cat-hero .wrap{max-width:var(--maxw);margin:0 auto;padding:54px 24px 34px} .cat-hero h1{font-size:clamp(28px,4vw,40px);margin:0 0 10px;color:var(--heading);letter-spacing:-.02em} .cat-hero p{color:var(--muted);font-size:16px;max-width:620px;margin:0 0 18px;line-height:1.55} .cat-hero .count{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--accent); border:1px solid var(--accent);background:var(--accent-weak);border-radius:999px;padding:4px 13px} .cat-body{max-width:var(--maxw);margin:0 auto;padding:34px 24px 56px} /* ============================================================ Tool detail page ============================================================ */ .t-layout{max-width:var(--maxw);margin:0 auto;padding:40px 24px 64px; display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start} .t-main{min-width:0} .crumbs{color:var(--faint);font-size:13px;margin-bottom:14px} .crumbs a:hover{color:var(--heading)} .t-head{display:flex;align-items:center;gap:14px;margin-bottom:8px} .t-head .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center; font-family:var(--mono);font-weight:700;font-size:18px;color:#fff;background:var(--accent)} .t-head h1{margin:0;font-size:26px;letter-spacing:-.02em;color:var(--heading)} .t-sub{color:var(--muted);margin:0 0 26px} .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px} .panel label{display:block;font-size:13px;color:var(--muted);margin:0 0 7px} .field{width:100%;background:var(--bg);border:1px solid var(--border-strong);color:var(--text); border-radius:10px;padding:12px 14px;font-size:14px;outline:none;font-family:var(--sans)} .field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)} textarea.field{min-height:110px;resize:vertical;font-family:var(--mono);font-size:13px} .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px} .btn{background:var(--accent);color:#fff;border:0;border-radius:10px;padding:12px 18px; font-weight:600;font-size:14px;cursor:pointer;transition:.15s} .btn:hover{filter:brightness(1.12)} .out{margin-top:18px;background:var(--bg);border:1px solid var(--border);border-radius:10px; padding:16px;font-family:var(--mono);font-size:13px;color:var(--text);white-space:pre-wrap;min-height:60px} .dl-wrap{margin-top:14px} .dl-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} .dl-list .btn{display:inline-block;text-decoration:none;width:auto;font-weight:600} /* large rectangle ad (below tool) */ .ad-box{border:1px dashed var(--border-strong);border-radius:var(--radius); min-height:280px;display:grid;place-items:center;color:var(--faint); background:var(--surface);margin:26px 0;position:relative;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em} .ad-box.is-side{min-height:600px} /* sidebar */ .t-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:84px} /* related tools (matched content, rendered as nav) */ .related{margin-top:8px} .rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .rel-card{position:relative;background:var(--surface);border:1px solid var(--border); border-radius:12px;padding:14px;transition:.15s;display:flex;flex-direction:column;gap:8px;min-height:104px} .rel-card:hover{border-color:var(--border-strong);background:var(--surface-2);box-shadow:0 6px 18px rgba(32,47,77,.06)} .rel-card .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center; font-family:var(--mono);font-weight:700;font-size:13px;color:#fff;background:var(--accent)} .rel-card h4{margin:0;font-size:13.5px;font-weight:600;color:var(--heading)} .rel-card .tag{position:absolute;top:11px;right:11px;font-family:var(--mono);font-size:10px; letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border:1px solid var(--border-strong); border-radius:5px;padding:1px 6px;background:var(--bg)} .rel-card.is-ad .tag{color:var(--faint);border-color:var(--border-strong);background:var(--bg)} /* ============================================================ Tool content: How-to + FAQ (SEO — anti thin-content) These sections sit below the tool UI and the large-rectangle ad, above "Related tools". Space is reserved on every tool page. ============================================================ */ .t-content{margin-top:44px} .t-content > section{margin-top:40px} .t-content .t-title{font-size:21px;letter-spacing:-.015em;color:var(--heading); margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--border)} /* How-to steps (reserved for complex tools; safe to leave sparse for simple ones) */ .steps{list-style:none;counter-reset:step;margin:0;padding:0; display:flex;flex-direction:column;gap:16px} .steps li{position:relative;padding:2px 0 2px 46px;color:var(--text)} .steps li::before{counter-increment:step;content:counter(step); position:absolute;left:0;top:0;width:30px;height:30px;border-radius:9px; background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:13px; display:grid;place-items:center} .steps li p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6} .steps li p.note{margin-top:6px;font-size:13px;color:var(--faint)} /* Sensitive-domain disclaimer (finance tools) — always visible in the panel */ .disclaimer{font-size:12.5px;line-height:1.55;color:var(--muted); background:var(--accent-weak);border:1px solid var(--accent-soft); border-left:3px solid var(--accent);border-radius:8px;padding:10px 12px;margin:14px 0 0} /* Amortization schedule table */ .amt{border-collapse:collapse;width:100%;font-size:12.5px;margin-top:10px} .amt th,.amt td{border:1px solid var(--border);padding:6px 8px;text-align:right} .amt th{background:var(--surface-2);color:var(--heading);font-weight:600} .amt td:first-child,.amt th:first-child{text-align:left} /* FAQ accordion — native

, keyboard-accessible, JSON-LD ready */ .faq{display:flex;flex-direction:column;gap:10px} .qa{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden} .qa > summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:600; color:var(--heading);font-size:15px;display:flex;justify-content:space-between; align-items:center;gap:14px;outline-offset:-2px} .qa > summary::-webkit-details-marker{display:none} .qa > summary::after{content:"+";color:var(--accent);font-weight:700;font-size:20px; line-height:1;transition:transform .15s;flex:none} .qa[open] > summary::after{content:"\2212"} .qa-a{padding:0 18px 17px;color:var(--muted);font-size:14.5px;line-height:1.62} .qa-a p{margin:0 0 10px}.qa-a p:last-child{margin:0} .qa-a code{font-family:var(--mono);font-size:13px;background:var(--surface-2); border:1px solid var(--border);border-radius:5px;padding:1px 5px;color:var(--heading)} /* ============================================================ Debug overlay (prototype only — not in production) ============================================================ */ .card-tag{position:absolute;top:14px;right:14px;font-family:var(--mono); font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint); border:1px solid var(--border-strong);border-radius:6px;padding:2px 7px;background:var(--bg)} /* ---------- content-only period: ad slots hidden by default ---------- No ad network is active at launch / during the 6-month content period, so slots never render (no flash of placeholder). app.js adds body.ads-on ONLY when a real ad network is later enabled. */ .ad-box, .card.is-ad, .rel-card.is-ad{display:none !important} body.ads-on .ad-box{display:grid} body.ads-on .card.is-ad{display:block} body.ads-on .rel-card.is-ad{display:flex} /* ============================================================ Responsive ============================================================ */ @media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} .t-layout{grid-template-columns:1fr;gap:24px} .t-side{position:static;flex-direction:column} .rel-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .grid{grid-template-columns:1fr} .row{grid-template-columns:1fr} .rel-grid{grid-template-columns:1fr} .hero{padding:52px 20px 40px} .nav{display:none} } /* ---------- calculator sub-group headers (category page) ---------- */ .group-h{ grid-column:1 / -1; margin:14px 0 4px; padding-bottom:6px; font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--heading);border-bottom:1px solid var(--border-strong); } .group-h:first-child{margin-top:0} .group-n{font-weight:600;color:var(--faint);margin-left:6px;text-transform:none;letter-spacing:0} /* ---------- scientific calculator keypad ---------- */ .calc{max-width:340px} .calc .field{font-size:20px;font-family:var(--mono);text-align:right;margin-bottom:10px} .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .keys button{ font-size:18px;padding:14px 0;border:1px solid var(--border-strong); background:var(--surface);border-radius:10px;cursor:pointer;color:var(--text); font-family:var(--mono);transition:background .12s,transform .05s; } .keys button:hover{background:var(--accent-soft)} .keys button:active{transform:scale(.96)} .keys button.op{background:var(--accent-soft);color:var(--heading);border-color:var(--accent)}