92978607da
Replace the press-to-play demo and the "see how it works" button with an example that keeps playing on the right: hold Right Alt, the capsule appears with live wave bars, elapsed time and the partial transcript, releasing shows the processing bar, and the cleaned sentence is pasted at the cursor of a notes window. It cycles through two samples per language. - Same numbers as apps/desktop recording-tip: 9 bars with cos weights, 100 ms updates, 0.5 smoothing, +/-35% jitter, 2-28 px, per-bar colours, 120 px progress bar min(95, (1 - 1/(1 + 1.5t)) * 100)%. - WCAG 2.2.2: a pause button; stops when off screen or the tab is hidden. Reduced motion shows one still frame. The animation is aria-hidden with a text description for screen readers. Chinese and Japanese transcripts appear three characters at a time. - Add 404.html so unknown paths stop falling back to the landing page, delete the duplicate accept-invite.html (/accept-invite/ is canonical) and link it straight to /#download, and move the legal pages off the retired orange accent (primary button contrast 5.2:1).
111 lines
2.4 KiB
CSS
111 lines
2.4 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, sans-serif;
|
|
background: #090b0f;
|
|
color: #f3f4f6;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background:
|
|
radial-gradient(circle at 80% 0%, rgba(59, 130, 246, 0.11), transparent 34rem),
|
|
#090b0f;
|
|
}
|
|
|
|
a { color: #60a5fa; }
|
|
a:hover { color: #93c5fd; }
|
|
|
|
.shell {
|
|
width: min(920px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
padding: 32px 0 72px;
|
|
}
|
|
|
|
.brand {
|
|
display: inline-flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
color: #f8fafc;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: .08em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 3px;
|
|
background: #3b82f6;
|
|
box-shadow: 0 0 18px rgba(59, 130, 246, .5);
|
|
}
|
|
|
|
main {
|
|
margin-top: 28px;
|
|
padding: clamp(24px, 5vw, 52px);
|
|
border: 1px solid rgba(255,255,255,.09);
|
|
border-radius: 24px;
|
|
background: rgba(20, 23, 30, .92);
|
|
box-shadow: 0 24px 80px rgba(0,0,0,.35);
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0 0 12px;
|
|
color: #60a5fa;
|
|
font: 700 11px/1.4 "JetBrains Mono", monospace;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1 { margin: 0; font-size: clamp(32px, 6vw, 54px); line-height: 1.05; }
|
|
h2 { margin: 40px 0 12px; font-size: 21px; }
|
|
h3 { margin: 24px 0 8px; font-size: 16px; }
|
|
p, li { color: #c7cbd4; font-size: 15px; line-height: 1.8; }
|
|
ul, ol { padding-left: 22px; }
|
|
|
|
.lead { max-width: 720px; color: #e6e8ed; font-size: 17px; }
|
|
.meta { color: #828895; font-size: 13px; }
|
|
|
|
.notice {
|
|
margin: 24px 0;
|
|
padding: 18px 20px;
|
|
border-left: 3px solid #3b82f6;
|
|
border-radius: 8px;
|
|
background: rgba(59, 130, 246, .08);
|
|
}
|
|
|
|
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
|
|
.button {
|
|
display: inline-flex;
|
|
min-height: 48px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 18px;
|
|
border-radius: 12px;
|
|
background: #2563eb;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
}
|
|
.button:hover { background: #1d4ed8; color: #fff; }
|
|
.button.secondary { background: #282d37; color: #f3f4f6; }
|
|
|
|
footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 18px;
|
|
justify-content: space-between;
|
|
padding: 22px 4px 0;
|
|
color: #777e8b;
|
|
font-size: 12px;
|
|
}
|
|
|
|
footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
|
|
|
|
@media (max-width: 560px) {
|
|
.shell { width: min(100% - 20px, 920px); padding-top: 18px; }
|
|
main { border-radius: 18px; }
|
|
}
|