<!DOCTYPE html><html lang="ar"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title> Contact us — ownit </title><meta name="description" content="Contact the Ownit team for personalized gifts. We're here to help!" /><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link
href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet"
/><style>
/* ─── Tokens ─────────────────────────────────────── */
:root {
--bg: #4d3df7;
--bg-deep: #3a2ce0;
--accent: #d4f53d;
--accent-hover: #c2e22e;
--white: #ffffff;
--card-bg: #ffffff;
--text-dark: #1e1b4b;
--text-mid: #4b5563;
--text-on-bg: #ffffff;
--text-muted: rgba(255,255,255,0.72);
--input-bg: #f4f2ff;
--input-border: #ddd8fe;
--input-focus: #4d3df7;
--error: #ef4444;
--r-card: 22px;
--r-input: 12px;
--r-btn: 100px;
--r-icon: 12px;
--shadow-card: 0 24px 64px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
--t-fast: 180ms ease-out;
--t-mid: 260ms ease-out;
}
/* ─── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-; }
body {
font-family: 'Cairo', sans-serif;
background: var(--bg);
color: var(--text-on-bg);
min-height: 100dvh;
direction: rtl;
-webkit-font-smoothing: antialiased;
}
/* ─── Skip link ──────────────────────────────────── */
.skip-link {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
position: fixed;
top: 16px; right: 16px;
width: auto; height: auto;
padding: 8px 20px;
clip: auto;
background: var(--accent);
color: var(--text-dark);
border-radius: var(--r-btn);
font-size: 0.9rem;
font-weight: 700;
z-index: 9999;
}
/* ─── Background blobs ───────────────────────────── */
.bg-deco {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(90px);
}
.blob-1 {
width: 520px; height: 520px;
background: #6b59ff;
top: -140px; right: -100px;
opacity: 0.45;
}
.blob-2 {
width: 380px; height: 380px;
background: #d4f53d;
bottom: -100px; left: -80px;
opacity: 0.14;
}
.blob-3 {
width: 260px; height: 260px;
background: #2a1fcc;
top: 45%; left: 35%;
opacity: 0.3;
}
/* ─── Page wrapper ───────────────────────────────── */
.page {
position: relative;
z-index: 1;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding: 0px;
margin-top: -70px;
}
/* ─── Header ─────────────────────────────────────── */
.page-header {
text-align: center;
margin-bottom: 52px;
}
.page-header h1 {
font-size: clamp(1.9rem, 4.5vw, 3rem);
font-weight: 800;
line-height: 1.2;
color: var(--white);
margin-top: 0px;
}
.page-header h1 em {
font-style: normal;
color: var(--accent);
}
.page-header p {
margin-top: 10px;
font-size: 1.05rem;
font-weight: 400;
color: var(--text-muted);
line-height: 1.6;
}
/* ─── Main content ───────────────────────────────── */
main {
flex: 1;
max-width: 1100px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
}
/* ─── Two-column grid ────────────────────────────── */
.contact-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 28px;
align-items: start;
}
/* ─── Form card ──────────────────────────────────── */
.form-card {
background: var(--card-bg);
border-radius: var(--r-card);
padding: 44px 40px;
box-shadow: var(--shadow-card);
}
.form-card h2 {
font-size: 1.45rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 6px;
}
.form-subtitle {
font-size: 0.92rem;
color: var(--text-mid);
margin-bottom: 30px;
line-height: 1.6;
}
/* Form fields container */
.form-fields {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Two fields side by side */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 7px;
}
label {
font-size: 0.88rem;
font-weight: 600;
color: var(--text-dark);
}
.required-star {
color: var(--error);
margin-right: 2px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 13px 15px;
font-family: 'Cairo', sans-serif;
font-size: 0.95rem;
font-weight: 400;
color: var(--text-dark);
background: var(--input-bg);
border: 1.5px solid var(--input-border);
border-radius: var(--r-input);
outline: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
min-height: 46px;
}
input::placeholder, textarea::placeholder { color: #b0a8d8; }
input:focus,
textarea:focus {
border-color: var(--input-focus);
box-shadow: 0 0 0 3px rgba(77,61,247,0.13);
}
input:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--input-focus);
outline-offset: 1px;
}
input.is-error,
textarea.is-error {
border-color: var(--error);
box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}
textarea {
resize: vertical;
min-height: 128px;
line-height: 1.65;
padding-top: 13px;
}
.field-error {
font-size: 0.8rem;
color: var(--error);
font-weight: 500;
display: none;
min-height: 1em;
}
.field-error.show { display: block; }
/* ─── Submit button ──────────────────────────────── */
.btn-submit {
width: 100%;
padding: 15px 32px;
font-family: 'Cairo', sans-serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--text-dark);
background: var(--accent);
border: none;
border-radius: var(--r-btn);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn-submit:hover:not(:disabled) {
background: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(212,245,61,0.45);
}
.btn-submit:active:not(:disabled) {
transform: translateY(0);
box-shadow: none;
}
.btn-submit:focus-visible {
outline: 3px solid var(--text-dark);
outline-offset: 3px;
}
.btn-submit:disabled {
opacity: 0.65;
cursor: not-allowed;
}
/* Send icon */
.btn-icon { width: 20px; height: 20px; flex-shrink: 0; }
/* Spinner */
.spinner {
width: 22px; height: 22px;
border: 2.5px solid rgba(30,27,75,0.25);
border-top-color: var(--text-dark);
border-radius: 50%;
animation: spin 0.7s linear infinite;
display: none;
flex-shrink: 0;
}
.btn-submit.is-loading .btn-text,
.btn-submit.is-loading .btn-icon { display: none; }
.btn-submit.is-loading .spinner { display: block; }
/* ─── Success state ──────────────────────────────── */
.success-panel {
display: none;
text-align: center;
padding: 48px 24px;
animation: fadeUp 0.4s ease-out forwards;
}
.success-panel.show { display: block; }
.success-circle {
width: 72px; height: 72px;
background: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.success-circle svg { width: 34px; height: 34px; color: var(--text-dark); }
.success-panel h3 {
font-size: 1.4rem;
font-weight: 800;
color: var(--text-dark);
margin-bottom: 8px;
}
.success-panel p {
font-size: 0.95rem;
color: var(--text-mid);
line-height: 1.65;
}
/* ─── Info column ────────────────────────────────── */
.info-col {
padding: 12px 8px 12px 24px;
}
.info-col h2 {
font-size: 1.5rem;
font-weight: 700;
color: var(--white);
margin-bottom: 16px;
line-height: 1.3;
}
.info-intro {
font-size: 0.97rem;
color: var(--text-muted);
line-height: 1.85;
margin-bottom: 36px;
}
/* Contact links */
.contact-links {
display: flex;
flex-direction: column;
gap: 14px;
}
.contact-link {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
color: var(--white);
padding: 15px 18px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.11);
border-radius: 16px;
transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
cursor: pointer;
}
.contact-link:hover {
background: rgba(255,255,255,0.14);
border-color: var(--accent);
transform: translateX(4px);
}
.contact-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.link-icon {
flex-shrink: 0;
width: 44px; height: 44px;
background: var(--accent);
border-radius: var(--r-icon);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dark);
}
.link-icon svg { width: 21px; height: 21px; }
.link-meta { display: flex; flex-direction: column; gap: 2px; }
.link-label {
font-size: 0.76rem;
font-weight: 400;
color: var(--text-muted);
}
.link-value {
font-size: 0.97rem;
font-weight: 600;
color: var(--white);
direction: ltr;
text-align: right;
}
.info-closing {
margin-top: 32px;
font-size: 0.92rem;
color: var(--text-muted);
line-height: 1.85;
}
/* ─── Custom Protected Content Element (🎯 Kept style identical) ─── */
.ownit-footer-custom {
text-align: center;
margin-top: 64px;
padding-bottom: 8px;
}
.logo {
font-size: 2rem;
font-weight: 800;
color: var(--accent);
letter-spacing: -0.03em;
direction: ltr;
display: inline-block;
line-height: 1;
}
.logo-sub {
display: block;
font-size: 0.78rem;
font-weight: 400;
color: var(--text-muted);
margin-top: 6px;
letter-spacing: 0.01em;
}
/* ─── Reveal animation ───────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.reveal.in { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.18s; }
.delay-3 { transition-delay: 0.28s; }
/* ─── Keyframes ──────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.spinner { animation: none; border-top-color: var(--text-dark); }
.btn-submit, .contact-link { transition: none; }
.success-panel { animation: none; }
}
/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
.contact-grid { grid-template-columns: 1fr; }
.form-col { order: 1; }
.info-col { order: 2; padding: 8px 0 0; }
.info-col h2 { font-size: 1.3rem; }
}
@media (max-width: 768px) {
.info-col { padding-top: 4px; }
.contact-link { padding: 13px 16px; }
}
@media (max-width: 640px) {
.page { padding: 36px 16px 32px; }
.page-header { margin-bottom: 36px; }
.form-card { padding: 32px 22px; }
.form-row { grid-template-columns: 1fr; }
.blob-1 { width: 320px; height: 320px; }
.blob-2 { width: 240px; height: 240px; }
}
@media (max-width: 375px) {
.form-card { padding: 24px 18px; }
}
</style></head><body style=";text-align:left;direction:ltr">
Go to the form<header class="page-header reveal">
Contact us
We're glad to hear from you — we'll get back to you as soon as possible.
We strive to respond to all messages within 24 business hours. We look forward to helping you find the perfect gift for every occasion!
