/* Layout: bold left-aligned headlines with one orange word (PONGE brand), the 3D bolt as the hero object, app reactions as live Lottie stickers, real iPhone mockups, and one full-bleed orange band for impromptu meetups. */ /* == generated by site/tools/fetch_fonts.rb — do not edit == */ @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url('/fonts/landing/latin-BricolageGrotesque-500-800.fd3ca827.woff2') format('woff2')} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/landing/latin-InstrumentSans-400-700.9d26aa09.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/landing/latin-JetBrainsMono-500.3d26568c.woff2') format('woff2')} @font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/landing/ja-ZenKakuGothicNew-700.e70ec942.woff2') format('woff2')} @font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/landing/ja-ZenKakuGothicNew-900.e0af48cd.woff2') format('woff2')} @font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/landing/ja-NotoSansJP-400-700.7e227bd0.woff2') format('woff2')} @font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/landing/ko-NotoSansKR-400-900.1b6cb207.woff2') format('woff2')} @font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/landing/zh-CN-NotoSansSC-400-900.aef79bd6.woff2') format('woff2')} @font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/landing/zh-TW-NotoSansTC-400-900.70f0d89e.woff2') format('woff2')} @font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/landing/th-NotoSansThai-400-800.168c59d9.woff2') format('woff2')} /* == end generated == */ :root { --brand: #FF4400; /* AppPalette.orange500 */ --brand-deep: #CC3700; /* AppPalette.orange700 */ --brand-tint: #FFF1EA; --on-brand: #FFFFFF; --bg: #FFFFFF; --surface: #F9F9F8; /* AppPalette.gray50 */ --hairline: #E8E8E6; /* AppPalette.gray200 */ --fg: #303030; /* AppPalette.gray900 */ --fg-soft: #72726E; /* AppPalette.gray500 */ --card: #FFFFFF; --bubble: #F1F1EF; --shadow: 0 18px 50px -20px rgba(80, 30, 0, .28); --font-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", Arial, sans-serif; --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --gutter: clamp(16px, 4vw, 48px); --max: 1160px; color-scheme: light; } * { box-sizing: border-box; } [hidden] { display: none !important; } /* 키보드로 들어오면 맨 먼저 보이는 「본문 바로가기」. 평소에는 화면 밖에 둔다. */ .skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--fg); color: var(--bg); font-weight: 600; text-decoration: none; } .skip:focus { top: 12px; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 17px; line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } :focus-visible { outline: 2.5px solid var(--brand); outline-offset: 3px; border-radius: 6px; } h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin: 0; text-wrap: balance; } h2 { font-size: clamp(36px, 5.4vw, 64px); } h3 { font-size: 22px; letter-spacing: -0.01em; line-height: 1.2; font-weight: 700; } p { margin: 0; } .em { color: var(--brand); } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--fg-soft); max-width: 34em; } /* Nav */ .nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .nav .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; } .nav .logo { height: 22px; width: auto; } .nav .wrap > ul { display: flex; gap: 34px; list-style: none; margin: 0 0 0 auto; padding: 0; font-size: 14px; font-weight: 600; } .nav .wrap > ul a { text-decoration: none; color: var(--fg-soft); } .nav .wrap > ul a:hover { color: var(--fg); } /* Current section: the app's bolt zaps in next to its menu item. */ .nav .wrap > ul a { position: relative; transition: color .2s ease; } .nav .wrap > ul a::before { content: ""; position: absolute; left: -19px; top: 50%; width: 15px; height: 15px; margin-top: -8px; background: var(--brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.9525 13.0172C18.4134 12.5851 18.4159 12.0178 18.2642 11.6316C18.1126 11.2453 17.725 10.8325 17.0932 10.8325H15.6117C15.1989 10.8325 14.8246 10.6394 14.5863 10.3014C14.3468 9.9647 14.2878 9.547 14.4226 9.1559L15.9727 4.685C16.2171 3.9789 15.8416 3.4418 15.4444 3.1967C15.259 3.0821 15.0184 3 14.762 3C14.4695 3 14.1566 3.1062 13.8798 3.3923L12.7269 4.5848L6.0221 10.7215C5.5527 11.1512 5.5467 11.7209 5.6971 12.1096C5.8476 12.4994 6.2351 12.9159 6.8706 12.9159H8.2185C8.6313 12.9159 9.0056 13.1102 9.2451 13.4482C9.4846 13.7861 9.5424 14.2038 9.4064 14.5949L7.7588 19.312C7.5181 20.0012 7.8779 20.5371 8.2594 20.7858C8.6409 21.0357 9.274 21.1491 9.8059 20.6506L17.9537 13.0161Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.9525 13.0172C18.4134 12.5851 18.4159 12.0178 18.2642 11.6316C18.1126 11.2453 17.725 10.8325 17.0932 10.8325H15.6117C15.1989 10.8325 14.8246 10.6394 14.5863 10.3014C14.3468 9.9647 14.2878 9.547 14.4226 9.1559L15.9727 4.685C16.2171 3.9789 15.8416 3.4418 15.4444 3.1967C15.259 3.0821 15.0184 3 14.762 3C14.4695 3 14.1566 3.1062 13.8798 3.3923L12.7269 4.5848L6.0221 10.7215C5.5527 11.1512 5.5467 11.7209 5.6971 12.1096C5.8476 12.4994 6.2351 12.9159 6.8706 12.9159H8.2185C8.6313 12.9159 9.0056 13.1102 9.2451 13.4482C9.4846 13.7861 9.5424 14.2038 9.4064 14.5949L7.7588 19.312C7.5181 20.0012 7.8779 20.5371 8.2594 20.7858C8.6409 21.0357 9.274 21.1491 9.8059 20.6506L17.9537 13.0161Z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transform: scale(.4) rotate(-20deg); transition: opacity .2s ease, transform .2s ease; } .nav .wrap > ul a.on { color: var(--fg); } .nav .wrap > ul a.on::before { opacity: 1; transform: none; animation: zap .55s cubic-bezier(.3, 1.6, .5, 1) both; } @keyframes zap { 0% { opacity: 0; transform: translateX(-6px) scale(.4) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.3) rotate(8deg); } 100% { opacity: 1; transform: none; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; font: 700 15px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease; } .btn-brand { background: var(--brand); color: var(--on-brand); } .btn-brand:hover { transform: translateY(-1px); background: var(--brand-deep); } @media (max-width: 760px) { .nav .wrap > ul { display: none; } .nav .btn { margin-left: auto; } } /* Hero */ .hero { padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 88px); } .hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: start; } .hero h1 { font-size: clamp(44px, 6.4vw, 88px); } @media (min-width: 1100px) { .hero h1 .line { white-space: nowrap; } } .hero h1 .line { display: block; } .hero .copy { display: grid; gap: 28px; min-width: 0; } .badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .badges img { height: 48px; width: auto; } .fine { font-size: 13px; color: var(--fg-soft); } /* Hero collage: a Shout → its meetup → the night itself, cycling through three scenes. */ .moments { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / 1.08; justify-self: center; align-self: start; margin-top: 40px; perspective: 900px; } .moments .glow { position: absolute; inset: 10% 6% 6% 18%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent) 0%, transparent 70%); filter: blur(24px); } .back { position: absolute; width: 34%; aspect-ratio: 1; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 4px solid #FFFFFF; } .back img { width: 100%; height: 100%; object-fit: cover; } .back.b1 { left: 0; bottom: 10%; transform: rotate(-7deg); animation: drift 8s ease-in-out infinite; } .back.b2 { right: 0; top: 0; transform: rotate(6deg); width: 30%; animation: drift 9s ease-in-out -3s infinite; } .frame { position: absolute; inset: 7% 10% 9% 16%; margin: 0; border-radius: 32px; overflow: hidden; background: #2A2220; box-shadow: 0 30px 60px -24px rgba(60, 20, 0, .45); } .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .9s ease .9s, transform 7s ease-out .9s; } .frame img.on { opacity: 1; transform: scale(1); } .frame .when { position: absolute; right: 14px; top: 14px; z-index: 2; font: 500 12px var(--font-mono); color: #FFFFFF; background: rgba(0, 0, 0, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 6px 10px; border-radius: 999px; opacity: 0; transition: opacity .5s ease 1.6s; } .frame .when.on { opacity: 1; } .scene .m-shout, .scene .m-card { position: absolute; z-index: 3; background: #FFFFFF; color: #303030; box-shadow: 0 18px 40px -16px rgba(60, 20, 0, .4); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .45s ease, transform .5s cubic-bezier(.2, 1.3, .4, 1); } .scene.on .m-shout { opacity: 1; transform: none; transition-delay: .1s; } .scene.on .m-card { opacity: 1; transform: none; transition-delay: .65s; } .m-shout { left: 2%; top: -12%; width: min(300px, 68%); padding: 12px 14px; border-radius: 20px 20px 20px 6px; display: grid; grid-template-columns: 34px 1fr; gap: 10px; font-size: 13.5px; line-height: 1.38; } .m-shout p { margin: 0; } .m-shout img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .m-shout .meta { display: block; font: 500 10.5px var(--font-mono); color: #FF4400; margin-bottom: 2px; } .m-card { right: 2%; bottom: 3%; width: min(280px, 64%); padding: 12px 16px 12px 12px; border-radius: 18px; display: flex; gap: 12px; align-items: center; } .m-card > div { display: grid; gap: 3px; justify-items: start; min-width: 0; } .m-card img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: none; } .m-card .tag { display: inline-block; margin: 0; line-height: 1.4; font: 700 10.5px var(--font-body); color: #FF4400; background: #FFF1EA; border-radius: 6px; padding: 2px 7px; } .m-card b { display: block; font-size: 14px; line-height: 1.2; } .m-card small { display: block; font-size: 11.5px; line-height: 1.2; color: #72726E; } .m-bolt { position: absolute; z-index: 4; right: 4%; top: 30%; width: 18%; transition: transform .25s ease-out; } .m-bolt img { width: 100%; animation: hover 5.5s ease-in-out infinite; filter: drop-shadow(0 16px 20px rgba(204, 55, 0, .4)); } @keyframes hover { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } } .sticker { position: absolute; z-index: 4; width: 19%; aspect-ratio: 1; animation: drift 6s ease-in-out infinite; pointer-events: none; } .sticker:nth-of-type(odd) { animation-duration: 7.5s; animation-delay: -2s; } .sticker:nth-of-type(3n) { animation-duration: 6.8s; animation-delay: -4s; } @keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 6px -10px; } } .dots { position: absolute; left: 16%; right: 10%; bottom: 1%; display: flex; justify-content: center; gap: 6px; z-index: 3; } .dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--hairline); transition: width .3s ease, background .3s ease; } .dots i.on { width: 20px; background: var(--brand); } @media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .moments { max-width: 460px; margin-top: 72px; } } /* Marquees (live shouts, communities) */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee .track { display: flex; width: max-content; animation: scroll var(--dur, 46s) linear infinite; } .marquee:hover .track { animation-play-state: paused; } @keyframes scroll { to { transform: translateX(-50%); } } .ticker { border-block: 1px solid var(--hairline); background: var(--surface); } .ticker .track { gap: 40px; padding-block: 16px; } .ticker span { white-space: nowrap; font-size: 15px; } .ticker .dist { font-family: var(--font-mono); font-size: 11.5px; color: var(--brand); margin-right: 8px; } /* Real iPhone mockup: thin bezel, Dynamic Island, side buttons */ .phone { --w: min(300px, 74vw); position: relative; width: var(--w); padding: calc(var(--w) * .022); border-radius: calc(var(--w) * .16); background: #0E0E0F; box-shadow: var(--shadow), 0 0 0 1.5px #5A5A5E, inset 0 0 0 1px #2A2A2C; } .phone img.screen { width: 100%; height: auto; border-radius: calc(var(--w) * .138); } .phone .island { position: absolute; left: 50%; top: calc(var(--w) * .043); width: calc(var(--w) * .29); height: calc(var(--w) * .085); transform: translateX(-50%); background: #000; border-radius: 999px; } .phone .hw { position: absolute; width: 3px; background: #4A4A4E; border-radius: 2px; } .phone .hw.act { left: -3.5px; top: 17%; height: 5%; } .phone .hw.v1 { left: -3.5px; top: 25%; height: 9%; } .phone .hw.v2 { left: -3.5px; top: 36%; height: 9%; } .phone .hw.pow { right: -3.5px; top: 28%; height: 14%; } /* Feature rows */ section { scroll-margin-top: 80px; } .feature { padding-block: clamp(64px, 9vw, 120px); } .feature .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .feature .text { display: grid; gap: 22px; min-width: 0; } .feature.flip .phone-col { order: -1; } .phone-col { position: relative; display: flex; justify-content: center; min-width: 0; } @media (max-width: 860px) { .feature .wrap { grid-template-columns: 1fr; } .feature.flip .phone-col { order: 0; } } /* Reaction bar (interactive) */ .react-card { background: var(--card); border: 1px solid var(--hairline); border-radius: 22px; padding: 18px; display: grid; gap: 14px; box-shadow: var(--shadow); max-width: 440px; } .who { display: flex; gap: 12px; align-items: center; } .who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .who .meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-soft); } .react-card .body { font-size: 16px; line-height: 1.45; } .reactions { display: flex; flex-wrap: wrap; gap: 6px; } .rx { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 2px 10px 2px 2px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); color: var(--fg); font: 600 13px var(--font-body); cursor: pointer; transition: border-color .15s, background .15s, transform .12s; } .rx:hover { transform: translateY(-1px); } .rx[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); } .rx .anim { width: 34px; height: 34px; } .rx.bump .anim { animation: bump .28s ease-out; } @keyframes bump { 40% { transform: scale(1.25); } } .hint { font-size: 13px; color: var(--fg-soft); } /* Impromptu band: scroll-driven app flow (desktop) / auto-play (phone) */ .band { background: var(--brand); color: var(--on-brand); padding-block: clamp(64px, 9vw, 120px); position: relative; } .band .em { color: #FFE2D4; } .band .lede { color: rgba(255, 255, 255, .88); } .band .bg-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .band .bg-bolt { position: absolute; right: -8%; top: -6%; width: 46%; opacity: .14; filter: grayscale(1) brightness(3); } .band .intro { display: grid; gap: 22px; max-width: 40em; position: relative; } .flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); margin-top: clamp(32px, 5vw, 56px); position: relative; } .fsteps { list-style: none; margin: 0; padding: 0; counter-reset: f; } .fstep { counter-increment: f; min-height: clamp(260px, 44vh, 420px); display: grid; align-content: center; gap: 8px; opacity: .45; transition: opacity .35s ease; } .fstep:first-child { align-content: start; padding-top: clamp(24px, 6vh, 64px); } .fstep:last-child { min-height: clamp(300px, 52vh, 480px); } .fstep.on { opacity: 1; } .fstep .who { font-size: 13px; font-weight: 600; color: #FFE2D4; } .fstep h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.02em; color: #FFFFFF; display: flex; gap: 14px; align-items: baseline; } .fstep h3::before { content: counter(f); font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: #FFE2D4; min-width: 1.4em; } .fstep p { color: rgba(255, 255, 255, .88); font-size: 17px; max-width: 28em; padding-left: calc(1.4em + 14px); } .flow-phone { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); align-self: start; display: grid; justify-items: center; gap: 16px; } .screens { cursor: pointer; position: relative; overflow: hidden; border-radius: calc(var(--w) * .138); background: #FFFFFF; aspect-ratio: 600 / 1300; } .screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateX(10%); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); } .screens img.on { opacity: 1; transform: none; } .screens img.past { transform: translateX(-10%); } .tap { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 68, 0, .28); border: 2.5px solid #FF4400; opacity: 0; pointer-events: none; z-index: 2; } .tap.go { animation: tap 1.6s ease-out infinite; animation-delay: .5s; } @keyframes tap { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1); } 30% { transform: scale(.82); } 45% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } .caption { display: none; text-align: center; max-width: 24em; min-height: 5.2em; } .caption b { display: block; font-family: var(--font-display); font-size: 22px; letter-spacing: -.01em; } .caption span { font-size: 15px; color: rgba(255, 255, 255, .88); } .bars { display: none; gap: 6px; width: var(--w); } .bars button { flex: 1; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; } .bars button i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; } .bars button i::after { content: ""; display: block; height: 100%; width: 0; background: #FFFFFF; } .bars button.done i::after { width: 100%; } .bars button.on i::after { animation: fillbar var(--step, 3.2s) linear forwards; } @keyframes fillbar { to { width: 100%; } } @media (prefers-reduced-motion: reduce) { .screens img { transition: none !important; } .bars button.on i::after { animation: none !important; width: 100%; } } .band .phone { box-shadow: 0 30px 70px -24px rgba(60, 10, 0, .6), 0 0 0 1.5px #5A5A5E, inset 0 0 0 1px #2A2A2C; } @media (max-width: 860px) { .flow { grid-template-columns: 1fr; } .fsteps { display: none; } .flow-phone { position: static; } .caption, .bars { display: flex; flex-direction: column; } .bars { flex-direction: row; } } /* How it works diagrams */ .how { padding-block: clamp(64px, 9vw, 120px); } .how .head { margin-bottom: 44px; } .how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .how-steps li { display: grid; gap: 20px; align-content: start; } .how-text { display: grid; gap: 8px; } .how-text h3 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; } .how-text p { color: var(--fg-soft); font-size: 15.5px; } .dia { position: relative; aspect-ratio: 1 / 1; max-width: 100%; border-radius: 28px; background: var(--surface); border: 1px solid var(--hairline); overflow: hidden; } @media (max-width: 900px) { .how-steps { grid-template-columns: 1fr; max-width: 460px; } } /* 1. radar: distance buckets around you */ .dia-radar .ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, var(--hairline)); transform: translate(-50%, -50%); } .dia-radar .ring em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font: 500 10.5px var(--font-mono); font-style: normal; color: var(--brand); background: var(--surface); padding: 0 6px; } .dia-radar .r1 { width: 34%; height: 34%; } .dia-radar .r2 { width: 62%; height: 62%; } .dia-radar .r3 { width: 90%; height: 90%; } .dia-radar .pulse { position: absolute; left: 50%; top: 50%; width: 14%; height: 14%; border-radius: 50%; background: color-mix(in srgb, var(--brand) 30%, transparent); transform: translate(-50%, -50%); animation: pulse 3s ease-out infinite; } @keyframes pulse { from { width: 14%; height: 14%; opacity: .9; } to { width: 92%; height: 92%; opacity: 0; } } .dia-radar .me { position: absolute; left: 50%; top: 50%; width: 17%; transform: translate(-50%, -50%); filter: drop-shadow(0 8px 12px rgba(204, 55, 0, .35)); } .dia-radar .dot { position: absolute; width: 11%; aspect-ratio: 1; border-radius: 50%; border: 2.5px solid var(--surface); box-shadow: 0 6px 14px -6px rgba(0,0,0,.4); animation: pop 6s ease-in-out infinite both; } .dia-radar .a1 { left: 22%; top: 30%; animation-delay: .6s; } .dia-radar .a2 { left: 68%; top: 60%; animation-delay: 1.4s; } .dia-radar .a3 { left: 74%; top: 22%; animation-delay: 2.2s; } @keyframes pop { 0%, 8% { transform: scale(.4); opacity: .25; } 16%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.4); opacity: .25; } } .dia-radar .b-plain, .dia-radar .b-meetup { animation: swap 9s ease-in-out infinite both; } .dia-radar .b-meetup { animation-delay: -4.5s; } @keyframes swap { 0%, 44% { opacity: 1; transform: translateX(-50%); } 50%, 94% { opacity: 0; transform: translateX(-50%) translateY(8px); } 100% { opacity: 1; transform: translateX(-50%); } } .dia-radar .mini { display: flex; align-items: center; gap: 8px; margin-top: 7px; padding: 6px 8px; border-radius: 10px; background: #FFFFFF; color: #303030; font-size: 11.5px; font-weight: 600; text-align: left; } .dia-radar .mini img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; } .dia-radar .mini em { display: block; font: 700 9.5px var(--font-body); font-style: normal; color: #FF4400; } .dia-radar .bubble { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: max-content; max-width: 86%; background: var(--brand); color: var(--on-brand); font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 14px 14px 14px 4px; box-shadow: var(--shadow); } /* 2. fork: one Shout, two ways to connect — the branches take turns lighting up */ .dia-fork { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 34px auto; column-gap: 10px; align-content: center; padding: 8% 7%; } .fnode { display: grid; gap: 1px; padding: 9px 11px; border-radius: 13px; background: var(--card); border: 1px solid var(--hairline); font-size: 12.5px; font-weight: 600; line-height: 1.3; } .fnode small { font: 500 10px var(--font-mono); color: var(--fg-soft); } .fnode.top { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-color: var(--brand); box-shadow: 0 10px 24px -14px var(--brand); } .fnode.top img { width: 22px; height: 22px; object-fit: contain; } .fnode.top div { display: grid; } .fork { grid-column: 1 / -1; width: 100%; height: 34px; } .fork path { fill: none; stroke: var(--brand); stroke-width: 2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .35; animation: forkline 7s ease-in-out infinite; } .fork .r { animation-delay: 3.5s; } .branch { display: grid; gap: 0; align-content: start; } .blabel { justify-self: center; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 2px 9px; } .vlink { justify-self: center; width: 2px; height: 12px; background: repeating-linear-gradient(var(--brand) 0 3px, transparent 3px 6px); opacity: .5; } .branch .fnode { animation: lit 7s ease-in-out infinite both; } .branch.left .fnode:nth-of-type(2) { animation-delay: .6s; } .branch.right .fnode:nth-of-type(1) { animation-delay: 3.5s; } .branch.right .fnode:nth-of-type(2) { animation-delay: 4.1s; } @keyframes lit { 0%, 4% { border-color: var(--hairline); box-shadow: none; } 10%, 38% { border-color: var(--brand); box-shadow: 0 8px 22px -12px var(--brand); } 46%, 100% { border-color: var(--hairline); box-shadow: none; } } @keyframes forkline { 0%, 4% { opacity: .35; } 10%, 38% { opacity: 1; } 46%, 100% { opacity: .35; } } /* 3. community: the app's schedule list (date left, Impromptu / Regular meet) + board */ .dia-community { display: grid; align-content: center; gap: 10px; padding: 9% 9%; } .gath { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; padding: 10px 12px; background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; animation: slidein 7s ease-in-out infinite both; } .gath:nth-child(2) { animation-delay: .5s; } .gath:nth-child(3) { animation-delay: 1s; } .gath .d { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.1; } /* Label and title sit on tight line boxes so the card has the same space above and below. */ .gath > div:last-child { display: grid; gap: 3px; line-height: 1.3; } .gath .k { display: block; line-height: 1.3; } .gath { align-items: center; } .gath .d small { display: block; font: 500 10px var(--font-mono); color: var(--fg-soft); } .gath .k { font: 700 10.5px var(--font-body); color: var(--brand); } .gath .k.reg { color: #1F9D55; } .gath b { display: block; font-size: 13px; line-height: 1.3; } @keyframes slidein { 0% { transform: translateX(-8px); opacity: .3; } 10%, 88% { transform: none; opacity: 1; } 100% { transform: translateX(-8px); opacity: .3; } } .hello { justify-self: end; max-width: 82%; background: var(--brand); color: var(--on-brand); font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 14px 14px 4px 14px; box-shadow: var(--shadow); } /* Community */ .points { display: grid; gap: 18px; } .point { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; } .point svg { width: 22px; height: 22px; color: var(--fg); margin-top: 2px; } .point p { color: var(--fg-soft); font-size: 15.5px; } .covers { margin-top: clamp(40px, 6vw, 72px); } .covers .track { gap: 16px; --dur: 60s; } .cover { flex: 0 0 200px; display: grid; gap: 10px; } .cover img { width: 200px; height: 200px; object-fit: cover; border-radius: 20px; } .cover b { font-size: 15px; line-height: 1.25; } .cover span { font-family: var(--font-mono); font-size: 11px; color: var(--fg-soft); display: block; } /* Why PONGE as a chat */ .why { padding-block: clamp(64px, 9vw, 120px); background: var(--surface); border-top: 1px solid var(--hairline); } .why .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: start; } .why .text { display: grid; gap: 22px; position: sticky; top: 120px; min-width: 0; } .chat { display: grid; gap: 12px; min-width: 0; } .msg { max-width: 82%; padding: 12px 16px; border-radius: 20px; font-size: 16px; line-height: 1.45; } .msg.q { justify-self: start; background: var(--bubble); color: var(--fg); border-bottom-left-radius: 6px; } .msg.a { justify-self: end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 6px; } .msg.a b { font-weight: 700; } .chat .gap { height: 8px; } @media (max-width: 860px) { .why .wrap { grid-template-columns: 1fr; } .why .text { position: static; } } /* Final CTA */ .cta { padding-block: clamp(72px, 10vw, 140px); border-top: 1px solid var(--hairline); } .cta .wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; } .cta .mini-bolt { width: clamp(120px, 18vw, 220px); animation: hover 5.5s ease-in-out infinite; } .cta .text { display: grid; gap: 24px; min-width: 0; } @media (max-width: 700px) { .cta .wrap { grid-template-columns: 1fr; } } footer { border-top: 1px solid var(--hairline); padding-block: 32px; font-size: 13px; color: var(--fg-soft); } footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; } footer .logo { height: 16px; width: auto; } footer nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; } footer a { text-decoration: none; } footer .sample-note { flex-basis: 100%; font-size: 11.5px; color: var(--fg-soft); opacity: .8; } /* Entrance: content is visible at rest; motion only nudges it in. */ .rise { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; } .rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; } @keyframes rise { from { transform: translateY(18px); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* Language menu — a dropdown so more languages can be added later. */ .lang-menu { position: relative; } .lang-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--fg); background: var(--bg); } .lang-menu summary::-webkit-details-marker { display: none; } .lang-menu summary:hover { border-color: var(--fg-soft); } .lang-menu .g { width: 17px; height: 17px; } .lang-menu .c { width: 14px; height: 14px; color: var(--fg-soft); transition: transform .2s ease; } .lang-menu[open] .c { transform: rotate(180deg); } .lang-menu .code { display: none; } .lang-menu ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 168px; margin: 0; padding: 6px; list-style: none; background: var(--bg); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(40, 20, 0, .28); } .lang-menu li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--fg); text-decoration: none; } .lang-menu li a:hover { background: var(--surface); } .lang-menu li a[aria-current="true"] { color: var(--brand); } .lang-menu li a[aria-current="true"]::after { content: "✓"; font-weight: 700; } @media (max-width: 760px) { .lang-menu .full { display: none; } .lang-menu .code { display: inline; } .lang-menu summary { padding: 0 10px; } } @media (max-width: 760px) { .nav .lang-menu { margin-left: auto; } .nav .btn { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .dia-radar .b-meetup { display: none; } } /* No blinking text cursor when tapping page text; real inputs keep theirs. */ html, body { caret-color: transparent; } input, textarea, select, [contenteditable="true"] { caret-color: auto; } /* Language list: compact, every row the same height whatever the script. */ .lang-menu ul { padding: 5px; } .lang-menu li { margin: 0; padding: 0; line-height: 1.2; } .lang-menu li a { min-height: 0; height: 34px; padding: 0 12px; line-height: 1.2; } /* Menu is as wide as the longest name; the check sits in a narrow column right after it. */ .lang-menu ul { min-width: 0; width: max-content; } .lang-menu li a { display: grid; grid-template-columns: 1fr 14px; align-items: center; gap: 14px; } .lang-menu li a::after { content: ""; } .lang-menu li a[aria-current="true"]::after { content: "✓"; } /* Locale faces and line breaking. Latin stays in the brand faces; each script falls through to its own face. Rules other than the font tokens use :where() so they keep the specificity they had as a per-page