/* ========================================================================== MagicAlive Kids — companion site styles Brand palette and tokens come straight from DESIGN.md §7.1. ========================================================================== */ :root { /* Brand palette (DESIGN.md §7.1) */ --yellow: #FFD700; --blue-bg: #E3F4FC; --lavender: #F0EAFF; --coral: #FF6B6B; --teal: #00C2A8; --sky: #4ECDC4; --lime: #95E06C; --ocean: #1A8FBF; --orange: #FF9F43; --purple: #A855F7; --gold: #FFD700; --ink: #2b2342; /* headings */ --body: #4a4458; /* body copy */ --muted: #7c7690; --white: #ffffff; --radius: 22px; --radius-sm:14px; --shadow: 0 18px 40px -18px rgba(43, 35, 66, .35); --shadow-sm:0 8px 20px -10px rgba(43, 35, 66, .35); --maxw: 1120px; --font: "Fredoka", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--body); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--ocean); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { color: var(--ink); line-height: 1.15; margin: 0 0 .4em; font-weight: 700; } h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); } h3 { font-size: 1.2rem; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .section { padding: 76px 0; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; } .section-head p { color: var(--muted); font-size: 1.08rem; margin: 0; } /* hide elements of the non-active language; JS sets */ [data-en], [data-es] { display: none; } html[lang="en"] [data-en] { display: revert; } html[lang="es"] [data-es] { display: revert; } /* ---------- Buttons ---------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font); font-weight: 600; font-size: 1.05rem; padding: 14px 26px; border-radius: 999px; border: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .btn:hover { transform: translateY(-2px); text-decoration: none; } .btn-primary { background: var(--teal); color: #fff; box-shadow: var(--shadow-sm); } .btn-ghost { background: rgba(255,255,255,.6); color: var(--ink); } /* Google Play badge button */ .play-badge { display: inline-flex; align-items: center; gap: 12px; background: #1a1a1a; color: #fff; padding: 11px 22px 11px 18px; border-radius: 14px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .play-badge:hover { transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow); } .play-badge svg { width: 30px; height: 33px; flex: none; } .play-badge .pb-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .play-badge .pb-small { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; } .play-badge .pb-big { font-size: 1.25rem; font-weight: 600; } /* ---------- Top navigation -------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(43,35,66,.06); } .nav-inner { display: flex; align-items: center; gap: 16px; height: 68px; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink); font-size: 1.2rem; } .brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: var(--shadow-sm); } .nav-spacer { flex: 1; } .nav .play-badge { padding: 8px 16px 8px 14px; } .nav .play-badge svg { width: 22px; height: 24px; } .nav .play-badge .pb-big { font-size: 1rem; } .nav .play-badge .pb-small { font-size: .58rem; } /* language toggle */ .lang-toggle { display: inline-flex; background: var(--lavender); border-radius: 999px; padding: 4px; } .lang-toggle button { border: none; background: transparent; cursor: pointer; font-family: var(--font); font-weight: 600; font-size: .9rem; color: var(--muted); padding: 6px 14px; border-radius: 999px; } .lang-toggle button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); } /* ---------- Hero ------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 80% 0%, #FFE873 0%, var(--yellow) 45%, #FFC93C 100%); } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.5); filter: blur(2px); } .hero::before { width: 220px; height: 120px; left: -40px; top: 60px; border-radius: 80px; box-shadow: 90px 30px 0 -10px rgba(255,255,255,.45); } .hero::after { width: 160px; height: 90px; right: 8%; bottom: 40px; border-radius: 60px; opacity: .6; } .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 70px 0 84px; } .hero h1 { color: #3a2d05; text-shadow: 0 2px 0 rgba(255,255,255,.55); } .hero-lead { font-size: 1.22rem; color: #5b4a14; max-width: 32ch; margin: 0 0 26px; } .hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .hero-meta { margin-top: 16px; font-size: .92rem; color: #6a5717; font-weight: 600; } /* phone mock in hero */ .phone { width: 280px; max-width: 78%; margin: 0 auto; border-radius: 38px; background: #1a1a1a; padding: 12px; box-shadow: 0 30px 60px -20px rgba(43,35,66,.5); position: relative; } .phone::before { /* speaker notch */ content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 54px; height: 6px; border-radius: 6px; background: #333; z-index: 2; } .phone img { border-radius: 28px; } .hero-phone { display: flex; justify-content: center; } /* ---------- Trust strip ----------------------------------------------- */ .trust { background: var(--white); border-bottom: 1px solid rgba(43,35,66,.06); } .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 26px 0; } .chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; color: var(--ink); background: var(--blue-bg); padding: 9px 16px; border-radius: 999px; } .chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); flex: none; } /* ---------- Features --------------------------------------------------- */ .features { background: linear-gradient(180deg, #fff 0%, var(--blue-bg) 100%); } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .card { background: #fff; border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); border: 1px solid rgba(43,35,66,.05); transition: transform .18s ease, box-shadow .18s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .card .ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; margin-bottom: 16px; color: #fff; } .card h3 { margin-bottom: 6px; } .card p { margin: 0; color: var(--body); font-size: .98rem; } /* ---------- Two-column lists (kids / grown-ups) ----------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .panel { border-radius: var(--radius); padding: 32px 30px; } .panel.kids { background: var(--lavender); } .panel.parents { background: var(--blue-bg); } .panel h3 { font-size: 1.35rem; margin-bottom: 16px; } .panel ul { list-style: none; margin: 0; padding: 0; } .panel li { position: relative; padding: 8px 0 8px 34px; font-size: 1.03rem; } .panel li::before { content: "✦"; position: absolute; left: 4px; top: 8px; color: var(--teal); font-size: 1.05rem; } .panel.parents li::before { content: "✓"; color: var(--ocean); } /* ---------- Screenshot gallery ---------------------------------------- */ .shots { background: linear-gradient(180deg, var(--lavender) 0%, #fff 100%); } .shot-track { display: flex; gap: 22px; overflow-x: auto; padding: 8px 4px 26px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .shot-track::-webkit-scrollbar { height: 8px; } .shot-track::-webkit-scrollbar-thumb { background: rgba(43,35,66,.18); border-radius: 999px; } .shot { flex: 0 0 auto; scroll-snap-align: center; } .shot .phone { width: 240px; margin: 0; } .shot figcaption { text-align: center; margin-top: 14px; font-weight: 600; color: var(--ink); font-size: .95rem; } /* ---------- Final CTA -------------------------------------------------- */ .cta { text-align: center; background: radial-gradient(120% 140% at 50% 0%, #FFE873 0%, var(--yellow) 60%, #FFC42E 100%); } .cta h2 { color: #3a2d05; text-shadow: 0 2px 0 rgba(255,255,255,.5); } .cta p { color: #5b4a14; font-size: 1.12rem; margin: 0 0 26px; } .cta .play-badge { margin: 0 auto; } /* ---------- Footer ----------------------------------------------------- */ .footer { background: var(--ink); color: #cfc9e0; padding: 48px 0 36px; } .footer-inner { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; } .footer .brand { color: #fff; } .footer a { color: #fff; } .footer-links { display: flex; flex-wrap: wrap; gap: 22px; font-weight: 600; } .footer-note { width: 100%; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .9rem; color: #a8a1c2; } /* ---------- Responsive ------------------------------------------------- */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; text-align: center; padding-bottom: 60px; } .hero-lead { margin-left: auto; margin-right: auto; } .hero-cta { justify-content: center; } .hero-phone { order: -1; } .feature-grid { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; } } @media (max-width: 600px) { .section { padding: 56px 0; } .feature-grid { grid-template-columns: 1fr; } .brand span { display: none; } /* keep icon, drop wordmark on tiny screens */ .nav .play-badge .pb-text { display: none; } .nav .play-badge { padding: 8px; } .nav .play-badge svg { width: 24px; height: 26px; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } /* ---------- Legal / prose pages --------------------------------------- */ .legal-hero { background: linear-gradient(180deg, var(--lavender) 0%, #fff 100%); padding: 56px 0 36px; } .legal { max-width: 800px; margin: 0 auto; padding: 28px 22px 80px; } .legal h2 { margin-top: 38px; } .legal h2:first-child { margin-top: 0; } .legal p, .legal li { font-size: 1.04rem; } .legal ul { padding-left: 22px; } .legal li { margin: 6px 0; } .legal .updated { color: var(--muted); font-weight: 600; } .legal .back { display: inline-block; margin-bottom: 8px; font-weight: 600; }