/* Tools.css — scoped styles for calculators & timers */ /* Requires site.css tokens. Add or wrap main with .tool-page */ /* Layout */ .tool-page .card{ background:var(--menu-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; } .tool-page .grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:860px){ .tool-page .grid{ grid-template-columns:1fr; } } /* Form labels */ .tool-page label{ display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:var(--text); } /* Inputs & selects */ .tool-page .input, .tool-page .select{ width:100%; min-height:var(--control-h); padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--menu-bg); color:var(--text); outline:none; font-size:14px; line-height:1.4; box-sizing:border-box; font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } .tool-page .input::placeholder{ color:var(--muted); } .tool-page .input:focus, .tool-page .select:focus{ border-color:var(--ring); box-shadow:0 0 0 3px rgba(59,130,246,.2); } /* Ensure select options use Montserrat */ .tool-page .select option{ font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } /* Unified search input style (optional utility) */ .tool-page .searchbox{ width:100%; min-height:var(--control-h); padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--menu-bg); color:var(--text); font-size:14px; line-height:1.4; font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } .tool-page .searchbox::placeholder{ color:var(--muted); } .tool-page .searchbox:focus{ border-color:var(--ring); box-shadow:0 0 0 3px rgba(59,130,246,.2); outline:0; } /* Fake select for static tokens like "% per interval" */ .tool-page .fake-select{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--control-h); padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--menu-bg); color:var(--text); font-weight:700; font-size:14px; line-height:1.4; box-sizing:border-box; white-space:nowrap; font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } /* Preset chips */ .tool-page .chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; } .tool-page .chip{ display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:var(--pill-bg, var(--menu-bg)); color:var(--text); font-weight:600; cursor:pointer; user-select:none; transition:background .12s ease, border-color .12s ease, transform .12s ease; font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } .tool-page .chip:hover{ background:var(--hover); transform:translateY(-1px); } .tool-page .chip:active{ transform:translateY(0); } .tool-page .chip:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; } .tool-page .chip.active{ border-color:var(--ring); box-shadow:0 0 0 3px rgba(59,130,246,.2); } /* Rows / buttons */ .tool-page .row{ display:flex; gap:10px; flex-wrap:wrap; } html[data-theme="dark"] .tool-page .btn{ color:var(--text); } /* Result panel */ .tool-page .result{ display:block; margin-top:16px; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--soft); } .tool-page .kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:8px; } .tool-page .kpi{ background:var(--menu-bg); border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; } .tool-page .kpi div{ color:var(--muted); font-weight:600; } .tool-page .kpi b{ display:block; font-size:18px; margin-top:4px; color:var(--text); } /* Status notes */ .tool-page .warn{ margin-top:8px; color:#b45309; background:#fff7ed; border:1px solid #fde68a; border-radius:10px; padding:10px; } .tool-page .ok{ margin-top:8px; color:#065f46; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:10px; padding:10px; } html[data-theme="dark"] .tool-page .warn{ color:#f7c58a; background:#2a1f17; border-color:#5b3c1e; } html[data-theme="dark"] .tool-page .ok{ color:#b6ffe1; background:#0f2a23; border-color:#1d5d4b; } /* Toolbar */ .tool-page .toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; } .tool-page .toolbar .btn{ display:inline-flex; align-items:center; gap:8px; } .tool-page .toolbar svg{ width:18px; height:18px; display:block; } @media (max-width:420px){ .tool-page .toolbar .btn{ flex:1 1 100%; } } /* ========================= CTA AREA ========================= */ .tool-page .cta{ margin-top:16px; text-align:center; } /* Legacy gradient CTA (kept for backwards-compat) */ .tool-page .cta a.cta-btn{ display:inline-block; padding:12px 18px; border-radius:12px; background:linear-gradient(90deg,var(--cta-start) 0%,var(--cta-start) 22%,var(--cta-mid) 56%,var(--cta-end) 100%); color:var(--cta-text); font-weight:700; text-decoration:none; box-shadow:var(--cta-shadow); border:1px solid rgba(255,255,255,.08); font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } .tool-page .cta a.cta-btn:hover{ filter:saturate(1.02) brightness(1.02); } .tool-page .cta a.cta-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; } /* Neutral inline CTA */ .tool-page .cta a.cta-inline{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--border); background:var(--menu-bg); border-radius:12px; color:var(--text); font-weight:700; text-decoration:none; box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease, background .12s ease; font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } .tool-page .cta a.cta-inline:hover{ background:var(--hover); transform:translateY(-1px); } .tool-page .cta a.cta-inline:active{ transform:translateY(0); } .tool-page .cta a.cta-inline .cta-prefix{ opacity:.9; } .tool-page .cta a.cta-inline .cta-logo{ height:22px; width:auto; display:block; } .tool-page .cta a.cta-inline .logo-dark{ display:none; } .tool-page .cta a.cta-inline .cta-wordmark{ display:none; font-weight:800; letter-spacing:.01em; } html[data-theme="dark"] .tool-page .cta a.cta-inline .logo-light{ display:none; } html[data-theme="dark"] .tool-page .cta a.cta-inline .logo-dark{ display:block; } /* Fallback when images fail (shows text) */ .tool-page .cta a.cta-inline.no-logo .cta-wordmark{ display:inline; } html[data-theme="dark"] .tool-page .cta a.cta-inline.no-logo .cta-wordmark{ color:#ffffff; } html[data-theme="light"] .tool-page .cta a.cta-inline.no-logo .cta-wordmark{ color:#111111; } /* ========================= AMORTIZATION PANEL TOGGLE ========================= */ #amortWrap{ display:none; margin-top:8px; max-height:60vh; overflow:auto; } #amortWrap.open{ display:block; } /* ========================= TABLE STYLES (no visibility lock) ========================= */ .tool-page .table{ width:100%; border-collapse:collapse; font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } .tool-page .table th, .tool-page .table td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; } .tool-page .table tfoot td{ font-weight:700; } /* Formula helper text */ .tool-page .formula{ margin-top:12px; color:var(--muted); font-size:14px; font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }