/* Ordertrack marketing site — shared styles. Brand blue #1F6FEB. Light theme. RTL-aware via logical properties (margin-inline / padding-inline / text-align:start) so the same CSS serves LTR (en) and RTL (ar, ckb) with only flipping. */ :root { --brand: #1F6FEB; --brand-dark: #1A5FCC; --brand-tint: #EAF1FE; --ink: #0E1116; --ink-muted: #5B6470; --bg: #FFFFFF; --surface: #F6F7F9; --border: #E2E5EA; --success: #1AA251; --shadow: 0 1px 2px rgba(14, 17, 22, 0.04), 0 8px 24px rgba(14, 17, 22, 0.06); --shadow-lg: 0 12px 40px rgba(31, 111, 235, 0.18); --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --maxw: 1080px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Segoe UI Arabic", Tahoma, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 17px; overflow-x: hidden; } h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.01em; } h1 { font-size: clamp(2rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); } h3 { font-size: 1.2rem; font-weight: 700; } p { margin: 0 0 1em; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 1rem; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-lg); } .btn-primary:hover { background: var(--brand-dark); } .btn-ghost { background: #fff; color: var(--ink); border-color: var(--border); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; gap: 18px; height: 66px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.15rem; color: var(--ink); } .brand:hover { text-decoration: none; } .brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--shadow); } .nav-links { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; } .nav-links a { color: var(--ink-muted); font-weight: 600; font-size: 0.95rem; padding: 8px 12px; border-radius: 9px; } .nav-links a:hover { color: var(--ink); background: var(--surface); text-decoration: none; } .nav-links a.cta { color: #fff; background: var(--brand); } .nav-links a.cta:hover { background: var(--brand-dark); color: #fff; } /* Language switcher */ .lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .lang-switch button { background: #fff; border: 0; padding: 7px 12px; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--ink-muted); cursor: pointer; } .lang-switch button[aria-pressed="true"] { background: var(--brand); color: #fff; } .menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-inline-start: auto; } .menu-toggle svg { width: 26px; height: 26px; stroke: var(--ink); } /* ---------- Hero ---------- */ .hero { position: relative; padding: 72px 0 80px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(1200px 520px at 50% -10%, var(--brand-tint), transparent 70%), linear-gradient(180deg, #fff, #fff); } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; font-size: 0.85rem; padding: 7px 14px; border-radius: 999px; margin-bottom: 18px; } .hero p.lede { font-size: 1.2rem; color: var(--ink-muted); max-width: 36ch; margin-bottom: 26px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .hero-art { display: flex; justify-content: center; } .app-tile { width: clamp(180px, 40vw, 260px); aspect-ratio: 1; border-radius: 28%; box-shadow: var(--shadow-lg); transform: rotate(-4deg); background: var(--brand); } [dir="rtl"] .app-tile { transform: rotate(4deg); } .badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 600; font-size: 0.9rem; transition: transform .12s ease, opacity .12s ease; } .badge:hover { text-decoration: none; transform: translateY(-1px); opacity: 0.9; color: #fff; } .badge small { display: block; font-size: 0.68rem; opacity: 0.75; font-weight: 500; line-height: 1; } .badge .badge-line { line-height: 1.15; } .badge-sm { padding: 7px 13px; border-radius: 10px; font-size: 0.82rem; } .badge-sm small { font-size: 0.62rem; } /* ---------- Sections ---------- */ section { padding: 68px 0; } .section-head { text-align: center; max-width: 40rem; margin-inline: auto; margin-bottom: 44px; } .section-head p { color: var(--ink-muted); font-size: 1.08rem; } .alt { background: var(--surface); } /* Steps */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .step { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 22px; box-shadow: var(--shadow); } .alt .step { background: #fff; } .step .num { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-tint); color: var(--brand-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; margin-bottom: 14px; } .step h3 { margin-bottom: 6px; } .step p { color: var(--ink-muted); margin: 0; font-size: 0.97rem; } /* Feature list */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature { padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--border); } .feature .ico { font-size: 1.7rem; margin-bottom: 10px; } .feature h3 { margin-bottom: 6px; } .feature p { color: var(--ink-muted); margin: 0; font-size: 0.96rem; } /* Apps / audiences */ .apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .app-card { position: relative; padding: 30px 26px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; } .app-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--brand); } .app-card .tag { font-size: 0.8rem; font-weight: 700; color: var(--brand-dark); text-transform: uppercase; letter-spacing: 0.04em; } .app-card h3 { font-size: 1.35rem; margin: 8px 0 10px; } .app-card p { color: var(--ink-muted); margin: 0; font-size: 0.98rem; } .app-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } /* CTA band */ .cta-band { background: linear-gradient(135deg, var(--brand), #4A8AF0); color: #fff; border-radius: 26px; padding: 52px 40px; text-align: center; } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(255, 255, 255, 0.9); max-width: 40rem; margin-inline: auto; } .cta-band .btn-ghost { background: #fff; color: var(--brand-dark); border-color: #fff; } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: #C7CDD6; padding: 54px 0 30px; margin-top: 20px; } .footer-grid { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; } .footer-brand { max-width: 30ch; } .footer-brand .brand { color: #fff; } .footer-brand p { color: #9AA2AE; font-size: 0.95rem; margin-top: 12px; } .footer-col h4 { color: #fff; font-size: 0.95rem; margin: 0 0 14px; } .footer-col h4 a { color: inherit; display: inline; padding: 0; } .footer-col a { display: block; color: #C7CDD6; padding: 5px 0; font-size: 0.95rem; } .footer-col a:hover { color: #fff; } .footer-bottom { border-top: 1px solid #232a33; margin-top: 40px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; color: #828b97; font-size: 0.88rem; } /* ---------- Legal pages ---------- */ .legal { padding: 48px 0 64px; } .legal .wrap { max-width: 820px; } .legal-back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-weight: 600; margin-bottom: 22px; } .legal-doc { white-space: pre-wrap; word-wrap: break-word; font-size: 1.02rem; line-height: 1.75; color: #2A313B; } .lang-section { display: none; } .lang-section.is-active { display: block; } .legal-meta { color: var(--ink-muted); font-size: 0.9rem; margin-bottom: 26px; } /* Documentation page (delete-your-data) */ .doc { font-size: 1.03rem; line-height: 1.72; color: #2A313B; } .doc h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin-bottom: 8px; } .doc .lede { color: var(--ink-muted); font-size: 1.12rem; margin-bottom: 8px; } .doc h2 { font-size: 1.25rem; margin: 34px 0 10px; } .doc p { margin: 0 0 1em; } .doc ol, .doc ul { margin: 0 0 1.1em; padding-inline-start: 1.4em; } .doc li { margin-bottom: 0.5em; } .note { background: var(--brand-tint); border: 1px solid #D3E2FD; border-radius: var(--radius); padding: 15px 18px; margin: 0 0 1.2em; } .note strong { color: var(--brand-dark); } .doc-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 6px; } .legal-links { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .legal-links a { font-weight: 700; } /* Account-deletion tool */ .tool { padding: 40px 0 64px; } .tool .wrap { max-width: 600px; } .tool h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 8px; } .tool .lede { color: var(--ink-muted); font-size: 1.05rem; } .tool-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); margin: 18px 0; } .field-label { display: block; font-weight: 700; margin: 4px 0 8px; font-size: 0.95rem; } .tool-input { width: 100%; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 1.05rem; font-family: inherit; background: #fff; color: var(--ink); } .tool-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .btn-danger { background: #D73A49; color: #fff; box-shadow: 0 8px 24px rgba(215, 58, 73, 0.22); } .btn-danger:hover { background: #B92D3B; } .btn-block { width: 100%; margin-top: 14px; } .btn-link { background: none; border: 0; color: var(--ink-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.92rem; padding: 8px 4px; margin-top: 6px; } .btn-link:disabled { opacity: 0.55; cursor: default; text-decoration: none; } .form-err { color: #C0392B; font-size: 0.9rem; min-height: 18px; margin: 8px 0 0; } .warn-box { background: #FDECEC; border: 1px solid #F5C2C7; color: #7F1D1D; border-radius: var(--radius); padding: 14px 16px; margin: 16px 0; font-size: 0.97rem; } .hidden { display: none !important; } .tool h2 { font-size: 1.15rem; margin: 26px 0 8px; } .tool ul { margin: 0 0 1em; padding-inline-start: 1.3em; color: #2A313B; } .tool li { margin-bottom: 0.4em; } .done-box { text-align: center; padding: 10px 0; } .done-box .done-ico { font-size: 2.4rem; } .done-box h2 { margin-top: 6px; } /* ---------- Get-the-app pages (/get/) ---------- */ .get { padding: 60px 0 72px; } .get-card { max-width: 560px; display: flex; flex-direction: column; align-items: center; text-align: center; } .get-icon { width: 96px; height: 96px; border-radius: 24%; box-shadow: var(--shadow-lg); margin-bottom: 20px; } .get-card h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); margin: 6px 0 10px; } .get-card .lede { color: var(--ink-muted); font-size: 1.12rem; margin-bottom: 4px; } .get-badges { justify-content: center; } .get-qr { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); } .get-qr img { width: 170px; height: 170px; margin-inline: auto; padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); } .get-qr p { color: var(--ink-muted); font-size: 0.92rem; margin: 10px 0 0; } .get-other { margin-top: 30px; font-size: 0.95rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; } .get-other a { font-weight: 700; } /* ---------- RTL fine-tuning ---------- */ [dir="rtl"] body { font-size: 17.5px; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } .hero-art { order: -1; } .hero p.lede { margin-inline: auto; } .hero-actions, .badges { justify-content: center; } .steps { grid-template-columns: repeat(2, 1fr); } .features, .apps { grid-template-columns: 1fr; } } @media (max-width: 720px) { .nav-links { display: none; } .nav-links.open { display: flex; flex-direction: column; align-items: stretch; position: absolute; inset-inline: 12px; top: 70px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); gap: 2px; } .nav-links.open a { padding: 12px 14px; } .menu-toggle { display: inline-flex; } .lang-switch { margin-inline-start: auto; } } @media (max-width: 480px) { .steps { grid-template-columns: 1fr; } .cta-band { padding: 40px 22px; } }