Request Demo

/* --- Main Form Container (Card Style) --- */ .request-demo-form .container { background-color: #ffffff; border: 2px solid #e5e7eb; /* Gray-200 */ border-radius: 0.75rem; /* Rounded-xl */ /* The signature "Blueprint" shadow */ box-shadow: 8px 8px 0px 0px rgba(0,0,0,0.05); padding: 2rem; max-width: 800px; /* Adjust based on your page width */ margin: 0 auto; box-sizing: border-box; } /* --- Form Layout (Grid System) --- */ /* This ensures the columns work even if Bootstrap isn't loaded fully */ .request-demo-form .form-row { display: flex; flex-wrap: wrap; margin-right: -10px; margin-left: -10px; margin-bottom: 1rem; } .request-demo-form .form-group { padding-right: 10px; padding-left: 10px; box-sizing: border-box; margin-bottom: 0.5rem; } /* Column Sizing */ .request-demo-form .col-md-12 { width: 100%; } .request-demo-form .col-md-6 { width: 50%; } /* Mobile Responsiveness */ @media (max-width: 768px) { .request-demo-form .col-md-6 { width: 100%; } .request-demo-form .container { padding: 1.5rem; } } /* --- Typography --- */ /* The Header inside the form */ .request-demo-form .container h4 { font-family: system-ui, -apple-system, sans-serif; font-weight: 700; color: #111827; /* Gray-900 */ font-size: 1.25rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 1rem; margin-top: 0; } /* Labels (The "Blueprint" Mono Look) */ .request-demo-form label { display: block; font-family: 'Courier New', Courier, monospace; /* Fallback for font-mono */ font-size: 0.75rem; /* text-xs */ font-weight: 700; /* font-bold */ text-transform: uppercase; color: #6b7280; /* text-gray-500 */ margin-bottom: 0.35rem; letter-spacing: 0.025em; } /* Required Asterisk styling */ .request-demo-form label .wpcf7-list-item-label::after, .request-demo-form label::after { content: " *"; color: #f87171; /* Red-400 */ } /* --- Input Fields (Text, Email, Select, Textarea) --- */ .request-demo-form .form-control { display: block; width: 100%; padding: 0.75rem 1rem; /* comfortable padding */ font-size: 1rem; line-height: 1.5; color: #111827; background-color: #fff; background-clip: padding-box; /* The Wireframe Border Style */ border: 2px solid #e5e7eb; /* Gray-200 */ border-radius: 0.25rem; /* Rounded-sm */ transition: border-color 0.15s ease-in-out; box-sizing: border-box; font-family: system-ui, -apple-system, sans-serif; /* Inputs use sans, labels use mono */ } /* Input Focus State - Turns Black/Dark Gray */ .request-demo-form .form-control:focus { border-color: #111827; /* Gray-900 */ outline: 0; } /* Placeholder Text Color */ .request-demo-form .form-control::placeholder { color: #d1d5db; /* Gray-300 */ opacity: 1; } /* Select Dropdown specific styling */ .request-demo-form select.form-control { cursor: pointer; appearance: none; /* Removes default browser arrow to style comfortably */ -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; } /* Textarea Resizing */ .request-demo-form textarea.form-control { resize: vertical; min-height: 120px; } /* --- Submit Button --- */ .request-demo-form .btn-primary, .request-demo-form input.wpcf7-submit { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0.75rem 1.5rem; margin-top: 1rem; /* Typography */ font-family: 'Courier New', Courier, monospace; font-size: 0.875rem; /* text-sm */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; /* Colors */ color: #ffffff; background-color: #111827; /* Gray-900 */ border: 2px solid #111827; border-radius: 0.25rem; cursor: pointer; transition: all 0.2s ease; /* Click effect simulation */ } /* Hover State */ .request-demo-form .btn-primary:hover, .request-demo-form input.wpcf7-submit:hover { background-color: #1f2937; /* Gray-800 */ border-color: #1f2937; } /* Active/Click State */ .request-demo-form .btn-primary:active, .request-demo-form input.wpcf7-submit:active { transform: translateY(2px); } /* --- CF7 Error/Success Message Styling overrides --- */ .request-demo-form .wpcf7-not-valid-tip { font-size: 0.75rem; font-family: 'Courier New', Courier, monospace; color: #dc2626; margin-top: 0.25rem; } .request-demo-form .wpcf7-response-output { border: 2px solid #e5e7eb !important; border-radius: 0.25rem !important; font-family: system-ui, -apple-system, sans-serif; font-size: 0.875rem; padding: 1rem !important; margin: 2rem 0 0 0 !important; }