/* * Paymaster Calculators — paymaster.css * All rules scoped to .pm-root — no global resets. * Supports light/dark mode via [data-theme="dark"] on . */ /* ── 1. CSS Variables ──────────────────────────────────────────── */ :root { --pm-bg: #f0f2f5; --pm-card: #ffffff; --pm-card-alt: #f7f8fa; --pm-input-bg: #f7f8fa; --pm-input-focus: #ffffff; --pm-text: #111827; --pm-text-2: #374151; --pm-text-3: #6b7280; --pm-text-4: #9ca3af; --pm-blue: #1a3d6b; --pm-blue-2: #2563b0; --pm-blue-3: #dbeafe; --pm-blue-4: #eff6ff; --pm-teal: #0f7b6c; --pm-teal-2: #14b8a6; --pm-teal-3: #ccfbf1; --pm-teal-4: #f0fdfa; --pm-border: #e5e7eb; --pm-border-2: #d1d5db; --pm-border-i: #d1d5db; --pm-border-f: #2563b0; --pm-sh-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05); --pm-sh-input: 0 0 0 3px rgba(37,99,176,.12); --pm-hero-a: #1a3d6b; --pm-hero-b: #2563b0; --pm-hero-t: #ffffff; --pm-hero-m: rgba(255,255,255,.72); --pm-warn-bg: #fffbeb; --pm-warn-b: #fde68a; --pm-warn-t: #78350f; --pm-r: 12px; --pm-r2: 16px; --pm-r3: 20px; --pm-dur: 160ms; } /* Premium graphite + restrained warm-gold dark theme (Paymaster identity). Token overrides only — light mode (:root) is unchanged. The "blue" accent family is remapped to warm gold; the "teal" family becomes a restrained sage tone for positive/net. */ [data-theme="dark"] { --pm-bg: #0E1012; /* main page background — graphite */ --pm-card: #181B1E; /* card background — dark neutral grey */ --pm-card-alt: #202429; /* elevated card / focused input surface */ --pm-input-bg: #14171A; /* dark input background */ --pm-input-focus: #202429; /* input on focus */ --pm-text: #F5F4F0; /* primary off-white */ --pm-text-2: #C2BDB4; /* secondary */ --pm-text-3: #918C84; /* muted */ --pm-text-4: #6E6A62; /* faint */ /* Accent family → warm gold (no blue in dark mode). */ --pm-blue: #D5AE58; /* gold accent: icons, badge/infobox text, link hover */ --pm-blue-2: #D5AE58; /* interactive gold: links, primary button bg, focus ring */ --pm-blue-3: rgba(213,174,88,.24); /* subtle gold border / divider */ --pm-blue-4: #1C2024; /* dark neutral elevated surface (badge/infobox/icon bg) */ /* Success family → restrained sage-teal for positive / net amounts. */ --pm-teal: #86C0AE; --pm-teal-2: #6FB3A6; --pm-teal-3: #2B3A36; --pm-teal-4: #161F1C; --pm-border: rgba(255,255,255,.10); /* neutral border */ --pm-border-2: rgba(255,255,255,.16); --pm-border-i: rgba(255,255,255,.12); /* input border */ --pm-border-f: #D5AE58; /* gold focus border */ --pm-sh-card: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 36px rgba(0,0,0,.34); --pm-sh-input: 0 0 0 3px rgba(213,174,88,.18); /* Restrained warm-graphite hero gradient; gold reserved for the hero amount. */ --pm-hero-a: #1B1E22; --pm-hero-b: #24262A; --pm-hero-t: #D5AE58; /* primary emphasis amount in warm gold */ --pm-hero-m: rgba(245,244,240,.66); --pm-warn-bg: #1E1A12; --pm-warn-b: rgba(213,174,88,.30); --pm-warn-t: #E4C274; } /* ── 2. Scoped reset — ONLY inside .pm-root ────────────────────── */ .pm-root *, .pm-root *::before, .pm-root *::after { box-sizing: border-box; } .pm-root { font-family: "DM Sans", "Figtree", system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5; color: var(--pm-text); background: var(--pm-bg); max-width: 780px; margin: 0 auto; padding: 24px 20px 72px; transition: background var(--pm-dur), color var(--pm-dur); } .pm-root h1, .pm-root h2, .pm-root h3, .pm-root p, .pm-root ul, .pm-root ol, .pm-root li, .pm-root table, .pm-root figure { margin: 0; padding: 0; } /* ── 3. Theme toggle ───────────────────────────────────────────── */ .pm-root .pm-topbar { display: flex; justify-content: flex-end; margin-bottom: 18px; } .pm-root .pm-theme-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--pm-border); border-radius: 999px; background: var(--pm-card); color: var(--pm-text-3); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: var(--pm-sh-card); transition: border-color var(--pm-dur), color var(--pm-dur), background var(--pm-dur); -webkit-appearance: none; appearance: none; } .pm-root .pm-theme-btn:hover { color: var(--pm-text); border-color: var(--pm-border-2); } .pm-root .pm-theme-btn:focus-visible { outline: 2px solid var(--pm-blue-2); outline-offset: 2px; } .pm-root .pm-theme-btn svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .35s ease; } .pm-root .pm-theme-btn:hover svg { transform: rotate(18deg); } .pm-root .pm-icon-sun { display: none; } .pm-root .pm-icon-moon { display: block; } [data-theme="dark"] .pm-root .pm-icon-sun { display: block; } [data-theme="dark"] .pm-root .pm-icon-moon { display: none; } /* ── 4. Breadcrumb ─────────────────────────────────────────────── */ .pm-root .pm-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; font-size: 12.5px; color: var(--pm-text-4); } .pm-root .pm-breadcrumb a { color: var(--pm-text-3); text-decoration: none; } .pm-root .pm-breadcrumb a:hover { color: var(--pm-blue-2); text-decoration: underline; } .pm-root .pm-breadcrumb svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--pm-text-4); } .pm-root .pm-breadcrumb [aria-current] { color: var(--pm-text-3); font-weight: 500; } /* ── 5. Page header ────────────────────────────────────────────── */ .pm-root .pm-header { margin-bottom: 26px; } .pm-root .pm-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; background: var(--pm-blue-4); border: 1px solid var(--pm-blue-3); color: var(--pm-blue); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 13px; } .pm-root .pm-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pm-blue-2); animation: pm-blink 2.4s ease-in-out infinite; } @keyframes pm-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } } .pm-root .pm-h1 { font-size: clamp(22px, 4.5vw, 30px); font-weight: 700; line-height: 1.18; letter-spacing: -.022em; color: var(--pm-text); margin-bottom: 10px; } .pm-root .pm-intro { font-size: 15px; color: var(--pm-text-2); line-height: 1.72; max-width: 62ch; margin-bottom: 12px; } .pm-root .pm-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--pm-text-4); } .pm-root .pm-meta svg { width: 12px; height: 12px; } /* ── 6. Card ───────────────────────────────────────────────────── */ .pm-root .pm-card { background: var(--pm-card); border: 1px solid var(--pm-border); border-radius: var(--pm-r3); box-shadow: var(--pm-sh-card); overflow: hidden; transition: background var(--pm-dur), border-color var(--pm-dur); } .pm-root .pm-card + .pm-card, .pm-root .pm-card + .pm-details-wrap { margin-top: 14px; } .pm-root .pm-card-hd { padding: 17px 20px 0; display: flex; align-items: center; gap: 10px; } .pm-root .pm-card-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--pm-blue-4); border: 1px solid var(--pm-blue-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pm-root .pm-card-icon svg { width: 14px; height: 14px; color: var(--pm-blue); } .pm-root .pm-card-title { font-size: 13.5px; font-weight: 700; color: var(--pm-text); letter-spacing: -.01em; } .pm-root .pm-card-bd { padding: 16px 20px 20px; } /* ── 7. Form ───────────────────────────────────────────────────── */ .pm-root .pm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .pm-root .pm-field { display: flex; flex-direction: column; gap: 6px; } .pm-root .pm-field-full { grid-column: 1 / -1; } .pm-root .pm-label { font-size: 12.5px; font-weight: 600; color: var(--pm-text-2); display: flex; align-items: center; gap: 6px; user-select: none; } .pm-root .pm-badge-sm { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--pm-teal-3); color: var(--pm-teal); letter-spacing: .04em; text-transform: uppercase; } .pm-root .pm-input, .pm-root .pm-select { width: 100%; height: 44px; padding: 0 13px; border: 1.5px solid var(--pm-border-i); border-radius: var(--pm-r); background: var(--pm-input-bg); color: var(--pm-text); font-family: inherit; font-size: 14.5px; font-weight: 500; outline: none; transition: border-color var(--pm-dur), box-shadow var(--pm-dur), background var(--pm-dur); -webkit-appearance: none; appearance: none; } .pm-root .pm-input:focus, .pm-root .pm-select:focus { border-color: var(--pm-border-f); box-shadow: var(--pm-sh-input); background: var(--pm-input-focus); } .pm-root .pm-input[type="number"] { text-align: right; font-family: "DM Mono", "Fira Code", "Courier New", monospace; -moz-appearance: textfield; } .pm-root .pm-input[type="number"]::-webkit-inner-spin-button, .pm-root .pm-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; } .pm-root .pm-sel-wrap { position: relative; } .pm-root .pm-sel-wrap::after { content: ""; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 9px; height: 5px; background: var(--pm-text-4); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; } .pm-root .pm-select { padding-right: 32px; cursor: pointer; } .pm-root .pm-hint { font-size: 11.5px; color: var(--pm-text-4); line-height: 1.5; } .pm-root .pm-check-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1.5px solid var(--pm-border); border-radius: var(--pm-r); background: var(--pm-card-alt); cursor: pointer; transition: border-color var(--pm-dur), background var(--pm-dur); } .pm-root .pm-check-row:hover { border-color: var(--pm-border-2); } .pm-root .pm-check-row:has(input:checked) { border-color: var(--pm-blue-2); background: var(--pm-blue-4); } .pm-root .pm-checkbox { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; border-radius: 5px; border: 1.5px solid var(--pm-border-2); background: var(--pm-card); cursor: pointer; accent-color: var(--pm-blue-2); } .pm-root .pm-check-text { font-size: 13px; font-weight: 500; color: var(--pm-text-2); line-height: 1.45; cursor: pointer; } .pm-root .pm-check-text small { display: block; font-size: 11.5px; color: var(--pm-text-4); font-weight: 400; margin-top: 2px; } /* ── 7b. Form actions (reset) ──────────────────────────────────── */ .pm-root .pm-actions { display: flex; justify-content: flex-end; margin-top: 14px; } .pm-root .pm-reset { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 1px solid var(--pm-border-2); border-radius: 999px; background: var(--pm-card-alt); color: var(--pm-text-3); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--pm-dur), color var(--pm-dur), background var(--pm-dur); -webkit-appearance: none; appearance: none; } .pm-root .pm-reset:hover { color: var(--pm-text); border-color: var(--pm-text-4); } .pm-root .pm-reset:focus-visible { outline: 2px solid var(--pm-blue-2); outline-offset: 2px; } .pm-root .pm-reset svg { width: 14px; height: 14px; flex-shrink: 0; } /* ── 8. Results ────────────────────────────────────────────────── */ .pm-root .pm-empty { padding: 28px 20px; text-align: center; font-size: 13.5px; color: var(--pm-text-4); font-style: italic; } .pm-root .pm-hero { background: linear-gradient(135deg, var(--pm-hero-a), var(--pm-hero-b)); border-radius: var(--pm-r2); padding: 22px 24px; position: relative; overflow: hidden; margin-bottom: 14px; } .pm-root .pm-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.07) 0%, transparent 45%), radial-gradient(circle at 15% 85%, rgba(255,255,255,.04) 0%, transparent 40%); pointer-events: none; } .pm-root .pm-hero-ey { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pm-hero-m); margin-bottom: 7px; } .pm-root .pm-hero-amt { font-size: clamp(30px, 6vw, 42px); font-weight: 700; line-height: 1; color: var(--pm-hero-t); font-family: "DM Mono", "Fira Code", "Courier New", monospace; letter-spacing: -.02em; margin-bottom: 9px; } .pm-root .pm-hero-sub { font-size: 12.5px; color: var(--pm-hero-m); line-height: 1.5; } .pm-root .pm-hero-sub strong { color: var(--pm-hero-t); } .pm-root .pm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; } .pm-root .pm-stat { background: var(--pm-card-alt); border: 1px solid var(--pm-border); border-radius: var(--pm-r2); padding: 13px 15px; } .pm-root .pm-stat-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pm-text-4); margin-bottom: 5px; } .pm-root .pm-stat-val { font-size: 19px; font-weight: 700; color: var(--pm-text); font-family: "DM Mono", "Fira Code", "Courier New", monospace; line-height: 1.15; } .pm-root .pm-stat-val.c-blue { color: var(--pm-blue-2); } .pm-root .pm-stat-val.c-teal { color: var(--pm-teal); } .pm-root .pm-sec { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--pm-text-4); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .pm-root .pm-sec::after { content: ""; flex: 1; height: 1px; background: var(--pm-border); } .pm-root .pm-annual { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } .pm-root .pm-ac { background: var(--pm-card-alt); border: 1px solid var(--pm-border); border-radius: var(--pm-r2); padding: 12px 14px; } .pm-root .pm-ac-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pm-text-4); margin-bottom: 5px; } .pm-root .pm-ac-val { font-size: 16.5px; font-weight: 700; color: var(--pm-text); font-family: "DM Mono", "Fira Code", "Courier New", monospace; line-height: 1.2; } /* ── 9. Tables ─────────────────────────────────────────────────── */ .pm-root .pm-tbl-wrap { border: 1px solid var(--pm-border); border-radius: var(--pm-r2); overflow: hidden; margin-bottom: 20px; } .pm-root .pm-tbl { width: 100%; border-collapse: collapse; } .pm-root .pm-tbl th, .pm-root .pm-tbl td { padding: 10px 13px; font-size: 13px; text-align: right; vertical-align: middle; border-bottom: 1px solid var(--pm-border); color: var(--pm-text); } .pm-root .pm-tbl th { background: var(--pm-card-alt); font-size: 11.5px; font-weight: 700; color: var(--pm-text-3); text-transform: uppercase; letter-spacing: .05em; } .pm-root .pm-tbl th:first-child, .pm-root .pm-tbl td:first-child { text-align: left; } .pm-root .pm-tbl tbody tr:last-child td { border-bottom: none; } .pm-root .pm-tbl tfoot td { border-top: 1.5px solid var(--pm-border-2); border-bottom: none; } .pm-root .pm-row-net td { font-weight: 700; font-size: 14px; background: var(--pm-teal-4); color: var(--pm-teal); font-family: "DM Mono", "Fira Code", "Courier New", monospace; border-top: 1.5px solid var(--pm-teal-3); border-bottom: none; } .pm-root .pm-row-total td { font-weight: 700; background: var(--pm-blue-4); color: var(--pm-blue); border-top: 1.5px solid var(--pm-blue-3); } .pm-root .pm-rate-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--pm-blue-4); color: var(--pm-blue); font-size: 11.5px; font-weight: 700; border: 1px solid var(--pm-blue-3); } .pm-root .pm-col-base { /* hidden on mobile */ } /* Tax scale static table */ .pm-root .pm-tax-table { width: 100%; border-collapse: collapse; font-size: 13.5px; border: 1px solid var(--pm-border); border-radius: var(--pm-r2); overflow: hidden; margin: 14px 0; } .pm-root .pm-tax-table thead { background: var(--pm-blue); } .pm-root .pm-tax-table thead th { padding: 10px 14px; text-align: right; font-weight: 700; font-size: 12.5px; letter-spacing: .03em; color: #fff; } .pm-root .pm-tax-table thead th:first-child { text-align: left; } .pm-root .pm-tax-table tbody td { padding: 9px 14px; border-bottom: 1px solid var(--pm-border); color: var(--pm-text-2); text-align: right; } .pm-root .pm-tax-table tbody td:first-child { text-align: left; font-weight: 500; color: var(--pm-text); } .pm-root .pm-tax-table tbody tr:last-child td { border-bottom: none; } .pm-root .pm-tax-table tbody tr:nth-child(even) { background: var(--pm-card-alt); } /* ── 10. Details / Accordion ───────────────────────────────────── */ .pm-root .pm-details-wrap { margin-top: 14px; } .pm-root .pm-details { border: 1px solid var(--pm-border); border-radius: var(--pm-r2); background: var(--pm-card-alt); overflow: hidden; } .pm-root .pm-details summary { padding: 13px 18px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--pm-text); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; user-select: none; transition: background var(--pm-dur); } .pm-root .pm-details summary:hover { background: var(--pm-border); } .pm-root .pm-details summary::-webkit-details-marker { display: none; } .pm-root .pm-details summary::after { content: ""; width: 9px; height: 5px; background: var(--pm-text-4); clip-path: polygon(0 0, 100% 0, 50% 100%); flex-shrink: 0; transition: transform .2s ease; } .pm-root .pm-details[open] summary::after { transform: rotate(180deg); } .pm-root .pm-details-bd { padding: 0 18px 16px; font-size: 12.5px; color: var(--pm-text-3); line-height: 1.75; } .pm-root .pm-details-bd p + p { margin-top: 9px; } .pm-root .pm-details-bd strong { color: var(--pm-text); font-weight: 600; } /* ── 11. Content sections ──────────────────────────────────────── */ .pm-root .pm-content { margin-top: 52px; } .pm-root .pm-content-section { margin-bottom: 40px; } .pm-root .pm-content-section:last-child { margin-bottom: 0; } .pm-root .pm-section-title, .pm-root .pm-content h2 { font-size: clamp(18px, 3vw, 22px); font-weight: 700; letter-spacing: -.02em; color: var(--pm-text); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--pm-blue-3); } .pm-root .pm-content h3 { font-size: 16px; font-weight: 700; color: var(--pm-text); margin: 18px 0 8px; letter-spacing: -.01em; } .pm-root .pm-content p { font-size: 14.5px; color: var(--pm-text-2); line-height: 1.75; margin-bottom: 10px; } .pm-root .pm-content p:last-child { margin-bottom: 0; } .pm-root .pm-content ul, .pm-root .pm-content ol { margin: 10px 0 14px; padding-left: 20px; font-size: 14.5px; color: var(--pm-text-2); line-height: 1.75; } .pm-root .pm-content li { margin-bottom: 5px; } .pm-root .pm-content strong { color: var(--pm-text); font-weight: 600; } .pm-root .pm-content a { color: var(--pm-blue-2); text-decoration: underline; text-underline-offset: 2px; } .pm-root .pm-content a:hover { color: var(--pm-blue); } .pm-root .pm-infobox { background: var(--pm-blue-4); border: 1px solid var(--pm-blue-3); border-left: 3px solid var(--pm-blue-2); border-radius: var(--pm-r); padding: 14px 16px; margin: 16px 0; font-size: 13.5px; color: var(--pm-blue); line-height: 1.65; } .pm-root .pm-infobox strong { color: var(--pm-blue); font-weight: 700; } .pm-root .pm-infobox--warn { background: var(--pm-warn-bg); border-color: var(--pm-warn-b); border-left-color: #d97706; color: var(--pm-warn-t); } .pm-root .pm-infobox--warn strong { color: var(--pm-warn-t); } /* ── 12. FAQ ───────────────────────────────────────────────────── */ .pm-root .pm-faq-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .pm-root .pm-faq-item { border: 1px solid var(--pm-border); border-radius: var(--pm-r2); background: var(--pm-card); overflow: hidden; } .pm-root .pm-faq-q { width: 100%; background: none; border: none; padding: 15px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; cursor: pointer; text-align: left; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--pm-text); line-height: 1.45; transition: background var(--pm-dur); } .pm-root .pm-faq-q:hover { background: var(--pm-card-alt); } .pm-root .pm-faq-q[aria-expanded="true"] { color: var(--pm-blue-2); } .pm-root .pm-faq-icon { width: 20px; height: 20px; border-radius: 50%; background: var(--pm-blue-4); border: 1px solid var(--pm-blue-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; transition: transform .22s ease; } .pm-root .pm-faq-q[aria-expanded="true"] .pm-faq-icon { transform: rotate(45deg); background: var(--pm-blue-2); border-color: var(--pm-blue-2); } .pm-root .pm-faq-icon svg { width: 10px; height: 10px; color: var(--pm-blue); transition: color .22s ease; } .pm-root .pm-faq-q[aria-expanded="true"] .pm-faq-icon svg { color: #fff; } .pm-root .pm-faq-a { overflow: hidden; max-height: 0; transition: max-height .28s ease; } .pm-root .pm-faq-a.open { max-height: 1500px; } .pm-root .pm-faq-a-inner { padding: 13px 18px 16px; font-size: 13.5px; color: var(--pm-text-2); line-height: 1.75; border-top: 1px solid var(--pm-border); } .pm-root .pm-faq-a-inner strong { color: var(--pm-text); } .pm-root .pm-faq-a-inner a { color: var(--pm-blue-2); text-decoration: underline; text-underline-offset: 2px; } /* ── 13. Related calculators ───────────────────────────────────── */ .pm-root .pm-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 6px; } .pm-root .pm-related-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--pm-card); border: 1px solid var(--pm-border); border-radius: var(--pm-r2); text-decoration: none; color: var(--pm-text); transition: border-color var(--pm-dur), box-shadow var(--pm-dur), background var(--pm-dur); } .pm-root .pm-related-card:hover { border-color: var(--pm-blue-2); box-shadow: var(--pm-sh-card); background: var(--pm-blue-4); } .pm-root .pm-related-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--pm-blue-4); border: 1px solid var(--pm-blue-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pm-root .pm-related-icon svg { width: 17px; height: 17px; color: var(--pm-blue); } .pm-root .pm-related-title { font-size: 13.5px; font-weight: 700; color: var(--pm-text); margin-bottom: 3px; display: block; } /* ── 14. Premium CTA ───────────────────────────────────────────── */ .pm-root .pm-cta { background: linear-gradient(135deg, var(--pm-hero-a), var(--pm-hero-b)); border-radius: var(--pm-r3); padding: 26px 28px; margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .pm-root .pm-cta .pm-cta-text { color: #fff !important; } .pm-root .pm-cta .pm-cta-title { font-size: 17px; font-weight: 700; margin-bottom: 5px; letter-spacing: -.01em; color: #fff !important; } .pm-root .pm-cta .pm-cta-desc { font-size: 13.5px; color: rgba(255,255,255,.82) !important; line-height: 1.55; max-width: 44ch; } .pm-root .pm-cta-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .pm-root .pm-cta-feat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.9); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .15s; } .pm-root .pm-cta-feat:hover { background: rgba(255,255,255,.18); } .pm-root .pm-lock-icon svg { width: 12px; height: 12px; } /* ── 15. Premium Modal ─────────────────────────────────────────── */ .pm-root .pm-modal[hidden] { display: none; } .pm-root .pm-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; } .pm-root .pm-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); cursor: pointer; } .pm-root .pm-modal-box { position: relative; z-index: 1; background: var(--pm-card); border-radius: var(--pm-r3); padding: 32px 28px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.3); text-align: center; border: 1px solid var(--pm-border); } .pm-root .pm-modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--pm-border); background: var(--pm-card-alt); color: var(--pm-text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; } .pm-root .pm-modal-close svg { width: 14px; height: 14px; } .pm-root .pm-modal-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--pm-blue-4); border: 1px solid var(--pm-blue-3); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .pm-root .pm-modal-icon svg { width: 28px; height: 28px; color: var(--pm-blue-2); } .pm-root .pm-modal-title { font-size: 18px; font-weight: 700; color: var(--pm-text); margin-bottom: 10px; } .pm-root .pm-modal-body { font-size: 14px; color: var(--pm-text-2); line-height: 1.65; margin-bottom: 20px; } .pm-root .pm-modal-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border-radius: 999px; background: var(--pm-blue-2); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: opacity .15s; } .pm-root .pm-modal-btn:hover { opacity: .88; } /* ── 16. Disclaimer ────────────────────────────────────────────── */ .pm-root .pm-disclaimer { margin-top: 32px; padding: 13px 16px; border-radius: var(--pm-r); background: var(--pm-warn-bg); border: 1px solid var(--pm-warn-b); color: var(--pm-warn-t); font-size: 12.5px; line-height: 1.65; display: flex; gap: 9px; align-items: flex-start; } .pm-root .pm-disclaimer svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; } /* ── 17. SVG icons ─────────────────────────────────────────────── */ .pm-root .pm-svg-icon { display: inline-block; vertical-align: middle; } /* ── 17b. Payroll-total calculator (.pm-pt) ────────────────────── */ .pm-root .pm-actions.pm-actions-multi { justify-content: flex-start; flex-wrap: wrap; gap: 10px; } .pm-root .pm-btn-primary { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border: none; border-radius: 999px; background: var(--pm-blue-2); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity var(--pm-dur); -webkit-appearance: none; appearance: none; } .pm-root .pm-btn-primary:hover { opacity: .88; } .pm-root .pm-btn-primary:focus-visible { outline: 2px solid var(--pm-blue-2); outline-offset: 2px; } /* Horizontal-scroll wrapper for the wide monthly table */ .pm-root .pm-pt-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--pm-border); border-radius: var(--pm-r2); background: var(--pm-card); margin: 12px 0; -webkit-overflow-scrolling: touch; } .pm-root .pm-pt-table { width: 100%; min-width: 1500px; border-collapse: separate; border-spacing: 0; } .pm-root .pm-pt-table th, .pm-root .pm-pt-table td { padding: 6px 8px; font-size: 12px; text-align: right; vertical-align: middle; border-bottom: 1px solid var(--pm-border); border-right: 1px solid var(--pm-border); color: var(--pm-text); white-space: nowrap; } .pm-root .pm-pt-table thead th { position: sticky; top: 0; z-index: 2; background: var(--pm-card-alt); color: var(--pm-text-3); font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase; letter-spacing: .03em; } .pm-root .pm-pt-table thead th small { font-size: 10px; font-weight: 600; color: var(--pm-text-4); text-transform: none; letter-spacing: 0; } .pm-root .pm-pt-table .pm-pt-group { background: var(--pm-blue-4); color: var(--pm-blue); } /* Sticky first column (period name) — header label + each row header only */ .pm-root .pm-pt-table tbody th, .pm-root .pm-pt-table thead tr:first-child th:first-child { position: sticky; left: 0; z-index: 1; width: 150px; min-width: 150px; max-width: 150px; text-align: left; background: var(--pm-card); box-shadow: 6px 0 14px rgba(0,0,0,.06); } .pm-root .pm-pt-table thead tr:first-child th:first-child { z-index: 3; background: var(--pm-card-alt); } .pm-root .pm-pt-table tbody th { font-weight: 700; vertical-align: top; } .pm-root .pm-pt-period { display: block; font-weight: 700; color: var(--pm-text); white-space: normal; line-height: 1.2; } .pm-root .pm-pt-period-t { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; color: var(--pm-text-4); } .pm-root .pm-pt-table tbody tr:nth-child(even) td { background: var(--pm-card-alt); } .pm-root .pm-pt-table tbody tr.pm-pt-extra th, .pm-root .pm-pt-table tbody tr.pm-pt-extra td { background: var(--pm-warn-bg); } .pm-root .pm-pt-include { text-align: center; } .pm-root .pm-pt-include input { accent-color: var(--pm-blue-2); transform: scale(1.05); } .pm-root .pm-mini-input { width: 100%; min-width: 56px; min-height: 30px; padding: 5px 7px; border: 1px solid var(--pm-border-i); border-radius: 8px; background: var(--pm-input-bg); color: var(--pm-text); font-family: "DM Mono", "Fira Code", "Courier New", monospace; font-size: 12.5px; text-align: right; outline: none; -moz-appearance: textfield; appearance: textfield; transition: border-color var(--pm-dur), box-shadow var(--pm-dur); } .pm-root .pm-mini-input::-webkit-inner-spin-button, .pm-root .pm-mini-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .pm-root .pm-mini-input:focus { border-color: var(--pm-border-f); box-shadow: var(--pm-sh-input); background: var(--pm-input-focus); } /* Result cells, mapped to plugin palette */ .pm-root .pm-pt-table .pm-calc-cell { background: var(--pm-card-alt); color: var(--pm-text-2); font-weight: 600; } .pm-root .pm-pt-table .pm-tax-cell { background: var(--pm-warn-bg); color: var(--pm-warn-t); font-weight: 700; } .pm-root .pm-pt-table .pm-net-cell { background: var(--pm-teal-4); color: var(--pm-teal); font-weight: 800; } .pm-root .pm-pt-table .pm-cost-cell { background: var(--pm-blue-4); color: var(--pm-blue); font-weight: 700; } /* Results "Ανάλυση" explain grid */ .pm-root .pm-pt-explain { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .pm-root .pm-pt-explain .pm-infobox { margin: 0; } .pm-root .pm-pt-explain .pm-infobox strong { display: block; margin-bottom: 6px; } /* ── 17c. Unused-leave calculator (.pm-ul) ─────────────────────── */ /* Conditional field groups for scenarios A / B. */ .pm-root .pm-ul-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 12px; padding: 14px; border: 1px dashed var(--pm-border-2); border-radius: var(--pm-r2); background: var(--pm-card-alt); } .pm-root .pm-ul-group[hidden] { display: none; } .pm-root .pm-ul .pm-check-row + .pm-ul-group { margin-bottom: 4px; } /* ── 17d. Entitlement calculators (.pm-la / .pm-eb / .pm-cb) ────── */ /* These reuse the shared design system; only minor polish is scoped here. */ .pm-root.pm-la .pm-tbl td, .pm-root.pm-eb .pm-tbl td, .pm-root.pm-cb .pm-tbl td { font-variant-numeric: tabular-nums; } .pm-root.pm-la .pm-tbl td:last-child, .pm-root.pm-eb .pm-tbl td:last-child, .pm-root.pm-cb .pm-tbl td:last-child { text-align: right; font-weight: 600; } /* Advanced-settings accordion inside the inputs card + analysis accordion in results */ .pm-root .pm-adv { margin-top: 14px; } .pm-root .pm-adv .pm-details-bd { padding-top: 14px; } .pm-root .pm-analysis { margin-top: 16px; } /* ── 17e. Homepage (.pm-home) ──────────────────────────────────── */ .pm-root.pm-home { max-width: 1100px; } .pm-root .pm-home-hero { margin: 6px 0 26px; } .pm-root .pm-home-eyebrow { display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px; background: var(--pm-blue-4); border: 1px solid var(--pm-blue-3); color: var(--pm-blue); font-size: 12px; font-weight: 700; letter-spacing: .04em; } .pm-root .pm-home-h1 { font-size: clamp(26px, 5vw, 40px); font-weight: 700; line-height: 1.14; letter-spacing: -.025em; color: var(--pm-text); margin-bottom: 12px; max-width: 18ch; } .pm-root .pm-home-intro { max-width: 72ch; font-size: 15.5px; line-height: 1.7; color: var(--pm-text-2); } .pm-root .pm-home-cta-row { margin-top: 18px; } .pm-root .pm-home-stats { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 38px; } .pm-root .pm-home-stat { background: var(--pm-card-alt); border: 1px solid var(--pm-border); border-radius: var(--pm-r2); padding: 16px; } .pm-root .pm-home-stat--lead { background: var(--pm-blue-4); border-color: var(--pm-blue-3); } .pm-root .pm-home-stat-val { font-size: 18px; font-weight: 800; color: var(--pm-text); letter-spacing: -.01em; } .pm-root .pm-home-stat--lead .pm-home-stat-val { color: var(--pm-blue); } .pm-root .pm-home-stat-lbl { margin-top: 3px; font-size: 12px; color: var(--pm-text-3); } .pm-root .pm-home-section { margin-bottom: 40px; } .pm-root .pm-home-section-title { font-size: clamp(18px, 3vw, 22px); font-weight: 700; letter-spacing: -.02em; color: var(--pm-text); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--pm-blue-3); } .pm-root .pm-home-group-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pm-text-4); margin: 18px 0 10px; } .pm-root .pm-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; } .pm-root .pm-home-card { display: flex; align-items: flex-start; gap: 13px; padding: 16px; background: var(--pm-card); border: 1px solid var(--pm-border); border-radius: var(--pm-r2); text-decoration: none; color: var(--pm-text); transition: border-color var(--pm-dur), box-shadow var(--pm-dur), background var(--pm-dur); } .pm-root .pm-home-card:hover { border-color: var(--pm-blue-2); box-shadow: var(--pm-sh-card); background: var(--pm-blue-4); } .pm-root .pm-home-card:focus-visible { outline: 2px solid var(--pm-blue-2); outline-offset: 2px; } .pm-root .pm-home-card-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--pm-blue-4); border: 1px solid var(--pm-blue-3); display: flex; align-items: center; justify-content: center; } .pm-root .pm-home-card-icon svg { width: 18px; height: 18px; color: var(--pm-blue); } .pm-root .pm-home-card-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pm-root .pm-home-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pm-root .pm-home-card-title { font-size: 14.5px; font-weight: 700; color: var(--pm-text); } .pm-root .pm-home-tag { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--pm-teal-3); color: var(--pm-teal); text-transform: uppercase; letter-spacing: .04em; } .pm-root .pm-home-card-desc { font-size: 12.5px; color: var(--pm-text-3); line-height: 1.55; } .pm-root .pm-home-card-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--pm-blue-2); } .pm-root .pm-home-card-cta svg { width: 13px; height: 13px; } .pm-root .pm-home-prose p { font-size: 14.5px; color: var(--pm-text-2); line-height: 1.75; margin-bottom: 10px; } .pm-root .pm-home-prose p:last-child { margin-bottom: 0; } .pm-root .pm-home-prose strong { color: var(--pm-text); font-weight: 600; } /* ── 18. Responsive ────────────────────────────────────────────── */ @media (max-width: 600px) { .pm-root { padding: 16px 15px 56px; } .pm-root .pm-grid { grid-template-columns: 1fr; } .pm-root .pm-annual { grid-template-columns: 1fr; } .pm-root .pm-stats { grid-template-columns: 1fr 1fr; } .pm-root .pm-related-grid { grid-template-columns: 1fr; } .pm-root .pm-cta { padding: 20px; } .pm-root .pm-card-bd { padding: 14px 15px 17px; } .pm-root .pm-card-hd { padding: 14px 15px 0; } .pm-root .pm-col-base { display: none; } .pm-root .pm-pt-explain { grid-template-columns: 1fr; } .pm-root .pm-ul-group { grid-template-columns: 1fr; } .pm-root .pm-home-stats { grid-template-columns: 1fr 1fr; } .pm-root .pm-home-grid { grid-template-columns: 1fr; } .pm-root .pm-pt-table tbody th, .pm-root .pm-pt-table thead tr:first-child th:first-child { width: 112px; min-width: 112px; max-width: 112px; box-shadow: none; } .pm-root .pm-pt-table { min-width: 1320px; } } @media (max-width: 360px) { .pm-root .pm-stats { grid-template-columns: 1fr; } } /* ── 19. Print ─────────────────────────────────────────────────── */ @media print { .pm-root .pm-topbar, .pm-root .pm-details-wrap, .pm-root .pm-cta, .pm-root .pm-modal { display: none; } .pm-root .pm-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ── 20. Dark-mode component refinements ────────────────────────── Scoped ONLY to [data-theme="dark"] .pm-root so light mode is never affected. These handle the few cases the token remap can't cover (contrast on gold, keeping the gold "accent" restrained, and warm-gold tags/borders). */ /* Gold action buttons need near-black text for contrast. */ [data-theme="dark"] .pm-root .pm-btn-primary, [data-theme="dark"] .pm-root .pm-modal-btn { color: #18140C; } [data-theme="dark"] .pm-root .pm-faq-q[aria-expanded="true"] .pm-faq-icon svg { color: #18140C; } /* Restrained gold hierarchy: bright gold for the hero only; secondary numbers muted gold. */ [data-theme="dark"] .pm-root .pm-stat-val.c-blue { color: #BD9A52; } /* Subtle gold border on the most important result hero + premium CTA. */ [data-theme="dark"] .pm-root .pm-hero { border: 1px solid rgba(213,174,88,.22); } [data-theme="dark"] .pm-root .pm-cta { border: 1px solid rgba(213,174,88,.18); } /* Secondary buttons: charcoal surface with a muted-gold border. */ [data-theme="dark"] .pm-root .pm-reset { border-color: rgba(213,174,88,.24); color: var(--pm-text-2); } [data-theme="dark"] .pm-root .pm-reset:hover { border-color: rgba(213,174,88,.46); color: var(--pm-text); } /* Tags: compact warm-gold chips (instead of the sage/teal used in light). */ [data-theme="dark"] .pm-root .pm-badge-sm, [data-theme="dark"] .pm-root .pm-home-tag { background: rgba(213,174,88,.12); color: #D5AE58; border: 1px solid rgba(213,174,88,.28); } /* Static tax-scale table header: neutral charcoal instead of a solid-gold block. */ [data-theme="dark"] .pm-root .pm-tax-table thead { background: #20242A; } [data-theme="dark"] .pm-root .pm-tax-table thead th { color: var(--pm-text); } /* ── 21. Homepage typography refinements ────────────────────────── Scoped ONLY to .pm-home (no colors, no layout, no font sizes) — affects neither calculator pages nor the theme palettes. */ .pm-root.pm-home .pm-home-h1 { font-weight: 800; letter-spacing: -0.015em; line-height: 1.10; } .pm-root.pm-home .pm-home-section-title { font-weight: 750; letter-spacing: -0.01em; line-height: 1.20; } .pm-root.pm-home .pm-home-card-title { font-weight: 700; letter-spacing: 0; line-height: 1.22; text-decoration: none; } .pm-root.pm-home p, .pm-root.pm-home .pm-home-card-desc { letter-spacing: 0; line-height: 1.55; } .pm-root.pm-home .pm-home-eyebrow, .pm-root.pm-home .pm-home-tag { letter-spacing: 0.025em; } @media (max-width: 600px) { .pm-root.pm-home .pm-home-h1 { line-height: 1.12; } }