/* PuzzParty — calm, iOS-style UI. Excon Black headings, Satoshi body (both from Fontshare). */ /* Self-hosted from Fontshare (ITF Free Font License), so auth pages don't depend on a third-party CDN. */ @font-face { font-family: "Excon"; src: url("/fonts/excon-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Excon"; src: url("/fonts/excon-900.woff2") format("woff2"); font-weight: 900; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } :root { --bg: #f5f5f7; --card: #ffffff; --label: #1d1d1f; --secondary: #6e6e73; --tertiary: #aeaeb2; --separator: rgba(60, 60, 67, 0.13); --fill: rgba(118, 118, 128, 0.1); --accent: #5e5ce6; --accent-press: #4c4ad4; --accent-tint: rgba(94, 92, 230, 0.12); --on-accent: #ffffff; --danger: #ff3b30; --danger-tint: rgba(255, 59, 48, 0.1); --nav-bg: rgba(245, 245, 247, 0.72); --shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 10px 30px rgba(0, 0, 0, 0.05); --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.04), 0 24px 60px rgba(0, 0, 0, 0.1); /* Letter-tile pastels */ --tile-1: #ffd9b8; --tile-2: #c8ecd3; --tile-3: #c6e1ff; --tile-4: #e2d2ff; --tile-5: #ffefa6; --tile-ink: #1d1d1f; --font-display: "Excon", "Arial Black", system-ui, sans-serif; --font-text: "Satoshi", -apple-system, system-ui, sans-serif; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --radius: 16px; color-scheme: light; } /* Dark tokens. An explicit choice from the theme switcher (data-theme on ) wins; otherwise follow the system setting. Keep these two blocks identical. */ :root[data-theme="dark"] { --bg: #000000; --card: #1c1c1e; --label: #f5f5f7; --secondary: #98989d; --tertiary: #636366; --separator: rgba(84, 84, 88, 0.55); --fill: rgba(118, 118, 128, 0.24); --accent: #7d7aff; --accent-press: #6a67f2; --accent-tint: rgba(125, 122, 255, 0.18); --on-accent: #ffffff; --danger: #ff453a; --danger-tint: rgba(255, 69, 58, 0.16); --nav-bg: rgba(0, 0, 0, 0.65); --shadow: none; --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5); --tile-1: #f2c9a5; --tile-2: #aedcbc; --tile-3: #aecdf2; --tile-4: #cbb9f4; --tile-5: #efdf8f; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --card: #1c1c1e; --label: #f5f5f7; --secondary: #98989d; --tertiary: #636366; --separator: rgba(84, 84, 88, 0.55); --fill: rgba(118, 118, 128, 0.24); --accent: #7d7aff; --accent-press: #6a67f2; --accent-tint: rgba(125, 122, 255, 0.18); --on-accent: #ffffff; --danger: #ff453a; --danger-tint: rgba(255, 69, 58, 0.16); --nav-bg: rgba(0, 0, 0, 0.65); --shadow: none; --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5); --tile-1: #f2c9a5; --tile-2: #aedcbc; --tile-3: #aecdf2; --tile-4: #cbb9f4; --tile-5: #efdf8f; color-scheme: dark; } } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--label); font: 500 17px/1.47 var(--font-text); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } h1, h2, h3 { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; margin: 0; line-height: 1.08; text-wrap: balance; } p { margin: 0; } a { color: var(--accent); text-decoration: none; } button { font: inherit; color: inherit; } [hidden] { display: none !important; } .secondary { color: var(--secondary); } .small { font-size: 0.87rem; } .center { text-align: center; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 10; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--separator); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; max-width: 1040px; margin: 0 auto; padding: 0 20px; } .logo { display: inline-flex; align-items: center; gap: 9px; color: var(--label); font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; letter-spacing: -0.01em; } .mark { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 22px; height: 22px; flex: none; } .mark i { border-radius: 3.5px; } .mark i:nth-child(1) { background: var(--tile-4); } .mark i:nth-child(2) { background: var(--tile-1); } .mark i:nth-child(3) { background: var(--tile-2); } .mark i:nth-child(4) { background: var(--tile-3); } .mark.lg { width: 44px; height: 44px; gap: 4px; } .mark.lg i { border-radius: 7px; } /* ---------- Layout ---------- */ .page { max-width: 460px; margin: 0 auto; padding: 28px 16px 72px; } .stack > * + * { margin-top: 16px; } .page > section { margin-top: 28px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px; border: 0; border-radius: 999px; font-size: 17px; font-weight: 700; cursor: pointer; background: var(--fill); color: var(--label); transition: transform 0.2s var(--ease), background-color 0.2s, opacity 0.2s; white-space: nowrap; } .btn:active:not(:disabled) { transform: scale(0.97); } .btn:disabled { opacity: 0.5; cursor: default; } .btn:focus-visible { outline: 3px solid var(--accent-tint); outline-offset: 2px; } .btn.primary { background: var(--accent); color: var(--on-accent); } .btn.primary:hover:not(:disabled) { background: var(--accent-press); } .btn.tinted { background: var(--accent-tint); color: var(--accent); } .btn.plain { background: none; color: var(--accent); } .btn.plain.danger, .btn.tinted.danger { color: var(--danger); } .btn.tinted.danger { background: var(--danger-tint); } .btn.plain.muted { color: var(--secondary); } .btn.block { display: flex; width: 100%; } .btn.sm { height: 32px; padding: 0 14px; font-size: 15px; } .btn.icon { width: 32px; height: 32px; padding: 0; } .btn.icon svg { width: 16px; height: 16px; } /* "Continue with PuzzParty" — the button games show */ .btn-continue { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px 0 18px; border-radius: 999px; background: var(--label); color: var(--bg); font-weight: 700; font-size: 17px; border: 0; } .btn-continue .mark i:nth-child(n) { opacity: 0.95; } /* ---------- Fields ---------- */ .field { display: block; width: 100%; height: 50px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--fill); color: var(--label); font: inherit; font-size: 17px; outline: none; transition: box-shadow 0.2s var(--ease), background-color 0.2s; } .field::placeholder { color: var(--tertiary); } .field:focus { box-shadow: 0 0 0 3px var(--accent-tint); background: var(--card); } /* "@" sits inside the field, just before the text, so it reads as "@username". */ .field-prefix { position: relative; display: block; } .field-prefix > span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 17px; line-height: 1; color: var(--tertiary); pointer-events: none; transition: color 0.2s; } .field-prefix > .field { padding-left: 32px; } .field-prefix:has(.field:not(:placeholder-shown)) > span { color: var(--label); } .hint { font-size: 0.82rem; color: var(--secondary); padding: 0 4px; } /* ---------- Grouped lists (iOS inset grouped) ---------- */ .section-header { font-family: var(--font-text); display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 7px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--secondary); } .section-footer { padding: 7px 16px 0; font-size: 0.82rem; color: var(--secondary); line-height: 1.4; } .group { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .cell { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; } .cell + .cell::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset, 16px); border-top: 0.5px solid var(--separator); } .group.with-avatars { --inset: 68px; } .cell-body { flex: 1; min-width: 0; } .cell-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cell-sub { font-size: 0.87rem; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cell-empty { color: var(--secondary); font-size: 0.95rem; padding: 16px; } .cell-actions { display: flex; gap: 6px; flex: none; } .cell-icon { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); } .cell-icon svg { width: 17px; height: 17px; } .cell-button { display: block; width: 100%; min-height: 52px; border: 0; background: none; font-size: 17px; font-weight: 500; cursor: pointer; transition: background-color 0.15s; } .cell-button:active { background: var(--fill); } .cell-button.danger { color: var(--danger); } .cell form { display: flex; gap: 8px; width: 100%; align-items: center; } .cell form .field { height: 40px; background: transparent; padding: 0; border-radius: 0; } .cell form .field:focus { box-shadow: none; } /* ---------- Avatars & tiles ---------- */ .avatar { border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 900; color: var(--tile-ink); background: var(--tile-3); } .game-icon { flex: none; display: inline-grid; place-items: center; border-radius: 22%; font-family: var(--font-display); font-weight: 900; color: var(--tile-ink); object-fit: cover; } .tile { display: inline-grid; place-items: center; width: var(--size, 56px); height: var(--size, 56px); border-radius: calc(var(--size, 56px) * 0.24); font-family: var(--font-display); font-weight: 900; font-size: calc(var(--size, 56px) * 0.54); color: var(--tile-ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.06); user-select: none; } /* ---------- Auth (sign in, username, consent) ---------- */ .auth { text-align: center; padding-top: 12px; } .auth > * + * { margin-top: 12px; } .auth h1 { font-size: 2.1rem; font-weight: 700; } .auth .lead { color: var(--secondary); max-width: 320px; margin-left: auto; margin-right: auto; } .auth form { text-align: left; margin-top: 28px; } .auth form > * + * { margin-top: 12px; } .auth-hero { display: flex; justify-content: center; margin-bottom: 20px; } .auth-links { display: flex; justify-content: center; gap: 4px; margin-top: 8px; } .otp { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .otp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; color: transparent; caret-color: transparent; } .otp-box { display: grid; place-items: center; aspect-ratio: 1 / 1.15; border-radius: 12px; background: var(--fill); font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; color: var(--tile-ink); transition: background-color 0.2s, box-shadow 0.2s var(--ease); } .otp-box.active { box-shadow: 0 0 0 2px var(--accent); } .otp-box.filled { animation: pop 0.3s var(--spring); } .otp.shake { animation: shake 0.4s var(--ease); } .error { color: var(--danger); font-size: 0.9rem; text-align: center; } .error:empty { display: none; } /* Consent */ .handshake { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; } .handshake .app-icon { width: 68px; height: 68px; border-radius: 22%; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow-lg); } .handshake .dots { display: flex; gap: 5px; } .handshake .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--tertiary); animation: dot 1.4s var(--ease) infinite; } .handshake .dots i:nth-child(2) { animation-delay: 0.15s; } .handshake .dots i:nth-child(3) { animation-delay: 0.3s; } .consent-actions { margin-top: 24px; } .consent-actions > * + * { margin-top: 4px; } /* ---------- Profile header ---------- */ .profile-head { text-align: center; padding: 8px 0 12px; } .profile-head .avatar { margin: 0 auto 12px; box-shadow: var(--shadow-lg); } .profile-head h1 { font-size: 2rem; font-weight: 700; } /* ---------- Toast & action sheet ---------- */ .toast { position: fixed; top: 12px; left: 50%; z-index: 100; transform: translate(-50%, -140%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-lg); font-size: 0.95rem; font-weight: 500; transition: transform 0.45s var(--spring); } .toast.show { transform: translate(-50%, 0); } .toast.danger { color: var(--danger); } .sheet { width: min(420px, calc(100% - 20px)); max-width: none; margin: auto auto 10px; padding: 0; border: 0; background: none; color: var(--label); overflow: visible; } .sheet[open] { animation: sheet-up 0.4s var(--ease); } .sheet.closing { animation: sheet-down 0.22s var(--ease) forwards; } .sheet::backdrop { background: rgba(0, 0, 0, 0.28); animation: fade 0.3s var(--ease); } .sheet.closing::backdrop { animation: fade 0.22s var(--ease) reverse forwards; } .sheet .group + .group { margin-top: 8px; } .sheet-message { padding: 16px 20px 14px; text-align: center; font-size: 0.87rem; color: var(--secondary); } .sheet-message strong { display: block; color: var(--label); font-size: 0.95rem; margin-bottom: 2px; } .sheet .cell-button { border-top: 0.5px solid var(--separator); font-size: 18px; } .sheet .group:last-child .cell-button { border-top: 0; font-weight: 700; color: var(--accent); } @media (min-width: 600px) { .sheet { margin: auto; } .sheet[open] { animation: scale-in 0.3s var(--ease); } } /* ---------- Animations ---------- */ .view > * { animation: rise 0.55s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { 0% { transform: scale(0.85); } 100% { transform: scale(1); } } @keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } @keyframes dot { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.15); background: var(--accent); } } @keyframes sheet-up { from { transform: translateY(110%); } to { transform: none; } } @keyframes sheet-down { to { transform: translateY(110%); opacity: 0.6; } } @keyframes scale-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } } @keyframes flip-in { 0% { opacity: 0; transform: perspective(400px) rotateX(-90deg); } 60% { opacity: 1; transform: perspective(400px) rotateX(14deg); } 100% { transform: perspective(400px) rotateX(0); } } @keyframes hop { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-10px) rotate(-4deg); } 70% { transform: translateY(0) rotate(2deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ---------- Landing ---------- */ .landing { overflow-x: hidden; } .wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; } /* Hero fills the first screen below the nav (svh = the small viewport, so mobile browser bars don't cut it off). */ .hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); text-align: center; padding-block: 48px; } .hero-tiles { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 40px; } .hero-tiles .row { display: flex; gap: 8px; } .hero-tiles .tile { --size: clamp(46px, 11vw, 64px); animation: flip-in 0.7s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 120ms); transition: transform 0.35s var(--spring); } .hero-tiles .tile:hover { transform: translateY(-6px) rotate(-4deg); } .hero-tiles .tile.settled { animation: none; } .hero-tiles .tile.settled.hop { animation: hop 0.7s var(--ease); } .eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .hero h1 { font-size: clamp(2.6rem, 7.5vw, 4.8rem); line-height: 1.02; letter-spacing: -0.025em; margin: 18px auto 0; max-width: 900px; } .hero .lead { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--secondary); max-width: 560px; margin: 18px auto 0; } .hero-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 32px; } .hero-fade { animation: rise 0.8s var(--ease) both; } .hero-fade.d1 { animation-delay: 0.55s; } .hero-fade.d2 { animation-delay: 0.65s; } .hero-fade.d3 { animation-delay: 0.75s; } .hero-fade.d4 { animation-delay: 0.85s; } .section { padding-block: 56px; } .section-title { text-align: center; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.02em; max-width: 760px; margin: 0 auto; } .section-lead { text-align: center; color: var(--secondary); max-width: 520px; margin: 12px auto 0; font-size: 1.1rem; } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } .feature { background: var(--card); border-radius: 22px; padding: 28px 24px; box-shadow: var(--shadow); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .feature-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; color: var(--tile-ink); } .feature-icon svg { width: 24px; height: 24px; } .feature h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; } .feature p { color: var(--secondary); } .makers { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; background: var(--card); border-radius: 28px; padding: 48px; box-shadow: var(--shadow); } .makers h2 { font-size: clamp(2rem, 4.5vw, 2.8rem); letter-spacing: -0.02em; margin: 14px 0 12px; } .makers p { color: var(--secondary); } .makers ul { list-style: none; padding: 0; margin: 20px 0 28px; } .makers li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; } .makers li svg { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: 3px; } .demo { background: var(--bg); border-radius: 22px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; } .demo-card { width: 100%; max-width: 300px; } .avatar-stack { display: flex; } .avatar-stack .avatar { border: 2.5px solid var(--card); } .avatar-stack .avatar + .avatar { margin-left: -10px; } .footer { padding: 40px 0 56px; color: var(--secondary); font-size: 0.87rem; } .footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .footer-end { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .footer-links { display: flex; gap: 16px; } .footer-links a, .page-footer a { color: var(--secondary); } .footer-links a:hover, .page-footer a:hover { color: var(--label); } /* Small legal links under app pages (account, consent) */ .page-footer { display: flex; justify-content: center; gap: 8px; padding: 0 16px 40px; font-size: 0.82rem; color: var(--tertiary); } .legal { font-size: 0.8rem; color: var(--secondary); text-align: center; line-height: 1.45; } .legal a { color: var(--secondary); text-decoration: underline; text-underline-offset: 2px; } /* ---------- Edit profile ---------- */ .profile-edit { margin-top: 14px; } .avatar-actions { display: flex; justify-content: center; gap: 8px; margin-top: 14px; } .avatar-actions label { cursor: pointer; } .field-cell { cursor: text; } .field-cell .cell-label { width: 92px; flex: none; font-weight: 500; } .field-cell .field, .field-cell .field:focus { height: 36px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; } .field-inline { display: flex; align-items: center; flex: 1; min-width: 0; } .field-at { color: var(--tertiary); } .field-inline:has(.field:not(:placeholder-shown)) .field-at { color: var(--label); } .edit-actions { margin-top: 24px; } .edit-actions > * + * { margin-top: 4px; } /* ---------- Legal pages ---------- */ .doc { max-width: 680px; margin: 0 auto; padding: 48px 20px 72px; } .doc h1 { font-size: clamp(2.2rem, 6vw, 3rem); } .doc .updated { color: var(--secondary); margin-top: 10px; } .doc .summary { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin-top: 28px; } .doc .summary ul { margin: 10px 0 0; padding-left: 20px; } .doc h2 { font-size: 1.35rem; font-weight: 700; margin-top: 40px; } .doc h3 { font-size: 1.05rem; font-weight: 700; font-family: var(--font-text); margin-top: 22px; } .doc p, .doc li { color: var(--label); } .doc p { margin-top: 12px; } .doc ul { margin: 12px 0 0; padding-left: 22px; } .doc li + li { margin-top: 6px; } .doc table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.95rem; } .doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 0.5px solid var(--separator); } .doc th { font-weight: 700; color: var(--secondary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; } .doc a { text-decoration: underline; text-underline-offset: 2px; } .doc .todo { background: var(--tile-5); color: var(--tile-ink); border-radius: 6px; padding: 0 6px; } /* ---------- Nav links (landing, games, maker) ---------- */ .nav-links { display: flex; align-items: center; gap: 18px; } .nav-links > a:not(.btn) { color: var(--secondary); font-weight: 500; font-size: 0.95rem; } .nav-links > a:not(.btn):hover, .nav-links > a[aria-current="page"] { color: var(--label); } /* ---------- Page hero (games, maker) ---------- */ .page-hero { text-align: center; padding: 64px 0 24px; display: flex; flex-direction: column; align-items: center; } .page-hero h1 { font-size: clamp(2.4rem, 6.5vw, 4rem); line-height: 1.02; letter-spacing: -0.025em; margin-top: 16px; max-width: 820px; } .page-hero .lead { font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--secondary); max-width: 580px; margin-top: 16px; } /* ---------- Games library ---------- */ .game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 32px 0 24px; } .game-card { display: flex; flex-direction: column; background: var(--card); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); color: var(--label); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); animation: rise 0.55s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); } a.game-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .game-card-media { aspect-ratio: 1.91 / 1; background: var(--fill); overflow: hidden; } .game-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); } a.game-card:hover .game-card-media img { transform: scale(1.03); } .game-card-tile { width: 100%; height: 100%; display: grid; place-items: center; } .game-card-tile span { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 22px; background: rgba(255, 255, 255, 0.55); color: var(--tile-ink); font-family: var(--font-display); font-weight: 900; font-size: 44px; } .game-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .game-card-body h3 { font-size: 1.3rem; font-weight: 700; } .game-card-body p { color: var(--secondary); font-size: 0.95rem; } .game-card-host { margin-top: auto; padding-top: 8px; font-size: 0.85rem; color: var(--accent); font-weight: 500; } .game-card.skeleton { animation: none; } .game-card.skeleton .game-card-media, .game-card.skeleton .game-card-body span { background: linear-gradient(90deg, var(--fill) 0%, var(--separator) 50%, var(--fill) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } .game-card.skeleton .game-card-body span { display: block; height: 14px; border-radius: 7px; width: 55%; } .game-card.skeleton .game-card-body span + span { width: 80%; } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } .games-empty { text-align: center; padding: 48px 0 32px; color: var(--secondary); } .games-empty .hero-tiles { margin-bottom: 16px; } .games-error { grid-column: 1 / -1; text-align: center; color: var(--secondary); padding: 32px 0; } .cta-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--card); border-radius: 24px; box-shadow: var(--shadow); padding: 28px 32px; margin: 32px 0 16px; } .cta-band h2 { font-size: 1.6rem; font-weight: 700; } .cta-band p { color: var(--secondary); margin-top: 4px; } /* ---------- Maker page ---------- */ .features.two { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-left: auto; margin-right: auto; } .how { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; align-items: center; margin-top: 40px; } .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .steps li { display: flex; gap: 14px; align-items: flex-start; } .steps .tile { flex: none; } .steps p { color: var(--secondary); margin-top: 2px; } .code { margin: 0; padding: 22px 24px; border-radius: 20px; overflow-x: auto; background: #1d1d1f; color: #e8e8ed; font: 13.5px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; } :root[data-theme="dark"] .code { background: #1c1c1e; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .code { background: #1c1c1e; } } .apply { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 36px; align-items: start; background: var(--card); border-radius: 28px; box-shadow: var(--shadow); padding: 44px; } .apply-intro h2 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); letter-spacing: -0.02em; margin: 14px 0 12px; } .apply-intro p { color: var(--secondary); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid label { font-weight: 600; font-size: 0.9rem; display: flex; flex-direction: column; gap: 6px; } .form-grid .span-2 { grid-column: 1 / -1; } .form-grid .optional { font-weight: 400; color: var(--secondary); } .lead-form .error { margin: 12px 0 0; } .lead-form .btn { margin-top: 16px; } select.field { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; } textarea.field { height: auto; padding: 12px 16px; resize: vertical; line-height: 1.45; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .lead-sent { text-align: center; padding: 24px 0; } .lead-sent .hero-tiles { margin-bottom: 18px; } .lead-sent h3 { font-size: 1.6rem; font-weight: 700; } .lead-sent p { color: var(--secondary); margin-top: 6px; } @media (max-width: 900px) { .game-grid { grid-template-columns: repeat(2, 1fr); } .how, .apply { grid-template-columns: 1fr; } .apply { padding: 28px 20px; } } /* Very narrow phones: keep the tile mark, drop the wordmark so nav links fit. */ @media (max-width: 360px) { .nav .logo { font-size: 0; gap: 0; } .btn:not(.sm) { white-space: normal; height: auto; min-height: 50px; padding-block: 12px; text-align: center; } } @media (max-width: 600px) { .game-grid, .features.two, .form-grid { grid-template-columns: 1fr; } .page-hero { padding-top: 40px; } .nav-links { gap: 14px; } .nav-inner { padding: 0 16px; } .cta-band { padding: 24px 20px; } } /* ---------- 404 ---------- */ .not-found { text-align: center; min-height: calc(100svh - 56px - 120px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .not-found .hero-tiles { margin-bottom: 12px; } /* Theme switcher: iOS-style segmented control with three icons */ .theme-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fill); } .theme-switch button { display: grid; place-items: center; width: 32px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--secondary); cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s, box-shadow 0.25s; } .theme-switch button:hover { color: var(--label); } .theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .theme-switch button[aria-pressed="true"] { background: var(--card); color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .theme-switch svg { width: 16px; height: 16px; } /* Brief colour cross-fade while switching themes */ html.theme-anim, html.theme-anim * { transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s !important; } .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } .js .reveal.in { opacity: 1; transform: none; } @media (max-width: 800px) { .features { grid-template-columns: 1fr; } .makers { grid-template-columns: 1fr; padding: 28px 20px; } .hero { padding-block: 32px; } }