/* PuffyWings Studio site Brand tokens come straight from the game (Tokens.swift, PuffyBuilder.swift, Worlds.swift) so the site and the app read as one product. */ @font-face { font-family: "Fredoka"; src: url("/assets/fonts/fredoka-bold.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; } :root { color-scheme: light; /* Puffy */ --puffy: #FFE566; --puffy-wing: #FFCC44; --puffy-stroke: #B87800; --beak: #FF8533; --ink: #1a1a2e; /* Puffy's eye */ --ink-2: #4a4a66; --ink-3: #6b6b85; /* UI */ --sun: #FFD447; /* in-game title pill */ --sun-deep: #F5B400; --pill-ink: #412402; /* in-game pill text */ --cream: #FFF8E8; --cream-2: #FFEFCC; --white: #ffffff; /* Golden hour (splash) */ --gh-core: #FFE08A; --gh-mid: #FFB23F; --gh-edge: #F47A1F; /* Worlds */ --sky: #87CEEB; --sky-light: #D6EFFB; --sky-deep: #4FB8E8; --grass: #5A9E3A; --grass-deep: #3F7F27; --violet: #6B4CE6; --violet-deep: #4A2FB8; --carnival-red: #E4483E; --teal: #1D7A8C; --teal-deep: #0E4F5E; --gold: #E8B23C; --thunder: #2F3B4B; --thunder-2: #445566; --space: #1E1646; --space-2: #3A2D7A; --lavender: #9070D8; --blossom: #FF8FBF; --radius-s: 12px; --radius-m: 20px; --radius-l: 32px; --shadow-s: 0 2px 6px rgba(26, 26, 46, .08), 0 1px 2px rgba(26, 26, 46, .06); --shadow-m: 0 10px 30px rgba(26, 26, 46, .12), 0 2px 6px rgba(26, 26, 46, .06); --shadow-l: 0 30px 80px rgba(26, 26, 46, .22), 0 8px 20px rgba(26, 26, 46, .10); --font-display: "Fredoka", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif; --font-body: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gutter: clamp(16px, 4vw, 40px); --section-y: clamp(72px, 10vw, 140px); --header-h: 68px; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); } body { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; } /* On dark or saturated grounds the ink ring disappears; use Puffy yellow there. */ .worlds :focus-visible, .powerups :focus-visible, .legendary :focus-visible, .space :focus-visible, .site-footer :focus-visible, .mode :focus-visible, .demo canvas:focus-visible { outline-color: #FFD447; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -100px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 700; text-decoration: none; } .skip-link:focus { top: 12px; } .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); } /* ---------- Launch state ---------- before release, "live" after. launch.sh flips it. */ html[data-launch="soon"] [data-when="live"], html[data-launch="live"] [data-when="soon"] { display: none !important; } /* ---------- Type ---------- */ .display, h1, h2, h3, .eyebrow, .btn, .chip, .brand-word { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; } h1, h2, h3 { line-height: 1.04; text-wrap: balance; } h2 { font-size: clamp(2.3rem, 1.5rem + 3vw, 4.2rem); } h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.15; } p { text-wrap: pretty; } .lead { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); line-height: 1.55; color: var(--ink-2); max-width: 38ch; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 18px; height: 18px; flex: none; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-26 -26 52 52'%3E%3Cpath d='M0-25L7-7 25 0 7 7 0 25-7 7-25 0-7-7Z' fill='%23F5B400'/%3E%3C/svg%3E"); } /* Sticker text: the App Store screenshot headline look (fill + fat outline). */ .sticker { color: #fff; -webkit-text-stroke: .16em var(--pill-ink); paint-order: stroke fill; text-shadow: 0 .08em 0 rgba(65, 36, 2, .35); } .sticker .hl { color: var(--puffy); } .sticker.on-dark { -webkit-text-stroke-color: #0E0A24; text-shadow: 0 .08em 0 rgba(0, 0, 0, .45); } .section { position: relative; padding-block: var(--section-y); } .section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .lead { margin-inline: auto; } .section-head h2 { margin-bottom: 18px; } .accent { color: #C24E00; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--ink); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 1.05rem; text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .22), var(--shadow-s); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s ease, background .18s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .22), var(--shadow-m); } .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .22); } .btn-sun { --btn-bg: var(--sun); --btn-fg: var(--pill-ink); box-shadow: 0 4px 0 #C98F00, var(--shadow-s); } .btn-sun:hover { box-shadow: 0 6px 0 #C98F00, var(--shadow-m); } .btn-ghost { --btn-bg: rgba(255, 255, 255, .9); --btn-fg: var(--ink); box-shadow: 0 4px 0 rgba(26, 26, 46, .12), var(--shadow-s); } .btn svg { width: 20px; height: 20px; flex: none; } .btn-soon { --btn-bg: rgba(26, 26, 46, .92); cursor: default; } .btn-soon:hover { transform: none; box-shadow: 0 4px 0 rgba(0, 0, 0, .22), var(--shadow-s); } .btn-soon .pulse { width: 10px; height: 10px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); } 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } /* Official Apple badge: never restyled, only sized. The black pill behind it only shows if the badge file is missing, so the link never looks broken. */ .appstore-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 168px; height: 56px; border-radius: 12px; background: #000; color: #fff; font: 600 15px/1.1 var(--font-body); text-decoration: none; overflow: hidden; } .appstore-badge img { height: 56px; width: auto; display: block; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .78rem; letter-spacing: .02em; background: rgba(26, 26, 46, .07); color: var(--ink-2); } /* ---------- Header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; } .site-header.is-stuck { background: rgba(255, 250, 238, .82); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 1px 0 rgba(26, 26, 46, .08); } .nav { height: 100%; display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; } .brand img { width: 38px; height: 38px; border-radius: 9px; box-shadow: var(--shadow-s); } .brand-word { font-size: 1.45rem; color: var(--puffy); -webkit-text-stroke: 5px #B87800; paint-order: stroke fill; letter-spacing: 0; } .nav-links { display: flex; gap: 4px; } .nav-links a { font-family: var(--font-display); font-weight: 700; text-decoration: none; padding: 8px 14px; border-radius: 999px; color: var(--ink); transition: background .2s ease; } .nav-links a:hover { background: rgba(26, 26, 46, .07); } .btn-nav { min-height: 42px; padding: 0 18px; font-size: .95rem; } /* Scroll "flight": Puffy crosses the header as you scroll the page. */ .flight { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; pointer-events: none; opacity: 0; transition: opacity .3s ease; } .site-header.is-stuck .flight { opacity: 1; } .flight-fill { height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #FF6B6B, #FFB23F, #FFE566, #7ED957, #4FB8E8, #9070D8); border-radius: 0 3px 3px 0; } .flight-bird { position: absolute; top: -9px; width: 22px; height: 22px; left: calc(var(--p, 0) * (100% - 22px)); } /* ---------- Hero (golden hour) ---------- */ .hero { position: relative; min-height: min(100svh, 980px); padding: calc(var(--header-h) + clamp(28px, 6vw, 72px)) 0 clamp(120px, 14vw, 190px); background: radial-gradient(120% 90% at 70% 38%, var(--gh-core) 0%, var(--gh-mid) 38%, var(--gh-edge) 100%); overflow: hidden; isolation: isolate; } .sunburst { position: absolute; z-index: -1; left: 70%; top: 40%; width: 260vmax; height: 260vmax; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .20) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 18deg); -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, .55) 32%, transparent 62%); mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, .55) 32%, transparent 62%); animation: spin 160s linear infinite; } @keyframes spin { to { rotate: 360deg; } } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(24px, 4vw, 64px); } .hero-copy { position: relative; z-index: 2; } .hero-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--pill-ink); font-family: var(--font-display); font-weight: 700; font-size: .92rem; box-shadow: var(--shadow-s); margin-bottom: 22px; } .hero-kicker .tag { background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: .75rem; letter-spacing: .06em; } .wordmark { font-size: clamp(3.4rem, 1.4rem + 8vw, 7.4rem); line-height: .95; color: var(--puffy); -webkit-text-stroke: .13em #B87800; paint-order: stroke fill; text-shadow: 0 .06em 0 #8A5400, 0 .14em .3em rgba(120, 50, 0, .35); letter-spacing: -.005em; margin-bottom: .18em; } .tagline { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.9rem); line-height: 1.02; margin-bottom: 22px; } .hero-sub { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.55; color: #4A2303; max-width: 34ch; margin-bottom: 30px; font-weight: 500; } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; } .cta-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #5A2C04; } .cta-meta span { display: inline-flex; align-items: center; gap: 6px; } .cta-meta svg { width: 18px; height: 18px; } /* QR card: desktop only, launch only. On a phone the badge is the path. */ .qr-card { display: none; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-m); } .qr-code { position: relative; width: 92px; height: 92px; flex: none; } .qr-code img.qr { width: 100%; height: 100%; } .qr-code img.qr-logo { position: absolute; left: 50%; top: 50%; width: 20%; height: 20%; translate: -50% -50%; border-radius: 22%; } .qr-card p { font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.25; max-width: 11ch; } .qr-card p small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .8rem; color: var(--ink-3); margin-top: 3px; } @media (hover: hover) and (pointer: fine) and (min-width: 900px) { html[data-launch="live"] .qr-card { display: inline-flex; } } /* Phone + birds */ .hero-stage { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 420 / 620; } .phone { position: absolute; left: 50%; top: 0; width: 66%; translate: -50% 0; aspect-ratio: 1320 / 2868; border-radius: 14% / 6.4%; padding: 3.2%; background: linear-gradient(145deg, #3a3a4a, #15151f 60%, #2b2b38); box-shadow: var(--shadow-l), inset 0 0 0 1.5px rgba(255, 255, 255, .14); rotate: 4deg; } .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 11.5% / 5.3%; overflow: hidden; background: var(--sky); } .phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; } .phone-screen img.is-on { opacity: 1; } .phone-island { position: absolute; top: 2.4%; left: 50%; translate: -50% 0; width: 30%; height: 3.3%; border-radius: 999px; background: #0b0b12; z-index: 2; } .world-chip { position: absolute; left: 50%; bottom: -2%; translate: -50% 0; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-m); font-family: var(--font-display); font-weight: 700; font-size: .95rem; white-space: nowrap; } .chip-toggle { width: 26px; height: 26px; margin-right: -8px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; } .chip-toggle svg { width: 11px; height: 11px; fill: currentColor; } .chip-toggle .i-play, .chip-toggle[aria-pressed="true"] .i-pause { display: none; } .chip-toggle[aria-pressed="true"] .i-play { display: block; } @media (prefers-reduced-motion: reduce) { .chip-toggle { display: none; } } .world-chip .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sky); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12); transition: background .6s ease; } .hero-puffy { position: absolute; z-index: 4; width: 58%; left: -18%; top: 30%; filter: drop-shadow(0 24px 30px rgba(120, 50, 0, .35)); animation: bob 3.2s ease-in-out infinite; cursor: pointer; -webkit-tap-highlight-color: transparent; } .hero-puffy svg { width: 100%; height: auto; overflow: visible; } .hero-puffy .wing { transform-box: fill-box; transform-origin: 100% 50%; animation: flap .42s ease-in-out infinite alternate; } .hero-puffy.boop { animation: boop .5s cubic-bezier(.3, 1.8, .5, 1); } @keyframes bob { 50% { translate: 0 -14px; rotate: -3deg; } } @keyframes flap { from { transform: rotate(-14deg); } to { transform: rotate(18deg); } } @keyframes boop { 0% { scale: 1; } 30% { scale: 1.12 .9; } 60% { scale: .95 1.08; } 100% { scale: 1; } } .float-bird { position: absolute; z-index: 1; width: 21%; filter: drop-shadow(0 10px 14px rgba(120, 50, 0, .25)); animation: drift 6s ease-in-out infinite; } .float-bird.b1 { right: -6%; top: 6%; animation-delay: -1s; } .float-bird.b2 { right: -12%; top: 56%; width: 19%; animation-delay: -3s; } .float-bird.b3 { left: -4%; top: 2%; width: 17%; animation-delay: -4.5s; } @keyframes drift { 50% { translate: 0 -12px; rotate: 4deg; } } .sparkle { position: absolute; z-index: 0; width: 26px; height: 26px; color: #fff; animation: twinkle 2.8s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: .25; scale: .7; } 50% { opacity: 1; scale: 1; } } /* Cloud bank divider */ .cloudbank { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 5; height: clamp(70px, 10vw, 140px); pointer-events: none; } .cloudbank svg { width: 100%; height: 100%; } /* ---------- Facts strip ---------- */ .facts { position: relative; z-index: 6; margin-top: calc(-1 * clamp(56px, 7vw, 90px)); } .facts ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow-m); overflow: hidden; } .facts li { padding: 22px 12px; text-align: center; border-left: 1px solid rgba(26, 26, 46, .07); } .facts li:first-child { border-left: 0; } .facts b { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1; color: #D65A00; } .facts span { display: block; margin-top: 6px; font-weight: 600; font-size: .92rem; color: var(--ink-2); line-height: 1.25; } /* ---------- How it plays (Breezy Meadows) ---------- */ .meadows { background: linear-gradient(180deg, var(--cream) 0%, var(--sky-light) 22%, var(--sky) 100%); padding-bottom: clamp(140px, 16vw, 220px); overflow: hidden; } .meadows .hills { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(90px, 12vw, 170px); pointer-events: none; } .meadows .hills svg { width: 100%; height: 100%; } .play-grid { display: grid; grid-template-columns: 1fr minmax(300px, 400px); gap: clamp(32px, 6vw, 96px); align-items: center; } .steps { list-style: none; padding: 0; margin-top: 32px; display: grid; gap: 14px; max-width: 460px; } .steps li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; padding: 14px 18px 14px 14px; background: rgba(255, 255, 255, .78); border-radius: var(--radius-m); box-shadow: var(--shadow-s); } .steps .num { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--sun); color: var(--pill-ink); font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); } .steps b { font-family: var(--font-display); font-size: 1.12rem; display: block; line-height: 1.2; } .steps span { color: var(--ink-2); font-size: .98rem; line-height: 1.4; } .demo { position: relative; width: 100%; aspect-ratio: 3 / 4.2; border-radius: 34px; padding: 10px; background: linear-gradient(145deg, #3a3a4a, #15151f 60%, #2b2b38); box-shadow: var(--shadow-l); } .demo canvas { width: 100%; height: 100%; border-radius: 26px; background: var(--sky); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .demo-caption { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink); } .kbd { display: inline-block; padding: 1px 8px; border-radius: 7px; background: #fff; box-shadow: inset 0 -2px 0 rgba(26, 26, 46, .15); font-size: .85rem; } /* ---------- Worlds ---------- */ .worlds { background: radial-gradient(60% 50% at 85% 45%, rgba(79, 184, 232, .14) 0%, transparent 70%), linear-gradient(180deg, #1C1C38 0%, #211D45 100%); color: #fff; overflow: hidden; padding-top: clamp(40px, 6vw, 80px); padding-bottom: calc(var(--section-y) + 40px); } .worlds .lead { color: rgba(255, 255, 255, .86); } .worlds .eyebrow { color: rgba(255, 255, 255, .8); } .worlds-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .carousel-nav { display: flex; gap: 10px; } .icon-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); border: 0; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .2); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease; } .icon-btn:hover { transform: translateY(-2px); } .icon-btn:disabled { opacity: .4; cursor: default; transform: none; } .icon-btn svg { width: 22px; height: 22px; } .world-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 22vw, 250px); gap: clamp(14px, 2vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; /* bleed to the screen edges while the first card still lines up with the text */ --edge: max(var(--gutter), calc(50vw - 600px + var(--gutter))); scroll-padding-inline: var(--edge); padding: 8px var(--edge) 28px; margin-inline: calc(50% - 50vw); scrollbar-width: none; overscroll-behavior-x: contain; } .world-track::-webkit-scrollbar { display: none; } .world-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; } .world-card figure { position: relative; aspect-ratio: 1320 / 2600; margin: 0; border-radius: 26px; overflow: hidden; background: var(--w, var(--sky)); box-shadow: 0 18px 40px rgba(0, 0, 0, .28), inset 0 0 0 3px rgba(255, 255, 255, .25); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); } .world-card:hover figure { transform: translateY(-6px) rotate(-1deg); } .world-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .world-card .wnum { position: absolute; left: 12px; bottom: 12px; background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .85rem; padding: 4px 10px; border-radius: 999px; box-shadow: var(--shadow-s); } .world-card h3 { font-size: 1.2rem; } .world-card p { font-size: .92rem; color: rgba(255, 255, 255, .78); margin-top: -8px; } .altitude { display: flex; gap: 6px; margin-top: 8px; align-items: center; } .altitude i { flex: 1; height: 8px; border-radius: 99px; background: var(--w); opacity: .45; transition: opacity .3s ease, transform .3s ease; } .altitude i.is-on { opacity: 1; transform: scaleY(1.4); } /* ---------- Stacked sheets: each section slides over the previous one ---------- */ .sheet { border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0; margin-top: calc(-1 * clamp(28px, 4vw, 48px)); box-shadow: 0 -18px 40px rgba(26, 26, 46, .10); } /* ---------- Power-ups ---------- */ .powerups { background: radial-gradient(90% 70% at 20% 10%, #6E50EE 0%, #5536D6 45%, #3B22A0 100%); color: #fff; overflow: hidden; isolation: isolate; } .powerups .sunburst { left: 18%; top: 22%; opacity: .4; animation-duration: 220s; } .powerups .eyebrow, .powerups .lead { color: rgba(255, 255, 255, .95); } .pu-grid { display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .pu-phones { position: relative; aspect-ratio: 1 / 1.4; } .pu-phones .mini-phone { position: absolute; width: 54%; } .pu-phones .mini-phone:nth-child(1) { left: 2%; top: 2%; rotate: -6deg; } .pu-phones .mini-phone:nth-child(2) { right: 2%; bottom: 2%; rotate: 5deg; } .mini-phone { aspect-ratio: 1320 / 2868; border-radius: 13% / 6%; padding: 3%; background: linear-gradient(145deg, #3a3a4a, #15151f 60%, #2b2b38); box-shadow: var(--shadow-l); } .mini-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 10.5% / 4.8%; } .pu-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pu { display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: var(--radius-m); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease, transform .25s cubic-bezier(.3, 1.5, .5, 1); } .pu:hover { background: rgba(255, 255, 255, .18); transform: translateY(-3px); } .pu img { width: 60px; height: 60px; } .pu b { font-family: var(--font-display); font-size: 1.1rem; display: block; line-height: 1.2; } .pu .how { font-family: var(--font-display); font-size: .78rem; letter-spacing: .04em; color: var(--puffy); display: block; margin-bottom: 2px; } .pu span.desc { display: block; font-size: .93rem; line-height: 1.42; color: rgba(255, 255, 255, .94); margin-top: 3px; } .pu.wide { grid-column: 1 / -1; } /* ---------- Challenge modes ---------- */ .modes { background: var(--cream); } .mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 32px); } .mode { position: relative; border-radius: var(--radius-l); padding: clamp(28px, 4vw, 44px); overflow: hidden; isolation: isolate; color: #fff; min-height: 600px; display: flex; flex-direction: column; box-shadow: var(--shadow-m); } .mode .tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; } .mode .chip { background: rgba(255, 255, 255, .92); color: var(--ink); } .mode h3 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin: 10px 0 12px; } .mode p { font-size: 1.05rem; line-height: 1.55; max-width: 34ch; } .mode .badge { align-self: flex-start; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .mode-art { position: relative; flex: 1; min-height: 300px; margin-top: 18px; } .mode-art .mini-phone { position: absolute; width: 42%; right: 2%; bottom: -34%; rotate: 6deg; } .mode-art .prop { position: absolute; width: 46%; left: 0; bottom: 4%; border-radius: 28px; border: 6px solid #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .22); rotate: -5deg; } .mode-art .rider { position: absolute; width: 24%; left: 38%; top: 4%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .25)); animation: drift 5s ease-in-out infinite; } .mode.carnival { background: radial-gradient(120% 80% at 80% 0%, #3A9EDB 0%, #1872B0 45%, #125A8E 100%); } .mode.carnival .badge { background: var(--sun); color: var(--pill-ink); } .mode.carnival h3, .mode.carnival p { text-shadow: 0 2px 10px rgba(0, 60, 110, .25); } .bunting { position: absolute; top: 0; left: 0; right: 0; height: 46px; z-index: -1; } .bunting svg { width: 100%; height: 100%; } .mode.broadside { background: radial-gradient(120% 80% at 20% 0%, #1A7A89 0%, #136574 50%, var(--teal-deep) 100%); } .mode.broadside .badge { background: var(--gold); color: #3A2200; } .waves { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 1; pointer-events: none; } .waves svg { width: 100%; height: 100%; } .mode.broadside .mode-art .mini-phone { z-index: 2; } /* ---------- Flock ---------- */ .flock { background: radial-gradient(100% 80% at 50% 0%, #FFD1E6 0%, var(--blossom) 45%, #D46BD8 100%); overflow: hidden; isolation: isolate; } .flock .sunburst { left: 50%; top: 8%; opacity: .7; animation-duration: 240s; } .flock .eyebrow { color: #6B1F4F; } .flock .lead { color: #5A1A44; } .bird-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.6vw, 18px); } .bird { position: relative; background: rgba(255, 255, 255, .88); border-radius: var(--radius-m); padding: 16px 10px 14px; text-align: center; box-shadow: 0 6px 0 rgba(120, 20, 90, .12), var(--shadow-s); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease; cursor: default; } .bird:hover { transform: translateY(-6px) rotate(-2deg); box-shadow: 0 10px 0 rgba(120, 20, 90, .12), var(--shadow-m); } .bird img { width: 72%; aspect-ratio: 1; object-fit: contain; margin: 0 auto 8px; transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); } .bird:hover img { transform: translateY(-6px) rotate(-8deg) scale(1.06); } .bird b { font-family: var(--font-display); font-size: 1.05rem; display: block; line-height: 1.15; } .bird .how { font-size: .78rem; font-weight: 600; color: var(--ink-3); display: block; margin-top: 2px; } .bird .flag { position: absolute; top: 10px; right: 10px; font-family: var(--font-display); font-weight: 700; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: #fff; } .bird .flag.free { background: #1F7A45; } .bird .flag.season { background: #C2530A; } .bird .flag.premium { background: linear-gradient(135deg, #F5C542, #D9951A); color: #3A2200; } .bird .flag.now { background: #C2530A; animation: pulse-o 2s infinite; } @keyframes pulse-o { 50% { box-shadow: 0 0 0 5px rgba(240, 122, 26, .25); } } .trails { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: center; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-l); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); } .trails h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: 8px; } .trails p { color: #5A1A44; } .trail-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .trail-list li { text-align: center; } .trail-list img { border-radius: 22px; box-shadow: var(--shadow-s); margin-bottom: 8px; aspect-ratio: 1; object-fit: cover; } .trail-list b { font-family: var(--font-display); font-size: .98rem; display: block; line-height: 1.2; } .trail-list span { font-size: .78rem; font-weight: 600; color: #6B2A58; } /* ---------- Legendary (Thunder Clouds) ---------- */ .legendary { background: linear-gradient(180deg, var(--thunder) 0%, #1F2836 100%); color: #fff; overflow: hidden; } .legendary .eyebrow, .legendary .lead { color: rgba(255, 255, 255, .8); } .legendary h2 { margin-bottom: 18px; } .leg-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .tiers { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 36px; } .tier { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 12px 18px; border-radius: 18px; font-family: var(--font-display); font-weight: 700; box-shadow: 0 5px 0 rgba(0, 0, 0, .3); } .tier em { font-style: normal; font-size: 1.35rem; letter-spacing: .02em; line-height: 1.1; } .tier small { font-size: .78rem; opacity: .85; letter-spacing: .04em; } .tier.t1 { background: linear-gradient(135deg, #FFB23F, #FF7A1A); color: #3A1600; } .tier.t2 { background: linear-gradient(135deg, #D0304A, #A8182E); } .tier.t3 { background: linear-gradient(120deg, #FF6B6B, #FFB23F, #FFE566, #7ED957, #4FB8E8, #9070D8); color: #1a1a2e; } .gc-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .gc-list li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: var(--radius-m); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .gc-list img { width: 56px; height: 56px; border-radius: 14px; } .gc-list b { font-family: var(--font-display); display: block; line-height: 1.2; } .gc-list span { font-size: .88rem; color: rgba(255, 255, 255, .72); } .leg-phones { position: relative; aspect-ratio: 1 / 1.4; } .leg-phones .mini-phone { position: absolute; width: 54%; } .leg-phones .mini-phone:nth-child(1) { left: 2%; top: 4%; rotate: -5deg; } .leg-phones .mini-phone:nth-child(2) { right: 2%; bottom: 0; rotate: 5deg; } .bolt { position: absolute; width: 60px; color: #FFE566; opacity: .9; filter: drop-shadow(0 0 18px rgba(255, 229, 102, .6)); } /* ---------- Fair play ---------- */ .fair { background: var(--cream); } .fair-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); } .fair-card { background: #fff; border-radius: var(--radius-m); padding: 26px; box-shadow: var(--shadow-s); border: 1px solid rgba(26, 26, 46, .06); } .fair-card .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 16px; background: var(--c, var(--sun)); } .fair-card .ico svg { width: 26px; height: 26px; } .fair-card h3 { font-size: 1.25rem; margin-bottom: 8px; } .fair-card p { color: var(--ink-2); font-size: 1rem; line-height: 1.55; } /* ---------- Download (Space Migration) ---------- */ .space { position: relative; background: radial-gradient(60% 50% at 80% 20%, rgba(144, 112, 216, .45) 0%, transparent 60%), radial-gradient(50% 40% at 10% 70%, rgba(102, 68, 170, .5) 0%, transparent 60%), linear-gradient(180deg, var(--space-2) 0%, var(--space) 70%, #120C2E 100%); color: #fff; overflow: hidden; isolation: isolate; } .stars { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 72%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 44% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 77% 58%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 34%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 93% 82%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 88%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 52% 90%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 36% 8%, #fff 50%, transparent 51%); background-size: 520px 520px; opacity: .8; animation: starfield 90s linear infinite; } @keyframes starfield { to { background-position: -520px 260px; } } .planet { position: absolute; border-radius: 50%; z-index: -1; } .planet.p1 { width: 220px; height: 220px; right: -60px; top: 60px; background: radial-gradient(circle at 35% 35%, #B79CFF, #6644AA 60%, #3A2D7A); box-shadow: 0 0 80px rgba(144, 112, 216, .5); } .planet.p2 { width: 70px; height: 70px; left: 8%; top: 110px; background: radial-gradient(circle at 35% 35%, #FFB3D9, #D46BD8 70%); box-shadow: 0 0 40px rgba(212, 107, 216, .5); } .download-inner { text-align: center; max-width: 760px; margin-inline: auto; } .download-inner .app-icon { width: 112px; height: 112px; margin: 0 auto 28px; border-radius: 25px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .1); } .download-inner h2 { margin-bottom: 16px; } .download-inner .lead { color: rgba(255, 255, 255, .82); margin: 0 auto 32px; } .download-inner .cta-row { justify-content: center; } .download-inner .cta-meta { justify-content: center; color: rgba(255, 255, 255, .78); } .soon-note { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 26px; border-radius: 22px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } .soon-note b { font-family: var(--font-display); font-size: 1.25rem; } .soon-note span { color: rgba(255, 255, 255, .72); font-size: .95rem; } .comet { position: absolute; z-index: -1; width: 84px; left: -140px; top: 9%; animation: comet 14s linear infinite; } .comet .trail { position: absolute; right: 70%; top: 44%; width: 260px; height: 16px; border-radius: 99px; background: linear-gradient(90deg, transparent, #9070D8 30%, #4FB8E8 50%, #7ED957 65%, #FFE566 80%, #FF6B6B); opacity: .85; filter: blur(.5px); } @keyframes comet { 0% { translate: 0 0; } 60%, 100% { translate: calc(100vw + 300px) -80px; } } /* ---------- Footer ---------- */ .site-footer { background: #120C2E; color: rgba(255, 255, 255, .72); padding: 56px 0 40px; font-size: .95rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; } .site-footer .brand-word { font-size: 1.6rem; } .site-footer p.tag { margin-top: 10px; max-width: 30ch; } .site-footer .footer-h { font-family: var(--font-display); color: #fff; font-size: 1rem; line-height: 1.3; margin-bottom: 12px; } .site-footer ul { list-style: none; padding: 0; display: grid; gap: 8px; } .site-footer a { text-decoration: none; color: rgba(255, 255, 255, .78); } .site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .82rem; color: rgba(255, 255, 255, .5); } .legal p { max-width: 70ch; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; translate: 0 26px; transition: opacity .8s ease, translate .8s cubic-bezier(.2, .8, .2, 1); } .reveal.is-in { opacity: 1; translate: 0 0; } html:not(.js) .reveal, html.capture .reveal { opacity: 1; translate: 0 0; transition: none; } /* ---------- Inner pages (support, privacy, press) ---------- */ .page-hero { position: relative; padding: calc(var(--header-h) + clamp(40px, 7vw, 90px)) 0 clamp(80px, 9vw, 120px); background: radial-gradient(120% 100% at 80% 0%, var(--gh-core) 0%, var(--gh-mid) 45%, var(--gh-edge) 100%); overflow: hidden; isolation: isolate; } .page-hero .sunburst { left: 85%; top: 0%; } .page-hero h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); margin-bottom: 14px; } .page-hero p { color: #4A2303; font-size: 1.15rem; max-width: 52ch; font-weight: 500; } .page-hero .cloudbank { height: clamp(50px, 7vw, 90px); } .page-body { padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 9vw, 120px); } .prose { max-width: 760px; } .prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin: 48px 0 14px; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 1.2rem; margin: 28px 0 8px; } .prose p, .prose li { color: var(--ink-2); } .prose p { margin-bottom: 14px; } .prose ul { padding-left: 1.25em; margin-bottom: 16px; display: grid; gap: 6px; } .prose a { color: #B25A00; text-underline-offset: 3px; } .prose strong { color: var(--ink); } .prose table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: .96rem; } .prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid rgba(26, 26, 46, .1); } .prose th { font-family: var(--font-display); color: var(--ink); background: var(--cream-2); } .prose .table-wrap { overflow-x: auto; border-radius: 16px; box-shadow: var(--shadow-s); background: #fff; margin-bottom: 20px; } .prose .table-wrap table { margin: 0; } .updated { display: inline-block; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: #5A2C04; background: rgba(255, 255, 255, .6); padding: 4px 12px; border-radius: 999px; } .toc { list-style: none; padding: 20px 22px; background: #fff; border-radius: var(--radius-m); box-shadow: var(--shadow-s); margin-bottom: 40px; columns: 2; column-gap: 32px; } .toc li { break-inside: avoid; padding: 4px 0; } .toc a { text-decoration: none; font-weight: 600; color: var(--ink); } .toc a:hover { color: #B25A00; } .callout { background: #fff; border-radius: var(--radius-m); padding: 22px 24px; box-shadow: var(--shadow-s); border-left: 6px solid var(--sun); margin: 0 0 24px; } .callout p:last-child { margin-bottom: 0; } .support-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(28px, 5vw, 64px); align-items: start; } .contact-card { position: sticky; top: calc(var(--header-h) + 20px); background: #fff; border-radius: var(--radius-l); padding: 30px; box-shadow: var(--shadow-m); } .contact-card img.puffy-mail { width: 110px; margin: -70px 0 10px -6px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .15)); } .contact-card h2 { font-size: 1.7rem; margin-bottom: 8px; } .contact-card p { color: var(--ink-2); margin-bottom: 18px; } .contact-card .btn { width: 100%; } .contact-card .small { font-size: .88rem; color: var(--ink-3); margin: 14px 0 0; } .contact-card ul { margin: 14px 0 0; padding-left: 1.1em; color: var(--ink-2); font-size: .95rem; display: grid; gap: 4px; } .faq-group { margin-bottom: 36px; } .faq-group > h2 { font-size: 1.5rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .faq-group > h2 img { width: 34px; height: 34px; } details.faq { background: #fff; border-radius: var(--radius-m); margin-bottom: 10px; box-shadow: var(--shadow-s); border: 1px solid rgba(26, 26, 46, .05); } details.faq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.3; position: relative; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 24px; height: 24px; translate: 0 -50%; border-radius: 50%; background: var(--sun) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23412402' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); transition: rotate .25s ease; } details.faq[open] summary::after { rotate: 45deg; } details.faq .answer { padding: 0 22px 20px; color: var(--ink-2); } details.faq .answer p { margin-bottom: 10px; } details.faq .answer p:last-child { margin-bottom: 0; } .press-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; } .factsheet { position: sticky; top: calc(var(--header-h) + 20px); background: #fff; border-radius: var(--radius-l); padding: 26px; box-shadow: var(--shadow-m); } .factsheet dl { display: grid; gap: 14px; } .factsheet dt { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .factsheet dd { margin: 2px 0 0; font-weight: 600; } .asset-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .asset-grid a { display: block; text-decoration: none; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-s); transition: transform .2s ease; } .asset-grid a:hover { transform: translateY(-3px); } .asset-grid img { width: 100%; aspect-ratio: 1320 / 2868; object-fit: cover; } .asset-grid.square img { aspect-ratio: 1; object-fit: contain; background: var(--sky-light); padding: 12px; } .asset-grid span { display: block; padding: 8px 12px; font-size: .82rem; font-weight: 600; color: var(--ink-2); } .not-found { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter) 80px; background: linear-gradient(180deg, var(--sky-light), var(--sky)); position: relative; overflow: hidden; } .not-found .code { font-family: var(--font-display); font-size: clamp(6rem, 20vw, 12rem); line-height: .9; } .not-found h1 { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.8rem); margin: 18px 0 10px; } .not-found p { color: var(--ink-2); margin-bottom: 26px; } .dizzy { width: 150px; margin: 0 auto -10px; animation: wobble 2.2s ease-in-out infinite; } @keyframes wobble { 25% { rotate: -10deg; } 75% { rotate: 10deg; } } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .facts ul { grid-template-columns: repeat(3, 1fr); } .facts li:nth-child(4) { border-left: 0; } .facts li:nth-child(n+4) { border-top: 1px solid rgba(26, 26, 46, .07); } .bird-grid { grid-template-columns: repeat(4, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } .mode { min-height: 560px; } } @media (max-width: 900px) { :root { --header-h: 60px; } .nav-links { display: none; } .hero { min-height: auto; } .hero-grid { grid-template-columns: 1fr; text-align: center; } .hero-sub { margin-inline: auto; } .cta-row, .cta-meta { justify-content: center; } .hero-stage { width: min(80%, 350px); margin-top: 10px; } .play-grid { grid-template-columns: 1fr; } .play-grid .demo-wrap { width: min(100%, 380px); margin-inline: auto; } .pu-grid { grid-template-columns: 1fr; } .pu-phones { order: 2; width: min(100%, 440px); margin-inline: auto; } .mode-grid { grid-template-columns: 1fr; } .leg-grid { grid-template-columns: 1fr; } .leg-phones { width: min(100%, 440px); margin-inline: auto; } .fair-grid { grid-template-columns: 1fr 1fr; } .trails { grid-template-columns: 1fr; } .support-grid, .press-grid { grid-template-columns: 1fr; } .contact-card, .factsheet { position: static; } .contact-card img.puffy-mail { margin-top: -60px; } .asset-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { body { font-size: 1rem; } .bolt { display: none; } .planet.p1 { width: 150px; height: 150px; right: -80px; top: 40px; } .planet.p2 { width: 46px; height: 46px; top: 60px; } .fair-card { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; padding: 20px; } .fair-card .ico { width: 48px; height: 48px; margin: 0; grid-row: span 2; } .fair-card h3 { margin: 0; align-self: end; } .pu-phones, .leg-phones { width: min(100%, 360px); } .facts ul { grid-template-columns: repeat(2, 1fr); } .facts li:nth-child(n) { border-left: 0; border-top: 1px solid rgba(26, 26, 46, .07); } .facts li:nth-child(-n+2) { border-top: 0; } .facts li:nth-child(even) { border-left: 1px solid rgba(26, 26, 46, .07); } .pu-list { grid-template-columns: 1fr; } .bird-grid { grid-template-columns: repeat(3, 1fr); } .bird { padding: 12px 6px 10px; } .bird .flag { top: 6px; right: 6px; font-size: .58rem; padding: 2px 6px; } .bird b { font-size: .92rem; } .bird .how { font-size: .7rem; } .trail-list { grid-template-columns: repeat(2, 1fr); } .gc-list { grid-template-columns: 1fr; } .fair-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .mode { min-height: 540px; } .mode-art .mini-phone { width: 46%; } .toc { columns: 1; } .asset-grid { grid-template-columns: repeat(2, 1fr); } .btn-nav { padding: 0 14px; font-size: .9rem; } .brand-word { font-size: 1.3rem; } .brand img { width: 34px; height: 34px; } } @media (max-width: 380px) { .brand-word { display: none; } .bird-grid { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; translate: 0 0; } .comet { display: none; } } .not-found .code.sticker { color: var(--puffy); -webkit-text-stroke-color: #8A5400; }