/* ============================================================ Takween — work-request form (Arabic, RTL) Light + dark themes, mirroring the main site's oklch palette. Theme is driven by [data-theme] on ; default is dark. ============================================================ */ :root { --font-ar: 'Cairo', system-ui, sans-serif; --font-en: 'Space Grotesk', sans-serif; --hue: 263; /* Takween brand blue (#0053FF) */ --radius: 18px; --radius-sm: 12px; /* ── Light theme (brand default): neutral grays + vivid blue ── */ --bg: oklch(0.95 0.003 var(--hue)); --bg-2: oklch(0.925 0.004 var(--hue)); --surface: #ffffff; --surface-2: oklch(0.945 0.004 var(--hue)); --text: oklch(0.20 0.015 var(--hue)); --muted: oklch(0.50 0.018 var(--hue)); --faint: oklch(0.64 0.015 var(--hue)); --border: oklch(0.885 0.005 var(--hue)); --border-2: oklch(0.82 0.008 var(--hue)); --primary: oklch(0.53 0.255 var(--hue)); --primary-2: oklch(0.47 0.235 var(--hue)); --primary-soft: oklch(0.93 0.05 var(--hue)); --on-primary:#ffffff; --glow: oklch(0.55 0.25 var(--hue)); --ring: oklch(0.53 0.255 var(--hue) / .22); --grad-1: oklch(0.9 0.07 var(--hue) / .5); --grad-2: oklch(0.92 0.06 calc(var(--hue) + 25) / .4); --topbar-bg: oklch(0.97 0.003 var(--hue) / .82); --danger: oklch(0.55 0.2 25); --danger-bg: oklch(0.97 0.03 25); --danger-bd: oklch(0.85 0.09 25); --danger-fg: oklch(0.45 0.18 25); --shadow: 0 1px 2px rgba(8,16,42,.05), 0 18px 40px -20px rgba(6,28,96,.18); } [data-theme="dark"] { /* Dark theme = brand's dramatic near-black + vivid blue */ --bg: oklch(0.155 0.008 var(--hue)); --bg-2: oklch(0.195 0.012 var(--hue)); --surface: oklch(0.215 0.015 var(--hue)); --surface-2: oklch(0.245 0.018 var(--hue)); --text: oklch(0.97 0.005 var(--hue)); --muted: oklch(0.72 0.02 var(--hue)); --faint: oklch(0.56 0.02 var(--hue)); --border: oklch(0.30 0.02 var(--hue)); --border-2: oklch(0.38 0.025 var(--hue)); --primary: oklch(0.62 0.235 var(--hue)); --primary-2: oklch(0.72 0.18 var(--hue)); --primary-soft: oklch(0.30 0.10 var(--hue)); --on-primary:#ffffff; --glow: oklch(0.55 0.27 var(--hue)); --ring: oklch(0.62 0.235 var(--hue) / .26); --grad-1: oklch(0.35 0.12 var(--hue) / .35); --grad-2: oklch(0.30 0.10 calc(var(--hue) + 25) / .25); --topbar-bg: oklch(0.155 0.008 var(--hue) / .75); --danger: oklch(0.7 0.17 25); --danger-bg: oklch(0.3 0.08 25 / .25); --danger-bd: oklch(0.5 0.13 25); --danger-fg: oklch(0.92 0.05 25); --shadow: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -28px rgba(0,0,0,.78); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 24px; } body { font-family: var(--font-ar); background: radial-gradient(60% 50% at 85% -5%, var(--grad-1), transparent 60%), radial-gradient(55% 45% at 0% 0%, var(--grad-2), transparent 55%), var(--bg); color: var(--text); line-height: 1.75; -webkit-font-smoothing: antialiased; min-height: 100vh; padding: 0 0 5rem; transition: background-color .3s, color .3s; } a { color: inherit; text-decoration: none; } ::selection { background: var(--primary); color: var(--on-primary); } .wrap { width: min(820px, 92vw); margin-inline: auto; } /* ── Top bar ─────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: var(--topbar-bg); border-bottom: 1px solid var(--border); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; } .brand { font-family: var(--font-en); font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: .55rem; } .brand .dot { color: var(--primary); } .brand .ar { font-family: var(--font-ar); font-size: 1.05rem; color: var(--muted); } /* Real Takween logo — blue on light theme, white on dark theme */ .brand-logo { height: 30px; width: auto; display: block; } .brand-logo--dark { display: none; } [data-theme="dark"] .brand-logo--light { display: none; } [data-theme="dark"] .brand-logo--dark { display: block; } .topbar-actions { display: inline-flex; align-items: center; gap: .6rem; } .back-link { font-size: .92rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 1px solid var(--border); border-radius: 999px; transition: border-color .2s, color .2s, background .2s; } .back-link:hover { color: var(--text); border-color: var(--border-2); background: var(--surface); } .icon-btn { flex: none; width: 40px; height: 40px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; color: var(--muted); background: var(--surface); border: 1px solid var(--border); transition: color .2s, border-color .2s, background .2s, transform .15s; } .icon-btn:hover { color: var(--text); border-color: var(--border-2); transform: translateY(-1px); } /* ── Hero / overview ─────────────────────────────────────── */ .hero { padding: 3.4rem 0 1.6rem; text-align: center; } .eyebrow { font-size: .82rem; font-weight: 700; letter-spacing: .12em; color: var(--primary); text-transform: uppercase; display: inline-block; margin-bottom: 1rem; } [data-theme="dark"] .eyebrow { color: var(--primary-2); } .hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; } .hero p { color: var(--muted); max-width: 62ch; margin: 1.1rem auto 0; font-size: 1.02rem; } .hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.8rem; } .meta-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: .9rem; box-shadow: var(--shadow); } .meta-pill strong { color: var(--primary); font-family: var(--font-en); font-weight: 700; } [data-theme="dark"] .meta-pill strong { color: var(--primary-2); } /* ── Errors ──────────────────────────────────────────────── */ .alert { margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: var(--danger-bg); border: 1px solid var(--danger-bd); color: var(--danger-fg); } .alert ul { margin: .3rem 1.2rem 0; } .alert li { margin: .15rem 0; } /* ── Form card ───────────────────────────────────────────── */ form.request { margin-top: 2rem; } .section { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.8rem 1.7rem; margin-bottom: 1.4rem; box-shadow: var(--shadow); } .section-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; } .section-num { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-en); font-weight: 700; font-size: 1.05rem; color: var(--primary); background: var(--primary-soft); border: 1px solid var(--border-2); } [data-theme="dark"] .section-num { color: var(--primary-2); } .section-title { font-size: 1.3rem; font-weight: 700; line-height: 1.3; } .section-desc { color: var(--muted); font-size: .95rem; margin-top: .25rem; } .field { margin-bottom: 1.4rem; } .field:last-child { margin-bottom: 0; } .field > label { display: block; font-weight: 600; font-size: 1.02rem; margin-bottom: .6rem; line-height: 1.6; } .req { color: var(--primary); margin-inline-start: .25rem; } [data-theme="dark"] .req { color: var(--primary-2); } input[type=text], input[type=tel], input[type=email], textarea { width: 100%; font-family: inherit; font-size: 1rem; color: var(--text); background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: .85rem 1rem; transition: border-color .2s, box-shadow .2s, background .2s; } textarea { resize: vertical; min-height: 110px; line-height: 1.7; } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus, textarea:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--ring); } /* ── Radio options ───────────────────────────────────────── */ .options { display: flex; flex-wrap: wrap; gap: .7rem; } .option { position: relative; cursor: pointer; padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid var(--border-2); background: var(--bg); font-size: .98rem; color: var(--muted); transition: border-color .2s, color .2s, background .2s, box-shadow .2s; } .option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .option:hover { color: var(--text); border-color: var(--primary); } .option:has(input:checked) { color: var(--on-primary); background: var(--primary); border-color: var(--primary); font-weight: 700; box-shadow: 0 8px 20px -10px var(--glow); } .option:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--ring); } /* ── Contact section accent ──────────────────────────────── */ .section.contact { border-color: var(--border-2); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .contact-grid .field { margin-bottom: 0; } .contact-grid .full { grid-column: 1 / -1; } /* honeypot — visually hidden without creating horizontal scroll */ .hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── Submit ──────────────────────────────────────────────── */ .actions { margin-top: 1.8rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; } .btn-primary { font-family: inherit; font-weight: 700; font-size: 1.08rem; cursor: pointer; color: var(--on-primary); background: linear-gradient(180deg, var(--primary-2), var(--primary)); border: none; border-radius: 999px; padding: 1rem 2.6rem; display: inline-flex; align-items: center; gap: .6rem; box-shadow: 0 14px 30px -12px var(--glow); transition: transform .15s ease, box-shadow .2s ease, filter .2s; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px var(--glow); filter: brightness(1.05); } .btn-primary:active { transform: translateY(0); } .note { color: var(--faint); font-size: .88rem; } @media (max-width: 600px) { .contact-grid { grid-template-columns: 1fr; } .section { padding: 1.4rem 1.2rem; } .btn-primary { width: 100%; justify-content: center; } }