/* Music Moment — design tokens, ported verbatim from the app. * * Source of truth chain: app 2.0/design.md -> MMColors.swift / MmColors.kt -> the :root that * app 2.0/firebase/functions/shareRender.js already ships on musicmoment.app. This file is that * same :root, so the landing page and the public share pages cannot drift apart. * * The site is dark only. There is no light theme here on purpose: the app's own web surface * (public profiles, shared posts) is dark-only too, and a light marketing page would be the * first inconsistency a visitor meets. */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css'); /* Outfit is self-hosted (3 weights, ~28 KB each) so the display face is never on a third party's * critical path. Pretendard comes from the dynamic-subset CDN instead — the full face is about * 1.5 MB per weight, which is more than this entire page is allowed to weigh. */ @font-face { font-family: 'Outfit'; src: url('/media/fonts/Outfit-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('/media/fonts/Outfit-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('/media/fonts/Outfit-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; } :root { /* Brand — theme-independent */ --primary: #08B3EF; /* cyan: wordmark, links, active state, info */ --accent: #19C3C9; /* teal: the gradient's other end */ --gradient: linear-gradient(135deg, #08B3EF, #19C3C9); --on-primary: #04222E; /* deep navy — the ONLY text colour allowed on the gradient. White measures 2.41:1 on the cyan and 2.17:1 on the teal; this measures 6.84:1 and 7.61:1. The app retired white here. */ --coral: #FB6B74; /* like / error ONLY. Never decorative. */ --success: #3EDC8A; --warning: #FFE15D; /* Dark surfaces. Depth comes from surface lightness, not shadow — shadows are close to * invisible on a near-black ground. */ --bg: #0B0D12; --s1: #14161D; --s2: #1C1F28; --s3: #242834; --border: rgba(255, 255, 255, .08); /* Text. Measured against --bg: * --tx 19.43:1 * --tx2 8.55:1 * --tx3 4.14:1 <- FAILS WCAG AA for body copy (needs 4.5:1). * So --tx3 is allowed only at >=24px, or >=18.66px bold, where the bar drops to 3:1. * Body and secondary copy use --tx2. */ --tx: #FFFFFF; --tx2: #A6ACBB; --tx3: #6E7480; /* Marketing ground — a touch bluer than the app's --bg, matching the store screenshots and * the Play feature graphic, both of which sit on #0A1622. */ --ground: #0A1622; --fd: 'Outfit', 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif; --fb: 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif; /* Radii (app scale). Core CTAs are rounded rects at 14 — pills are for chips and small * buttons only, circles for icon buttons and avatars. */ --r-xs: 8px; --r-sm: 12px; --r-cta: 14px; --r-md: 16px; --r-lg: 20px; --r-dialog: 24px; --r-xl: 28px; --r-pill: 999px; /* Motion */ --t-instant: 80ms; --t-fast: 140ms; --t-base: 220ms; --t-slow: 320ms; --t-expressive: 480ms; --std: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --shadow-cta: 0 10px 28px -8px rgba(8, 179, 239, .55); --shadow-raised: 0 16px 40px -12px rgba(0, 0, 0, .6); --shadow-card: 0 24px 50px -18px rgba(0, 0, 0, .7); /* 4pt scale, gutter 20 */ --gutter: 20px; --max: 1160px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--fb); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Korean breaks between syllables by default, which turns "다음 인생곡" into "다음 인/생곡". * keep-all forces word boundaries — the same thing the app does with LineBreak(Phrase) and the * store screenshot template does in its own CSS. Applied to every display-sized element. */ h1, h2, h3, .display, .lead { word-break: keep-all; line-break: strict; } h1, h2, h3, p { margin: 0; } a { color: inherit; } img, video { max-width: 100%; display: block; } /* Default focus rings routinely disappear on dark grounds. This one is the brand cyan, which * measures 8.06:1 against --bg — comfortably past the 3:1 required of a focus indicator. */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; } /* ---- Primitives ------------------------------------------------------------------------ */ .wm { display: block; width: 152px; height: 22px; background: url('/media/brand/wordmark.png') left center / contain no-repeat; text-indent: -9999px; overflow: hidden; } .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border: 0; border-radius: var(--r-cta); background: var(--gradient); color: var(--on-primary); font-family: var(--fd); font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; box-shadow: var(--shadow-cta); transition: transform var(--t-fast) var(--std), box-shadow var(--t-fast) var(--std); cursor: pointer; } .cta:active { transform: scale(.96); box-shadow: 0 6px 18px -10px rgba(8, 179, 239, .5); } .cta-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-cta); background: transparent; color: var(--tx2); font-family: var(--fd); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: transform var(--t-fast) var(--std), color var(--t-fast) var(--std), border-color var(--t-fast) var(--std); cursor: pointer; } .cta-ghost:hover { color: var(--tx); border-color: rgba(255, 255, 255, .32); } .cta-ghost:active { transform: scale(.96); } .eyebrow { font-family: var(--fd); font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--primary); } /* Store badges. Both files are trimmed to their artwork by scripts/media.py, so one height is * correct for both — Apple's SVG never had padding, Google's PNG had it baked in and different * per locale (76.8% of canvas in ko, 67.2% in en). Apple's rules require the BLACK badge * whenever another platform's badge is present, and that Apple comes first in the lineup. */ .badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .badges img { height: 44px; width: auto; } .badges a { display: block; border-radius: 8px; transition: transform var(--t-fast) var(--std); } .badges a:active { transform: scale(.96); } .device { /* Matches the mockup PNGs exactly: their frame measures 1030x2200 with a 16px bezel, and the * radius is 14.1% of the frame width. Percentage radii resolve per axis and would go oval on * a 1:2.1 box, so the radius is computed from the width variable instead. */ --fw: 300px; width: var(--fw); aspect-ratio: 1030 / 2200; padding: calc(var(--fw) * .01553); border-radius: calc(var(--fw) * .141); background: linear-gradient(160deg, #20262E 0%, #0C1014 42%, #161B22 100%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .085) inset, 0 0 90px rgba(8, 179, 239, .18); } .device > * { width: 100%; height: 100%; border-radius: calc(var(--fw) * .141 - var(--fw) * .01553); object-fit: cover; background: #000; } /* prefers-reduced-motion covers more than video: parallax, scroll-jacking, entrance animations * and auto-advancing anything. Autoplay is additionally suppressed in app.js. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }