; inside
it CF7 prints its own markup (forms 1610 "Contact Us Form" and 12564 "Register Free Demo Form"):
form.wpcf7-form > [.services_form >] .redmine_sla_overflow (first/last name) · .label + .email_user ·
.label + .phone_number / .phone_number_field · .company_field · .label + .message_services/.message_user ·
.captcha_form · .privacy_policy (acceptance) · p > .mc4wp-checkbox · .submit_services · .wpcf7-response-output
Every row is wrapped in
by CF7's auto-paragraphs. The rules reproduce the design's .rs-form / .rs-form-grid /
.rs-field / .rs-check (site.css): 14px between rows, 6px label → field, 2 name columns (1 column ≤ 600px).
Texts, placeholders and the image captcha come from the CF7 form itself and are kept as they are. */
.rf-cf7 .wpcf7 p { margin: 0; }
.rf-cf7 .wpcf7-form,
.rf-cf7 .services_form { display: flex; flex-direction: column; gap: 14px; }
.rf-cf7 .wpcf7-form > .label + *,
.rf-cf7 .services_form > .label + * { margin-top: -8px; } /* label → field: 14 − 8 = 6px, as .rs-field */
/* First / last name: two columns (the design's .rs-form-grid); the company row spans both. */
.rf-cf7 .redmine_sla_overflow { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; margin: 0 !important; }
.rf-cf7 .redmine_sla_overflow > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rf-cf7 .redmine_sla_overflow > .company_field { grid-column: 1 / -1; }
.rf-cf7 .phone_number_field,
.rf-cf7 .company_field { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; padding: 0 !important; }
/* Labels = the design's .rs-field label text. */
.rf-cf7 .label label,
.rf-cf7 .phone_number_field > label,
.rf-cf7 .company_field > label { display: block; font-size: 13px; font-weight: 700; color: #374151; }
.rf-cf7 .required { margin-left: 3px; color: inherit; }
/* Fields = the design's .rs-field input / textarea. */
.rf-cf7 .wpcf7-form-control-wrap { display: block; }
.rf-cf7 input[type="text"],
.rf-cf7 input[type="email"],
.rf-cf7 input[type="tel"],
.rf-cf7 textarea,
.rf-cf7 select { font-family: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1.5px solid #d6dbe3; border-radius: 10px; padding: 11px 12px; box-sizing: border-box; width: 100%; margin: 0; box-shadow: none; }
.rf-cf7 input[type="text"]:focus,
.rf-cf7 input[type="email"]:focus,
.rf-cf7 input[type="tel"]:focus,
.rf-cf7 textarea:focus,
.rf-cf7 select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px #e6f7f4; }
.rf-cf7 textarea { line-height: 1.2; height: calc(5 * 1.2em + 25px); resize: vertical; } /* design: rows="5" */
#demo-form.rf-cf7 textarea { height: calc(3 * 1.2em + 25px); } /* design: rows="3" */
/* Phone field with country flags (country-phone-field-contact-form-7 / intl-tel-input): full width. */
.rf-cf7 .iti,
.rf-cf7 .intl-tel-input { display: block; width: 100%; }
/* Image captcha: picture and answer field side by side. */
.rf-cf7 .captcha_form p { display: flex; align-items: center; gap: 10px; }
.rf-cf7 .captcha_form img { flex-shrink: 0; border-radius: 6px; }
.rf-cf7 .captcha_form .wpcf7-form-control-wrap { flex: 1; max-width: 220px; }
/* Terms acceptance and the Mailchimp newsletter checkbox = the design's .rs-check. */
.rf-cf7 .wpcf7-list-item { margin: 0; }
.rf-cf7 .privacy_policy label,
.rf-cf7 .mc4wp-checkbox label { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 400; color: var(--mut); line-height: 1.45; }
.rf-cf7 .privacy_policy input[type="checkbox"],
.rf-cf7 .mc4wp-checkbox input[type="checkbox"] { margin: 3px 0 0; accent-color: var(--brand); flex-shrink: 0; }
.rf-cf7 .privacy_policy a { color: var(--brand) !important; font-weight: 600; } /* beats the form's inline #01A4FF */
/* Submit = the design's .btn .btn-p (full width, as a flex-column child in the design). */
.rf-cf7 .wpcf7-submit {
display: block; width: 100%; font-family: inherit; font-size: 16px; font-weight: 700; color: #ffffff; cursor: pointer;
background: var(--brand); border: 0; border-radius: 10px; padding: 14px 24px; -webkit-appearance: none; appearance: none;
box-shadow: 0 10px 24px -12px rgba(15,118,110,.7); font-variant-numeric: tabular-nums;
transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background-color .25s;
}
.rf-cf7 .wpcf7-submit:hover { transform: translateY(-2px); background: #115e59; box-shadow: 0 16px 32px -12px rgba(15,118,110,.7); }
.rf-cf7 .wpcf7-submit:disabled { opacity: .6; cursor: default; transform: none; }
.rf-cf7 .wpcf7-spinner { margin: 8px auto 0; display: block; }
/* Validation and the reply message (success = the design's .rs-form-done; errors in red). */
.rf-cf7 .wpcf7-not-valid { border-color: #f04438 !important; }
.rf-cf7 .wpcf7-not-valid-tip { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #b42318; }
.rf-cf7 .wpcf7 form .wpcf7-response-output { margin: 0; padding: 12px 14px; border: 0; border-radius: 10px; font-size: 14.5px; font-weight: 600; background: #fef3f2; color: #b42318; }
.rf-cf7 .wpcf7 form.sent .wpcf7-response-output { background: #e6f7f4; color: var(--brand); }
@media (max-width: 600px) {
.rf-cf7 .redmine_sla_overflow { grid-template-columns: minmax(0, 1fr); } /* one column, as the design */
}
/* ---------------------------------------------------------------------------------------------------------------
Blog posts (single.php, Step 20): the design styles .bp-content for its one article (p, h2, h3, ul, links).
The 54 real posts (classic + block editor) also use the elements below – styled with the same tokens, and tables
like the design's .bp-table.
--------------------------------------------------------------------------------------------------------------- */
.bp-content > :first-child { margin-top: 0; }
.bp-content h4, .bp-content h5, .bp-content h6 { font-size: 18px; line-height: 1.35; margin: 24px 0 8px; color: var(--ink); }
.bp-content h5, .bp-content h6 { font-size: 16.5px; }
.bp-content ol { margin: 0 0 20px; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.bp-content ol li::marker { color: var(--brand); font-weight: 700; }
.bp-content li > ul, .bp-content li > ol { margin: 8px 0 0; }
.bp-content strong, .bp-content b { color: var(--ink); }
.bp-content blockquote, .bp-content .wp-block-quote { margin: 0 0 22px; padding: 14px 20px; border-left: 3px solid var(--brand); background: var(--soft); border-radius: 0 12px 12px 0; color: #374151; }
.bp-content blockquote p:last-child { margin-bottom: 0; }
.bp-content blockquote cite { display: block; margin-top: 6px; font-size: 14px; font-style: normal; color: var(--mut); }
.bp-content table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; margin: 0 0 20px; display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.bp-content .wp-block-table { margin: 0 0 20px; }
.bp-content .wp-block-table table { margin: 0; }
.bp-content th, .bp-content td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.bp-content thead th { border-top: 0; background: var(--soft); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); }
.bp-content tr:first-child td { border-top: 0; }
.bp-content thead + tbody tr:first-child td { border-top: 1px solid var(--line); }
.bp-content figure, .bp-content .wp-block-image { margin: 0 0 22px; }
.bp-content img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
.bp-content figcaption { margin-top: 8px; font-size: 14px; color: var(--mut); text-align: center; }
.bp-content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.bp-content code { font-size: .9em; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.bp-content pre { margin: 0 0 22px; padding: 16px 18px; background: #111827; color: #e5e7eb; border-radius: 14px; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.bp-content pre code { background: none; border: 0; padding: 0; color: inherit; }
.bp-content hr, .bp-content .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
/* ---------- Cloud packages: Monthly / Yearly switch (theme addition, Vishal 19 Oct 2026) ----------
rf_cloud_billing_toggle() + assets/js/cloud-billing.js, above the three package cards on the pricing, Cloud and home pages.
The design's own pill switch (.segc, site.css) as equal halves (like .segc-lg / .pg-shift), right-aligned; the
"N months free" badge uses the design's light teal tag colours. Hidden without JavaScript (the page stays monthly). */
.rf-billing { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.rf-billing[hidden] { display: none; }
.rf-billing-lbl { font-size: 14.5px; font-weight: 700; color: var(--mut); }
.rf-billing .segc { display: inline-grid; grid-template-columns: 1fr 1fr; }
.rf-billing .segc button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.rf-billing-save { padding: 3px 8px; border-radius: 999px; background: #e6f7f4; color: var(--brand); font-size: 12px; font-weight: 800; line-height: 1.2; }
.pr-panel .rf-billing { margin-bottom: 20px; } /* home page: inside the Cloud panel, above its three cards */
@media (max-width: 640px) {
.rf-billing { justify-content: center; }
.rf-billing .segc button { padding: 9px 14px; }
}
/* ---------- Outline buttons inside article text (fix, Vishal 19 Oct 2026) ----------
The guides' "Contact support" (.rs-kbfoot, inside ) is a .btn-o (white button),
but site.css's ".bp-content a.btn { color: #fff }" (meant for the teal .btn-p in blog posts) made its text white – white
on white. Give .btn-o its own colours back (= .btn-o / .btn-o:hover in site.css). Same bug in the static design. */
.bp-content a.btn.btn-o { color: var(--ink); }
.bp-content a.btn.btn-o:hover { color: var(--brand); }
/* ---------- Header dropdown footer links (fix, Vishal 19 Oct 2026) ----------
"All plugins & prices →" / "See Cloud packages →" sit on the dropdown's white panel, but the header's link hover
(.nav a:hover in site.css: white text for the dark bar) also hit them – white on white. Keep the design's teal and its
underline on hover (.nav-dd-foot a / a:hover); no hover background. Same bug in the static design's styles.css. */
.nav .nav-dd-foot a:hover { color: var(--brand); background: none; }
/* ---------- Header cart (theme addition, Vishal 18 Oct 2026 – as in the old theme) ----------
Same box as the mobile menu button (.burger: 44px, #374151 border, radius 10); the item count is a teal badge,
hidden when the cart is empty (assets/js/cart-count.js keeps it live). */
.nav-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; box-sizing: border-box; border: 1px solid #374151; border-radius: 10px; background: rgba(255, 255, 255, .04); color: #e5e7eb; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.nav-cart:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: #4b5563; }
.nav-cart:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
.nav-cart-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #14b8a6; color: #111827; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #111827; }
.nav-cart-count:empty { display: none; }
/* Narrow phones: logo + cart + Buy Now + menu button stay on one line (the cart adds 48px to the design's row;
at 390px the row has ~342px). Desktop and tablets unchanged. */
@media (max-width: 430px) {
.top > .wrap { gap: 12px !important; padding-left: 16px; padding-right: 16px; }
.top > .wrap > div:last-child { gap: 6px !important; }
.top .nav-cart,
.top .burger { width: 40px; height: 40px; }
.top > .wrap > div:last-child > .btn-p { padding: 10px 12px !important; font-size: 14px !important; }
}
@media (max-width: 380px) {
.top .logo svg { width: 28px; height: 31px; }
.top .logo > span { font-size: 17px !important; }
}