/* subline landing page — tokens copied verbatim from the Subline design project (same set the app vendors in subtitle-review-app/public/styles.css). One accent (brand teal), ink-on-white surfaces, pill controls, soft shadows. Dark mode: data-theme="dark" on flips every token below. */ /* Hanken Grotesk — vendored variable font (weights 300–800), so the page has no third-party requests. Subsets match Google's split; CJK falls through to the system font. */ @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/hanken-grotesk-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; } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/hanken-grotesk-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; } :root { color-scheme: light; /* Ink (neutral) scale */ --ink-950: #16181d; --ink-900: #1c1d20; --ink-700: #3f4247; --ink-500: #7b7f87; --ink-400: #a7abb3; --ink-300: #c6c9cf; --line-200: #e8eaee; --bg-150: #eff1f4; --bg-100: #f4f5f7; --bg-50: #f9fafb; --white: #ffffff; --bg-page: #eef0f3; /* Accent — subline teal */ --accent-700: #0b857a; --accent-600: #0d9c8f; --accent-400: #3fb5aa; --accent-300: #7ccbc3; --accent-100: #d6efec; --accent-50: #eaf7f5; /* Semantic */ --success-600: #0d9c8f; --success-500: #14b2a4; --success-100: #d6efec; --danger-600: #d63a48; --danger-500: #ef4352; --danger-100: #ffc4c8; --warning-500: #e8b93c; --warning-100: #faf3d4; /* Aliases */ --text-heading: var(--ink-950); --text-body: var(--ink-700); --text-secondary: var(--ink-500); --text-muted: var(--ink-400); --text-link: var(--accent-600); --text-on-dark: var(--white); --surface-page: var(--bg-page); --surface-card: var(--white); --surface-subtle: var(--bg-100); --surface-row: var(--bg-50); --surface-inverse: var(--ink-950); --surface-inverse-hover: #2c2d31; --border-default: var(--line-200); /* Type */ --font-sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; /* Spacing / radii */ --radius-pill: 999px; --radius-panel: 24px; --radius-card: 16px; --radius-row: 12px; --radius-chip: 7px; --control-h: 36px; --control-h-sm: 30px; /* Elevation — soft, diffuse, never hard */ --shadow-panel: 0 30px 80px -24px rgba(23, 24, 26, 0.18); --shadow-card: 0 10px 30px -12px rgba(23, 24, 26, 0.1); --shadow-pop: 0 24px 56px -16px rgba(23, 24, 26, 0.22); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-med: 200ms; /* Wordmark: always lowercase "subline", 800, -0.02em */ --wordmark-weight: 800; --wordmark-tracking: -0.02em; /* Video canvas in the product mockup — constant across themes */ --video-bg: #101215; } [data-theme="dark"] { color-scheme: dark; --ink-950: #f3f4f6; --ink-900: #e7e9ec; --ink-700: #c4c8ce; --ink-500: #949aa3; --ink-400: #6e747c; --ink-300: #4d525a; --line-200: #2e3138; --bg-150: #272a30; --bg-100: #22252b; --bg-50: #1d2026; --bg-page: #101215; --surface-card: #181b20; --surface-subtle: #20232a; --surface-inverse: #f3f4f6; --surface-inverse-hover: #dfe2e7; --text-on-dark: #16181d; --accent-700: #0d9c8f; --accent-600: #14b2a4; --accent-400: #3fc2b5; --accent-300: #2a7d74; --accent-100: #173f3a; --accent-50: #12302d; --success-600: #17c3b4; --success-500: #14b2a4; --success-100: #123832; --danger-600: #ff7d89; --danger-100: #422329; --warning-100: #3a3419; --shadow-panel: 0 30px 80px -24px rgba(0, 0, 0, 0.6); --shadow-card: 0 10px 30px -12px rgba(0, 0, 0, 0.45); --shadow-pop: 0 24px 56px -16px rgba(0, 0, 0, 0.7); --video-bg: #0a0c0e; } /* ---------- base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; color: var(--text-heading); text-wrap: balance; } p { margin: 0; } a { color: var(--text-link); font-weight: 700; text-decoration: none; } a:hover { color: var(--accent-700); } .wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-h); padding: 0 20px; border-radius: var(--radius-pill); border: 1px solid transparent; font: 700 13px/1 var(--font-sans); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn:active { transform: scale(0.98); } .btnPrimary { background: var(--surface-inverse); color: var(--text-on-dark); } .btnPrimary:hover { background: var(--surface-inverse-hover); color: var(--text-on-dark); } .btnGhost { background: var(--surface-card); border-color: var(--border-default); color: var(--text-heading); } .btnGhost:hover { background: var(--surface-subtle); color: var(--text-heading); } /* Placeholder CTAs (anchors with no href yet) are inert — drop the pointer affordances. */ a.btn:not([href]) { cursor: default; } a.btn:not([href]):active { transform: none; } a.btnPrimary:not([href]):hover { background: var(--surface-inverse); } .btnLarge { height: 44px; padding: 0 26px; font-size: 14px; } .iconBtn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h); height: var(--control-h); border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-secondary); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .iconBtn:hover { background: var(--surface-subtle); color: var(--text-heading); } .icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 10; background: var(--surface-page); border-bottom: 1px solid transparent; } .nav.scrolled { border-bottom-color: var(--border-default); } .navInner { display: flex; align-items: center; gap: 20px; height: 64px; } .brand { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-tracking); color: var(--text-heading); } .brand:hover { color: var(--text-heading); } .brandMark { height: 24px; width: auto; flex: none; } .navLinks { display: flex; gap: 24px; margin: 0 auto; } .navLinks a { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); } .navLinks a:hover { color: var(--text-heading); } .navActions { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* ---------- hero ---------- */ .hero { padding-top: 72px; padding-bottom: 40px; text-align: center; } .kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); } .hero .kicker { margin-bottom: 18px; } .heroTitle { max-width: 700px; margin: 0 auto; font-size: clamp(30px, 5.2vw, 44px); font-weight: 600; line-height: 1.28; letter-spacing: -0.015em; } .hl { font-style: normal; font-weight: 700; color: var(--text-link); } .heroSub { max-width: 560px; margin: 20px auto 0; font-size: 16px; color: var(--text-secondary); text-wrap: pretty; } .heroActions { display: flex; justify-content: center; gap: 12px; margin-top: 30px; } .heroNote { margin-top: 14px; font-size: 12px; color: var(--text-muted); } /* ---------- product mockup ---------- */ .mockStage { padding-top: 24px; padding-bottom: 8px; } .mock { background: var(--surface-card); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); padding: 18px 20px 20px; user-select: none; } .mockBar { display: flex; align-items: center; gap: 8px; padding: 2px 2px 14px; } .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; } .dotR { background: #ff5f57; } .dotY { background: #febc2e; } .dotG { background: #28c840; } .mockBarTitle { margin: 0 auto 0 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .chip { display: inline-flex; align-items: center; height: 26px; padding: 0 13px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-card); font-size: 11.5px; font-weight: 600; color: var(--text-body); } .chipPrimary { background: var(--surface-inverse); border-color: transparent; color: var(--text-on-dark); font-weight: 700; } .mockBody { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; } .mockVideo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-card); background: var(--video-bg); overflow: hidden; } .mockVideo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 28%, rgba(63, 181, 170, 0.16), transparent 70%); } .mockCaption { position: absolute; left: 0; right: 0; bottom: 12%; display: grid; gap: 5px; justify-items: center; padding: 0 12px; text-align: center; } .mockCaption .zh { font-size: clamp(15px, 2.3vw, 19px); font-weight: 800; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.35); } .mockCaption .en { font-size: clamp(10px, 1.5vw, 12.5px); font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } .mockCues { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .cueRow { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 14px; border-radius: var(--radius-row); background: var(--surface-row); } .cueRow.active { background: var(--accent-50); box-shadow: inset 3px 0 0 var(--accent-600); } .cueTime { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); padding-top: 3px; } .cueText .zh { display: block; font-size: 14px; font-weight: 600; color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cueText .en { display: block; font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mockTimeline { position: relative; margin-top: 16px; height: 56px; border-radius: var(--radius-row); background: var(--surface-subtle); overflow: hidden; } .wave { position: absolute; inset: 8px 0; width: 100%; height: calc(100% - 16px); color: var(--ink-300); } .seg { position: absolute; top: 10px; bottom: 10px; border-radius: 6px; background: var(--accent-100); border: 1.5px solid var(--accent-400); } .seg.active { background: var(--accent-100); border-color: var(--accent-600); } .playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink-950); } /* ---------- sections ---------- */ .section { padding-top: 72px; } .sectionHead { max-width: 560px; margin-bottom: 32px; } .sectionHead .kicker { display: block; margin-bottom: 10px; } .sectionTitle { font-size: 30px; font-weight: 400; line-height: 1.25; } /* ---------- how it works ---------- */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .step { background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 22px 22px 24px; } .stepNum { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-inverse); color: var(--text-on-dark); font-size: 12px; font-weight: 700; margin-bottom: 14px; } .step h3 { font-size: 13px; font-weight: 700; margin-bottom: 6px; } .step p { font-size: 13.5px; color: var(--text-secondary); text-wrap: pretty; } /* ---------- features ---------- */ .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .feature { background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 22px 22px 24px; } .featureIcon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-row); background: var(--surface-subtle); color: var(--text-heading); margin-bottom: 14px; } .feature h3 { font-size: 13px; font-weight: 700; margin-bottom: 6px; } .feature p { font-size: 13.5px; color: var(--text-secondary); text-wrap: pretty; } /* ---------- faq ---------- */ .faq details { background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 0 22px; margin-bottom: 10px; } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; font-size: 13.5px; font-weight: 700; color: var(--text-heading); cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 10px; height: 6px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; color: var(--text-muted); transition: transform var(--dur-med) var(--ease-out); } .faq details[open] summary::after { transform: rotate(180deg); } .faq details p { padding: 0 0 18px; font-size: 13.5px; color: var(--text-secondary); max-width: 60ch; text-wrap: pretty; } /* ---------- bottom cta ---------- */ .cta { margin-top: 80px; } .ctaPanel { background: var(--surface-card); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); padding: 64px 32px; text-align: center; } .ctaPanel .brandMark { height: 52px; color: var(--text-heading); } .ctaWordmark { margin-top: 14px; font-size: 26px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-tracking); color: var(--text-heading); } .ctaLine { margin: 10px auto 0; max-width: 400px; font-size: 15px; color: var(--text-secondary); } .ctaActions { display: flex; justify-content: center; margin-top: 26px; } /* ---------- footer ---------- */ .footer { padding: 36px 0 44px; } .footerInner { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-muted); } .footerInner .spacer { margin-left: auto; } .footerLink { font-size: 12px; font-weight: 600; color: var(--text-secondary); } /* ---------- responsive ---------- */ @media (max-width: 860px) { .navLinks { display: none; } .steps, .features { grid-template-columns: minmax(0, 1fr); } .mockBody { grid-template-columns: minmax(0, 1fr); } .mockVideo { max-width: 300px; margin: 0 auto; aspect-ratio: 4 / 5; width: 100%; } .mockChips { display: none; } .hero { padding-top: 48px; } .heroActions { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }