/* KidsPlay — site (landing, privacidade, termos) Identidade tirada do próprio app: gradiente azul→roxo do ícone, estrela dourada, paleta de tiles (Theme.kt) e fundo "Sunshine" (AppTheme.kt). Fonte Nunito servida localmente (mesmo arquivo do app Android, licença OFL) — nenhuma requisição a terceiros. */ @font-face{ font-family:"Nunito"; src:url("nunito.ttf") format("truetype"); font-weight:200 1000; font-style:normal; font-display:swap; } :root{ --bg-top:#FFF7E6; /* Sunshine light, topo */ --bg-bottom:#E8F4FF; /* Sunshine light, base */ --surface:#FFFFFF; --surface-2:#F6F3FF; --ink:#1F1D33; --ink-2:#55536B; --ink-3:#8A889C; --line:rgba(31,29,51,0.10); --blue:#4F8DFD; --purple:#9B6DFF; --green:#3DB46D; --pink:#FF6FA5; --orange:#FF9F43; --teal:#20C5C5; --star:#FFC21A; --star-edge:#FFB400; --brand-grad:linear-gradient(135deg,var(--blue),var(--purple)); --radius:28px; --radius-sm:18px; --shadow:0 10px 30px -12px rgba(60,50,120,0.25); --max:1120px; --font:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg-top:#2A2017; --bg-bottom:#121821; --surface:#1C1C22; --surface-2:#24222F; --ink:#F4F2FF; --ink-2:#C4C1D6; --ink-3:#8F8CA3; --line:rgba(255,255,255,0.10); --shadow:0 10px 30px -12px rgba(0,0,0,0.6); } } :root[data-theme="dark"]{ --bg-top:#2A2017; --bg-bottom:#121821; --surface:#1C1C22; --surface-2:#24222F; --ink:#F4F2FF; --ink-2:#C4C1D6; --ink-3:#8F8CA3; --line:rgba(255,255,255,0.10); --shadow:0 10px 30px -12px rgba(0,0,0,0.6); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--font); color:var(--ink); line-height:1.6; font-size:17px; background:var(--bg-bottom); background-image:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 70%); background-attachment:fixed; overflow-x:hidden; } img,svg{ max-width:100%; display:block; } a{ color:inherit; } :focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:8px; } /* Idioma: o conteúdo PT e EN fica no HTML; o decide qual aparece. */ html[lang="en"] [data-lang="pt"], html:not([lang="en"]) [data-lang="en"]{ display:none !important; } .wrap{ max-width:var(--max); margin:0 auto; padding:0 20px; } @media (max-width:480px){ .wrap{ padding:0 16px; } } /* ---------- NAV ---------- */ .nav{ position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); background:color-mix(in srgb, var(--bg-top) 78%, transparent); border-bottom:1px solid transparent; transition:border-color .2s; } .nav.scrolled{ border-bottom-color:var(--line); } .nav .wrap{ display:flex; align-items:center; gap:18px; height:68px; } .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:900; font-size:1.25rem; letter-spacing:-0.01em; } .brand img{ width:36px; height:36px; border-radius:10px; box-shadow:0 4px 12px -4px rgba(79,141,253,.6); } .nav-links{ display:flex; gap:22px; margin-left:auto; } .nav-links a{ text-decoration:none; font-weight:700; color:var(--ink-2); font-size:.95rem; } .nav-links a:hover{ color:var(--ink); } @media (max-width:760px){ .nav-links{ display:none; } .lang-switch{ margin-left:auto; } } .lang-switch{ display:flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px; } .lang-switch button{ font:inherit; font-weight:800; font-size:.8rem; border:0; background:transparent; color:var(--ink-3); padding:6px 12px; border-radius:999px; cursor:pointer; min-height:32px; } .lang-switch button.active{ background:var(--brand-grad); color:#fff; } /* ---------- HERO ---------- */ .hero{ padding:56px 0 40px; } .hero .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; } @media (max-width:900px){ .hero .wrap{ grid-template-columns:1fr; gap:36px; } } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.85rem; background:var(--surface); border:1px solid var(--line); padding:6px 14px; border-radius:999px; color:var(--ink-2); } .eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); } h1{ font-size:clamp(2.3rem,5.4vw,3.8rem); line-height:1.05; letter-spacing:-0.025em; font-weight:900; margin:18px 0 0; } h1 .grad{ background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .lead{ font-size:clamp(1.05rem,1.8vw,1.22rem); color:var(--ink-2); margin:20px 0 0; max-width:34em; } .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; } .store{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; background:var(--ink); color:var(--surface); border-radius:16px; padding:10px 18px 10px 14px; min-height:56px; transition:transform .15s; } .store:hover{ transform:translateY(-2px); } .store svg{ width:26px; height:26px; flex:none; } .store small{ display:block; font-size:.7rem; font-weight:700; opacity:.75; line-height:1.1; } .store b{ display:block; font-size:1.05rem; font-weight:900; line-height:1.15; } .store.soon{ background:var(--surface); color:var(--ink); border:1px solid var(--line); cursor:default; } .store.soon:hover{ transform:none; } .hint{ font-size:.85rem; color:var(--ink-3); margin-top:12px; } .hero-art{ position:relative; aspect-ratio:1/1; max-width:440px; width:100%; margin:0 auto; } .hero-art .icon{ position:absolute; top:14%; left:14%; width:72%; height:72%; border-radius:26%; box-shadow:0 30px 60px -20px rgba(91,90,230,.55); animation:bob 5s ease-in-out infinite; } .tile-float{ position:absolute; width:23%; aspect-ratio:1; border-radius:24%; display:grid; place-items:center; color:#fff; font-weight:900; font-size:clamp(1.2rem,3vw,1.8rem); box-shadow:var(--shadow); animation:bob 6s ease-in-out infinite; } .tile-float.t1{ background:var(--blue); top:2%; left:0; animation-delay:-1s; transform:rotate(-8deg); } .tile-float.t2{ background:var(--green); top:6%; right:0; animation-delay:-2.5s; } .tile-float.t3{ background:var(--pink); bottom:4%; left:4%; animation-delay:-3.5s; } .tile-float.t4{ background:var(--purple);bottom:0; right:6%; animation-delay:-.5s; } .tile-float svg{ width:52%; height:52%; } @keyframes bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* ---------- STATS ---------- */ .stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:24px 0 0; } @media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } .stats .s:last-child{ grid-column:1/-1; } } .stats .s{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; } .stats b{ display:block; font-size:1.7rem; font-weight:900; letter-spacing:-0.02em; line-height:1.1; } .stats span{ font-size:.88rem; color:var(--ink-2); font-weight:700; } /* ---------- SECTIONS ---------- */ section{ padding:72px 0; } .sec-head{ max-width:44em; margin-bottom:34px; } .kicker{ font-weight:900; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--purple); } h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.12; letter-spacing:-0.02em; font-weight:900; margin:8px 0 0; } .sec-head p{ color:var(--ink-2); font-size:1.08rem; margin:14px 0 0; } .grid{ display:grid; gap:18px; } .g2{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(3,1fr); } .g4{ grid-template-columns:repeat(4,1fr); } @media (max-width:980px){ .g4{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .g2,.g3,.g4{ grid-template-columns:1fr; } } .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); } .card h3{ font-size:1.2rem; font-weight:900; margin:14px 0 0; letter-spacing:-0.01em; } .card p{ color:var(--ink-2); margin:8px 0 0; font-size:.98rem; } .badge-ic{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff; } .badge-ic svg{ width:28px; height:28px; } .cat{ position:relative; overflow:hidden; } .cat .count{ position:absolute; top:22px; right:24px; font-weight:900; font-size:.85rem; color:var(--ink-3); } .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; } .chips span{ font-size:.82rem; font-weight:800; padding:5px 10px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); } .band{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .list-check{ list-style:none; padding:0; margin:0; display:grid; gap:14px; } .list-check li{ display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:start; } .list-check .ck{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--green) 16%,transparent); color:var(--green); } .list-check .ck svg{ width:18px; height:18px; } .list-check b{ display:block; font-weight:900; } .list-check span{ color:var(--ink-2); font-size:.97rem; } .privacy-hero{ background:var(--brand-grad); color:#fff; border-radius:var(--radius); padding:clamp(28px,5vw,52px); position:relative; overflow:hidden; } .privacy-hero h2{ color:#fff; } .privacy-hero p{ color:rgba(255,255,255,.88); } .privacy-hero .grid{ margin-top:26px; } .pv{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-sm); padding:18px; } .pv b{ display:block; font-weight:900; font-size:1.05rem; } .pv span{ font-size:.93rem; color:rgba(255,255,255,.88); } .btn-light{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; background:#fff; color:#3b2f8f; text-decoration:none; font-weight:900; padding:12px 20px; border-radius:999px; min-height:48px; } /* FAQ */ .faq{ display:grid; gap:12px; max-width:820px; } .faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px 22px; } .faq summary{ cursor:pointer; font-weight:900; padding:16px 0; list-style:none; display:flex; justify-content:space-between; gap:12px; min-height:48px; align-items:center; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; font-size:1.4rem; color:var(--purple); flex:none; transition:transform .2s; } .faq details[open] summary::after{ transform:rotate(45deg); } .faq details p{ margin:0 0 18px; color:var(--ink-2); } .contact{ text-align:center; } .contact .card{ padding:clamp(28px,5vw,52px); } .contact p{ max-width:36em; margin-left:auto; margin-right:auto; } .btn{ display:inline-flex; align-items:center; gap:8px; background:var(--brand-grad); color:#fff; text-decoration:none; font-weight:900; padding:13px 22px; border-radius:999px; min-height:48px; margin-top:22px; } /* FOOTER */ footer{ padding:40px 0 56px; color:var(--ink-3); font-size:.88rem; } footer .wrap{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; } footer nav{ display:flex; flex-wrap:wrap; gap:18px; } footer a{ text-decoration:none; font-weight:700; color:var(--ink-2); } footer a:hover{ color:var(--ink); } .trng-seal{ display:inline-flex; align-items:center; gap:8px; font-weight:800; } .trng-seal i{ font-style:normal; font-weight:900; letter-spacing:.04em; color:#C9A227; } /* ---------- PÁGINAS LEGAIS ---------- */ .legal{ padding:48px 0 24px; } .legal .doc{ max-width:780px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,5vw,56px); box-shadow:var(--shadow); } .legal h1{ font-size:clamp(2rem,4.4vw,2.8rem); margin:0; } .legal .meta{ color:var(--ink-3); font-weight:700; font-size:.9rem; margin-top:10px; } .legal h2{ font-size:1.3rem; margin:36px 0 0; } .legal h3{ font-size:1.05rem; margin:22px 0 0; font-weight:900; } .legal p, .legal li{ color:var(--ink-2); } .legal ul{ padding-left:1.2em; } .legal li{ margin:6px 0; } .legal .tldr{ background:var(--surface-2); border-radius:var(--radius-sm); padding:18px 22px; margin-top:24px; } .legal .tldr p{ margin:6px 0; color:var(--ink); } .legal table{ width:100%; border-collapse:collapse; margin-top:14px; font-size:.93rem; } .legal th, .legal td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; } .legal th{ color:var(--ink); font-weight:900; } .legal td{ color:var(--ink-2); } .table-scroll{ overflow-x:auto; } .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; } .reveal.in{ opacity:1; transform:none; }