/* ============================================================ WimziPal — marketing site styles Brand: Nunito throughout — weight, not typeface, carries hierarchy 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: 1280px; --font-display: "Nunito", "SF Pro Rounded", system-ui, sans-serif; --font-body: "Nunito", "SF Pro Rounded", 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.86); --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; } /* Accessibility: visible keyboard focus + skip link */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Centred on purpose: parked at the left it dropped straight onto the logo, which read as the logo jumping the moment you pressed Tab. */ .skip-link { position: fixed; left: 50%; transform: translateX(-50%); top: -60px; z-index: 1000; background: #fff; color: #25104f; padding: 10px 16px; border-radius: 10px; font-family: var(--font-display); font-weight: 700; text-decoration: none; box-shadow: 0 10px 28px -8px rgba(0,0,0,0.5); transition: top 0.15s ease; } .skip-link:focus { top: 12px; } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } body { margin: 0; font-family: var(--font-body); font-weight: 400; 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: 800; letter-spacing: -0.015em; 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; } /* Inline custom icons — behave like an emoji sized to the surrounding text */ .emoji-ico { height: 1.3em; width: auto; vertical-align: -0.28em; display: inline-block; } /* Slightly larger in a few display contexts for optical balance */ .hero__eyebrow .emoji-ico, .kora__badge .emoji-ico { height: 1.45em; vertical-align: -0.32em; } .doc__card h3 .emoji-ico { height: 1.4em; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; 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, #7B45F5 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--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: 700; 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: 600; 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: 0.94fr 1.06fr; gap: 28px; align-items: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; 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.022em; margin-bottom: 20px; } .hero__sub { font-size: clamp(17px, 2vw, 20px); font-weight: 400; 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; } /* Alpha-channel character loops. No drop-shadow: it would re-blur the whole frame 15 times a second for a shadow the animation already carries. */ .hero__art video.hero-char { width: 100%; max-width: 720px; height: auto; position: relative; z-index: 2; } /* Low Power Mode, Reduce Motion and Low Data Mode all make iOS refuse to autoplay, and WebKit then paints its own start-playback glyph over the clip. On a transparent character that reads as a broken video rather than a still. Every clip already ships a poster of its own first frame, so hide the glyph and let the poster stand in. Scoped to the alpha loops by [data-webm]: the promo video has real controls and must keep them. */ video[data-webm]::-webkit-media-controls, video[data-webm]::-webkit-media-controls-start-playback-button, video[data-webm]::-webkit-media-controls-panel, video[data-webm]::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; appearance: none; opacity: 0; } .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: 700; 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: 600; 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: 62px 0; position: relative; } .section--alt { background: var(--section-alt-bg); } /* One left edge down the whole page. Centred heads above left-aligned card grids gave the page two personalities, split roughly at the fold: the top half left, the bottom half centred. */ .section__head { text-align: left; max-width: 46rem; margin: 0 auto 36px 0; } .section__kicker { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .section h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; } .section__head p { font-size: 16.5px; font-weight: 400; color: var(--page-text-soft); margin: 0; } /* Promo video */ #video { padding-bottom: 0; } .promo-video { position: relative; max-width: 960px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: #1A0E33; aspect-ratio: 16 / 9; box-shadow: 0 24px 70px rgba(0,0,0,.38); } .promo-video video { display: block; width: 100%; height: 100%; object-fit: cover; } /* Full-cover tap-to-play overlay (guaranteed gesture playback). */ .promo-play { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 0; cursor: pointer; color: #fff; background: radial-gradient(120% 120% at 50% 45%, rgba(26,14,51,.12), rgba(26,14,51,.5)); transition: opacity .3s ease; } .promo-play__icon { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,93,184,.95); box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: promoPulse 1.9s ease-in-out infinite; transition: transform .18s ease; } .promo-play__icon svg { width: 40px; height: 40px; margin-left: 4px; } .promo-play__label { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.55); } .promo-play:hover .promo-play__icon { transform: scale(1.06); } .promo-play.is-hidden { opacity: 0; pointer-events: none; } @keyframes promoPulse { 0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 0 rgba(255,93,184,.55); } 50% { box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 18px rgba(255,93,184,0); } } @media (prefers-reduced-motion: reduce) { .promo-play__icon { animation: none; } } /* ============================================================ 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; } /* Golden halo while a buddy is introducing itself. */ .buddy.is-live { border-color: rgba(255,205,110,0.85); box-shadow: 0 0 0 2px rgba(255,205,110,0.6), 0 0 26px 2px rgba(255,190,90,0.75), 0 0 64px 14px rgba(255,170,60,0.45), 0 22px 46px -22px rgba(0,0,0,0.55); transform: translateY(-6px); } .buddy.is-live .buddy__name { color: #FFD08A; } /* Info badge — one per card. Tapping the card plays the buddy's greeting, then its story right after. Top-right corner. */ .buddy__info { /* HIDDEN at Maka's request, 2026-08-30. The card itself still plays the greeting on tap; this removes only the visual cue. To bring it back, set display back to flex — the rest of the rule is untouched. */ display: none; position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; 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__info svg { width: 20px; height: 20px; display: block; } .buddy:hover .buddy__info { background: var(--accent); color: #2A174D; } .buddy.is-playing .buddy__info { 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__info { animation: none; } } .buddy__img { width: 100%; aspect-ratio: 1024 / 1536; object-fit: cover; display: block; border-radius: var(--radius-md); } .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: 800; font-size: 22px; line-height: 1.1; margin-bottom: 7px; } .buddy__bio { font-size: 14.5px; font-weight: 400; color: var(--page-text-soft); margin: 0; } .buddy__topic { font-size: 13px; font-weight: 400; color: var(--page-text-soft); opacity: .82; margin: 9px 0 0; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.10); } .buddy__topic span { display: block; font-family: var(--font-display); font-weight: 800; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); opacity: .9; margin-bottom: 3px; } .buddies-more { text-align: center; margin-top: 38px; font-family: var(--font-display); font-weight: 400; 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: 800; 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: 400; color: var(--page-text-soft); margin: 0; } /* ============================================================ Feature cards (What kids love) ============================================================ */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feature { border-radius: var(--radius-sm); padding: 22px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); transition: transform 0.18s ease; } .feature:hover { transform: translateY(-5px); } /* Glossy 3D icons from the app, so the site and the product look like the same thing. They carry their own colour and shading, so the tile behind them is a plain translucent surface now rather than the old per-icon gradient. */ .feature__icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 12px; color: #fff; background: rgba(255,255,255,0.07); border: 1px solid var(--card-border); } .feature__icon svg { width: 23px; height: 23px; } .feature__icon img { width: 36px; height: 36px; display: block; } .feature h3 { font-size: 18.5px; margin-bottom: 5px; } .feature p { font-size: 14.5px; line-height: 1.5; font-weight: 400; color: var(--page-text-soft); margin: 0; } /* ============================================================ Safety section ============================================================ */ .safety { display: grid; grid-template-columns: 0.94fr 1.06fr; gap: 40px; align-items: center; } .safety__art { position: relative; display: flex; justify-content: center; } .safety__art img { width: 100%; max-width: 500px; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,0.3)); } .safety__art video { width: 100%; max-width: 520px; height: auto; } /* Source is 1280 wide, so capping display at 720 keeps it near 2x on retina. */ .buddies-lineup { display: block; width: 100%; max-width: 720px; height: auto; margin: 8px auto 0; } .buddies-cta { text-align: center; margin-top: 20px; } /* ---------- Illustrations sit beside their copy once there is room ---------- Both of these used to take a full row of their own under a centred block of text, which cost a lot of vertical space for no extra clarity. */ @media (min-width: 940px) { /* Sides alternate down the page: hero art right, this one left, the buddy lineup right, the safety dome left. */ .safety-door .wrap { display: grid; grid-template-columns: 0.94fr 1.06fr; gap: 40px; align-items: center; } .safety-door .safety-door__anim { grid-column: 1; grid-row: 1; margin: 0; max-width: 100%; } .safety-door .safety-door__head { grid-column: 2; grid-row: 1; text-align: start; max-width: none; margin: 0; } .safety-door .safety-door__rule { margin-inline: 0 auto; } .safety-door .safety-door__lede { text-align: start; margin-inline-start: 0; max-width: none; } /* the proof link carries an inline margin, hence the override */ .safety-door .safety__proof { grid-column: 1 / -1; margin: 4px auto 2px !important; } #buddies .wrap { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 36px; align-items: center; } #buddies .section__head { grid-column: 1; text-align: start; margin: 0; max-width: none; } .buddies-lineup { grid-column: 2; margin: 0; max-width: 100%; } .buddies-cta { grid-column: 1; text-align: start; margin: 22px 0 0; grid-row: 2; } } .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: -4px; } .safety__item .chk svg { width: 16px; height: 16px; } /* Prefixed with .safety__list so these win over the generic .doc h3 / .doc p rules (same specificity, defined later) — otherwise the doc styles inject a 26px top-margin + bigger font that pushes the title down and breaks the check-circle alignment. */ .safety__list .safety__item h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2; margin: 0 0 2px; } .safety__list .safety__item p { font-size: 15px; font-weight: 400; color: var(--page-text-soft); opacity: 1; margin: 0; } /* KORA red-team proof card — the evidence under the safety promises above. */ .kora { display: block; max-width: 860px; margin: 34px auto 0; padding: 22px 24px; background: var(--card); border: 1px solid var(--card-border); border-left: 4px solid var(--green); border-radius: 18px; box-shadow: var(--card-shadow); color: inherit; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; } .kora:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -24px rgba(42, 23, 77, 0.45); } .kora__badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--green); } .kora__head { display: block; font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.25; margin-bottom: 9px; } .kora__body { font-size: 14.5px; font-weight: 400; color: var(--page-text-soft); margin: 0 0 12px; } .kora__cta { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent); } .kora:hover .kora__cta { text-decoration: underline; } /* ============================================================ 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: minmax(192px, 256px) 1fr; gap: 44px; align-items: center; } .founder__photo { border-radius: 24px; overflow: hidden; flex: none; border: 1px solid var(--card-border); box-shadow: 0 20px 44px -18px rgba(106,59,240,0.55); } .founder__photo img { display: block; width: 100%; height: auto; } .founder blockquote { margin: 0; } .founder__quote { font-family: var(--font-display); font-weight: 400; 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 ============================================================ */ /* auto-fit + minmax(min(100%,260px),1fr) = 3 cols on desktop, 2 on tablet, 1 on phone, and never overflows (plain repeat(3,1fr) let wide cards clip the 3rd). */ .pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 22px; max-width: 1040px; margin: 0 auto; align-items: start; } .plan { min-width: 0; 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); } /* Four plans (Free / Playtime / Premium Monthly / Premium Annual). ONE ROW ON DESKTOP is the requirement, so the card shrinks with the viewport instead of the grid dropping to 2x2 the moment a laptop window is narrower than a full screen — a 1280px window and a 1000px window should both show the ladder in a single scan. Everything below is fluid down to the 820px break, where four tracks stop being readable and it folds to 2x2. */ .pricing.pricing--four { max-width: 100%; gap: clamp(10px, 1.3vw, 18px); grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Doubled class so these survive the one-column `.pricing` rule further down, which would otherwise collapse the four plans at every width below 900px. */ @media (max-width: 820px) { .pricing.pricing--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .pricing.pricing--four { grid-template-columns: 1fr; } } .pricing--four .plan { padding: clamp(20px, 2.1vw, 28px) clamp(14px, 1.7vw, 22px); } .pricing--four .plan h3 { font-size: clamp(18px, 1.7vw, 22px); } /* $49.99 is the longest price and sets the floor here: below ~26px it still fits a 190px card without the "/ yr" wrapping onto its own line. */ .pricing--four .plan__price { font-size: clamp(26px, 2.7vw, 36px); margin: 10px 0 4px; } .pricing--four .plan__price span { font-size: clamp(13px, 1.15vw, 15px); } .pricing--four .plan__period { font-size: clamp(12px, 1vw, 13px); margin-bottom: clamp(14px, 1.4vw, 18px); } .pricing--four .plan__save { font-size: clamp(11px, 0.95vw, 12.5px); padding: 3px 8px; margin: -10px 0 16px; } .pricing--four .plan__flag { right: clamp(12px, 1.6vw, 26px); font-size: clamp(11.5px, 1vw, 13px); padding: 5px 12px; } .pricing--four .plan ul { gap: clamp(8px, 0.9vw, 10px); margin-bottom: clamp(16px, 1.8vw, 22px); } .pricing--four .plan li { font-size: clamp(12.5px, 1.13vw, 14.5px); } /* The bullet text is a single child on purpose: `.plan li` is a flex container, so an inline inside bare text would become its OWN flex item and get the 11px gap around it — "About | 171 voice chats | a month" broke onto three lines. One span = one flex item = normal inline wrapping. */ .pricing--four .plan li > span { min-width: 0; } .pricing--four .plan li svg { width: clamp(14px, 1.35vw, 17px); height: clamp(14px, 1.35vw, 17px); } .pricing--four .plan .btn { padding-left: 12px; padding-right: 12px; font-size: clamp(13px, 1.15vw, 15px); } .plan__flag { position: absolute; top: -14px; right: 26px; white-space: nowrap; font-family: var(--font-display); font-weight: 800; 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: 800; font-size: 44px; line-height: 1; margin: 12px 0 4px; } .plan__price span { font-size: 17px; font-weight: 400; color: var(--page-text-soft); } .plan__period { font-size: 14px; font-weight: 600; color: var(--page-text-soft); margin-bottom: 22px; } .plan__save { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--green); background: rgba(60,180,110,0.12); padding: 3px 10px; border-radius: 999px; margin: -14px 0 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: 400; } .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: 700; 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: 400; 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, #5A2FD0, #7E43DC 55%, #BE3E8A); 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; text-shadow: 0 1px 2px rgba(0,0,0,0.25); } .final-cta p { font-size: 19px; font-weight: 400; color: #fff; margin: 0 auto 30px; max-width: 30em; text-shadow: 0 1px 2px rgba(0,0,0,0.22); } .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.4fr repeat(5, 1fr); gap: 32px; margin-bottom: 40px; } .footer__brand img { height: 56px; width: auto; margin-bottom: 14px; } .footer__brand p { font-size: 15px; font-weight: 400; color: var(--page-text-soft); margin: 0; max-width: 26em; } .footer__col h3 { font-family: var(--font-display); font-weight: 800; font-size: 16px; margin: 0 0 14px; } .footer__col a { display: block; font-size: 15px; font-weight: 400; 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: 600; color: var(--page-text-soft); } /* ============================================================ Sub-page (legal/support) content ============================================================ */ .doc { max-width: 820px; margin: 0 auto; padding: 56px 24px 40px; } .doc__back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--accent); margin-bottom: 28px; } .doc h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 10px; } .doc__meta { font-size: 14px; font-weight: 600; 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: 700; } .doc p, .doc li { font-size: 16.5px; font-weight: 400; color: var(--page-text); opacity: 1; } .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: 700; 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; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .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; } /* The 320px floor was sized for the old portrait still. The landscape clip is shorter than that, so the difference was empty space shoving the headline and the store buttons under the fold on a phone. */ .hero__art { order: -1; min-height: 0; margin-bottom: 6px; } .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__photo { margin: 0 auto; max-width: 240px; } .section { padding: 60px 0; } .section__head { margin-bottom: 34px; } .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; } .buddy__topic { font-size: 11.5px; margin-top: 7px; padding-top: 7px; } .buddy__topic span { font-size: 9.5px; } } /* ── Safety proof link (homepage #safety) ────────────────────────────────────── A benchmark number is the one safety claim on this page a parent can go and check, so it gets to look like a door rather than a badge — badges read as decoration and this one is meant to be clicked. */ .safety__proof { display: flex; align-items: center; gap: 16px; margin: 22px 0 4px; padding: 16px 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; transition: border-color .2s ease, transform .2s ease; } .safety__proof:hover, .safety__proof:focus-visible { border-color: var(--accent); transform: translateY(-2px); } .safety__proof-num { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; flex: 0 0 auto; } .safety__proof-txt { font-size: 15px; font-weight: 400; opacity: .88; line-height: 1.45; } .safety__proof-txt strong { display: block; opacity: 1; margin-bottom: 2px; } @media (max-width: 520px) { .safety__proof { flex-direction: column; align-items: flex-start; gap: 8px; } } .footer__bottom a { text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ Comparison tables (doc pages) ============================================================ */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0 8px; } .cmp-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; } .cmp-table caption { text-align: left; font-size: 14px; font-weight: 600; color: var(--page-text-soft); padding-bottom: 10px; } .cmp-table th, .cmp-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--card-border); } .cmp-table thead th { font-family: var(--font-display); font-weight: 800; font-size: 15px; border-bottom: 2px solid var(--card-border); } .cmp-table tbody th { font-weight: 700; width: 30%; } .cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; } /* Press kit media */ .press-video { margin: 22px 0 8px; } .press-video video { width: 100%; height: auto; border-radius: 16px; background: #000; display: block; } .press-video__cap { font-size: 14px; color: var(--page-text-soft); margin: 10px 0 0; } .shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 22px 0 8px; } .shot-grid img { width: 100%; height: auto; border-radius: 12px; display: block; } .art-row { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin: 22px 0 8px; } .art-row img { width: 128px; height: 128px; border-radius: 24px; } .art-row > div { flex: 1 1 260px; } .byline { font-size: 15px; color: var(--page-text-soft); margin: -18px 0 26px; } .byline a { color: var(--accent); font-weight: 700; } .about__intro { display: flex; gap: 20px; align-items: flex-start; } .about__photo { width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; } @media (max-width: 560px) { .about__intro { flex-direction: column; } } .founder__by { display: flex; align-items: center; gap: 16px; } /* 200px source, so 84 still has headroom on a 2x screen. */ .founder__avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--card-border); } @media (max-width: 560px) { .founder__avatar { width: 68px; height: 68px; } } /* -------------------------------------------------------------------------- Phone header overflow fix (2026-09-03) Measured before: on a 375px viewport the header row was 465px wide in en and 454px in de, so the page overflowed by 79-90px and #navBurger sat entirely off-screen. The row carries logo + primary CTA + the JS-injected #langSwitch (76px) + burger + gaps. Mobile Safari then lays the page out wider than the screen, which is why the sticky header's background stopped short of the right edge. The CTA stays in the header by design, so the room is made by shrinking: globe-only language pill, tighter CTA, smaller logo, tighter gaps. -------------------------------------------------------------------------- */ @media (max-width: 560px) { #langSwitch .langSwitch__code, #langSwitch .langSwitch__caret { display: none; } #langSwitch > summary { padding: .35rem .45rem; } #langSwitch { margin-inline-end: 0 !important; } .nav__cta { gap: 6px; } .nav__cta .btn--primary { padding: 10px 14px; font-size: .92rem; white-space: nowrap; } .nav__logo img { width: 96px; height: auto; } .nav__burger { padding: 8px 0 8px 4px; } } /* Very narrow phones (iPhone SE, 320px). The longest CTA is fr "Télécharger l'app"; at 320 the row still overflowed by 51px and pushed the burger off-screen. Header-scoped only, so page padding is untouched. */ @media (max-width: 380px) { .site-header .wrap { padding-inline: 12px; } .site-header .nav { gap: 8px; } .nav__logo img { height: 42px; width: auto; } .nav__cta .btn--primary { padding: 8px 11px; font-size: .82rem; } } /* Tablet band. The horizontal nav only fits in English: measured overflow at 768px was de 16, pt 28, fr 37, es 61, and at 802px es 27 and fr 3, because the translated link labels are longer. Rather than tune per language, the burger takes over up to 900px and the full nav returns only above it. The 901-980 gap tightening covers the longest labels at the new boundary. */ @media (max-width: 900px) and (min-width: 761px) { .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); } } @media (max-width: 980px) and (min-width: 901px) { .nav { gap: 12px; } .nav__links { gap: 18px; } }