/** * Nealey Pricing — estimate tool. * * Deliberately light-touch: inherits the theme's typography and colour rather * than imposing its own, so it sits inside Uncode without looking bolted on. * The accent is a custom property the shortcode can override. */ .np-est { /* Was `currentColor`. Custom properties resolve `currentColor` lazily, at whichever element finally consumes var(--np-accent) — not at this declaration. .np-est-go both sets its own `color: #fff` AND reads `background: var(--np-accent)`, so on that element currentColor always equalled #fff: a white button with white text, invisible. Fixed here with a real, on-brand default (the site's link colour) so no consumer of --np-accent can re-corrupt it by setting its own `color`. Still fully overridable per-instance via the shortcode's `accent` attribute. */ --np-accent: #5d9fb7; --np-line: rgba( 0, 0, 0, .12 ); --np-soft: rgba( 0, 0, 0, .03 ); margin: 0 0 1.5em; font-size: inherit; line-height: 1.55; } .np-est-h { margin: 0 0 .35em; } /* What the service IS (Phil's own line-item description, v0.20.0) — full opacity, unlike .np-est-intro below: it's sales copy about the product, not muted how-to-use-the-tool instructions. */ .np-est-description { margin: 0 0 .8em; } .np-est-intro { margin: 0 0 1.4em; opacity: .8; } .np-est-field { margin: 0 0 1.3em; } .np-est-field > label, .np-est-legend { display: block; margin: 0 0 .5em; font-weight: 600; font-size: .82em; letter-spacing: .06em; text-transform: uppercase; opacity: .65; } .np-est-qty { display: flex; align-items: center; gap: 16px; } .np-est-qty .np-qty-range { flex: 1 1 auto; accent-color: var( --np-accent ); min-width: 0; } .np-est-qty .np-qty-num { flex: 0 0 5.5em; padding: .5em .6em; border: 1px solid var( --np-line ); border-radius: 3px; font-size: 1.05em; text-align: center; font-variant-numeric: tabular-nums; background: transparent; color: inherit; } /* 'threshold' mode (a flat-rate product with a minimum, e.g. Headshot Day): no slider, so the number box stands alone rather than stretching to fill the row a slider would otherwise occupy. */ .np-est-qty-plain .np-qty-num { flex: 0 0 auto; width: 6em; } /* Half day / full day (or similar) choice. Same segmented-button language a visitor would expect from a booking tool, not a themed form control that would fight Uncode's own button styling. */ .np-est-variant { display: flex; flex-wrap: wrap; gap: 10px; } .np-variant-btn { padding: .55em 1.2em; border: 1px solid var( --np-line ); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; } .np-variant-btn.is-active { border-color: var( --np-accent ); background: var( --np-accent ); color: #fff; } /* Wraps a button + its optional description (v0.20.0) so the two stack together rather than the description running under the whole row. */ .np-variant-option { display: flex; flex-direction: column; gap: .3em; max-width: 220px; } /* Empty unless show_variant_price="public" for this placement — see class-np-shortcode.php and np-estimate.js's applyVariantPrices(). Same muted treatment as .np-addon-price, for the same reason. */ .np-variant-price { opacity: .85; font-variant-numeric: tabular-nums; } .np-variant-help { margin: 0; font-size: .85em; opacity: .65; line-height: 1.4; } .np-est-check { display: flex; align-items: center; gap: .55em; margin: 0 0 .45em; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1em; opacity: 1; } .np-est-check input[type="checkbox"] { accent-color: var( --np-accent ); } /* Empty until the gate is passed and show_addon_prices is on for this placement — see class-np-shortcode.php and np-estimate.js. Muted so an add-on with no price yet (still gated) doesn't leave a visible gap. */ .np-addon-price { opacity: .7; font-variant-numeric: tabular-nums; } .np-est-check .np-addon-qty { width: 4.5em; padding: .25em .4em; border: 1px solid var( --np-line ); border-radius: 3px; background: transparent; color: inherit; } .np-est-check .np-addon-qty:disabled { opacity: .35; } .np-est-structure { margin: 0 0 1.4em; } .np-est-list { list-style: none; margin: 0; padding: 0; } .np-est-list li { padding: .3em 0; border-bottom: 1px solid var( --np-line ); font-size: .95em; } .np-est-list li:last-child { border-bottom: 0; } .np-note { padding: .8em 1em; background: var( --np-soft ); border-radius: 3px; margin: 0; } .np-est-gate { padding: 1.1em 1.2em; background: var( --np-soft ); border: 1px solid var( --np-line ); border-radius: 4px; } .np-est-gate-note { margin: 0 0 .25em; font-weight: 600; } .np-est-gate-sub { margin: 0 0 .8em; font-size: .88em; opacity: .7; } .np-est-gate-fields { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 .8em; } .np-est-gate-fields input[type="text"], .np-est-gate-fields input[type="email"] { flex: 1 1 190px; min-width: 0; padding: .6em .75em; border: 1px solid var( --np-line ); border-radius: 3px; background: #fff; color: inherit; font-size: 1em; } /* Honeypot: never shown, never announced. display:none, not off-screen positioning. An off-screen-but-technically- visible field is still in the layout, and Chrome's built-in autofill and several password managers (anything that offers to "fill this form") will populate it along with name/email — which then silently fails the real visitor's submission, because the server treats any non-empty value here as a bot. display:none is the one hiding technique every major browser and password manager excludes from autofill. */ .np-est-gate-fields .np-hp { display: none !important; } .np-est-go { display: inline-block; padding: .7em 1.4em; border: 0; border-radius: 3px; background: var( --np-accent ); color: #fff; font-size: .95em; font-weight: 600; cursor: pointer; } .np-est-go[disabled] { opacity: .6; cursor: default; } .np-est-error { margin: .6em 0 0; color: #b32d2e; font-size: .9em; min-height: 1em; } /* Once through the gate the form stays available but recedes. */ .np-est-gate.np-passed { opacity: .55; } .np-est-gate.np-passed .np-est-gate-note, .np-est-gate.np-passed .np-est-gate-fields { display: none; } .np-est-card { margin: 1.2em 0 0; padding: 1.4em 1.5em; border: 2px solid var( --np-accent ); border-radius: 4px; } .np-est-total-label { margin: 0 0 .2em; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; opacity: .65; } .np-est-total { margin: 0; font-size: 2.4em; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; } /* The length/product line (v0.20.0) — only present when show_variant_price is on for this placement. Sits between the total and the per-unit line, quieter than the total but not as muted as .np-est-per. */ .np-est-line { margin: .35em 0 0; font-size: .95em; opacity: .9; } .np-est-per { margin: .25em 0 1em; opacity: .8; } .np-est-next { margin: 0 0 1em; font-size: .92em; opacity: .8; } .np-est-cta { display: inline-block; padding: .65em 1.3em; border: 1px solid var( --np-accent ); border-radius: 3px; text-decoration: none; font-weight: 600; /* This used to be an — a plain link inherits sane defaults for free. It is now a