/* ============================================================ WimziPal — marketing site styles Brand: Fredoka (display) + Nunito (body) Palette pulled from the app's design board. Theme directions switch via ============================================================ */ :root { /* Brand palette */ --purple: #9B61FF; --purple-deep: #6A3BF0; --blue: #4CC3FF; --pink: #FF5DB8; --orange: #FFB347; --yellow: #FFD93D; --green: #54C96B; --ink: #2A174D; /* primary text on light surfaces */ --ink-soft: #6B5B8E; /* secondary text on light surfaces */ --line: rgba(42, 23, 77, 0.10); /* Theme-driven (overridden per data-theme below) */ --accent: #6A3BF0; --page-text: #2A174D; --page-text-soft: #6B5B8E; --surface: #FFFFFF; --surface-2: #F7F2FF; --card: #FFFFFF; --card-border: rgba(42, 23, 77, 0.08); --card-shadow: 0 18px 50px -20px rgba(42, 23, 77, 0.35); --hero-text: #FFFFFF; --hero-text-soft: rgba(255,255,255,0.82); --radius-lg: 32px; --radius-md: 22px; --radius-sm: 14px; --maxw: 1200px; --font-display: "Fredoka", system-ui, sans-serif; --font-body: "Nunito", system-ui, sans-serif; } /* ---------- Theme: Cosmic Dream (default) ---------- */ [data-theme="cosmic"] { --accent: #FFB347; --page-bg: radial-gradient(1200px 800px at 50% -10%, #5a2da8 0%, #3a1a78 45%, #25104f 100%); --page-text: #FFFFFF; --page-text-soft: rgba(255,255,255,0.78); --surface: rgba(255,255,255,0.06); --surface-2: rgba(255,255,255,0.04); --card: rgba(255,255,255,0.07); --card-border: rgba(255,255,255,0.14); --card-shadow: 0 24px 60px -24px rgba(0,0,0,0.55); --section-alt-bg: rgba(255,255,255,0.04); --starfield: 1; } /* ---------- Theme: Soft Sky (light, calm, parent-first) ---------- */ [data-theme="sky"] { --accent: #6A3BF0; --page-bg: linear-gradient(180deg, #eaf4ff 0%, #f3ecff 40%, #fff4fb 100%); --page-text: #2A174D; --page-text-soft: #6B5B8E; --surface: #FFFFFF; --surface-2: #F7F2FF; --card: #FFFFFF; --card-border: rgba(42, 23, 77, 0.08); --card-shadow: 0 18px 50px -22px rgba(106, 59, 240, 0.35); --section-alt-bg: rgba(255,255,255,0.55); --starfield: 0; } /* ---------- Theme: Candy Pop (bright, bold) ---------- */ [data-theme="candy"] { --accent: #FF5DB8; --page-bg: linear-gradient(180deg, #fff0f8 0%, #f0e9ff 50%, #e8f8ff 100%); --page-text: #2A174D; --page-text-soft: #6B5B8E; --surface: #FFFFFF; --surface-2: #FFF3FB; --card: #FFFFFF; --card-border: rgba(255, 93, 184, 0.18); --card-shadow: 0 18px 44px -20px rgba(255, 93, 184, 0.4); --section-alt-bg: rgba(255,255,255,0.6); --starfield: 0; } /* ============================================================ Base ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-weight: 600; color: var(--page-text); background: var(--page-bg) fixed; background-attachment: fixed; -webkit-font-smoothing: antialiased; line-height: 1.55; overflow-x: hidden; } /* Starfield overlay (only when --starfield:1) */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--starfield, 0); transition: opacity 0.4s ease; background-image: radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.9), transparent), radial-gradient(1.5px 1.5px at 28% 42%, rgba(255,255,255,0.7), transparent), radial-gradient(2px 2px at 47% 12%, rgba(255,255,255,0.9), transparent), radial-gradient(1.5px 1.5px at 63% 30%, rgba(255,255,255,0.7), transparent), radial-gradient(1.5px 1.5px at 78% 16%, rgba(255,255,255,0.85), transparent), radial-gradient(2px 2px at 88% 44%, rgba(255,255,255,0.75), transparent), radial-gradient(1.5px 1.5px at 8% 62%, rgba(255,255,255,0.7), transparent), radial-gradient(1.5px 1.5px at 35% 78%, rgba(255,255,255,0.6), transparent), radial-gradient(2px 2px at 70% 72%, rgba(255,255,255,0.7), transparent), radial-gradient(1.5px 1.5px at 92% 82%, rgba(255,255,255,0.6), transparent); background-repeat: no-repeat; } main, header, footer { position: relative; z-index: 1; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } a { color: inherit; text-decoration: none; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 17px; padding: 15px 26px; border-radius: 999px; border: 0; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease; white-space: nowrap; } .btn:active { transform: translateY(1px) scale(0.99); } .btn--primary { color: #fff; background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%); box-shadow: 0 12px 28px -10px rgba(106, 59, 240, 0.7), inset 0 1px 0 rgba(255,255,255,0.4); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(106, 59, 240, 0.8), inset 0 1px 0 rgba(255,255,255,0.4); } .btn--sun { color: #5a3a00; background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%); box-shadow: 0 12px 28px -10px rgba(255, 179, 71, 0.8), inset 0 1px 0 rgba(255,255,255,0.6); } .btn--sun:hover { transform: translateY(-2px); } .btn--ghost { background: var(--surface); color: var(--page-text); border: 1.5px solid var(--card-border); } .btn--ghost:hover { transform: translateY(-2px); } /* App store badge buttons */ .store-badges { display: flex; flex-wrap: wrap; gap: 14px; } .store-badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 18px; border-radius: 16px; background: #1a1130; color: #fff; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5); transition: transform 0.14s ease, box-shadow 0.2s ease; } .store-badge:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(0,0,0,0.6); } .store-badge svg { width: 26px; height: 26px; flex: none; } .store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.1; } .store-badge .sb-small { font-family: var(--font-body); font-size: 11px; font-weight: 700; opacity: 0.8; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; white-space: nowrap; } .store-badge .sb-big { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.1; white-space: nowrap; } /* ============================================================ Header / nav ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.3s ease, box-shadow 0.3s ease; } .site-header.scrolled { background: color-mix(in srgb, var(--page-text) 6%, transparent); box-shadow: 0 1px 0 var(--card-border); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 92px; } .nav__logo { display: flex; align-items: center; gap: 10px; } .nav__logo img { height: 60px; width: auto; display: block; } .nav__links { display: flex; align-items: center; gap: 30px; font-family: var(--font-display); font-weight: 500; font-size: 16px; } .nav__links a { opacity: 0.85; transition: opacity 0.15s ease; } .nav__links a:hover { opacity: 1; } .nav__cta { display: flex; align-items: center; gap: 14px; } .nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav__burger span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--page-text); margin: 5px 0; } /* ============================================================ Hero ============================================================ */ .hero { position: relative; padding: 56px 0 40px; overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 32px; align-items: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; background: var(--surface); border: 1px solid var(--card-border); color: var(--page-text); } .hero h1 { font-size: clamp(40px, 6vw, 68px); letter-spacing: -0.01em; margin-bottom: 20px; } .hero h1 .pop { color: var(--accent); } .hero__sub { font-size: clamp(17px, 2vw, 20px); font-weight: 600; color: var(--page-text-soft); max-width: 30em; margin-bottom: 30px; } .hero__cta { display: flex; flex-direction: column; gap: 18px; } .hero__note { font-size: 14px; font-weight: 700; color: var(--page-text-soft); display: flex; align-items: center; gap: 8px; } .hero__art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; } .hero__art img.hero-char { width: 100%; max-width: 520px; height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.35)); position: relative; z-index: 2; } .hero__halo { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; z-index: 1; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 65%); filter: blur(20px); animation: pulse 6s ease-in-out infinite; } @keyframes pulse { 0%,100%{ transform: scale(1); opacity: 0.85; } 50%{ transform: scale(1.08); opacity: 1; } } .floaty { animation: floaty 5.5s ease-in-out infinite; } @keyframes floaty { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-16px); } } /* small floating sticker chips around hero */ .hero__chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--card-border); padding: 10px 16px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--page-text); box-shadow: var(--card-shadow); backdrop-filter: blur(8px); } .hero__chip .dot { width: 9px; height: 9px; border-radius: 50%; } .hero__chip--1 { top: 8%; left: -2%; } .hero__chip--2 { top: 40%; right: -4%; } .hero__chip--3 { bottom: 8%; left: 6%; } [data-anim="off"] .floaty, [data-anim="off"] .hero__halo { animation: none; } /* ============================================================ Trust strip ============================================================ */ .trust { padding: 18px 0; } .trust__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 32px; font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--page-text-soft); } .trust__item { display: inline-flex; align-items: center; gap: 9px; } .trust__item svg { width: 20px; height: 20px; color: var(--green); flex: none; } /* ============================================================ Section scaffolding ============================================================ */ .section { padding: 84px 0; position: relative; } .section--alt { background: var(--section-alt-bg); } .section__head { text-align: center; max-width: 40rem; margin: 0 auto 52px; } .section__kicker { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .section h2 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 16px; } .section__head p { font-size: 18px; font-weight: 600; color: var(--page-text-soft); margin: 0; } /* ============================================================ Buddies grid ============================================================ */ .buddies-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .buddy { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); transition: transform 0.18s ease, box-shadow 0.2s ease; } .buddy:hover { transform: translateY(-6px); } .buddy { cursor: pointer; } .buddy:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* Speaker badge — signals "tap to hear me say hello" (top-right, clear of the Free tag). */ .buddy__play { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20, 10, 40, 0.55); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; } .buddy__play svg { width: 19px; height: 19px; display: block; } .buddy:hover .buddy__play { background: var(--accent); color: #2A174D; } .buddy.is-playing .buddy__play { background: var(--accent); color: #2A174D; animation: buddyPulse 0.9s ease-in-out infinite; } @keyframes buddyPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 179, 71, 0.5); } 50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(255, 179, 71, 0); } } @media (prefers-reduced-motion: reduce) { .buddy.is-playing .buddy__play { animation: none; } } .buddy__img { width: 100%; aspect-ratio: 1024 / 1536; object-fit: cover; display: block; } .buddy__body { padding: 16px 18px 20px; } .buddy__species { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 2px; } .buddy__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; margin-bottom: 7px; } .buddy__bio { font-size: 14.5px; font-weight: 600; color: var(--page-text-soft); margin: 0; } .buddy__tag { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-display); font-weight: 600; font-size: 12px; padding: 5px 11px; border-radius: 999px; color: #5a3a00; background: linear-gradient(135deg, var(--yellow), var(--orange)); box-shadow: 0 6px 14px -6px rgba(255,179,71,0.9); } .buddies-more { text-align: center; margin-top: 38px; font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--page-text-soft); } /* ============================================================ How it works ============================================================ */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .step { text-align: center; padding: 8px; } .step__num { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: #fff; background: linear-gradient(135deg, var(--purple), var(--purple-deep)); box-shadow: 0 12px 24px -10px rgba(106,59,240,0.7); } .step h3 { font-size: 23px; margin-bottom: 10px; } .step p { font-size: 16px; font-weight: 600; color: var(--page-text-soft); margin: 0; } /* ============================================================ Feature cards (What kids love) ============================================================ */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feature { border-radius: var(--radius-md); padding: 28px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); transition: transform 0.18s ease; } .feature:hover { transform: translateY(-5px); } .feature__icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 18px; color: #fff; } .feature__icon svg { width: 30px; height: 30px; } .feature h3 { font-size: 22px; margin-bottom: 8px; } .feature p { font-size: 15.5px; font-weight: 600; color: var(--page-text-soft); margin: 0; } .ic-voice { background: linear-gradient(135deg, #6A3BF0, #9B61FF); } .ic-song { background: linear-gradient(135deg, #FF5DB8, #FF8FAB); } .ic-story { background: linear-gradient(135deg, #4CC3FF, #4A8CFF); } .ic-fact { background: linear-gradient(135deg, #FFB347, #FFD93D); color: #5a3a00; } .ic-camera{ background: linear-gradient(135deg, #54C96B, #2FB8A8); } .ic-memory{ background: linear-gradient(135deg, #A78BFA, #6A3BF0); } /* ============================================================ Safety section ============================================================ */ .safety { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; } .safety__art { position: relative; display: flex; justify-content: center; } .safety__art img { width: 100%; max-width: 460px; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,0.3)); } .safety__list { display: grid; gap: 16px; margin-top: 26px; } .safety__item { display: flex; gap: 14px; align-items: flex-start; } .safety__item .chk { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--green), #2FB8A8); color: #fff; margin-top: 2px; } .safety__item .chk svg { width: 16px; height: 16px; } .safety__item h4 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 2px; } .safety__item p { font-size: 15px; font-weight: 600; color: var(--page-text-soft); margin: 0; } /* ============================================================ Founder note ============================================================ */ .founder { border-radius: var(--radius-lg); padding: 52px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; } .founder__badge { width: 130px; height: 130px; border-radius: 30px; flex: none; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--purple), var(--pink)); box-shadow: 0 16px 36px -14px rgba(106,59,240,0.6); } .founder__badge img { width: 100%; height: 100%; object-fit: cover; } .founder blockquote { margin: 0; } .founder__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.3; margin-bottom: 16px; } .founder__by { font-size: 15px; font-weight: 800; color: var(--page-text-soft); } /* ============================================================ Pricing ============================================================ */ .pricing { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 860px; margin: 0 auto; } .plan { position: relative; border-radius: var(--radius-md); padding: 34px 32px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } .plan--featured { border: 2px solid var(--accent); } .plan__flag { position: absolute; top: -14px; right: 26px; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: 13px; padding: 6px 16px; border-radius: 999px; color: #5a3a00; background: linear-gradient(135deg, var(--yellow), var(--orange)); box-shadow: 0 8px 18px -8px rgba(255,179,71,0.9); } .plan h3 { font-size: 26px; margin-bottom: 6px; } .plan__price { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; margin: 12px 0 4px; } .plan__price span { font-size: 17px; font-weight: 600; color: var(--page-text-soft); } .plan__period { font-size: 14px; font-weight: 700; color: var(--page-text-soft); margin-bottom: 22px; } .plan ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; } .plan li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; font-weight: 600; } .plan li svg { width: 19px; height: 19px; color: var(--green); flex: none; margin-top: 2px; } .plan .btn { width: 100%; justify-content: center; } /* ============================================================ FAQ ============================================================ */ .faq { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; } .faq__item { border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--card-border); overflow: hidden; } .faq__q { width: 100%; text-align: left; cursor: pointer; border: 0; background: none; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--page-text); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq__q .pm { flex: none; width: 26px; height: 26px; display: grid; place-items: center; transition: transform 0.2s ease; color: var(--accent); font-size: 22px; } .faq__item[open] .faq__q .pm { transform: rotate(45deg); } .faq__a { padding: 0 24px 22px; font-size: 16px; font-weight: 600; color: var(--page-text-soft); } .faq__item summary::-webkit-details-marker { display: none; } /* ============================================================ Final CTA ============================================================ */ .final-cta { text-align: center; border-radius: var(--radius-lg); padding: 64px 40px; background: linear-gradient(135deg, #6A3BF0, #9B61FF 55%, #FF5DB8); color: #fff; box-shadow: 0 30px 70px -28px rgba(106,59,240,0.8); position: relative; overflow: hidden; } .final-cta h2 { font-size: clamp(30px, 4.5vw, 48px); margin-bottom: 16px; color: #fff; } .final-cta p { font-size: 19px; font-weight: 600; color: rgba(255,255,255,0.9); margin: 0 auto 30px; max-width: 30em; } .final-cta .store-badges { justify-content: center; } .final-cta__icon { width: 92px; height: 92px; border-radius: 24px; margin: 0 auto 24px; display: block; box-shadow: 0 18px 40px -14px rgba(0,0,0,0.5); } /* ============================================================ Footer ============================================================ */ .site-footer { padding: 56px 0 40px; border-top: 1px solid var(--card-border); margin-top: 20px; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; } .footer__brand img { height: 56px; margin-bottom: 14px; } .footer__brand p { font-size: 15px; font-weight: 600; color: var(--page-text-soft); margin: 0; max-width: 26em; } .footer__col h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0 0 14px; } .footer__col a { display: block; font-size: 15px; font-weight: 600; color: var(--page-text-soft); margin-bottom: 10px; transition: color 0.15s ease; } .footer__col a:hover { color: var(--page-text); } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--card-border); font-size: 14px; font-weight: 700; color: var(--page-text-soft); } /* ============================================================ Sub-page (legal/support) content ============================================================ */ .doc { max-width: 820px; margin: 0 auto; padding: 56px 0 40px; } .doc__back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; color: var(--accent); margin-bottom: 28px; } .doc h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 10px; } .doc__meta { font-size: 14px; font-weight: 700; color: var(--page-text-soft); margin-bottom: 40px; } .doc h2 { font-size: 26px; margin: 40px 0 14px; } .doc h3 { font-size: 20px; margin: 26px 0 10px; font-family: var(--font-display); font-weight: 600; } .doc p, .doc li { font-size: 16.5px; font-weight: 600; color: var(--page-text); opacity: 0.92; } .doc p { margin: 0 0 16px; } .doc ul { padding-left: 22px; margin: 0 0 20px; display: grid; gap: 8px; } .doc a.inline { color: var(--accent); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } .doc__card { border-radius: var(--radius-md); padding: 28px 30px; margin: 0 0 22px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } .doc__contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; margin: 24px 0; } /* ============================================================ Reveal-on-scroll ============================================================ */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: none; } /* ============================================================ Coming-soon modal ============================================================ */ .modal { position: fixed; inset: 0; z-index: 2000; display: none; } .modal.is-open { display: block; } .modal__backdrop { position: absolute; inset: 0; background: rgba(16, 8, 40, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: modalFade 0.2s ease; } .modal__card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 36px)); text-align: center; background: linear-gradient(180deg, #2a174d 0%, #1f1142 100%); border: 1px solid rgba(255,255,255,0.14); border-radius: 28px; padding: 38px 32px 30px; color: #fff; box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7); animation: modalPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } @keyframes modalPop { from { opacity: 0; transform: translate(-50%, -46%) scale(0.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .modal__x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; font-size: 15px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); transition: background 0.15s ease, color 0.15s ease; } .modal__x:hover { background: rgba(255,255,255,0.2); color: #fff; } .modal__icon { width: 84px; height: 84px; border-radius: 22px; margin: 0 auto 18px; display: block; box-shadow: 0 16px 36px -14px rgba(0,0,0,0.6); } .modal__pill { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; font-family: var(--font-display); font-weight: 600; font-size: 13px; padding: 7px 15px; border-radius: 999px; color: #5a3a00; background: linear-gradient(135deg, var(--yellow), var(--orange)); } .modal__card h3 { font-family: var(--font-display); font-weight: 700; font-size: 30px; margin: 0 0 12px; color: #fff; } .modal__card p { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.82); margin: 0 auto 24px; max-width: 30em; } .modal__card .btn { width: 100%; justify-content: center; margin-bottom: 12px; } .modal__later { appearance: none; border: 0; background: none; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 15px; color: rgba(255,255,255,0.6); padding: 6px; } .modal__later:hover { color: #fff; } @media (prefers-reduced-motion: reduce) { .modal__backdrop, .modal__card { animation: none; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .floaty, .hero__halo { animation: none; } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; gap: 10px; } .hero__art { order: -1; min-height: 320px; margin-bottom: 8px; } .hero__cta { align-items: flex-start; } .buddies-grid { grid-template-columns: repeat(3, 1fr); } .safety { grid-template-columns: 1fr; gap: 28px; } .safety__art { max-width: 360px; margin: 0 auto; } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .nav__links { display: none; } .nav__cta .btn--ghost { display: none; } .nav__burger { display: block; } .nav__links.open { display: flex; flex-direction: column; position: absolute; top: 92px; left: 0; right: 0; background: var(--page-bg); padding: 20px 24px 26px; gap: 18px; border-bottom: 1px solid var(--card-border); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.4); } .steps, .features, .pricing, .buddies-grid { grid-template-columns: 1fr; } .buddies-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .founder { grid-template-columns: 1fr; padding: 34px 26px; text-align: center; } .founder__badge { margin: 0 auto; } .section { padding: 60px 0; } .footer__grid { grid-template-columns: 1fr; } } @media (max-width: 460px) { /* Keep two columns on phones (like the in-app picker) so the portrait cards stay compact instead of ballooning to full width. */ .buddies-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .buddy__body { padding: 10px 12px 14px; } .buddy__species { font-size: 10px; } .buddy__name { font-size: 17px; margin-bottom: 5px; } .buddy__bio { font-size: 12.5px; } }