/* * CHP Screener — EPS "instrument" design system. * Everything is scoped under .chp-screener so it neither leaks onto the theme nor * gets clobbered by it (generic names like .btn / .form-input are intentionally scoped). * Fonts (Archivo / Inter Tight / JetBrains Mono) are enqueued by the plugin. */ .chp-screener { --primary:#1A1D22; --primary-soft:#2A2E35; --green:#2D7A3E; --green-deep:#1F5C2E; --green-bright:#46A05B; --green-wash:#F2F8F3; --tier-strong:#1F5C2E; --tier-strong-bg:#E4F0E7; --tier-pot:#2A4E73; --tier-pot-bg:#E6EEF7; --tier-review:#8A6312; --tier-review-bg:#F4ECDB; --tier-notfit:#4A4A4A; --tier-notfit-bg:#ECEAE6; --bg:#FAF8F4; --bg-card:#FFFFFF; --bg-instrument:#14171A; --bg-tint:#F2EFE7; --ink:#14171A; --ink-2:#3A3F47; --ink-muted:#6B7280; --ink-faint:#9CA3AF; --ink-on-dark:#F5F3EE; --line:#E6E0D2; --line-strong:#C9C2B3; --radius-sm:3px; --radius:6px; --radius-lg:10px; --shadow-sm:0 1px 0 rgba(20,23,26,.04), 0 2px 8px rgba(20,23,26,.04); /* Default to the active theme's font family. Override these three vars to restore the bundled "instrument" typefaces (Archivo / Inter Tight / JetBrains Mono). */ --font-display:"Montserrat", sans-serif; --font-body:inherit; --font-mono:inherit; max-width:760px; margin:0 auto; padding:36px 28px 44px; font-family:var(--font-body); font-size:15px; line-height:1.5; color:var(--ink); background:var(--bg); background-image: repeating-linear-gradient(0deg, transparent 0, transparent 47px, rgba(20,23,26,.022) 48px), repeating-linear-gradient(90deg, transparent 0, transparent 47px, rgba(20,23,26,.022) 48px); border:1px solid var(--line); border-radius:var(--radius-lg); } /* Shortcode: [chp_screener border="false"] */ .chp-screener.chp-screener--no-border { border:0; } .chp-screener *, .chp-screener *::before, .chp-screener *::after { box-sizing:border-box; } /* Masthead */ .chp-screener .chp-masthead { margin-bottom:24px; } .chp-screener .chp-eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-deep); display:flex; align-items:center; gap:8px; margin-bottom:12px; } .chp-screener .chp-eyebrow::before { content:''; width:18px; height:2px; background:var(--green); display:inline-block; } .chp-screener .chp-title { font-family:var(--font-display); font-weight:800; font-size:clamp(26px,4.5vw,38px); line-height:1.06; letter-spacing:-.02em; margin:0 0 10px; color:var(--ink); } .chp-screener .chp-title em { font-style:normal; color:var(--green); } .chp-screener .chp-lede { color:var(--ink-muted); font-size:16px; max-width:54ch; margin:0; } /* Cards / sections */ .chp-screener .chp-card { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:22px; margin:0 0 16px; } .chp-screener .chp-section-head { display:flex; align-items:center; gap:10px; margin:0 0 16px; } .chp-screener .chp-section-head .dot { width:8px; height:8px; border-radius:50%; background:var(--green); flex:0 0 auto; } .chp-screener .chp-section-head h2 { font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin:0; } .chp-screener .chp-section-note { font-size:13px; color:var(--ink-muted); margin:-6px 0 16px; } /* Fields */ .chp-screener .chp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px; } @media (max-width:560px){ .chp-screener .chp-grid { grid-template-columns:1fr; } } .chp-screener .form-field { display:flex; flex-direction:column; gap:6px; } .chp-screener .form-field.full { grid-column:1 / -1; } .chp-screener .form-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); display:flex; align-items:baseline; gap:8px; } .chp-screener .req { color:var(--green-deep); } .chp-screener .opt { color:var(--ink-faint); font-weight:400; text-transform:none; letter-spacing:0; font-size:11px; } .chp-screener .form-input, .chp-screener .form-select { width:100%; padding:12px 14px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); font-family:var(--font-body); font-size:15px; color:var(--ink); line-height:1.4; transition:border-color .15s ease, box-shadow .15s ease; } .chp-screener .form-input::placeholder { color:var(--ink-faint); } .chp-screener .form-input:focus, .chp-screener .form-select:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-wash); } .chp-screener .form-select { appearance:none; -webkit-appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } .chp-screener .form-help { font-size:11px; color:var(--ink-muted); margin-top:-1px; } /* numeric inputs with a unit affix */ .chp-screener .input-unit { display:flex; } .chp-screener .input-unit .form-input { border-top-right-radius:0; border-bottom-right-radius:0; } .chp-screener .input-unit .unit { display:flex; align-items:center; padding:0 12px; font-family:var(--font-mono); font-size:13px; color:var(--ink-muted); background:var(--bg-tint); border:1px solid var(--line); border-left:0; border-top-right-radius:var(--radius); border-bottom-right-radius:var(--radius); } .chp-screener .input-unit .form-input:focus + .unit { border-color:var(--green); } /* invalid state */ .chp-screener .form-input[aria-invalid="true"], .chp-screener .form-select[aria-invalid="true"] { border-color:#c0392b !important; box-shadow:0 0 0 3px rgba(192,57,43,.12); } .chp-screener .input-unit .form-input[aria-invalid="true"] + .unit { border-color:#c0392b; } /* method toggle — segmented control */ .chp-screener .chp-segment { display:flex; gap:6px; background:var(--bg-tint); border:1px solid var(--line); border-radius:var(--radius); padding:4px; } .chp-screener .chp-segment button { flex:1; padding:9px 12px; border:0; background:transparent; cursor:pointer; border-radius:var(--radius-sm); font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--ink-muted); transition:all .15s ease; } .chp-screener .chp-segment button[aria-pressed="true"] { background:var(--bg-card); color:var(--ink); box-shadow:var(--shadow-sm); } .chp-screener .chp-option { margin-top:22px; } .chp-screener .chp-option[hidden] { display:none; } /* Buttons */ .chp-screener .actions { display:flex; align-items:center; gap:14px; margin-top:6px; } .chp-screener .btn { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border:none; border-radius:var(--radius); font-family:var(--font-body); font-weight:600; font-size:15px; cursor:pointer; transition:all .15s ease; text-decoration:none; line-height:1; } .chp-screener .btn-primary { background:var(--primary); color:#fff; } .chp-screener .btn-primary:hover { background:var(--primary-soft); } .chp-screener .btn-primary::after { content:'→'; font-weight:400; } .chp-screener .btn-ghost { background:transparent; color:var(--ink-muted); padding:11px 12px; font-size:14px; } .chp-screener .btn-ghost:hover { color:var(--ink); } .chp-screener .req-note { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 16px; } .chp-screener .req-note .req { color:var(--green-deep); } /* Error summary */ .chp-screener .chp-errors { background:var(--tier-review-bg); border:1px solid #E2C68A; color:#6f4e0f; border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; } .chp-screener .chp-errors[hidden] { display:none; } .chp-screener .chp-errors__title { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin:0 0 8px; } .chp-screener .chp-errors ul { margin:0; padding-left:18px; font-size:14px; } /* ===== Results ===== */ .chp-screener .chp-results { margin-top:28px; } .chp-screener .chp-results[hidden] { display:none; } .chp-screener .savings-card { background:var(--bg-instrument); color:var(--ink-on-dark); border-radius:var(--radius-lg); padding:30px 32px; position:relative; overflow:hidden; } .chp-screener .savings-card::before { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,transparent 0,transparent 31px,rgba(255,255,255,.03) 32px); pointer-events:none; } .chp-screener .savings-card > * { position:relative; } .chp-screener .savings-config-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,243,238,.55); margin:0 0 6px; } .chp-screener .savings-config { font-family:var(--font-display); font-weight:700; font-size:22px; margin:0 0 24px; letter-spacing:-.01em; } .chp-screener .savings-headline { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-bottom:20px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.1); } .chp-screener .savings-headline .num { font-family:var(--font-mono); font-weight:600; font-size:clamp(32px,7vw,46px); letter-spacing:-.02em; color:#fff; } .chp-screener .savings-headline .lbl { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,243,238,.6); } .chp-screener .savings-row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; font-size:14px; border-bottom:1px solid rgba(255,255,255,.06); } .chp-screener .savings-row:last-child { border-bottom:0; } .chp-screener .savings-row-key { color:rgba(245,243,238,.75); } .chp-screener .savings-row-val { font-family:var(--font-mono); font-weight:500; letter-spacing:-.01em; } .chp-screener .savings-row-val.pos { color:var(--green-bright); } .chp-screener .savings-row-val.neg { color:#e0896f; } /* ===== Lead-capture form (under the results) ===== */ .chp-screener .chp-lead-card { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:22px; margin-top:16px; } .chp-screener .chp-lead-msg { font-size:15px; color:var(--ink-2); margin:0 0 16px; max-width:64ch; } .chp-screener .chp-lead-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px; margin-bottom:16px; } @media (max-width:560px){ .chp-screener .chp-lead-grid { grid-template-columns:1fr; } } .chp-screener .chp-lead-status { font-size:14px; margin:0 0 12px; color:var(--green-deep); } .chp-screener .chp-lead-status--error { color:#c0392b; } .chp-screener .chp-lead-status--success { font-weight:600; margin:0; } .chp-screener .chp-lead-status[hidden] { display:none; } /* Honeypot — visually removed but still in the form for bots to find. */ .chp-screener .chp-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; } /* Busy state (Calculate + lead form): greyed-out button + spinner beside it */ .chp-screener .chp-lead-actions { display:flex; align-items:center; gap:12px; } #chp-screener .btn-primary:disabled { opacity:.55 !important; cursor:default !important; } #chp-screener .btn-primary:disabled::after { content:'' !important; } /* drop the → while busy */ .chp-screener .chp-spinner { display:inline-block; width:18px; height:18px; flex:0 0 auto; border:2px solid var(--line-strong); border-top-color:var(--green); border-radius:50%; animation:chp-spin .7s linear infinite; } .chp-screener .chp-spinner[hidden] { display:none; } @keyframes chp-spin { to { transform:rotate(360deg); } } /* ========================================================================= * Hardening layer — keep themes / Elementor / other plugins from overriding * our interactive elements. Uses the #chp-screener id (high specificity) plus * !important on the exact properties global `button` / `input` styles tend to * clobber (radius, background, color, border, hover states). Kept in its own * block so the intent is obvious and the rest of the stylesheet stays clean. * ========================================================================= */ /* Base container typography shouldn't inherit theme widget overrides. */ #chp-screener { font-family:var(--font-body) !important; color:var(--ink) !important; } /* --- Buttons (.btn / primary / ghost) --- */ #chp-screener .btn { border:0 !important; border-radius:var(--radius) !important; box-shadow:none !important; font-family:var(--font-body) !important; font-weight:600 !important; font-size:15px !important; line-height:1 !important; letter-spacing:normal !important; text-transform:none !important; text-decoration:none !important; text-shadow:none !important; width:auto !important; min-width:0 !important; transform:none !important; transition:background-color .15s ease, color .15s ease !important; } #chp-screener .btn-primary, #chp-screener .btn-primary:hover, #chp-screener .btn-primary:focus, #chp-screener .btn-primary:active { background:var(--primary) !important; color:#fff !important; border-radius:var(--radius) !important; } #chp-screener .btn-primary:hover { background:var(--primary-soft) !important; } #chp-screener .btn-ghost, #chp-screener .btn-ghost:hover, #chp-screener .btn-ghost:focus, #chp-screener .btn-ghost:active { background:transparent !important; border:0 !important; border-radius:var(--radius) !important; } #chp-screener .btn-ghost { color:var(--ink-muted) !important; } #chp-screener .btn-ghost:hover, #chp-screener .btn-ghost:focus { color:var(--ink) !important; } /* --- Segmented method control (also