/* Landing page only. The legal pages keep style.css. Colors follow MomentTheme.swift. */ :root { --ground: #fbf7f1; --ground-2: #f4ebe2; --card: #ffffff; --ink: #3a322c; --ink-2: #4a3f38; --muted: #6e645b; --rule: #efe7dc; --coral: #d07b5e; --coral-light: #f0a88b; --coral-deep: #b8624a; --coral-tint: #fcf1eb; --phone: #26221f; --shadow: 0 30px 60px -28px rgba(120, 70, 50, 0.45); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #1b1715; --ground-2: #231e1b; --card: #2a2421; --ink: #f1e9e2; --ink-2: #e2d7ce; --muted: #b3a79d; --rule: #3a322d; --coral: #e79478; --coral-light: #f0a88b; --coral-deep: #eea085; --coral-tint: #2e2320; --phone: #0e0c0b; --shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.8); color-scheme: dark; } } :root[data-theme="dark"] { --ground: #1b1715; --ground-2: #231e1b; --card: #2a2421; --ink: #f1e9e2; --ink-2: #e2d7ce; --muted: #b3a79d; --rule: #3a322d; --coral: #e79478; --coral-light: #f0a88b; --coral-deep: #eea085; --coral-tint: #2e2320; --phone: #0e0c0b; --shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.8); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; font-size: 16px; line-height: 1.9; -webkit-text-size-adjust: 100%; overflow-x: clip; } img { max-width: 100%; display: block; } /* Keep Japanese lines from breaking mid-phrase or leaving one character alone. */ h1, h2, h3 { text-wrap: balance; word-break: auto-phrase; } p, li { text-wrap: pretty; word-break: auto-phrase; } a { color: var(--coral-deep); } .round { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif; font-weight: 700; letter-spacing: 0.01em; } .wrap { max-width: 68rem; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .wrap { padding: 0 2rem; } } /* Top bar */ .bar { display: flex; align-items: center; justify-content: space-between; padding-top: 1.1rem; padding-bottom: 1.1rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; font-size: 1.05rem; } .brand img { width: 34px; height: 34px; border-radius: 9px; } .bar-cta { font-size: 0.85rem; font-weight: 700; color: var(--coral-deep); text-decoration: none; padding: 0.45rem 0.95rem; border: 1.5px solid var(--coral); border-radius: 999px; white-space: nowrap; } /* Hero */ .hero { position: relative; padding: 2rem 0 4.5rem; overflow-x: clip; } .hero::before { content: ""; position: absolute; inset: -20% -30% auto 35%; height: 120%; background: radial-gradient(closest-side, var(--coral-tint), transparent); z-index: -1; } .hero-grid { display: grid; gap: 3rem; align-items: center; } @media (min-width: 880px) { .hero { padding: 3.5rem 0 6rem; } .hero-grid { grid-template-columns: 1.15fr 0.85fr; } } .eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; color: var(--coral-deep); background: var(--coral-tint); padding: 0.25rem 0.8rem; border-radius: 999px; margin: 0 0 1.2rem; } .hero h1 { font-size: clamp(2.1rem, 8vw, 3.6rem); line-height: 1.3; margin: 0 0 1.3rem; } .nw { white-space: nowrap; } .hero .lead { font-size: clamp(1.02rem, 3.6vw, 1.2rem); color: var(--ink-2); margin: 0 0 2rem; } .ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; } .cta-note { font-size: 0.82rem; color: var(--muted); margin: 0.9rem 0 0; } /* App Store button. Before release it reads 「近日公開」 and doesn't link; flip to "true" on release day. */ .store { display: inline-flex; align-items: center; gap: 0.65rem; background: #000; color: #fff; text-decoration: none; padding: 0.7rem 1.35rem 0.7rem 1.1rem; border-radius: 14px; line-height: 1.2; min-height: 56px; } .store svg { width: 24px; height: 24px; flex: none; } .store small { display: block; font-size: 0.68rem; opacity: 0.85; } .store strong { display: block; font-size: 1.08rem; font-weight: 700; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .store { background: #fff; color: #000; } } :root[data-theme="dark"] .store { background: #fff; color: #000; } /* Before release the button reads 「近日公開」 and doesn't link; release.sh flips to "true" on release day. */ body[data-released="false"] .store { pointer-events: none; } body[data-released="false"] .store .live, body[data-released="true"] .store .soon { display: none; } .share { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 56px; padding: 0.7rem 1.3rem; border-radius: 14px; border: 0; background: var(--coral); background: linear-gradient(135deg, #d4805f, #b35d45); color: #fff; font: inherit; font-weight: 700; font-size: 0.98rem; text-decoration: none; cursor: pointer; } .share svg { width: 20px; height: 20px; } /* Phone mockup around a real screenshot */ .phone { position: relative; width: min(300px, 78vw); margin: 0 auto; padding: 10px; border-radius: 48px; background: var(--phone); box-shadow: var(--shadow); } .phone > img { width: 100%; height: auto; aspect-ratio: 1320 / 2868; object-fit: cover; border-radius: 38px; } .hero .phone { transform: rotate(2.5deg); } .bubble { position: absolute; background: var(--card); color: var(--ink); border-radius: 18px; padding: 0.6rem 0.9rem; font-size: 0.82rem; font-weight: 700; line-height: 1.45; box-shadow: 0 14px 30px -14px rgba(120, 70, 50, 0.5); white-space: nowrap; } .bubble small { display: block; font-weight: 500; color: var(--muted); font-size: 0.72rem; } .bubble.b1 { left: -12%; top: 9%; transform: rotate(-4deg); } .bubble.b2 { right: -10%; bottom: 14%; transform: rotate(3deg); } @media (max-width: 420px) { .bubble.b1 { left: -4%; } .bubble.b2 { right: -4%; } } /* Hero: a new moment arrives on the widget. The overlay sits exactly over the widget in 01-widget.jpg (measured on the 1320x2868 screenshot: x 95-1225, y 282-1464), inside the phone's 10px bezel. */ .w-new { position: absolute; left: calc(10px + (100% - 20px) * 0.072); top: calc(10px + (100% - 20px) * 0.0983); /* % of height here */ width: calc((100% - 20px) * 0.856); aspect-ratio: 1130 / 1182; border-radius: 15px; overflow: hidden; opacity: 0; color: #fff; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .w-new img { width: 100%; height: 100%; object-fit: cover; } .w-name { position: absolute; left: 8%; top: 5.5%; font-size: 0.62rem; } .w-days { position: absolute; left: 5%; bottom: 5.5%; font-size: 0.6rem; } .w-days b { font-size: 0.95rem; } @media (prefers-reduced-motion: no-preference) { .arrive .w-new { animation: w-arrive 9s ease-in-out infinite; } .arrive .b1 { animation: b-note 9s ease-in-out infinite; } .arrive .b2 { animation: b-react 9s ease-in-out infinite; } } @keyframes w-arrive { 0%, 30% { opacity: 0; scale: 1.06; } 37%, 90% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; scale: 1; } } @keyframes b-note { 0%, 18% { opacity: 0; translate: 0 -10px; } 24%, 84% { opacity: 1; translate: 0 0; } 90%, 100% { opacity: 0; translate: 0 -10px; } } @keyframes b-react { 0%, 52% { opacity: 0; scale: 0.8; } 57%, 86% { opacity: 1; scale: 1; } 92%, 100% { opacity: 0; scale: 0.9; } } /* Shared section chrome */ section h2 { font-size: clamp(1.6rem, 5.6vw, 2.4rem); line-height: 1.45; margin: 0 0 1.6rem; } .narrow { max-width: 44rem; } .kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; color: var(--coral-deep); margin: 0 0 0.4rem; } /* The feeling */ .feel { padding: 5rem 0; background: var(--ground-2); text-align: center; } .feel p { color: var(--ink-2); font-size: 1.05rem; } .feel strong { color: var(--coral-deep); } .chips { list-style: none; padding: 0; margin: 0 auto 2.2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .chips li { background: var(--card); border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.92rem; font-weight: 600; box-shadow: 0 6px 18px -12px rgba(120, 70, 50, 0.6); } /* How it works */ .how { padding: 5.5rem 0; } .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } } .steps li { background: var(--card); border: 1px solid var(--rule); border-radius: 24px; padding: 1.6rem 1.5rem 1.4rem; } .steps h3 { font-size: 1.35rem; margin: 0.7rem 0 0.4rem; } .steps p { margin: 0; color: var(--ink-2); font-size: 0.95rem; } .num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--coral-tint); color: var(--coral-deep); font-size: 1.05rem; } /* Comparison with the two kinds of app people will think of */ .compare { padding: 1rem 0 5rem; } .compare-lead { color: var(--ink-2); margin: -0.4rem 0 2rem; max-width: 40rem; } .compare-lead strong { color: var(--coral-deep); } .cmp { background: var(--card); border: 1px solid var(--rule); border-radius: 24px; padding: 0.4rem 1.2rem; } .cmp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.2rem 0.8rem; padding: 0.85rem 0; border-top: 1px solid var(--rule); } .cmp-row p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--muted); } .cmp-row .me { color: var(--ink); font-weight: 700; } /* On phones the row label sits on its own line above the three answers. */ .cmp-label { grid-column: 1 / -1; font-weight: 700; color: var(--ink) !important; font-size: 0.8rem !important; } .cmp-head { border-top: 0; align-items: end; } .cmp-head p { font-size: 0.78rem; font-weight: 700; } .cmp-head .me { color: var(--coral-deep); font-size: 0.95rem; } .cmp-head .cmp-label { display: none; } @media (min-width: 700px) { .cmp { padding: 0.4rem 1.8rem; } .cmp-row { grid-template-columns: 11rem repeat(3, 1fr); align-items: baseline; } .cmp-label { grid-column: auto; font-size: 0.88rem !important; } .cmp-head .cmp-label { display: block; } .cmp-row p { font-size: 0.95rem; } } /* Features: phone and copy, alternating sides on wide screens */ .features { padding: 1rem 0 3rem; } .feature { display: grid; gap: 2rem; align-items: center; padding: 3.5rem 0; } .feature .phone { width: min(260px, 66vw); } .feature p:not(.kicker) { color: var(--ink-2); font-size: 1.02rem; margin: 0; } .feature h2 { margin-bottom: 1rem; } .feature .more-link { margin-top: 1rem; font-weight: 700; } @media (min-width: 760px) { .feature { grid-template-columns: 1fr 1fr; gap: 4rem; } .feature:nth-child(even) .phone { order: 2; } .feature > div:not(.phone) { max-width: 26rem; } } /* What Moment leaves out, and privacy */ .quiet { padding: 5.5rem 0; background: var(--ground-2); } .quiet-lead { color: var(--ink-2); margin: -0.4rem 0 2.2rem; } .nots { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; gap: 0.8rem; grid-template-columns: 1fr 1fr; } @media (min-width: 700px) { .nots { grid-template-columns: repeat(3, 1fr); } } .nots li { background: var(--card); border-radius: 18px; padding: 1rem 1.2rem; line-height: 1.6; } .nots b { display: block; font-size: 1.02rem; text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px; } .nots span { font-size: 0.88rem; color: var(--muted); } .privacy { border: 1.5px solid var(--coral); border-radius: 24px; padding: 1.6rem 1.5rem; background: var(--card); } .privacy h3 { font-size: 1.3rem; margin: 0 0 0.8rem; } .privacy ul { margin: 0 0 0.8rem; padding-left: 1.2rem; color: var(--ink-2); } .privacy li { margin: 0.35rem 0; } .privacy p { margin: 0; font-size: 0.92rem; } /* Pricing */ .pricing { padding: 5.5rem 0; } .plans { display: grid; gap: 1.2rem; align-items: start; } @media (min-width: 760px) { .plans { grid-template-columns: 0.8fr 1.2fr; } } .plan { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 24px; padding: 1.7rem 1.6rem 1.4rem; } .plan h3 { font-size: 1.3rem; margin: 0; } .plan .price { margin: 0.3rem 0 0.2rem; color: var(--muted); font-size: 0.95rem; } .plan .price span { font-size: 2rem; color: var(--ink); } .plan ul { list-style: none; padding: 0; margin: 1rem 0 0; } .plan li { padding: 0.45rem 0 0.45rem 1.7rem; position: relative; border-top: 1px solid var(--rule); font-size: 0.95rem; } .plan li::before { content: "✓"; position: absolute; left: 0.2rem; color: var(--coral); font-weight: 700; } .plan li b { color: var(--ink); } .plan-premium { border: 2px solid var(--coral); box-shadow: var(--shadow); } .tag { position: absolute; top: -0.85rem; left: 1.4rem; margin: 0; background: linear-gradient(135deg, #d4805f, #b35d45); color: #fff; font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.8rem; border-radius: 999px; } .save { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--coral-deep); } .fine { font-size: 0.82rem; color: var(--muted); margin: 1.2rem 0 0; } /* FAQ */ .faq { padding: 5rem 0 4rem; } .qa details { border-bottom: 1px solid var(--rule); padding: 0.3rem 0; } .qa summary { cursor: pointer; list-style: none; font-weight: 700; padding: 0.8rem 2rem 0.8rem 0; position: relative; } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: "+"; position: absolute; right: 0.3rem; top: 0.6rem; font-size: 1.3rem; color: var(--coral); font-weight: 400; } .qa details[open] summary::after { content: "−"; } .qa details p { margin: 0 0 0.9rem; color: var(--ink-2); font-size: 0.95rem; } .more { font-size: 0.9rem; color: var(--muted); margin-top: 1.4rem; } /* Closing call */ .last { padding: 5rem 0 5.5rem; text-align: center; background: radial-gradient(60% 80% at 50% 100%, var(--coral-tint), transparent), var(--ground); } .last p { color: var(--ink-2); margin: -0.4rem 0 2rem; } .last .ctas { justify-content: center; } /* Footer */ .foot { border-top: 1px solid var(--rule); padding: 2rem 0 3rem; color: var(--muted); font-size: 0.85rem; } .foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-bottom: 0.8rem; } .foot a { color: var(--muted); }