/* ─── standalone.css ────────────────────────────────────────── Shared styles for light-theme standalone pages: contact.html, privacy_policy.html, data_confidentiality.html All these pages have their own (not extending base.html). Theme aligned with landing.css / demo-request.css (Every Sky marketing palette: white body, sky-blue accents, dark footer). ──────────────────────────────────────────────────────────────── */ /* Local design tokens (mirror landing page palette) */ :root { --sp-sky: #0ea5e9; --sp-sky-dark: #0284c7; --sp-sky-lt: #e0f2fe; --sp-sky-xl: #f0f9ff; --sp-ink: #0f172a; --sp-muted: #64748b; --sp-border: #e2e8f0; --sp-white: #ffffff; --sp-green: #10b981; --sp-green-dark: #059669; --sp-danger: #ef4444; } /* ── Base ─────────────────────────────────────────────────── */ body { background: var(--sp-white); color: var(--sp-ink); /* Same single-family stack as landing/navbar-hero.css — IBM Plex Sans Arabic covers Latin and Arabic, so neither IBM Plex Sans nor Tajawal is fetched. */ font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; line-height: 1.7; } /* ── Navbar ───────────────────────────────────────────────── */ .page-nav { background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--sp-border); padding: 1rem 0; } .page-nav-brand { font-size: 1.3rem; font-weight: 700; color: var(--sp-ink); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; letter-spacing: -0.3px; } .page-nav-brand i { color: var(--sp-sky); } .back-link { color: var(--sp-muted); text-decoration: none; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.2s; } .back-link:hover { color: var(--sp-sky); } /* ── Footer ───────────────────────────────────────────────── */ /* Dark footer kept (mirrors .lp-footer on the landing page). */ .page-footer { background: var(--sp-ink); border-top: none; padding: 2.5rem 0; text-align: center; } .footer-links { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .footer-links a { color: rgba(255,255,255,0.45); font-size: 0.83rem; text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--sp-sky); } .footer-links a.active { color: var(--sp-sky); } .footer-copy { color: rgba(255,255,255,0.3); font-size: 0.82rem; margin: 0; } /* ── Document layout (privacy_policy, data_confidentiality) ─ */ .doc-header { background: linear-gradient(160deg, var(--sp-sky-xl) 0%, #fff 70%); padding: 6rem 0 2.5rem; border-bottom: 1px solid var(--sp-border); margin-bottom: 3rem; } .doc-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.9rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem; } .doc-badge--blue { background: var(--sp-sky-lt); border: 1px solid rgba(14,165,233,0.25); color: var(--sp-sky-dark); } .doc-badge--green { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); color: var(--sp-green-dark); } .doc-title { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; color: var(--sp-ink); margin-bottom: 0.5rem; letter-spacing: -0.5px; } .doc-subtitle { color: var(--sp-muted); font-size: 0.95rem; } .doc-body { max-width: 800px; margin: 0 auto; padding-bottom: 5rem; } .doc-section { margin-bottom: 2.5rem; } .doc-section h2 { font-size: 1.15rem; font-weight: 700; color: var(--sp-sky-dark); border-left: 3px solid var(--sp-sky); padding-left: 0.75rem; margin-bottom: 1rem; } .theme-green .doc-section h2 { color: var(--sp-green-dark); border-left-color: var(--sp-green); } .doc-section p, .doc-section li { color: #334155; line-height: 1.8; font-size: 0.95rem; } .doc-section ul { padding-left: 1.25rem; } .doc-section ul li { margin-bottom: 0.4rem; } .doc-section a { color: var(--sp-sky-dark); } .doc-section a:hover { color: var(--sp-sky); } .theme-green .doc-section a { color: var(--sp-green-dark); } .theme-green .doc-section a:hover { color: var(--sp-green); } .doc-section strong { color: var(--sp-ink); } .doc-divider { border: none; border-top: 1px solid var(--sp-border); margin: 2rem 0; } /* RTL: flip the heading accent bar to the right side */ [dir="rtl"] .doc-section h2 { border-left: none; border-right: 3px solid var(--sp-sky); padding-left: 0; padding-right: 0.75rem; } [dir="rtl"] .theme-green .doc-section h2 { border-right-color: var(--sp-green); } [dir="rtl"] .doc-section ul { padding-left: 0; padding-right: 1.25rem; } /* ── Data Confidentiality — principle cards ───────────────── */ .principle-card { background: var(--sp-white); border: 1px solid var(--sp-border); border-radius: 0.75rem; padding: 1.25rem; margin-bottom: 1rem; display: flex; gap: 1rem; align-items: flex-start; box-shadow: 0 4px 14px rgba(15,23,42,0.04); transition: border-color 0.2s, box-shadow 0.2s; } .principle-card:hover { border-color: rgba(16,185,129,0.35); box-shadow: 0 10px 24px rgba(16,185,129,0.1); } .principle-icon { width: 40px; height: 40px; border-radius: 0.5rem; flex-shrink: 0; background: rgba(16,185,129,0.1); color: var(--sp-green-dark); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .principle-title { font-weight: 700; color: var(--sp-ink); font-size: 0.95rem; margin-bottom: 0.3rem; } .principle-desc { color: var(--sp-muted); font-size: 0.87rem; line-height: 1.6; margin: 0; } /* ── Contact page ─────────────────────────────────────────── */ .contact-header { background: linear-gradient(160deg, var(--sp-sky-xl) 0%, #fff 70%); padding: 6rem 0 2.5rem; text-align: center; border-bottom: 1px solid var(--sp-border); margin-bottom: 3rem; } .contact-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.9rem; border-radius: 9999px; background: var(--sp-sky-lt); border: 1px solid rgba(14,165,233,0.25); color: var(--sp-sky-dark); font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem; } .contact-title { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; color: var(--sp-ink); margin-bottom: 0.5rem; letter-spacing: -0.5px; } .contact-subtitle { color: var(--sp-muted); font-size: 0.95rem; } .contact-card { background: var(--sp-white); border: 1px solid var(--sp-border); border-radius: 1.25rem; padding: 2.5rem; box-shadow: 0 12px 32px rgba(14,165,233,0.08); } .form-label { color: var(--sp-ink); font-size: 0.88rem; font-weight: 600; margin-bottom: 0.4rem; } .form-control, .form-select { background: var(--sp-white) !important; border: 1px solid var(--sp-border) !important; color: var(--sp-ink) !important; border-radius: 0.6rem !important; font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; font-size: 0.92rem; padding: 0.7rem 0.9rem; transition: border-color 0.2s, box-shadow 0.2s; } .form-control:focus, .form-select:focus { border-color: rgba(14,165,233,0.55) !important; box-shadow: 0 0 0 3px rgba(14,165,233,0.12) !important; background: var(--sp-white) !important; outline: none; } .form-control::placeholder { color: #94a3b8 !important; } .form-select option { background: var(--sp-white); color: var(--sp-ink); } textarea.form-control { resize: vertical; min-height: 130px; } .btn-submit { background: var(--sp-sky); color: #fff; border: none; border-radius: 0.75rem; padding: 0.85rem 2rem; font-weight: 600; font-size: 0.95rem; font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; cursor: pointer; transition: all 0.25s ease; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .btn-submit:hover { background: var(--sp-sky-dark); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(14,165,233,0.3); } .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .alert-success-custom { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.3); border-radius: 0.75rem; padding: 1.25rem 1.5rem; color: var(--sp-green-dark); display: flex; align-items: flex-start; gap: 0.75rem; } .alert-error-custom { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3); border-radius: 0.75rem; padding: 1.25rem 1.5rem; color: #b91c1c; display: flex; align-items: flex-start; gap: 0.75rem; } .alert-icon { font-size: 1.3rem; margin-top: 0.1rem; flex-shrink: 0; } .alert-title { font-weight: 700; margin-bottom: 0.2rem; } .alert-body { font-size: 0.88rem; opacity: 0.9; line-height: 1.55; } .req { color: var(--sp-danger); margin-left: 2px; } .info-card { background: var(--sp-white); border: 1px solid var(--sp-border); border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: 0 4px 14px rgba(15,23,42,0.04); transition: border-color 0.2s, box-shadow 0.2s; } .info-card:hover { border-color: rgba(14,165,233,0.3); box-shadow: 0 10px 24px rgba(14,165,233,0.1); } .info-card-icon { width: 36px; height: 36px; border-radius: 0.5rem; background: var(--sp-sky-lt); color: var(--sp-sky-dark); display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: 0.75rem; } .info-card-title { font-weight: 700; color: var(--sp-ink); font-size: 0.95rem; margin-bottom: 0.3rem; } .info-card-text { color: var(--sp-muted); font-size: 0.85rem; line-height: 1.65; margin: 0; } .info-card-text a { color: var(--sp-sky-dark); } .info-card-text a:hover { color: var(--sp-sky); } .hp-field { display: none !important; }