/* * Dion landing page. * * Bilingual and direction-aware: the toggle flips , and every rule * below uses logical properties (inline-start/end, margin-inline) so the whole * layout mirrors without a second stylesheet. */ :root, :root[data-theme="light"] { --bg: #f7f9f8; --bg-alt: #ffffff; --surface: #ffffff; --border: #dde6e3; --text: #0d1a18; --muted: #4d615c; --faint: #748681; --accent: #12645a; --accent-deep: #0c4d46; --cost: #a3452e; --caution: #855410; --hero-glow-a: rgba(18, 100, 90, 0.10); --hero-glow-b: rgba(18, 100, 90, 0.07); --phone-shell: #d7e0dd; --phone-shadow: rgba(13, 26, 24, 0.18); --track: #e2eae7; color-scheme: light; } :root[data-theme="dark"] { --bg: #0d1211; --bg-alt: #121917; --surface: #172020; --border: #253230; --text: #e8efec; --muted: #9bafa9; --faint: #6a7c77; --accent: #6fc2b0; --accent-deep: #1b5e5a; --cost: #e08b74; --caution: #e0b25e; --hero-glow-a: rgba(111, 194, 176, 0.14); --hero-glow-b: rgba(27, 94, 90, 0.20); --phone-shell: #0a0f0e; --phone-shadow: rgba(0, 0, 0, 0.55); --track: #23302e; color-scheme: dark; } /* Safety net if the pre-paint script is blocked. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0d1211; --bg-alt: #121917; --surface: #172020; --border: #253230; --text: #e8efec; --muted: #9bafa9; --faint: #6a7c77; --accent: #6fc2b0; --accent-deep: #1b5e5a; --cost: #e08b74; --caution: #e0b25e; --hero-glow-a: rgba(111, 194, 176, 0.14); --hero-glow-b: rgba(27, 94, 90, 0.20); --phone-shell: #0a0f0e; --phone-shadow: rgba(0, 0, 0, 0.55); --track: #23302e; color-scheme: dark; } } :root { --radius: 16px; --wrap: 1120px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { margin: 0; background: var(--bg); transition: background-color .15s ease, color .15s ease; color: var(--text); font-family: "Cairo", "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; } html[lang="en"] body { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; line-height: 1.65; } img, svg { display: block; max-width: 100%; } h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.02em; font-weight: 800; } p { margin: 0; } a { color: inherit; text-decoration: none; } .wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; } .wrap-narrow { width: min(100% - 40px, 760px); } .eyebrow { color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; } /* ---------------- Nav ---------------- */ .nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-block-end: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; gap: 24px; height: 66px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; } .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(140deg, var(--accent), var(--accent-deep)); color: var(--bg-alt); display: grid; place-items: center; font-size: 16px; font-weight: 900; } .nav-links { display: flex; gap: 22px; margin-inline-start: auto; } .nav-links a { color: var(--muted); font-size: 15px; font-weight: 600; } .nav-links a:hover { color: var(--text); } .nav-actions { display: flex; align-items: center; gap: 10px; } .lang-btn { font: inherit; font-size: 13px; font-weight: 700; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; cursor: pointer; } .lang-btn:hover { color: var(--text); border-color: var(--faint); } .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 700; border: 1px solid transparent; padding: 12px 22px; cursor: pointer; font-family: inherit; font-size: 16px; } .btn-sm { padding: 8px 16px; font-size: 14px; } .btn-primary { background: var(--accent); color: var(--bg-alt); } .btn-primary:hover { background: var(--accent-deep); } :root[data-theme="dark"] .btn-primary:hover { background: #86d5c3; } /* ---------------- Hero ---------------- */ .hero { padding-block: clamp(48px, 8vw, 96px) clamp(56px, 9vw, 104px); background: radial-gradient(900px 420px at 80% -10%, var(--hero-glow-a), transparent 65%), radial-gradient(700px 360px at 10% 0%, var(--hero-glow-b), transparent 60%); } .hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero h1 { font-size: clamp(34px, 5.2vw, 56px); } .hero h1 em { display: block; font-style: normal; color: var(--accent); } .lede { color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); margin-block-start: 20px; max-width: 54ch; } .store-row { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; } .store-btn { display: inline-flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 10px 18px; min-width: 176px; } .store-btn:hover { border-color: var(--faint); } .store-btn svg { width: 26px; height: 26px; fill: var(--text); flex: none; } .store-btn small { display: block; font-size: 11px; color: var(--faint); line-height: 1.3; } .store-btn strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; } .store-note { margin-block-start: 14px; color: var(--faint); font-size: 14px; } /* Phone mock */ .hero-visual { display: flex; justify-content: center; } .phone { width: 290px; border-radius: 38px; padding: 12px; background: var(--phone-shell); border: 1px solid var(--border); box-shadow: 0 30px 70px var(--phone-shadow); position: relative; } .phone-notch { position: absolute; inset-inline: 0; margin-inline: auto; top: 12px; width: 92px; height: 20px; background: var(--phone-shell); border-radius: 0 0 12px 12px; z-index: 2; } .phone-screen { background: var(--bg-alt); border-radius: 28px; padding: 40px 18px 22px; min-height: 500px; } .ps-title { color: var(--faint); font-size: 12px; font-weight: 700; } .ps-amount { font-size: 30px; font-weight: 800; margin-block-start: 4px; letter-spacing: -0.02em; } .ps-amount span { font-size: 15px; color: var(--muted); font-weight: 600; } .ps-bar { height: 7px; border-radius: 99px; background: var(--track); margin-block-start: 14px; overflow: hidden; } .ps-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; } .ps-sub { color: var(--faint); font-size: 11.5px; margin-block-start: 8px; line-height: 1.55; } .ps-alert { margin-block-start: 16px; padding: 11px 12px; border-radius: 12px; background: color-mix(in srgb, var(--cost) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cost) 28%, transparent); color: var(--cost); font-size: 11.5px; line-height: 1.55; } .ps-section { margin-block-start: 22px; font-size: 13px; font-weight: 800; } .ps-card { margin-block-start: 10px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } .ps-card-title { font-size: 12.5px; font-weight: 700; } .ps-compare { display: flex; align-items: center; gap: 9px; margin-block-start: 7px; font-size: 13px; } .ps-quoted { color: var(--faint); text-decoration: line-through; } .ps-arrow { color: var(--faint); font-size: 12px; } .ps-actual { color: var(--cost); font-weight: 800; } /* ---------------- Sections ---------------- */ .section { padding-block: clamp(56px, 8vw, 96px); } .section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); } .section h2 { font-size: clamp(26px, 3.4vw, 38px); max-width: 22ch; } .section-lede { color: var(--muted); margin-block-start: 16px; max-width: 62ch; font-size: 17px; } .compare-grid, .feature-grid { display: grid; gap: 18px; margin-block-start: 40px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .compare-card, .feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .compare-card h3, .feature h3 { font-size: 19px; } .compare-card p, .feature p { color: var(--muted); font-size: 15px; margin-block-start: 10px; } .compare-nums { display: flex; align-items: center; gap: 14px; margin-block-start: 18px; padding-block-start: 16px; border-block-start: 1px solid var(--border); font-size: 24px; font-weight: 800; } .compare-nums .q { color: var(--faint); text-decoration: line-through; font-weight: 600; } .compare-nums .a { color: var(--cost); } .compare-nums .a::before { content: "←"; color: var(--faint); font-size: 16px; margin-inline-end: 12px; } html[dir="ltr"] .compare-nums .a::before { content: "→"; } .feature-icon { width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); display: grid; place-items: center; font-size: 19px; margin-block-end: 16px; } /* Steps */ .steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .steps li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .step-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 800; font-size: 15px; margin-block-end: 16px; } .steps h3 { font-size: 18px; } .steps p { color: var(--muted); font-size: 15px; margin-block-start: 10px; } /* FAQ */ details { border-block-end: 1px solid var(--border); padding-block: 18px; } details:first-of-type { margin-block-start: 36px; border-block-start: 1px solid var(--border); } summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; color: var(--accent); font-size: 22px; font-weight: 400; flex: none; } details[open] summary::after { content: "−"; } details p { color: var(--muted); font-size: 15px; margin-block-start: 12px; max-width: 68ch; } /* CTA */ .cta { padding-block: clamp(56px, 8vw, 92px); background: radial-gradient(700px 300px at 50% 0%, var(--hero-glow-a), transparent 70%); border-block-start: 1px solid var(--border); } .cta-inner { text-align: center; } .cta h2 { font-size: clamp(25px, 3.2vw, 34px); margin-inline: auto; max-width: 20ch; } .cta > .wrap > p { color: var(--muted); margin-block-start: 14px; } .notify { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-block-start: 28px; } .notify input { font: inherit; flex: 1 1 260px; max-width: 340px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 12px 15px; } .notify input:focus { outline: none; border-color: var(--accent-deep); } .notify-note { color: var(--faint); font-size: 13px; margin-block-start: 14px; } /* Footer */ .footer { border-block-start: 1px solid var(--border); padding-block: 34px; background: var(--bg-alt); } .footer-inner { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; } .footer-note { color: var(--faint); font-size: 13.5px; margin-block-start: 12px; max-width: 48ch; } .footer-links { display: flex; gap: 20px; color: var(--muted); font-size: 15px; font-weight: 600; } .footer-links a:hover { color: var(--text); } @media (max-width: 880px) { .hero-inner { grid-template-columns: 1fr; } .hero-visual { order: -1; } .phone { width: 260px; } .nav-links { display: none; } } /* ---------------- Legal and support pages ---------------- */ .legal { padding-block: clamp(36px, 6vw, 72px) clamp(48px, 7vw, 88px); } .legal h1 { font-size: clamp(28px, 4vw, 40px); } .legal .updated { color: var(--faint); font-size: 14px; margin-block-start: 10px; } .legal .lede { color: var(--muted); font-size: 17px; margin-block-start: 18px; } .legal h2 { font-size: 21px; margin-block: 42px 12px; } .legal h3 { font-size: 17px; margin-block: 22px 6px; } .legal p, .legal li { color: var(--muted); } .legal p + p { margin-block-start: 12px; } .legal ul, .legal ol { margin: 12px 0 0; padding-inline-start: 24px; } .legal li + li { margin-block-start: 7px; } .legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .legal strong { color: var(--text); } .legal .toc { margin-block-start: 26px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .legal .toc-title { color: var(--text); font-weight: 700; font-size: 14px; margin-block-end: 6px; } .legal .toc ol { margin-block-start: 0; font-size: 15px; columns: 2 240px; column-gap: 32px; } .legal .toc li { break-inside: avoid; } .legal .callout { margin-block-start: 22px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--accent); border-radius: var(--radius); } .legal .callout p { color: var(--text); } .legal .callout.caution { border-inline-start-color: var(--caution); } .legal .contact-card { margin-block-start: 22px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: 6px; } .legal .contact-card dt { color: var(--faint); font-size: 13px; font-weight: 700; } .legal .contact-card dd { margin: 0 0 8px; color: var(--text); font-weight: 600; direction: ltr; text-align: start; } .legal .contact-card dd:last-child { margin-block-end: 0; } .legal .qa { margin-block-start: 28px; } .legal .qa h3 { margin-block-start: 26px; } .nav-plain-links { display: flex; gap: 22px; margin-inline-start: auto; } .nav-plain-links a { color: var(--muted); font-size: 15px; font-weight: 600; } .nav-plain-links a:hover, .nav-plain-links a[aria-current="page"] { color: var(--text); } .footer-links { flex-wrap: wrap; } @media (max-width: 880px) { .nav-plain-links { display: none; } }