/* =========================================================================== iDara Sign — Marketing landing styles (shared by EN + AR pages) Plain CSS, no build step. RTL handled via [dir="rtl"] overrides. =========================================================================== */ :root { /* Brand tokens mirrored from the Flutter app (AppColors) */ --primary: #007ec3; --secondary: #0d9488; --brand: #007ec3; /* kept for back-compat with blog styles */ --brand-dark: #015a96; --brand-light: #e6f3fb; --brand-gradient: linear-gradient(135deg, #0d9488 0%, #007ec3 100%); --brand-text-gradient: linear-gradient(135deg, #007ec3 0%, #0d9488 100%); --success: #10b981; --warning: #f59e0b; --info: #3b82f6; --error: #f43f5e; --ink: #0f172a; /* onSurface */ --muted: #475569; /* onSurfaceVariant */ --bg: #ffffff; --bg-soft: #f8fafc; /* background */ --surface: #ffffff; --surface-variant: #f1f5f9; --border: #e2e8f0; /* outline */ --radius: 16px; --shadow: 0 18px 36px rgba(15, 23, 42, 0.06); --shadow-lg: 0 26px 60px rgba(0, 126, 195, 0.14); --max: 1700px; /* matches the Flutter landing's MaxWidthCenter(1700) */ } /* Dark theme — toggled by data-theme="dark" on , mirrors app dark palette */ :root[data-theme="dark"] { --primary: #2a98d6; --secondary: #19a99b; --brand: #2a98d6; --brand-light: rgba(42, 152, 214, 0.14); --brand-gradient: linear-gradient(135deg, #19a99b 0%, #2a98d6 100%); --brand-text-gradient: linear-gradient(135deg, #2a98d6 0%, #19a99b 100%); --ink: #eaf0ff; --muted: #b6c2e2; --bg: #0b1224; --bg-soft: #0b1224; --surface: #111c33; --surface-variant: #23304a; --border: #2b3b63; --shadow: 0 18px 36px rgba(0, 0, 0, 0.45); --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Kufi Arabic", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } [dir="rtl"] body { font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; } /* ---------- Header / Nav ---------- */ /* Blog header — mirrors the landing's glassy branded pill (wl-header) */ header.site { position: sticky; top: 0; z-index: 50; padding: 14px 18px 0; background: transparent; } .nav { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(16px); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: 22px; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04); padding: 12px 18px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--ink); } .brand img { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: #fff; padding: 3px; } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-links a { color: var(--ink); font-weight: 700; font-size: 0.95rem; padding: 8px 14px; border-radius: 999px; } .nav-links a:hover { color: var(--primary); background: var(--surface-variant); text-decoration: none; } .lang-toggle { border: 1px solid var(--border); padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; color: var(--ink); background: var(--surface); } .lang-toggle:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 14px; cursor: pointer; font-size: 1.05rem; background: color-mix(in srgb, var(--surface) 74%, transparent); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); color: var(--ink); } .theme-toggle:hover { color: var(--primary); } @media (max-width: 720px) { .nav-links a:not(.lang-toggle) { display: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 1rem; cursor: pointer; border: 2px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn-primary { background: var(--brand-gradient); color: #fff; box-shadow: var(--shadow-lg); } .btn-primary:hover { filter: brightness(1.05); } .btn-ghost { background: var(--surface); color: var(--primary); border-color: var(--primary); } .btn-ghost:hover { border-color: var(--primary); } /* ---------- Hero ---------- */ .hero { background: radial-gradient(1200px 500px at 70% -10%, var(--brand-light), transparent), linear-gradient(180deg, #fff, var(--bg-soft)); padding: 70px 0 60px; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; } .pill { display: inline-block; background: var(--brand-light); color: var(--brand-dark); font-weight: 700; font-size: 0.8rem; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; } .hero h1 { font-size: clamp(2.1rem, 4.5vw, 3.3rem); line-height: 1.12; margin: 0 0 18px; letter-spacing: -0.02em; } .hero h1 .accent { color: var(--brand); } .hero p.lead { font-size: 1.18rem; color: var(--muted); margin: 0 0 30px; max-width: 540px; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; } .store-badges img { width: auto; } /* Apple's SVG is edge-to-edge; Google's PNG has ~16% built-in padding. Sizing them differently makes the actual buttons appear the same height. */ .store-badges .badge-apple { height: 42px; } .store-badges .badge-google { height: 62px; margin: 0 -7px; } .hero-visual { display: flex; justify-content: center; } .hero-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); padding: 26px; width: 100%; max-width: 380px; } .hero-card .doc-line { height: 12px; border-radius: 6px; background: var(--bg-soft); margin: 12px 0; } .hero-card .doc-line.short { width: 55%; } .hero-card .sig { margin-top: 22px; padding: 18px; border: 2px dashed var(--brand); border-radius: 12px; text-align: center; color: var(--brand); font-weight: 700; background: var(--brand-light); } .hero-card .sig svg { vertical-align: middle; } @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero-visual { order: -1; } } /* ---------- Trust strip ---------- */ .trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; padding: 22px 0; } .trust-grid { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; text-align: center; } .trust-grid .item { color: var(--muted); font-weight: 600; font-size: 0.95rem; } .trust-grid .item b { color: var(--ink); display: block; font-size: 1.4rem; } /* ---------- Sections ---------- */ section.block { padding: 80px 0; } section.block.soft { background: var(--bg-soft); } .section-head { text-align: center; max-width: 680px; margin: 0 auto 50px; } .section-head h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin: 0 0 14px; letter-spacing: -0.01em; } .section-head p { color: var(--muted); font-size: 1.1rem; margin: 0; } /* ---------- Features ---------- */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .feature .ico { width: 50px; height: 50px; border-radius: 12px; background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .feature h3 { margin: 0 0 8px; font-size: 1.15rem; } .feature p { margin: 0; color: var(--muted); font-size: 0.98rem; } @media (max-width: 880px) { .features { grid-template-columns: 1fr; } } /* ---------- Steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .step { text-align: center; } .step .num { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; } .step h3 { margin: 0 0 8px; font-size: 1.15rem; } .step p { margin: 0; color: var(--muted); } @media (max-width: 880px) { .steps { grid-template-columns: 1fr; gap: 36px; } } /* ---------- FAQ ---------- */ .faq { max-width: 760px; margin: 0 auto; } .faq details { border: 1px solid var(--border); border-radius: 12px; padding: 4px 20px; margin-bottom: 14px; background: #fff; } .faq summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; font-size: 1.05rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; float: right; color: var(--brand); font-size: 1.4rem; line-height: 1; } [dir="rtl"] .faq summary::after { float: left; } .faq details[open] summary::after { content: "–"; } .faq details p { margin: 0 0 16px; color: var(--muted); } /* ---------- CTA band ---------- */ .cta-band { background: linear-gradient(120deg, var(--brand), var(--brand-dark)); color: #fff; border-radius: 24px; padding: 56px 40px; text-align: center; box-shadow: var(--shadow); } .cta-band h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 0 0 14px; } .cta-band p { font-size: 1.1rem; opacity: 0.92; margin: 0 0 28px; } .cta-band .btn-primary { background: #fff; color: var(--brand); } .cta-band .btn-primary:hover { background: #f0f6fb; } .cta-band .store-badges { justify-content: center; } /* ---------- Article / Blog ---------- */ .article-hero { background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--secondary) 4%, transparent), var(--bg) ); border-bottom: 1px solid var(--border); padding: 66px 0 40px; } /* keep blog title aligned with the centered article body (not the 1700 container) */ .article-hero .container { max-width: 820px; } .breadcrumb { font-size: 0.9rem; color: var(--muted); margin-bottom: 16px; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--primary); } .article-hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 14px; max-width: 820px; } .article-meta { color: var(--muted); font-size: 0.95rem; } article.post { max-width: 760px; margin: 0 auto; padding: 50px 0; } article.post h2 { font-size: 1.5rem; margin: 38px 0 14px; letter-spacing: -0.01em; } article.post h3 { font-size: 1.2rem; margin: 28px 0 10px; } article.post p { color: var(--ink); font-size: 1.08rem; margin: 0 0 18px; } article.post ul, article.post ol { color: var(--ink); font-size: 1.08rem; padding-inline-start: 24px; margin: 0 0 18px; } article.post li { margin-bottom: 8px; } article.post .lede { font-size: 1.2rem; color: var(--muted); } .callout { background: var(--brand-light); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); border-inline-start: 4px solid var(--primary); border-radius: 12px; padding: 18px 22px; margin: 26px 0; } .callout p { margin: 0; color: var(--primary); font-size: 1rem; } .disclaimer { border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin: 30px 0 0; font-size: 0.92rem; color: var(--muted); background: var(--bg-soft); } .post-cta { margin: 40px 0 0; text-align: center; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; } .post-cta h3 { margin: 0 0 8px; } .post-cta p { margin: 0 0 20px; color: var(--muted); } /* ---------- Blog index ---------- */ .post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; max-width: 1080px; /* keep blog cards readable even though --max is now 1700 */ } .post-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; } .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration: none; } .post-card .tag { display: inline-block; background: var(--brand-light); color: var(--primary); font-weight: 700; font-size: 0.75rem; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; } .post-card h3 { margin: 0 0 10px; font-size: 1.25rem; line-height: 1.3; } .post-card p { margin: 0 0 14px; color: var(--muted); } .post-card .read-more { color: var(--brand); font-weight: 700; } @media (max-width: 760px) { .post-list { grid-template-columns: 1fr; } } /* =========================================================================== HOME PAGE — components mirrored from the Flutter WebLandingPage (namespaced wl-* so they never collide with the blog styles above) =========================================================================== */ body { background: var(--bg); color: var(--ink); transition: background 0.25s ease, color 0.25s ease; } .wl-wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; } .gradient-text { background: var(--brand-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hover-lift { transition: transform 0.18s ease, box-shadow 0.18s ease; } .hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } /* ---- Header (glassy, blurred, with theme + lang + login) ---- */ header.wl-header { position: sticky; top: 0; z-index: 60; padding: 14px 18px 0; } .wl-header-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(16px); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: 22px; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04); padding: 12px 18px; } .wl-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); } .wl-logo img { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: #fff; padding: 3px; } .wl-nav { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; } .wl-nav a { color: var(--ink); font-weight: 700; font-size: 0.95rem; padding: 8px 14px; border-radius: 999px; } .wl-nav a:hover { color: var(--primary); background: var(--surface-variant); text-decoration: none; } .wl-actions { display: flex; align-items: center; gap: 8px; } .wl-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 74%, transparent); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); color: var(--ink); cursor: pointer; font-size: 1.05rem; } .wl-icon-btn:hover { color: var(--primary); } .wl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; cursor: pointer; border: none; text-align: center; border-radius: 14px; padding: 12px 22px; font-size: 1rem; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .wl-btn:hover { text-decoration: none; transform: translateY(-2px); } .wl-btn-grad { background: var(--brand-gradient); color: #fff; box-shadow: var(--shadow-lg); } .wl-btn-grad:hover { filter: brightness(1.05); } .wl-btn-outline { background: var(--surface); color: var(--primary); border: 1.5px solid var(--primary); } .wl-btn-login { padding: 10px 22px; border-radius: 14px; } /* ---- Signed-in state ---- The Flutter app under /web/ shares this origin, so the session flag it writes to localStorage is readable here. An inline script in mirrors it onto before first paint, and these rules pick the variant, so there is no flash of the signed-out header. The landing only ever reads *whether* a session exists — never the token. */ .auth-in { display: none !important; } [data-auth="in"] .auth-out { display: none !important; } [data-auth="in"] .wl-btn.auth-in { display: inline-flex !important; } [data-auth="in"] .wl-signed-in { display: flex !important; } .wl-signed-in { flex-direction: column; align-items: center; gap: 16px; margin: 36px auto 0; max-width: 560px; padding: 28px; border-radius: 22px; background: color-mix(in srgb, var(--success) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 32%, transparent); box-shadow: var(--shadow); } .wl-signed-in .wl-btn { min-width: 240px; height: 56px; } .wl-signed-in-badge { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--success); color: #fff; font-size: 1.7rem; font-weight: 800; line-height: 1; box-shadow: 0 10px 24px color-mix(in srgb, var(--success) 40%, transparent); } .wl-signed-in-text { text-align: center; } .wl-signed-in-text strong { display: block; font-size: 1.25rem; font-weight: 800; color: var(--ink); } .wl-signed-in-text span { color: var(--muted); font-size: 0.97rem; } @media (max-width: 860px) { .wl-nav { display: none; } } /* ---- Hero ---- */ .wl-hero { padding: 64px 24px 56px; /* corner-to-corner + surface end-stop — matches the Flutter hero gradient exactly */ background: linear-gradient( to bottom right, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--secondary) 4%, transparent), var(--surface) ); } .wl-hero-card { max-width: 1000px; margin: 0 auto; text-align: center; padding: 16px 20px 8px; } .wl-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); color: var(--primary); font-weight: 800; font-size: 0.82rem; padding: 8px 18px; border-radius: 50px; box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05); border: 1px solid var(--border); } .wl-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; line-height: 1.15; margin: 28px 0 0; letter-spacing: -0.02em; } .wl-hero .sub { font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: var(--muted); max-width: 720px; margin: 22px auto 0; } .wl-join { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: 10px 20px; font-weight: 600; color: var(--muted); } .wl-avatars { display: inline-flex; } .wl-avatars span { width: 32px; height: 32px; border-radius: 50%; margin-inline-start: -10px; border: 2px solid var(--surface); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .wl-avatars span:first-child { margin-inline-start: 0; } .wl-cta-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 36px; } .wl-cta-row .wl-btn { min-width: 240px; height: 56px; } .wl-store { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 28px; } /* Unified store badges — same local SVG (120×40) at the same height in HTML & Flutter */ .store-badge { display: block; width: auto; height: 50px; } .wl-store .store-badge { height: 50px; } /* ---- Section scaffolding ---- */ .wl-section { padding: 80px 24px; } .wl-section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; } .wl-section-head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin: 0 0 14px; letter-spacing: -0.01em; } .wl-section-head p { font-size: clamp(1.05rem, 2vw, 1.4rem); color: var(--muted); margin: 0; } .wl-pill { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); color: var(--primary); font-weight: 800; font-size: 0.85rem; padding: 9px 16px; border-radius: 999px; } /* ---- Pricing panel ---- */ .wl-pricing-panel { position: relative; overflow: hidden; max-width: var(--max); margin: 0 auto; border: 1px solid color-mix(in srgb, var(--border) 50%, transparent); border-radius: 36px; padding: clamp(24px, 4vw, 44px); background: linear-gradient( 135deg, var(--surface), color-mix(in srgb, var(--primary) 3%, var(--surface)), color-mix(in srgb, var(--secondary) 5%, var(--surface)) ); box-shadow: var(--shadow); } .wl-orb { position: absolute; border-radius: 50%; filter: blur(8px); pointer-events: none; } .wl-orb.a { width: 220px; height: 220px; top: -70px; right: -40px; background: radial-gradient( circle, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70% ); } .wl-orb.b { width: 180px; height: 180px; bottom: -50px; left: -20px; background: radial-gradient( circle, color-mix(in srgb, var(--secondary) 22%, transparent), transparent 70% ); } .wl-pricing-top { position: relative; display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: center; } .wl-pricing-top h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); font-weight: 800; margin: 18px 0 14px; line-height: 1.12; } .wl-pricing-top .sub { color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); margin: 0; line-height: 1.5; } .wl-highlights { background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius: 28px; padding: 24px; } .wl-highlights h3 { margin: 0 0 16px; font-size: 1.2rem; font-weight: 800; } .wl-hl-tile { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--surface-variant) 60%, transparent); margin-bottom: 12px; } .wl-hl-tile:last-child { margin-bottom: 0; } .wl-hl-ico { width: 42px; height: 42px; flex: none; border-radius: 14px; background: var(--brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center; } .wl-hl-tile span { font-weight: 700; } @media (max-width: 1000px) { .wl-pricing-top { grid-template-columns: 1fr; } } .wl-cards { position: relative; display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; } .wl-pkg { flex: 1 1 320px; max-width: 380px; padding: 24px; border-radius: 28px; border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); background: linear-gradient( 135deg, var(--surface), color-mix(in srgb, var(--surface) 96%, transparent) ); box-shadow: 0 16px 26px rgba(15, 23, 42, 0.05); display: flex; flex-direction: column; } .wl-pkg.featured { border-color: color-mix(in srgb, var(--primary) 28%, transparent); background: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 11%, var(--surface)), color-mix(in srgb, var(--secondary) 9%, var(--surface)), var(--surface) ); box-shadow: 0 22px 40px color-mix(in srgb, var(--primary) 14%, transparent); } .wl-pkg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .wl-pkg-coins { background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--primary); font-weight: 800; font-size: 0.85rem; padding: 8px 14px; border-radius: 18px; } .wl-pkg h3 { font-size: 1.5rem; font-weight: 800; margin: 22px 0 10px; } .wl-pkg .desc { color: var(--muted); line-height: 1.55; margin: 0; min-height: 3em; } .wl-pkg .price { font-size: 1.9rem; font-weight: 900; margin: 24px 0 6px; } .wl-pkg .per { color: var(--muted); font-weight: 600; font-size: 0.9rem; margin: 0 0 24px; } .wl-pkg .wl-btn { width: 100%; height: 54px; margin-top: auto; } .wl-footnote { text-align: center; color: var(--muted); margin: 28px 0 0; } .wl-skel { flex: 1 1 320px; max-width: 380px; height: 340px; border-radius: 28px; border: 1px solid var(--border); background: linear-gradient( 100deg, var(--surface-variant) 30%, color-mix(in srgb, var(--surface-variant) 50%, var(--surface)) 50%, var(--surface-variant) 70% ); background-size: 200% 100%; animation: wl-shimmer 1.3s infinite; } @keyframes wl-shimmer { to { background-position: -200% 0; } } /* ---- How it works (faint app_board image under the brand gradient — mirrors Flutter) ---- */ .wl-how { padding: 80px 24px; background-image: linear-gradient( 135deg, color-mix(in srgb, var(--primary) 92%, transparent), color-mix(in srgb, var(--secondary) 86%, transparent) ), url("/assets/images/app_board.png"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } .wl-how h2, .wl-how .sub { color: #fff; text-align: center; } .wl-how h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; margin: 0; } .wl-how .sub { font-size: clamp(1.1rem, 2.2vw, 1.6rem); opacity: 0.85; margin: 14px 0 0; } /* Wider container (matches Flutter's 1700px) so 4 cards sit on one row on wide screens and wrap fluidly to 3 / 2 / 1 as the viewport narrows. */ .wl-how .wl-wrap { max-width: 1700px; } .wl-steps { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; margin-top: 56px; } .wl-step { flex: 0 1 350px; max-width: 350px; padding: 32px; border-radius: 20px; text-align: center; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; } .wl-step .num { width: 50px; height: 50px; margin: 0 auto 16px; border-radius: 50%; background: var(--brand-text-gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; } .wl-step h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 8px; } .wl-step p { opacity: 0.9; margin: 0; } /* ---- Features (accent cards) ---- */ /* Wider container (matches Flutter's 1700px) so 4 cards sit on one row on wide screens and wrap fluidly to 3 / 2 / 1 as the viewport narrows. */ .wl-features-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; max-width: 1700px; } .wl-feature { flex: 0 1 320px; max-width: 320px; padding: 32px; border-radius: 16px; background: linear-gradient( 135deg, var(--surface), color-mix(in srgb, var(--accent, var(--primary)) 8%, var(--surface)) ); border: 1px solid color-mix(in srgb, var(--accent, var(--primary)) 18%, transparent); box-shadow: 0 15px 24px rgba(15, 23, 42, 0.05); } .wl-feature .ico { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: color-mix( in srgb, var(--accent, var(--primary)) 14%, transparent ); margin-bottom: 16px; } .wl-feature h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 8px; } .wl-feature p { color: var(--muted); margin: 0; } /* ---- FAQ ---- */ .wl-faq { max-width: 980px; margin: 0 auto; } .wl-faq details { background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: 16px; padding: 4px 24px; margin-bottom: 16px; } .wl-faq summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; } .wl-faq summary::-webkit-details-marker { display: none; } .wl-faq summary::after { content: "⌄"; color: var(--primary); font-size: 1.3rem; transition: transform 0.2s ease; } .wl-faq details[open] summary::after { transform: rotate(180deg); } .wl-faq details p { color: var(--muted); line-height: 1.6; margin: 0 0 20px; } /* ---- Contact form ---- */ .wl-contact { max-width: 760px; margin: 0 auto; } .wl-field { width: 100%; margin-bottom: 16px; } .wl-field input, .wl-field textarea, .wl-field select { width: 100%; padding: 15px 16px; border-radius: 14px; font: inherit; background: var(--surface); color: var(--ink); border: 1.5px solid var(--border); transition: border-color 0.15s ease; } .wl-field input:focus, .wl-field textarea:focus, .wl-field select:focus { outline: none; border-color: var(--primary); } .wl-field textarea { resize: vertical; min-height: 130px; } .wl-phone-row { display: flex; gap: 10px; } .wl-phone-row select { max-width: 130px; } /* Custom country dropdown — mirrors the Flutter CountryPickerField (flag + (+code)) */ .wl-cc { position: relative; flex: none; } .wl-cc-trigger { display: flex; align-items: center; gap: 8px; height: 100%; min-height: 54px; padding: 0 14px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; font: inherit; color: var(--ink); white-space: nowrap; } .wl-cc-trigger:hover { border-color: var(--primary); } .wl-cc-trigger .flag { font-size: 18px; } .wl-cc-trigger .chev { color: var(--muted); transition: transform .15s ease; } .wl-cc.open .wl-cc-trigger .chev { transform: rotate(180deg); } .wl-cc-menu { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 240px; max-height: 300px; overflow-y: auto; z-index: 90; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; display: none; } .wl-cc.open .wl-cc-menu { display: block; } .wl-cc-opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; cursor: pointer; font-weight: 700; color: var(--ink); } .wl-cc-opt:hover, .wl-cc-opt.active { background: var(--surface-variant); } .wl-cc-opt .flag { font-size: 18px; } .wl-cc-opt .name { color: var(--muted); font-weight: 500; font-size: .85rem; margin-inline-start: auto; } .wl-field .err { color: var(--error); font-size: 0.85rem; margin: 6px 2px 0; display: none; } .wl-field.invalid input, .wl-field.invalid textarea, .wl-field.invalid select { border-color: var(--error); } .wl-field.invalid .err { display: block; } .wl-contact .wl-btn { width: 100%; height: 56px; background: var(--primary); color: #fff; } .wl-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 14px 22px; border-radius: 14px; color: #fff; font-weight: 700; box-shadow: var(--shadow-lg); z-index: 200; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; } .wl-toast.show { opacity: 1; } .wl-toast.ok { background: var(--success); } .wl-toast.bad { background: var(--error); } /* ---- CTA band ---- */ .wl-cta-band { max-width: var(--max); margin: 0 auto; border-radius: 28px; padding: 56px 32px; text-align: center; background: var(--brand-gradient); color: #fff; box-shadow: var(--shadow-lg); } .wl-cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 14px; } .wl-cta-band p { font-size: 1.15rem; opacity: 0.92; margin: 0 0 28px; } .wl-cta-band .wl-btn { background: #fff; color: var(--primary); min-width: 220px; height: 56px; } /* ---------- Footer ---------- */ /* Always-dark footer — fixed colors so it stays visible in light AND dark themes */ footer.site { background: #0B1224; color: #aeb9c7; padding: 56px 0 30px; border-top: 3px solid transparent; border-image: var(--brand-gradient) 1; } footer.site .container { padding-top: 0; } footer.site .f-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; margin-bottom: 36px; } footer.site .brand { color: #fff; } footer.site .brand img { background: #fff; padding: 3px; border-radius: 12px; } footer.site .f-col { display: flex; flex-direction: column; gap: 12px; min-width: 140px; } footer.site .f-col h4 { color: #fff; font-size: 1rem; font-weight: 800; margin: 0 0 4px; } footer.site a { color: #aeb9c7; font-size: 0.95rem; } footer.site a:hover { color: #fff; } footer.site .f-links { display: flex; flex-wrap: wrap; gap: 28px; } footer.site .f-store { display: flex; flex-direction: column; gap: 12px; } footer.site .f-store .store-badge { height: 46px; } footer.site .copyright { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 22px; font-size: 0.9rem; text-align: center; }