/* ============================================================
MODERN BUSINESS CARD FORM — CSS
Drop this file into your WordPress theme/plugin
============================================================ */
/* ---------- Google Font (add this in your ) ----------
----------------------------------------------------------- */
:root {
--vc-primary: #0f172a; /* Slate-900 */
--vc-accent: #2563eb; /* Blue-600 */
--vc-accent-hover: #1d4ed8; /* Blue-700 */
--vc-bg: #f8fafc; /* Slate-50 */
--vc-card-bg: #ffffff;
--vc-border: #e2e8f0; /* Slate-200 */
--vc-border-focus: #93c5fd; /* Blue-300 */
--vc-text: #1e293b; /* Slate-800 */
--vc-text-muted: #64748b; /* Slate-500 */
--vc-danger: #ef4444; /* Red-500 */
--vc-danger-hover: #dc2626; /* Red-600 */
--vc-radius: 12px;
--vc-radius-sm: 8px;
--vc-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
--vc-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0, 0, 0, 0.03);
--vc-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ---------- Form wrapper ---------- */
form[enctype="multipart/form-data"] {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 760px;
margin: 40px auto;
padding: 0 16px;
color: var(--vc-text);
-webkit-font-smoothing: antialiased;
}
/* ---------- Section boxes ---------- */
.vc-box {
background: var(--vc-card-bg);
border: 1px solid var(--vc-border);
border-radius: var(--vc-radius);
padding: 28px 28px 20px;
margin-bottom: 24px;
box-shadow: var(--vc-shadow);
transition: box-shadow var(--vc-transition);
}
.vc-box:hover {
box-shadow: var(--vc-shadow-lg);
}
/* ---------- Headings ---------- */
.vc-box h2 {
font-size: 1.25rem;
font-weight: 700;
color: var(--vc-primary);
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--vc-accent);
letter-spacing: -0.02em;
text-transform: none;
}
.vc-box h3 {
font-size: 1rem;
font-weight: 600;
color: var(--vc-primary);
margin: 20px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--vc-border);
letter-spacing: -0.01em;
}
.vc-box h4 {
font-size: 0.9rem;
font-weight: 600;
color: var(--vc-text-muted);
margin: 18px 0 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ---------- Labels ---------- */
.vc-box label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--vc-text-muted);
margin-bottom: 6px;
margin-top: 14px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.vc-box small {
font-size: 0.75rem;
color: var(--vc-text-muted);
}
/* ---------- Inputs, Selects, Textareas ---------- */
.vc-box input[type="text"],
.vc-box input[type="number"],
.vc-box input[type="email"],
.vc-box input[type="url"],
.vc-box input[type="tel"],
.vc-box input[type="time"],
.vc-box select,
.vc-box textarea {
display: block;
width: 100%;
padding: 12px 14px;
margin-bottom: 14px;
font-size: 0.925rem;
font-family: inherit;
color: var(--vc-text);
background: var(--vc-bg);
border: 1.5px solid var(--vc-border);
border-radius: var(--vc-radius-sm);
outline: none;
transition: border-color var(--vc-transition), box-shadow var(--vc-transition), background var(--vc-transition);
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.vc-box input[type="text"]:focus,
.vc-box input[type="number"]:focus,
.vc-box input[type="email"]:focus,
.vc-box input[type="url"]:focus,
.vc-box input[type="tel"]:focus,
.vc-box input[type="time"]:focus,
.vc-box select:focus,
.vc-box textarea:focus {
border-color: var(--vc-accent);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
background: #ffffff;
}
.vc-box input::placeholder,
.vc-box textarea::placeholder {
color: #94a3b8;
font-weight: 400;
}
.vc-box textarea {
resize: vertical;
min-height: 80px;
line-height: 1.5;
}
/* Select dropdown arrow */
.vc-box select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8.825a.7.7 0 01-.5-.2L1.7 4.85a.68.68 0 010-.975.68.68 0 01.975 0L6 7.175l3.325-3.3a.68.68 0 01.975 0 .68.68 0 010 .975l-3.8 3.775a.7.7 0 01-.5.2z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
/* ---------- File Inputs ---------- */
.vc-box input[type="file"] {
display: block;
width: 100%;
padding: 10px 14px;
margin-bottom: 14px;
font-size: 0.85rem;
font-family: inherit;
color: var(--vc-text-muted);
background: var(--vc-bg);
border: 1.5px dashed var(--vc-border);
border-radius: var(--vc-radius-sm);
cursor: pointer;
transition: border-color var(--vc-transition), background var(--vc-transition);
box-sizing: border-box;
}
.vc-box input[type="file"]:hover {
border-color: var(--vc-accent);
background: #eff6ff;
}
.vc-box input[type="file"]::file-selector-button {
padding: 6px 16px;
margin-right: 12px;
font-size: 0.82rem;
font-weight: 600;
font-family: inherit;
color: var(--vc-accent);
background: #eff6ff;
border: 1px solid var(--vc-accent);
border-radius: 6px;
cursor: pointer;
transition: background var(--vc-transition), color var(--vc-transition);
}
.vc-box input[type="file"]::file-selector-button:hover {
background: var(--vc-accent);
color: #fff;
}
/* ---------- Existing images ---------- */
.vc-box img {
border-radius: var(--vc-radius-sm);
border: 2px solid var(--vc-border);
object-fit: cover;
display: block;
margin-bottom: 8px;
transition: border-color var(--vc-transition);
}
.vc-box img:hover {
border-color: var(--vc-accent);
}
/* ---------- Buttons ---------- */
.vc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
font-size: 0.925rem;
font-weight: 600;
font-family: inherit;
color: #ffffff;
background: var(--vc-accent);
border: none;
border-radius: var(--vc-radius-sm);
cursor: pointer;
transition: background var(--vc-transition), transform var(--vc-transition), box-shadow var(--vc-transition);
text-decoration: none;
letter-spacing: -0.01em;
}
.vc-btn:hover {
background: var(--vc-accent-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.vc-btn:active {
transform: translateY(0);
box-shadow: none;
}
/* Secondary / outline add buttons */
button[type="button"].vc-btn {
background: transparent;
color: var(--vc-accent);
border: 1.5px dashed var(--vc-accent);
width: 100%;
margin-top: 4px;
}
button[type="button"].vc-btn:hover {
background: #eff6ff;
transform: none;
box-shadow: none;
}
/* Submit button override */
button[type="submit"].vc-btn {
background: var(--vc-accent);
color: #fff;
border: none;
padding: 14px 48px;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: var(--vc-radius-sm);
}
button[type="submit"].vc-btn:hover {
background: var(--vc-accent-hover);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}
/* Link styled as button */
a.vc-btn {
display: inline-flex;
text-decoration: none;
margin-top: 8px;
}
/* ---------- Remove Buttons ---------- */
.remove-btn,
button[onclick="removeRow(this)"],
button[onclick="removeTeamMember(this)"],
button[onclick="removeLocation(this)"] {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 18px;
font-size: 0.82rem;
font-weight: 600;
font-family: inherit;
color: var(--vc-danger);
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 6px;
cursor: pointer;
margin-top: 4px;
transition: background var(--vc-transition), color var(--vc-transition), border-color var(--vc-transition);
}
.remove-btn:hover,
button[onclick="removeRow(this)"]:hover,
button[onclick="removeTeamMember(this)"]:hover,
button[onclick="removeLocation(this)"]:hover {
background: var(--vc-danger);
color: #fff;
border-color: var(--vc-danger);
}
/* ---------- Repeater rows ---------- */
.team-member-row,
.location-row,
.cert-row,
.award-row,
.testimonial-row,
.payment-row {
padding: 20px;
margin-bottom: 16px;
background: var(--vc-bg);
border: 1px solid var(--vc-border);
border-radius: var(--vc-radius-sm);
transition: border-color var(--vc-transition);
position: relative;
}
.team-member-row:hover,
.location-row:hover,
.cert-row:hover,
.award-row:hover,
.testimonial-row:hover,
.payment-row:hover {
border-color: var(--vc-border-focus);
}
/* Inner inputs within repeater rows */
.team-member-row input,
.team-member-row select,
.team-member-row textarea,
.location-row input,
.location-row select,
.location-row textarea,
.cert-row input,
.cert-row select,
.cert-row textarea,
.award-row input,
.award-row select,
.award-row textarea,
.testimonial-row input,
.testimonial-row select,
.testimonial-row textarea,
.payment-row input,
.payment-row select,
.payment-row textarea {
background: var(--vc-card-bg);
}
/* Hide default
in rows */
.team-member-row hr,
.location-row hr,
.cert-row hr,
.award-row hr,
.testimonial-row hr,
.payment-row hr {
display: none;
}
/* ---------- Social Media inputs ---------- */
.social-input {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.social-input label {
flex: 0 0 120px;
margin: 0;
font-size: 0.85rem;
font-weight: 600;
color: var(--vc-text);
text-transform: none;
letter-spacing: normal;
}
.social-input input {
flex: 1;
margin-bottom: 0 !important;
}
/* ---------- Time inputs row ---------- */
input[type="time"] {
display: inline-block;
width: calc(50% - 7px);
margin-right: 10px;
}
input[type="time"]:last-of-type {
margin-right: 0;
}
/* ---------- Hidden inputs ---------- */
input[type="hidden"] {
display: none !important;
}
/* ---------- Star select ---------- */
select[name="client_star[]"] {
max-width: 140px;
}
/* ---------- Scrollbar (WebKit) ---------- */
.vc-box textarea::-webkit-scrollbar {
width: 6px;
}
.vc-box textarea::-webkit-scrollbar-track {
background: transparent;
}
.vc-box textarea::-webkit-scrollbar-thumb {
background: var(--vc-border);
border-radius: 3px;
}
.vc-box textarea::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* ---------- Focus ring for accessibility ---------- */
*:focus-visible {
outline: 2px solid var(--vc-accent);
outline-offset: 2px;
}
/* ---------- Responsive ---------- */
@media (max-width: 640px) {
form[enctype="multipart/form-data"] {
margin: 16px auto;
padding: 0 12px;
}
.vc-box {
padding: 20px 16px 16px;
margin-bottom: 16px;
border-radius: var(--vc-radius-sm);
}
.vc-box h2 {
font-size: 1.1rem;
}
.social-input {
flex-direction: column;
align-items: stretch;
gap: 4px;
}
.social-input label {
flex: none;
}
.social-input input {
margin-bottom: 8px !important;
}
input[type="time"] {
width: 100%;
margin-right: 0;
margin-bottom: 8px;
}
.team-member-row,
.location-row,
.cert-row,
.award-row,
.testimonial-row,
.payment-row {
padding: 14px;
}
}
/* ---------- Animations ---------- */
@keyframes vc-fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.vc-box {
animation: vc-fadeIn 0.4s ease-out both;
}
.vc-box:nth-child(2) { animation-delay: 0.05s; }
.vc-box:nth-child(3) { animation-delay: 0.1s; }
.vc-box:nth-child(4) { animation-delay: 0.15s; }
.vc-box:nth-child(5) { animation-delay: 0.2s; }
.vc-box:nth-child(6) { animation-delay: 0.25s; }
.vc-box:nth-child(7) { animation-delay: 0.3s; }
.vc-box:nth-child(8) { animation-delay: 0.35s; }
.vc-box:nth-child(9) { animation-delay: 0.4s; }
.vc-box:nth-child(10) { animation-delay: 0.45s; }
.vc-box:nth-child(11) { animation-delay: 0.5s; }