<div class="vxf-contact-aurora">
<style>
.vxf-contact-aurora {
--vxf-bg: #f3f5f9;
--vxf-card: #ffffff;
--vxf-card-2: #ffffff;
--vxf-line: #e2e6ee;
--vxf-line-strong: #cfd5e1;
--vxf-text: #141821;
--vxf-muted: #5c6675;
--vxf-faint: #8a93a2;
--vxf-field: #f7f9fc;
--vxf-field-focus: #ffffff;
--vxf-a1: #5b8cff;
--vxf-a2: #7a6cff;
--vxf-ring: rgba(91, 140, 255, 0.16);
--vxf-glow: rgba(91, 140, 255, 0.22);
--vxf-shadow: 0 1px 2px rgba(20, 24, 33, 0.04), 0 24px 48px -20px rgba(20, 24, 33, 0.18);
box-sizing: border-box;
display: flex;
justify-content: center;
padding: 40px 20px;
background:
radial-gradient(120% 80% at 15% 0%, rgba(91, 140, 255, 0.06), transparent 60%),
radial-gradient(110% 90% at 100% 100%, rgba(122, 108, 255, 0.06), transparent 55%),
var(--vxf-bg);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--vxf-text);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
.vxf-contact-aurora *,
.vxf-contact-aurora *::before,
.vxf-contact-aurora *::after { box-sizing: border-box; }
@media (prefers-color-scheme: dark) {
.vxf-contact-aurora {
--vxf-bg: #0e1116;
--vxf-card: #171b22;
--vxf-card-2: #12161c;
--vxf-line: #262c36;
--vxf-line-strong: #333b48;
--vxf-text: #eef1f6;
--vxf-muted: #99a2b1;
--vxf-faint: #6c7686;
--vxf-field: #10141a;
--vxf-field-focus: #131820;
--vxf-ring: rgba(91, 140, 255, 0.22);
--vxf-glow: rgba(91, 140, 255, 0.30);
--vxf-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 60px -24px rgba(0, 0, 0, 0.65);
background:
radial-gradient(120% 80% at 15% 0%, rgba(91, 140, 255, 0.10), transparent 60%),
radial-gradient(110% 90% at 100% 100%, rgba(122, 108, 255, 0.12), transparent 55%),
var(--vxf-bg);
}
}
:root[data-theme="light"] .vxf-contact-aurora {
--vxf-bg: #f3f5f9;
--vxf-card: #ffffff;
--vxf-card-2: #ffffff;
--vxf-line: #e2e6ee;
--vxf-line-strong: #cfd5e1;
--vxf-text: #141821;
--vxf-muted: #5c6675;
--vxf-faint: #8a93a2;
--vxf-field: #f7f9fc;
--vxf-field-focus: #ffffff;
--vxf-ring: rgba(91, 140, 255, 0.16);
--vxf-glow: rgba(91, 140, 255, 0.22);
--vxf-shadow: 0 1px 2px rgba(20, 24, 33, 0.04), 0 24px 48px -20px rgba(20, 24, 33, 0.18);
background:
radial-gradient(120% 80% at 15% 0%, rgba(91, 140, 255, 0.06), transparent 60%),
radial-gradient(110% 90% at 100% 100%, rgba(122, 108, 255, 0.06), transparent 55%),
var(--vxf-bg);
}
:root[data-theme="dark"] .vxf-contact-aurora {
--vxf-bg: #0e1116;
--vxf-card: #171b22;
--vxf-card-2: #12161c;
--vxf-line: #262c36;
--vxf-line-strong: #333b48;
--vxf-text: #eef1f6;
--vxf-muted: #99a2b1;
--vxf-faint: #6c7686;
--vxf-field: #10141a;
--vxf-field-focus: #131820;
--vxf-ring: rgba(91, 140, 255, 0.22);
--vxf-glow: rgba(91, 140, 255, 0.30);
--vxf-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 60px -24px rgba(0, 0, 0, 0.65);
background:
radial-gradient(120% 80% at 15% 0%, rgba(91, 140, 255, 0.10), transparent 60%),
radial-gradient(110% 90% at 100% 100%, rgba(122, 108, 255, 0.12), transparent 55%),
var(--vxf-bg);
}
.vxf-contact-aurora .vxf-card {
position: relative;
width: 100%;
max-width: 460px;
background: var(--vxf-card);
border: 1px solid var(--vxf-line);
border-radius: 20px;
padding: 38px 34px 34px;
box-shadow: var(--vxf-shadow);
overflow: hidden;
}
/* ambient aurora glow along the top edge of the card */
.vxf-contact-aurora .vxf-card::before {
content: "";
position: absolute;
inset: -1px -1px auto -1px;
height: 3px;
background: linear-gradient(90deg, var(--vxf-a1), var(--vxf-a2));
opacity: 0.9;
}
.vxf-contact-aurora .vxf-card::after {
content: "";
position: absolute;
top: -140px;
left: 50%;
width: 320px;
height: 220px;
transform: translateX(-50%);
background: radial-gradient(closest-side, var(--vxf-glow), transparent 70%);
pointer-events: none;
filter: blur(6px);
}
.vxf-contact-aurora .vxf-head { margin-bottom: 26px; }
.vxf-contact-aurora .vxf-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--vxf-a1);
margin-bottom: 12px;
}
.vxf-contact-aurora .vxf-eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--vxf-a1);
box-shadow: 0 0 0 4px var(--vxf-ring);
}
.vxf-contact-aurora .vxf-title {
margin: 0 0 8px;
font-size: 25px;
line-height: 1.15;
font-weight: 680;
letter-spacing: -0.02em;
text-wrap: balance;
}
.vxf-contact-aurora .vxf-sub {
margin: 0;
font-size: 14.5px;
color: var(--vxf-muted);
max-width: 40ch;
}
.vxf-contact-aurora form {
display: flex;
flex-direction: column;
gap: 18px;
}
.vxf-contact-aurora .vxf-field { display: flex; flex-direction: column; gap: 8px; }
.vxf-contact-aurora label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--vxf-faint);
}
.vxf-contact-aurora .vxf-input-wrap { position: relative; }
/* animated gradient underline that grows from the left on focus */
.vxf-contact-aurora .vxf-input-wrap::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 0;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--vxf-a1), var(--vxf-a2));
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.vxf-contact-aurora .vxf-input-wrap:focus-within::after { transform: scaleX(1); }
.vxf-contact-aurora input,
.vxf-contact-aurora textarea {
width: 100%;
font: inherit;
font-size: 15px;
color: var(--vxf-text);
background: var(--vxf-field);
border: 1px solid var(--vxf-line);
border-radius: 12px;
padding: 13px 14px;
outline: none;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
-webkit-appearance: none;
appearance: none;
}
.vxf-contact-aurora textarea {
min-height: 128px;
resize: vertical;
line-height: 1.55;
}
.vxf-contact-aurora input::placeholder,
.vxf-contact-aurora textarea::placeholder { color: var(--vxf-faint); }
.vxf-contact-aurora input:hover,
.vxf-contact-aurora textarea:hover { border-color: var(--vxf-line-strong); }
.vxf-contact-aurora input:focus,
.vxf-contact-aurora textarea:focus {
background: var(--vxf-field-focus);
border-color: var(--vxf-a1);
box-shadow: 0 0 0 4px var(--vxf-ring);
}
.vxf-contact-aurora .vxf-submit {
position: relative;
margin-top: 4px;
width: 100%;
font: inherit;
font-size: 15px;
font-weight: 640;
letter-spacing: 0.01em;
color: #fff;
border: 0;
border-radius: 12px;
padding: 14px 20px;
cursor: pointer;
background: linear-gradient(120deg, var(--vxf-a1), var(--vxf-a2));
box-shadow: 0 8px 20px -8px var(--vxf-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
transition: transform 0.18s ease, box-shadow 0.22s ease, filter 0.2s ease;
}
.vxf-contact-aurora .vxf-submit:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px -10px var(--vxf-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
filter: saturate(1.06);
}
.vxf-contact-aurora .vxf-submit:active { transform: translateY(0); }
.vxf-contact-aurora .vxf-submit:focus-visible {
outline: none;
box-shadow: 0 0 0 4px var(--vxf-ring), 0 10px 24px -10px var(--vxf-glow);
}
.vxf-contact-aurora .vxf-submit .vxf-arrow {
display: inline-block;
margin-left: 6px;
transition: transform 0.2s ease;
}
.vxf-contact-aurora .vxf-submit:hover .vxf-arrow { transform: translateX(3px); }
.vxf-contact-aurora .vxf-foot {
margin-top: 15px;
text-align: center;
font-size: 12.5px;
color: var(--vxf-faint);
}
.vxf-contact-aurora input:-webkit-autofill,
.vxf-contact-aurora textarea:-webkit-autofill {
-webkit-text-fill-color: var(--vxf-text);
-webkit-box-shadow: 0 0 0 40px var(--vxf-field-focus) inset;
caret-color: var(--vxf-text);
}
@media (prefers-reduced-motion: reduce) {
.vxf-contact-aurora *,
.vxf-contact-aurora *::after { transition: none !important; }
}
@media (max-width: 420px) {
.vxf-contact-aurora .vxf-card { padding: 30px 22px 26px; border-radius: 16px; }
.vxf-contact-aurora .vxf-title { font-size: 22px; }
}
</style>
<div class="vxf-card">
<div class="vxf-head">
<span class="vxf-eyebrow">Get in touch</span>
<h2 class="vxf-title">Let's start a conversation</h2>
<p class="vxf-sub">Tell us what you're building. We read every message and reply within one business day.</p>
</div>
<form action="https://forms.vastrox.com/YOUR-ID" method="POST">
<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
<div class="vxf-field">
<label for="vxf-ca-name">Name</label>
<div class="vxf-input-wrap">
<input id="vxf-ca-name" name="name" type="text" placeholder="Ada Lovelace" autocomplete="name" required>
</div>
</div>
<div class="vxf-field">
<label for="vxf-ca-email">Email</label>
<div class="vxf-input-wrap">
<input id="vxf-ca-email" name="email" type="email" placeholder="ada@example.com" autocomplete="email" required>
</div>
</div>
<div class="vxf-field">
<label for="vxf-ca-message">Message</label>
<div class="vxf-input-wrap">
<textarea id="vxf-ca-message" name="message" placeholder="A few sentences about your project, timeline, and how we can help." required></textarea>
</div>
</div>
<button class="vxf-submit" type="submit">Send message<span class="vxf-arrow" aria-hidden="true">→</span></button>
<p class="vxf-foot">Protected against spam. No newsletters, ever.</p>
</form>
</div>
</div>ExamplesGALLERY
Beautiful forms, ready to paste.
Every template is one self-contained block: copy it, change the action to your endpoint, and you are live. No framework, no external CSS, works on light and dark pages.
<div class="vxf-wl7q3">
<style>
.vxf-wl7q3 {
--wl-bg: #0b0d17;
--wl-panel: rgba(255,255,255,0.03);
--wl-border: rgba(255,255,255,0.10);
--wl-text: #eef0f7;
--wl-muted: #9aa0b5;
--wl-accent: #7c6cff;
--wl-accent2: #22d3ee;
box-sizing: border-box;
max-width: 560px;
margin: 0 auto;
padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 48px);
border-radius: 28px;
position: relative;
overflow: hidden;
background:
radial-gradient(120% 90% at 15% 0%, rgba(124,108,255,0.22), transparent 55%),
radial-gradient(120% 90% at 100% 100%, rgba(34,211,238,0.16), transparent 55%),
var(--wl-bg);
border: 1px solid var(--wl-border);
box-shadow: 0 30px 80px -30px rgba(5,7,20,0.8);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--wl-text);
text-align: center;
}
.vxf-wl7q3 *, .vxf-wl7q3 *::before, .vxf-wl7q3 *::after { box-sizing: border-box; }
.vxf-wl7q3 .wl-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wl-muted);
padding: 7px 14px;
border-radius: 999px;
border: 1px solid var(--wl-border);
background: var(--wl-panel);
margin-bottom: 22px;
}
.vxf-wl7q3 .wl-badge::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--wl-accent2);
box-shadow: 0 0 0 0 rgba(34,211,238,0.6);
animation: vxf-pulse-wl7q3 2.4s ease-out infinite;
}
@keyframes vxf-pulse-wl7q3 {
0% { box-shadow: 0 0 0 0 rgba(34,211,238,0.55); }
70% { box-shadow: 0 0 0 10px rgba(34,211,238,0); }
100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}
.vxf-wl7q3 h2 {
margin: 0 0 12px;
font-size: clamp(28px, 6vw, 40px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(180deg, #ffffff, #c7cbe0);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.vxf-wl7q3 .wl-sub {
margin: 0 auto 30px;
max-width: 42ch;
font-size: 15.5px;
line-height: 1.6;
color: var(--wl-muted);
}
.vxf-wl7q3 form { margin: 0; }
.vxf-wl7q3 .wl-field { text-align: left; margin-bottom: 14px; }
.vxf-wl7q3 label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--wl-text);
margin: 0 0 7px 2px;
}
.vxf-wl7q3 label .wl-opt {
color: var(--wl-muted);
font-weight: 500;
}
.vxf-wl7q3 input[type="text"].wl-in,
.vxf-wl7q3 input[type="email"] {
width: 100%;
font: inherit;
font-size: 16px;
color: var(--wl-text);
padding: 15px 16px;
border-radius: 14px;
border: 1px solid var(--wl-border);
background: rgba(255,255,255,0.04);
outline: none;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.vxf-wl7q3 input::placeholder { color: #6d7390; }
.vxf-wl7q3 input[type="text"].wl-in:focus,
.vxf-wl7q3 input[type="email"]:focus {
border-color: var(--wl-accent);
background: rgba(124,108,255,0.08);
box-shadow: 0 0 0 4px rgba(124,108,255,0.22);
}
.vxf-wl7q3 button {
width: 100%;
margin-top: 6px;
font: inherit;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.01em;
color: #0b0d17;
cursor: pointer;
padding: 16px 20px;
border: none;
border-radius: 14px;
background: linear-gradient(135deg, #22d3ee 0%, #7c6cff 55%, #a855f7 100%);
box-shadow: 0 12px 30px -8px rgba(124,108,255,0.6);
transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.vxf-wl7q3 button:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 18px 40px -10px rgba(124,108,255,0.7); }
.vxf-wl7q3 button:active { transform: translateY(0); }
.vxf-wl7q3 button:focus-visible { outline: 3px solid rgba(34,211,238,0.9); outline-offset: 3px; }
.vxf-wl7q3 .wl-foot {
margin: 18px 0 0;
font-size: 12.5px;
color: var(--wl-muted);
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.vxf-wl7q3 .wl-foot svg { flex: none; opacity: 0.8; }
.vxf-wl7q3 .wl-hp { display: none; }
</style>
<form action="https://forms.vastrox.com/YOUR-ID" method="POST">
<span class="wl-badge">Early access · Limited spots</span>
<h2>Be first in line.</h2>
<p class="wl-sub">We're opening the doors soon. Drop your email to claim early access and get notified the moment we launch.</p>
<input type="text" name="_gotcha" class="wl-hp" tabindex="-1" autocomplete="off" aria-hidden="true">
<div class="wl-field">
<label for="wl7q3-name">Name <span class="wl-opt">(optional)</span></label>
<input type="text" class="wl-in" id="wl7q3-name" name="name" placeholder="Ada Lovelace" autocomplete="name">
</div>
<div class="wl-field">
<label for="wl7q3-email">Email address</label>
<input type="email" id="wl7q3-email" name="email" placeholder="you@company.com" required autocomplete="email">
</div>
<button type="submit">Join the waitlist →</button>
<p class="wl-foot">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
No spam, ever. Unsubscribe anytime.
</p>
</form>
</div><div class="vxf-feedback-rating">
<style>
.vxf-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.vxf-feedback-rating {
--vxf-bg: #ffffff;
--vxf-ink: #1a1626;
--vxf-muted: #6b6480;
--vxf-line: #e7e3ef;
--vxf-field: #f7f5fb;
--vxf-accent: #7c5cff;
--vxf-accent-2: #ff5c9d;
--vxf-star: #ffb020;
--vxf-radius: 20px;
box-sizing: border-box;
max-width: 480px;
margin: 0 auto;
padding: 6px;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--vxf-ink);
line-height: 1.5;
text-align: left;
}
.vxf-feedback-rating *,
.vxf-feedback-rating *::before,
.vxf-feedback-rating *::after { box-sizing: border-box; }
.vxf-feedback-rating .vxf-card {
position: relative;
background: var(--vxf-bg);
border: 1px solid var(--vxf-line);
border-radius: var(--vxf-radius);
padding: 30px 28px 28px;
box-shadow: 0 1px 2px rgba(26, 22, 38, .04), 0 24px 48px -24px rgba(124, 92, 255, .28);
overflow: hidden;
}
.vxf-feedback-rating .vxf-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 5px;
background: linear-gradient(90deg, var(--vxf-accent), var(--vxf-accent-2));
}
.vxf-feedback-rating .vxf-head { margin-bottom: 22px; }
.vxf-feedback-rating .vxf-badge {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--vxf-accent);
background: color-mix(in srgb, var(--vxf-accent) 12%, transparent);
padding: 5px 11px;
border-radius: 999px;
margin-bottom: 14px;
}
.vxf-feedback-rating .vxf-badge::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--vxf-accent-2);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vxf-accent-2) 22%, transparent);
}
.vxf-feedback-rating h2 {
margin: 0 0 6px;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
}
.vxf-feedback-rating .vxf-sub {
margin: 0;
font-size: 15px;
color: var(--vxf-muted);
}
.vxf-feedback-rating .vxf-group { margin-bottom: 20px; }
.vxf-feedback-rating .vxf-label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 9px;
color: var(--vxf-ink);
}
.vxf-feedback-rating .vxf-opt { color: var(--vxf-muted); font-weight: 500; }
/* ---- CSS-only star rating (reverse row so :hover ~ works left→right visually) ---- */
.vxf-feedback-rating .vxf-stars {
display: inline-flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 4px;
padding: 4px 0 2px;
}
.vxf-feedback-rating .vxf-stars input {
position: absolute;
opacity: 0;
width: 1px; height: 1px;
pointer-events: none;
}
.vxf-feedback-rating .vxf-stars label {
cursor: pointer;
font-size: 38px;
line-height: 1;
color: var(--vxf-line);
transition: transform .12s ease, color .12s ease;
user-select: none;
}
.vxf-feedback-rating .vxf-stars label::before { content: "\2605"; }
/* hover + checked cascade: current + all following (visually preceding) siblings light up */
.vxf-feedback-rating .vxf-stars label:hover,
.vxf-feedback-rating .vxf-stars label:hover ~ label,
.vxf-feedback-rating .vxf-stars input:checked ~ label {
color: var(--vxf-star);
}
.vxf-feedback-rating .vxf-stars label:hover {
transform: scale(1.18) rotate(-4deg);
}
.vxf-feedback-rating .vxf-stars input:focus-visible + label {
outline: 3px solid color-mix(in srgb, var(--vxf-accent) 45%, transparent);
outline-offset: 3px;
border-radius: 6px;
}
.vxf-feedback-rating textarea,
.vxf-feedback-rating input[type="email"] {
width: 100%;
font: inherit;
color: var(--vxf-ink);
background: var(--vxf-field);
border: 1.5px solid transparent;
border-radius: 13px;
padding: 13px 15px;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
-webkit-appearance: none;
appearance: none;
}
.vxf-feedback-rating textarea {
min-height: 118px;
resize: vertical;
}
.vxf-feedback-rating textarea::placeholder,
.vxf-feedback-rating input[type="email"]::placeholder { color: var(--vxf-muted); }
.vxf-feedback-rating textarea:focus,
.vxf-feedback-rating input[type="email"]:focus {
outline: none;
background: var(--vxf-bg);
border-color: var(--vxf-accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--vxf-accent) 18%, transparent);
}
.vxf-feedback-rating .vxf-honey {
position: absolute !important;
left: -9999px;
}
.vxf-feedback-rating .vxf-submit {
width: 100%;
font: inherit;
font-weight: 650;
font-size: 15.5px;
color: #fff;
cursor: pointer;
border: none;
border-radius: 13px;
padding: 14px 18px;
margin-top: 4px;
background: linear-gradient(135deg, var(--vxf-accent), var(--vxf-accent-2));
box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--vxf-accent) 65%, transparent);
transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.vxf-feedback-rating .vxf-submit:hover {
transform: translateY(-1px);
filter: brightness(1.05);
box-shadow: 0 14px 28px -8px color-mix(in srgb, var(--vxf-accent) 70%, transparent);
}
.vxf-feedback-rating .vxf-submit:active { transform: translateY(0); }
.vxf-feedback-rating .vxf-submit:focus-visible {
outline: 3px solid color-mix(in srgb, var(--vxf-accent) 50%, transparent);
outline-offset: 3px;
}
.vxf-feedback-rating .vxf-foot {
margin: 14px 0 0;
text-align: center;
font-size: 12.5px;
color: var(--vxf-muted);
}
@media (max-width: 420px) {
.vxf-feedback-rating .vxf-card { padding: 24px 20px; }
.vxf-feedback-rating h2 { font-size: 21px; }
.vxf-feedback-rating .vxf-stars label { font-size: 34px; }
}
/* ---- Dark page support ---- */
@media (prefers-color-scheme: dark) {
.vxf-feedback-rating {
--vxf-bg: #1a1726;
--vxf-ink: #f2effa;
--vxf-muted: #a49fb8;
--vxf-line: #322c47;
--vxf-field: #241f36;
--vxf-accent: #977dff;
--vxf-accent-2: #ff6fb0;
}
.vxf-feedback-rating .vxf-card {
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 28px 56px -28px rgba(0,0,0,.7);
}
}
</style>
<form class="vxf-card" action="https://forms.vastrox.com/YOUR-ID" method="POST">
<div class="vxf-head">
<span class="vxf-badge">We're all ears</span>
<h2>How did we do?</h2>
<p class="vxf-sub">Your two cents make us better. Tap a star, tell us why.</p>
</div>
<div class="vxf-group">
<span class="vxf-label" id="vxf-rating-label">Your rating</span>
<div class="vxf-stars" role="radiogroup" aria-labelledby="vxf-rating-label">
<input type="radio" id="vxf-star5" name="rating" value="5" required>
<label for="vxf-star5" title="Amazing"><span class="vxf-sr">5 stars</span></label>
<input type="radio" id="vxf-star4" name="rating" value="4">
<label for="vxf-star4" title="Great"><span class="vxf-sr">4 stars</span></label>
<input type="radio" id="vxf-star3" name="rating" value="3">
<label for="vxf-star3" title="Okay"><span class="vxf-sr">3 stars</span></label>
<input type="radio" id="vxf-star2" name="rating" value="2">
<label for="vxf-star2" title="Meh"><span class="vxf-sr">2 stars</span></label>
<input type="radio" id="vxf-star1" name="rating" value="1">
<label for="vxf-star1" title="Not good"><span class="vxf-sr">1 star</span></label>
</div>
</div>
<div class="vxf-group">
<label class="vxf-label" for="vxf-message">Tell us more</label>
<textarea id="vxf-message" name="message" placeholder="What did you love? What tripped you up?"></textarea>
</div>
<div class="vxf-group">
<label class="vxf-label" for="vxf-email">Email <span class="vxf-opt">(optional, if you'd like a reply)</span></label>
<input type="email" id="vxf-email" name="email" placeholder="you@example.com" autocomplete="email">
</div>
<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
<button type="submit" class="vxf-submit">Send feedback</button>
<p class="vxf-foot">Powered by VASTROX Forms</p>
</form>
</div><div class="vxf-upl9k3">
<style>
.vxf-upl9k3 {
--vxf-ground: #0f1626;
--vxf-panel: #18203a;
--vxf-panel-2: #1f294a;
--vxf-line: rgba(148,163,214,0.16);
--vxf-line-strong: rgba(148,163,214,0.34);
--vxf-text: #eef1fb;
--vxf-muted: #94a0c6;
--vxf-faint: #6b76a0;
--vxf-accent: #ff8a5c;
--vxf-accent-2: #ffb27a;
--vxf-accent-soft: rgba(255,138,92,0.14);
box-sizing: border-box;
max-width: 480px;
margin: 0 auto;
padding: 34px 30px 30px;
background:
radial-gradient(120% 90% at 100% 0%, rgba(255,138,92,0.10), transparent 55%),
linear-gradient(180deg, var(--vxf-panel) 0%, var(--vxf-ground) 100%);
border: 1px solid var(--vxf-line);
border-radius: 20px;
box-shadow:
0 1px 0 rgba(255,255,255,0.05) inset,
0 24px 60px -28px rgba(6,10,22,0.85);
color: var(--vxf-text);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
position: relative;
overflow: hidden;
}
.vxf-upl9k3 * { box-sizing: border-box; }
.vxf-upl9k3::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--vxf-accent) 0%, var(--vxf-accent-2) 45%, transparent 90%);
opacity: 0.9;
}
.vxf-upl9k3 .vxf-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--vxf-accent-2);
margin: 0 0 14px;
}
.vxf-upl9k3 .vxf-eyebrow::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--vxf-accent);
box-shadow: 0 0 0 4px var(--vxf-accent-soft);
}
.vxf-upl9k3 h2 {
margin: 0 0 6px;
font-size: 25px;
line-height: 1.12;
letter-spacing: -0.02em;
font-weight: 680;
text-wrap: balance;
}
.vxf-upl9k3 .vxf-sub {
margin: 0 0 26px;
font-size: 14px;
line-height: 1.5;
color: var(--vxf-muted);
max-width: 40ch;
}
.vxf-upl9k3 form { display: flex; flex-direction: column; gap: 18px; }
.vxf-upl9k3 .vxf-field { display: flex; flex-direction: column; gap: 8px; }
.vxf-upl9k3 label {
font-size: 11px;
font-weight: 650;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--vxf-faint);
}
.vxf-upl9k3 input[type="text"],
.vxf-upl9k3 input[type="email"] {
width: 100%;
padding: 13px 15px;
font-size: 15px;
font-family: inherit;
color: var(--vxf-text);
background: var(--vxf-panel-2);
border: 1px solid var(--vxf-line);
border-radius: 11px;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.vxf-upl9k3 input::placeholder { color: var(--vxf-faint); }
.vxf-upl9k3 input[type="text"]:focus,
.vxf-upl9k3 input[type="email"]:focus {
border-color: var(--vxf-accent);
background: #212c50;
box-shadow: 0 0 0 4px var(--vxf-accent-soft);
}
/* Drop-zone: real file input overlaid transparently for accessibility + click */
.vxf-upl9k3 .vxf-drop {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
padding: 30px 22px;
border: 1.5px dashed var(--vxf-line-strong);
border-radius: 14px;
background:
radial-gradient(100% 120% at 50% 0%, rgba(255,138,92,0.06), transparent 60%),
var(--vxf-panel-2);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.vxf-upl9k3 .vxf-drop input[type="file"] {
position: absolute;
inset: 0;
width: 100%; height: 100%;
opacity: 0;
cursor: pointer;
}
.vxf-upl9k3 .vxf-drop:hover {
border-color: var(--vxf-accent);
background:
radial-gradient(100% 120% at 50% 0%, rgba(255,138,92,0.12), transparent 60%),
var(--vxf-panel-2);
}
/* keyboard focus on the hidden file input lights the whole zone */
.vxf-upl9k3 .vxf-drop:focus-within {
border-color: var(--vxf-accent);
border-style: solid;
box-shadow: 0 0 0 4px var(--vxf-accent-soft);
}
.vxf-upl9k3 .vxf-glyph {
width: 46px; height: 46px;
display: grid;
place-items: center;
border-radius: 13px;
background: linear-gradient(160deg, var(--vxf-accent) 0%, var(--vxf-accent-2) 100%);
box-shadow: 0 8px 20px -8px rgba(255,138,92,0.7);
transition: transform 0.2s ease;
}
.vxf-upl9k3 .vxf-drop:hover .vxf-glyph { transform: translateY(-3px); }
/* CSS arrow drawn with borders + a bar */
.vxf-upl9k3 .vxf-glyph .vxf-arrow {
position: relative;
width: 2px; height: 15px;
background: #2a1707;
border-radius: 2px;
margin-top: -2px;
}
.vxf-upl9k3 .vxf-glyph .vxf-arrow::before {
content: "";
position: absolute;
top: 0; left: 50%;
width: 8px; height: 8px;
border-left: 2px solid #2a1707;
border-top: 2px solid #2a1707;
border-radius: 1px;
transform: translateX(-50%) rotate(45deg);
}
.vxf-upl9k3 .vxf-glyph .vxf-arrow::after {
content: "";
position: absolute;
bottom: -6px; left: 50%;
width: 20px; height: 8px;
border: 2px solid #2a1707;
border-top: none;
border-radius: 0 0 3px 3px;
transform: translateX(-50%);
}
.vxf-upl9k3 .vxf-drop-title {
font-size: 14.5px;
font-weight: 600;
color: var(--vxf-text);
}
.vxf-upl9k3 .vxf-drop-title b {
color: var(--vxf-accent-2);
font-weight: 650;
text-decoration: underline;
text-decoration-color: rgba(255,178,122,0.4);
text-underline-offset: 2px;
}
.vxf-upl9k3 .vxf-drop-note {
font-size: 12px;
line-height: 1.45;
color: var(--vxf-muted);
}
.vxf-upl9k3 .vxf-types {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-top: 2px;
}
.vxf-upl9k3 .vxf-types span {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--vxf-muted);
padding: 3px 8px;
border: 1px solid var(--vxf-line);
border-radius: 6px;
background: rgba(148,163,214,0.05);
}
.vxf-upl9k3 button {
margin-top: 4px;
width: 100%;
padding: 14px 20px;
font-size: 15px;
font-weight: 650;
font-family: inherit;
letter-spacing: 0.01em;
color: #2a1707;
background: linear-gradient(160deg, var(--vxf-accent-2) 0%, var(--vxf-accent) 100%);
border: none;
border-radius: 11px;
cursor: pointer;
box-shadow: 0 10px 24px -10px rgba(255,138,92,0.8);
transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.vxf-upl9k3 button:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(255,138,92,0.85); }
.vxf-upl9k3 button:active { transform: translateY(0); }
.vxf-upl9k3 button:focus-visible { outline: 3px solid var(--vxf-accent-2); outline-offset: 3px; }
.vxf-upl9k3 .vxf-foot {
margin: 15px 0 0;
text-align: center;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--vxf-faint);
}
.vxf-upl9k3 .vxf-hp {
position: absolute !important;
left: -9999px;
}
@media (prefers-reduced-motion: reduce) {
.vxf-upl9k3 *, .vxf-upl9k3 *::before, .vxf-upl9k3 *::after { transition: none !important; }
}
@media (max-width: 420px) {
.vxf-upl9k3 { padding: 28px 20px 24px; border-radius: 16px; }
.vxf-upl9k3 h2 { font-size: 22px; }
}
</style>
<form action="https://forms.vastrox.com/YOUR-ID" method="POST" enctype="multipart/form-data">
<p class="vxf-eyebrow">File dispatch</p>
<h2>Send us your files</h2>
<p class="vxf-sub">Drop a document, brief, or asset and we'll take it from here. We'll reply to the email you leave below.</p>
<div class="vxf-field">
<label for="vxf-upl9k3-name">Your name</label>
<input type="text" id="vxf-upl9k3-name" name="name" placeholder="Ada Lovelace" autocomplete="name" required>
</div>
<div class="vxf-field">
<label for="vxf-upl9k3-email">Email address</label>
<input type="email" id="vxf-upl9k3-email" name="email" placeholder="you@company.com" autocomplete="email" required>
</div>
<div class="vxf-field">
<label for="vxf-upl9k3-file">Attachment</label>
<div class="vxf-drop">
<div class="vxf-glyph" aria-hidden="true"><span class="vxf-arrow"></span></div>
<span class="vxf-drop-title">Drag & drop or <b>browse</b> to upload</span>
<span class="vxf-drop-note">One file, up to 25 MB</span>
<span class="vxf-types">
<span>PDF</span><span>DOCX</span><span>PNG</span><span>JPG</span><span>ZIP</span>
</span>
<input type="file" id="vxf-upl9k3-file" name="attachment"
accept=".pdf,.doc,.docx,.png,.jpg,.jpeg,.zip" required>
</div>
</div>
<!-- honeypot: leave empty -->
<input type="text" name="_gotcha" class="vxf-hp" tabindex="-1" autocomplete="off" aria-hidden="true">
<button type="submit">Upload & send</button>
<p class="vxf-foot">Secured by VASTROX Forms</p>
</form>
</div><div class="vxf-q7k2">
<style>
.vxf-q7k2 {
--bg: #141019;
--field: #221a2b;
--field-focus: #271e33;
--line: #362b45;
--ink: #f5f1f8;
--muted: #a397b3;
--faint: #6f6480;
--accent: #e8b04b;
--accent-soft: rgba(232, 176, 75, 0.16);
box-sizing: border-box;
max-width: 940px;
margin: 0 auto;
padding: clamp(28px, 4vw, 52px);
background:
radial-gradient(120% 90% at 100% 0%, rgba(232, 176, 75, 0.10), transparent 55%),
radial-gradient(90% 80% at 0% 100%, rgba(122, 92, 200, 0.12), transparent 60%),
var(--bg);
border: 1px solid var(--line);
border-radius: 22px;
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
.vxf-q7k2 *,
.vxf-q7k2 *::before,
.vxf-q7k2 *::after { box-sizing: border-box; }
.vxf-q7k2 .vxf-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 760px) {
.vxf-q7k2 .vxf-grid { grid-template-columns: 0.82fr 1.18fr; align-items: start; }
}
.vxf-q7k2 .vxf-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 18px;
}
.vxf-q7k2 .vxf-eyebrow::before {
content: "";
width: 22px;
height: 1px;
background: var(--accent);
opacity: 0.7;
}
.vxf-q7k2 .vxf-title {
margin: 0 0 14px;
font-size: clamp(28px, 4.4vw, 40px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
text-wrap: balance;
}
.vxf-q7k2 .vxf-lede {
margin: 0 0 26px;
color: var(--muted);
font-size: 15px;
max-width: 34ch;
}
.vxf-q7k2 .vxf-assurances {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.vxf-q7k2 .vxf-assurances li {
display: flex;
align-items: flex-start;
gap: 11px;
font-size: 13.5px;
color: var(--muted);
}
.vxf-q7k2 .vxf-tick {
flex: none;
margin-top: 1px;
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 700;
}
.vxf-q7k2 form { display: block; }
.vxf-q7k2 .vxf-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 16px;
}
@media (max-width: 480px) {
.vxf-q7k2 .vxf-fields { grid-template-columns: 1fr; }
}
.vxf-q7k2 .vxf-field { display: flex; flex-direction: column; }
.vxf-q7k2 .vxf-span-2 { grid-column: 1 / -1; }
.vxf-q7k2 label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 8px;
}
.vxf-q7k2 .vxf-req { color: var(--accent); margin-left: 2px; }
.vxf-q7k2 input,
.vxf-q7k2 select,
.vxf-q7k2 textarea {
width: 100%;
font: inherit;
font-size: 15px;
color: var(--ink);
background: var(--field);
border: 1px solid var(--line);
border-radius: 12px;
padding: 13px 15px;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
-webkit-appearance: none;
appearance: none;
}
.vxf-q7k2 input::placeholder,
.vxf-q7k2 textarea::placeholder { color: var(--faint); }
.vxf-q7k2 input:hover,
.vxf-q7k2 select:hover,
.vxf-q7k2 textarea:hover { border-color: #4a3b5c; }
.vxf-q7k2 input:focus,
.vxf-q7k2 select:focus,
.vxf-q7k2 textarea:focus {
outline: none;
background: var(--field-focus);
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.vxf-q7k2 textarea { resize: vertical; min-height: 128px; line-height: 1.55; }
.vxf-q7k2 .vxf-select-wrap { position: relative; }
.vxf-q7k2 .vxf-select-wrap::after {
content: "";
position: absolute;
right: 16px;
top: 50%;
width: 9px;
height: 9px;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
.vxf-q7k2 select { padding-right: 40px; cursor: pointer; }
.vxf-q7k2 select option { color: #f5f1f8; background: #1b1522; }
.vxf-q7k2 .vxf-foot {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.vxf-q7k2 .vxf-note {
font-size: 12.5px;
color: var(--faint);
max-width: 30ch;
}
.vxf-q7k2 button {
font: inherit;
font-size: 15px;
font-weight: 650;
letter-spacing: 0.01em;
color: #201704;
background: linear-gradient(180deg, #f0bd5c, var(--accent));
border: none;
border-radius: 12px;
padding: 14px 26px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 9px;
transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
box-shadow: 0 10px 24px -8px rgba(232, 176, 75, 0.5);
}
.vxf-q7k2 button:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 14px 30px -8px rgba(232, 176, 75, 0.6); }
.vxf-q7k2 button:active { transform: translateY(0); }
.vxf-q7k2 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vxf-q7k2 button svg { width: 16px; height: 16px; }
.vxf-q7k2 .vxf-hp { position: absolute; left: -9999px; }
@media (prefers-reduced-motion: reduce) {
.vxf-q7k2 * { transition: none !important; }
}
</style>
<div class="vxf-grid">
<div class="vxf-intro">
<p class="vxf-eyebrow">Start a project</p>
<h2 class="vxf-title">Let’s scope the work.</h2>
<p class="vxf-lede">Tell us where you’re headed. We’ll come back with a tailored quote and a realistic timeline.</p>
<ul class="vxf-assurances">
<li><span class="vxf-tick" aria-hidden="true">✓</span><span>A written estimate within two business days</span></li>
<li><span class="vxf-tick" aria-hidden="true">✓</span><span>Fixed-scope pricing, no surprise line items</span></li>
<li><span class="vxf-tick" aria-hidden="true">✓</span><span>Your details stay private — never shared</span></li>
</ul>
</div>
<form action="https://forms.vastrox.com/YOUR-ID" method="POST">
<input type="text" name="_gotcha" class="vxf-hp" tabindex="-1" autocomplete="off" aria-hidden="true">
<div class="vxf-fields">
<div class="vxf-field">
<label for="vxf-q7k2-name">Full name <span class="vxf-req">*</span></label>
<input id="vxf-q7k2-name" type="text" name="name" placeholder="Jordan Ellis" autocomplete="name" required>
</div>
<div class="vxf-field">
<label for="vxf-q7k2-email">Work email <span class="vxf-req">*</span></label>
<input id="vxf-q7k2-email" type="email" name="email" placeholder="jordan@company.com" autocomplete="email" required>
</div>
<div class="vxf-field">
<label for="vxf-q7k2-company">Company</label>
<input id="vxf-q7k2-company" type="text" name="company" placeholder="Acme Studio" autocomplete="organization">
</div>
<div class="vxf-field">
<label for="vxf-q7k2-budget">Budget range <span class="vxf-req">*</span></label>
<div class="vxf-select-wrap">
<select id="vxf-q7k2-budget" name="budget" required>
<option value="" selected disabled>Select a range</option>
<option value="under-5k">Under $5,000</option>
<option value="5k-15k">$5,000 – $15,000</option>
<option value="15k-50k">$15,000 – $50,000</option>
<option value="50k-plus">$50,000+</option>
<option value="not-sure">Not sure yet</option>
</select>
</div>
</div>
<div class="vxf-field vxf-span-2">
<label for="vxf-q7k2-details">Project details <span class="vxf-req">*</span></label>
<textarea id="vxf-q7k2-details" name="details" placeholder="What are you building, who is it for, and when do you need it live? Links to anything relevant are welcome." required></textarea>
</div>
</div>
<div class="vxf-foot">
<p class="vxf-note">We’ll only use this to reply to your inquiry.</p>
<button type="submit">
Request a quote
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
</form>
</div>
</div><div class="vxf-inl-news">
<style>
.vxf-inl-news{
--vxf-accent:#5b57ff;
--vxf-accent-2:#8f6bff;
--vxf-ink:#12131a;
--vxf-muted:#6b6d7c;
--vxf-field:#ffffff;
--vxf-border:rgba(18,19,26,.12);
--vxf-card:rgba(255,255,255,.72);
box-sizing:border-box;
max-width:560px;
margin:0 auto;
padding:22px 22px 20px;
border-radius:20px;
background:
radial-gradient(120% 140% at 0% 0%, rgba(91,87,255,.10), transparent 55%),
var(--vxf-card);
border:1px solid var(--vxf-border);
box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -24px rgba(18,19,26,.45);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
color:var(--vxf-ink);
text-align:left;
}
.vxf-inl-news *{box-sizing:border-box;}
.vxf-inl-news .vxf-head{
display:flex;align-items:center;gap:9px;margin:0 0 4px;
}
.vxf-inl-news .vxf-spark{
display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:8px;flex:0 0 auto;
background:linear-gradient(135deg,var(--vxf-accent),var(--vxf-accent-2));
color:#fff;box-shadow:0 6px 14px -6px var(--vxf-accent);
}
.vxf-inl-news .vxf-spark svg{width:15px;height:15px;display:block;}
.vxf-inl-news .vxf-title{
font-size:15px;font-weight:650;letter-spacing:-.01em;margin:0;
}
.vxf-inl-news .vxf-sub{
margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--vxf-muted);
}
.vxf-inl-news .vxf-row{
display:flex;gap:8px;align-items:stretch;
}
.vxf-inl-news .vxf-field{position:relative;flex:1 1 auto;min-width:0;}
.vxf-inl-news .vxf-vh{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.vxf-inl-news input[type=email]{
width:100%;height:46px;
padding:0 14px;
font-size:14px;color:var(--vxf-ink);
background:var(--vxf-field);
border:1px solid var(--vxf-border);
border-radius:12px;
outline:none;
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
-webkit-appearance:none;appearance:none;
}
.vxf-inl-news input[type=email]::placeholder{color:#9a9cab;}
.vxf-inl-news input[type=email]:hover{border-color:rgba(91,87,255,.45);}
.vxf-inl-news input[type=email]:focus{
border-color:var(--vxf-accent);
box-shadow:0 0 0 4px rgba(91,87,255,.18);
}
.vxf-inl-news button{
flex:0 0 auto;
display:inline-flex;align-items:center;gap:7px;
height:46px;padding:0 20px;
font-size:14px;font-weight:650;letter-spacing:-.01em;color:#fff;
border:0;border-radius:12px;cursor:pointer;
background:linear-gradient(135deg,var(--vxf-accent),var(--vxf-accent-2));
box-shadow:0 10px 22px -10px var(--vxf-accent), 0 1px 0 rgba(255,255,255,.35) inset;
transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.vxf-inl-news button svg{width:15px;height:15px;transition:transform .18s ease;}
.vxf-inl-news button:hover{
filter:saturate(1.08);
box-shadow:0 14px 26px -10px var(--vxf-accent), 0 1px 0 rgba(255,255,255,.35) inset;
}
.vxf-inl-news button:hover svg{transform:translateX(2px);}
.vxf-inl-news button:active{transform:translateY(1px);}
.vxf-inl-news button:focus-visible{outline:2px solid var(--vxf-accent);outline-offset:3px;}
.vxf-inl-news .vxf-fine{
margin:11px 0 0;font-size:11.5px;line-height:1.5;color:var(--vxf-muted);
}
@media (max-width:440px){
.vxf-inl-news .vxf-row{flex-direction:column;}
.vxf-inl-news button{justify-content:center;width:100%;}
}
@media (prefers-color-scheme:dark){
.vxf-inl-news{
--vxf-ink:#f2f2f7;
--vxf-muted:#a1a3b4;
--vxf-field:rgba(255,255,255,.04);
--vxf-border:rgba(255,255,255,.14);
--vxf-card:rgba(24,25,34,.66);
box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 22px 48px -24px rgba(0,0,0,.7);
}
.vxf-inl-news input[type=email]::placeholder{color:#7c7e8f;}
}
</style>
<form class="vxf-form" action="https://forms.vastrox.com/YOUR-ID" method="POST">
<div class="vxf-head">
<span class="vxf-spark" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"><path d="M4 6.5 12 12l8-5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="3.25" y="5.25" width="17.5" height="13.5" rx="2.5" stroke="currentColor" stroke-width="2"/></svg>
</span>
<p class="vxf-title">Get the weekly dispatch</p>
</div>
<p class="vxf-sub">One sharp email every Friday. Product notes, no noise, unsubscribe anytime.</p>
<div class="vxf-row">
<div class="vxf-field">
<label class="vxf-vh" for="vxf-inl-email">Email address</label>
<input id="vxf-inl-email" type="email" name="email" placeholder="you@company.com" autocomplete="email" required>
</div>
<button type="submit">
Subscribe
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h13m0 0-5.5-5.5M18 12l-5.5 5.5" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
<p class="vxf-fine">Protected by VASTROX Forms. We never share your address.</p>
</form>
</div>