/* Nunito, by Vernon Adams et al., SIL Open Font License 1.1. */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/nunito-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/nunito-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/nunito-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --brand: #221ab2; --brand-deep: #170f86; --blue: #2563eb; --blue-bright: #3b82f6; --ink: #0f172a; --body: #334155; --muted: #64748b; --faint: #94a3b8; --surface: #f4f7fb; --line: #e5ebf3; --cream: #f6e6c3; --straw: #e2c48a; --white: #ffffff; color-scheme: light; } /* Each page carries both languages; the server sets . */ html[lang="vi"] [lang="en"], html[lang="en"] [lang="vi"] { display: none !important; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--white); color: var(--body); font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: var(--blue); text-underline-offset: 3px; } h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0; } :focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; border-radius: 8px; } /* ---------- Home: hero ---------- */ .hero { position: relative; padding: 16px 20px 150px; background: radial-gradient(120% 80% at 50% 0%, #2d25c9 0%, var(--brand) 55%, var(--brand-deep) 100%); color: var(--white); text-align: center; overflow: hidden; } .bar { display: flex; justify-content: flex-end; max-width: 1040px; margin: 0 auto; } .lang { color: var(--white); font-size: 15px; font-weight: 700; text-decoration: none; padding: 6px 14px; border: 1.5px solid rgb(255 255 255 / 0.35); border-radius: 999px; } .lang:hover { background: rgb(255 255 255 / 0.12); } .hero .wordmark { width: min(78vw, 380px); margin: 28px auto 0; } .tagline { margin-top: 18px; color: var(--white); font-size: clamp(40px, 11vw, 68px); font-weight: 900; letter-spacing: -0.02em; } .lede { max-width: 30ch; margin: 10px auto 0; color: rgb(255 255 255 / 0.86); font-size: clamp(18px, 4.6vw, 22px); font-weight: 600; } .badge { display: inline-flex; align-items: center; gap: 10px; margin: 28px 0 0; padding: 12px 22px; background: var(--cream); color: var(--brand); border-radius: 999px; font-weight: 800; box-shadow: 0 10px 30px rgb(10 6 70 / 0.35); } .badge .dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgb(34 197 94 / 0.2); } .hint { margin: 12px 0 0; color: rgb(255 255 255 / 0.7); font-size: 15px; font-weight: 600; } /* ---------- Home: phone ---------- */ .showcase { display: flex; justify-content: center; margin-top: -120px; padding: 0 20px; position: relative; } .phone { width: 250px; padding: 10px; border-radius: 42px; background: #0b0b1f; box-shadow: 0 30px 60px rgb(15 23 42 / 0.28), inset 0 0 0 2px #2a2a45; } .screen { position: relative; height: 470px; padding: 44px 16px 16px; border-radius: 33px; background: linear-gradient(170deg, #c9d8ff 0%, #f3d9ec 55%, #ffe7cc 100%); overflow: hidden; } .clock { position: absolute; top: 12px; left: 22px; color: var(--ink); font-size: 13px; font-weight: 800; } .widget { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 26px; background: rgb(255 255 255 / 0.5); box-shadow: 0 10px 24px rgb(34 26 178 / 0.12); } .shot { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; } /* A sunset snapshot. */ .shot-sun { background: radial-gradient(circle at 50% 62%, #fff4c2 0 14%, transparent 15%), linear-gradient(180deg, #ff9a62 0%, #ff6f91 55%, #7b5cff 100%); } .shot-sun::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; background: linear-gradient(180deg, #3a2a8f, #211866); clip-path: polygon(0 45%, 18% 20%, 34% 50%, 55% 10%, 75% 45%, 100% 25%, 100% 100%, 0 100%); } /* A photobooth print, shown whole on its paper. */ .shot-print { display: grid; grid-template-rows: repeat(4, 1fr); gap: 4px; padding: 8px 30%; background: var(--cream); } .shot-print i { border-radius: 3px; background: linear-gradient(135deg, #7aa7ff, #a78bfa); } .shot-print i:nth-child(2) { background: linear-gradient(135deg, #fda4af, #fb7185); } .shot-print i:nth-child(3) { background: linear-gradient(135deg, #fde68a, #f59e0b); } .shot-print i:nth-child(4) { background: linear-gradient(135deg, #86efac, #14b8a6); } .apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 14px; margin-top: 26px; padding: 0 6px; } .apps i { aspect-ratio: 1; border-radius: 14px; background: rgb(255 255 255 / 0.62); } .apps .app-pose { background: var(--brand) url("/icon-192.png") center / cover; } /* ---------- Home: features ---------- */ .features { display: grid; gap: 16px; max-width: 1040px; margin: 0 auto; padding: 56px 20px 24px; } .feature { padding: 24px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); } .feature .icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: var(--white); font-size: 28px; box-shadow: 0 6px 16px rgb(15 23 42 / 0.06); } .feature h2 { margin-top: 16px; font-size: 22px; font-weight: 900; } .feature p { margin: 6px 0 0; } @media (min-width: 720px) { .features { grid-template-columns: repeat(2, 1fr); gap: 20px; } } /* ---------- Home: invite band ---------- */ .invite-band { max-width: 1000px; margin: 24px auto 0; padding: 36px 24px; border-radius: 32px; background: var(--brand); color: rgb(255 255 255 / 0.85); text-align: center; } .invite-band h2 { color: var(--white); font-size: clamp(26px, 6vw, 34px); font-weight: 900; } .invite-band p { max-width: 36ch; margin: 10px auto 0; font-weight: 600; } .invite-band .link-pill { display: inline-block; margin-top: 20px; padding: 12px 22px; border-radius: 999px; background: var(--white); color: var(--brand); font-weight: 900; font-size: clamp(17px, 4.4vw, 20px); } @media (max-width: 1040px) { .invite-band { margin-left: 20px; margin-right: 20px; } } /* ---------- Footer ---------- */ .footer { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px 40px; color: var(--muted); font-size: 15px; text-align: center; } .footer img { width: 44px; border-radius: 12px; } .footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; } .footer a { color: var(--body); font-weight: 700; text-decoration: none; } .footer a:hover { color: var(--blue); text-decoration: underline; } .footer p { margin: 0; } /* ---------- Invite and not-found cards ---------- */ .stage { display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100dvh; padding: 28px 16px 32px; background: radial-gradient(120% 70% at 50% 0%, #2d25c9 0%, var(--brand) 55%, var(--brand-deep) 100%); } .stage .wordmark { width: min(52vw, 210px); } .card { width: min(100%, 420px); margin-top: 22px; padding: 30px 24px 26px; border-radius: 32px; background: var(--white); text-align: center; box-shadow: 0 24px 60px rgb(10 6 70 / 0.35); } .avatar { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; background: linear-gradient(145deg, #4f8df9, var(--blue)); color: var(--white); font-size: 38px; font-weight: 900; box-shadow: 0 0 0 6px #eef4ff; } .card h1 { margin-top: 18px; font-size: clamp(26px, 7vw, 32px); font-weight: 900; overflow-wrap: anywhere; } .handle { margin: 2px 0 0; color: var(--blue); font-weight: 800; } .card .message { margin: 14px 0 0; color: var(--body); font-size: 18px; font-weight: 600; } .button { display: block; margin-top: 24px; padding: 16px 20px; border-radius: 18px; background: linear-gradient(180deg, #4f8df9, var(--blue)); color: var(--white); font-size: 18px; font-weight: 900; text-decoration: none; box-shadow: 0 10px 24px rgb(37 99 235 / 0.3); } .button:active { transform: translateY(1px); } .button.quiet { background: var(--surface); color: var(--brand); box-shadow: none; } .note { margin: 16px 0 0; color: var(--muted); font-size: 15px; } .soon { margin-top: 22px; padding: 14px 16px; border-radius: 18px; background: #fff8e8; color: #7a5a1c; font-size: 15px; font-weight: 700; } .soon a { color: inherit; } .stage-foot { margin-top: auto; padding-top: 28px; color: rgb(255 255 255 / 0.72); font-size: 14px; font-weight: 700; text-align: center; } .stage-foot a { color: var(--white); } /* ---------- Documents (privacy, account deletion) ---------- */ .doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--brand); } .doc-head img { width: 104px; } .doc { max-width: 740px; margin: 0 auto; padding: 36px 20px 16px; } .doc h1 { font-size: clamp(30px, 7vw, 40px); font-weight: 900; } .doc .updated { margin: 6px 0 0; color: var(--muted); font-size: 15px; } .doc h2 { margin-top: 34px; font-size: 22px; font-weight: 900; } .doc p, .doc li { margin: 10px 0 0; } .doc ul, .doc ol { padding-left: 22px; margin: 10px 0 0; } .doc strong { color: var(--ink); } .doc .callout { margin-top: 24px; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }