Spaces:
Running
Running
| /* DialogueSidon demo page — formal academic styling */ | |
| :root { | |
| --bg: #ffffff; | |
| --text: #111111; | |
| --muted: #555555; | |
| --rule: #222222; | |
| --rule-faint: #cccccc; | |
| --accent: #1f3a78; /* dark navy — speaker 1 */ | |
| --accent-2: #8b1a3a; /* dark maroon — speaker 2 */ | |
| --shade: #f5f5f5; | |
| --serif: "Charter", "Iowan Old Style", "Source Serif Pro", "Cambria", Georgia, "Times New Roman", serif; | |
| --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif; | |
| --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; | |
| } | |
| * { box-sizing: border-box; } | |
| html { -webkit-text-size-adjust: 100%; } | |
| body { | |
| margin: 0; | |
| font-family: var(--serif); | |
| color: var(--text); | |
| background: var(--bg); | |
| line-height: 1.55; | |
| font-size: 17px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .container { | |
| width: min(880px, 92%); | |
| margin: 0 auto; | |
| } | |
| /* ---------- Hero / title block ---------- */ | |
| .hero { | |
| padding: 64px 0 36px; | |
| text-align: center; | |
| border-bottom: 1px solid var(--rule-faint); | |
| } | |
| .hero .venue { | |
| font-family: var(--sans); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.18em; | |
| color: var(--muted); | |
| margin: 0 0 18px; | |
| } | |
| .hero h1 { | |
| font-family: var(--serif); | |
| font-size: clamp(26px, 3.4vw, 36px); | |
| font-weight: 700; | |
| line-height: 1.25; | |
| margin: 0 auto 24px; | |
| max-width: 760px; | |
| letter-spacing: -0.005em; | |
| color: var(--text); | |
| } | |
| .hero .authors { | |
| font-family: var(--serif); | |
| font-size: 17px; | |
| margin: 0 0 4px; | |
| color: var(--text); | |
| } | |
| .hero .affiliation { | |
| font-family: var(--serif); | |
| font-style: italic; | |
| font-size: 15px; | |
| color: var(--muted); | |
| margin: 0 0 24px; | |
| } | |
| .actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| justify-content: center; | |
| } | |
| .btn { | |
| display: inline-block; | |
| font-family: var(--sans); | |
| font-size: 13px; | |
| font-weight: 500; | |
| padding: 8px 18px; | |
| background: #ffffff; | |
| color: var(--text); | |
| text-decoration: none; | |
| border: 1px solid var(--rule); | |
| border-radius: 2px; | |
| letter-spacing: 0.02em; | |
| transition: background 0.12s, color 0.12s; | |
| } | |
| .btn:hover { | |
| background: var(--text); | |
| color: #ffffff; | |
| } | |
| /* ---------- Sections ---------- */ | |
| main { padding: 48px 0 32px; } | |
| section { margin: 0 0 48px; scroll-margin-top: 24px; } | |
| section h2 { | |
| font-family: var(--serif); | |
| font-size: 22px; | |
| font-weight: 700; | |
| margin: 0 0 14px; | |
| padding-bottom: 6px; | |
| border-bottom: 1px solid var(--rule-faint); | |
| letter-spacing: 0; | |
| } | |
| section h3 { | |
| font-family: var(--serif); | |
| font-size: 17px; | |
| font-weight: 700; | |
| font-style: italic; | |
| margin: 32px 0 10px; | |
| color: var(--text); | |
| } | |
| section p { color: var(--text); margin: 0 0 12px; } | |
| #abstract p { | |
| font-size: 16px; | |
| text-align: justify; | |
| hyphens: auto; | |
| } | |
| .note { | |
| font-size: 14px; | |
| color: var(--muted); | |
| font-style: italic; | |
| } | |
| /* ---------- Sample tables ---------- */ | |
| .sample-table-wrapper { | |
| overflow-x: auto; | |
| margin: 8px 0 4px; | |
| } | |
| .sample-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-family: var(--sans); | |
| font-size: 14px; | |
| } | |
| /* Booktabs-style: top + bottom rules, no vertical lines, no row striping */ | |
| .sample-table thead th { | |
| text-align: left; | |
| font-weight: 600; | |
| padding: 10px 12px; | |
| border-top: 1.5px solid var(--rule); | |
| border-bottom: 1px solid var(--rule); | |
| white-space: nowrap; | |
| background: transparent; | |
| color: var(--text); | |
| } | |
| .sample-table tbody td { | |
| padding: 12px 12px; | |
| border-bottom: 1px solid var(--rule-faint); | |
| vertical-align: middle; | |
| background: transparent; | |
| } | |
| .sample-table tbody tr:last-child td { | |
| border-bottom: 1.5px solid var(--rule); | |
| } | |
| .sample-table td:first-child { | |
| font-family: var(--serif); | |
| font-style: italic; | |
| font-weight: 400; | |
| white-space: nowrap; | |
| max-width: 200px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| color: var(--text); | |
| } | |
| /* ---------- Waveform players (wavesurfer.js) ---------- */ | |
| .player { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| width: 100%; | |
| min-width: 220px; | |
| } | |
| .play-btn { | |
| flex: 0 0 auto; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| border: 1px solid var(--rule); | |
| background: #ffffff; | |
| color: var(--text); | |
| cursor: pointer; | |
| font-size: 11px; | |
| line-height: 1; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0; | |
| font-family: var(--sans); | |
| transition: background 0.12s, color 0.12s, border-color 0.12s; | |
| } | |
| .play-btn:hover { | |
| background: var(--text); | |
| color: #ffffff; | |
| } | |
| .play-btn.playing { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: #ffffff; | |
| } | |
| .play-btn:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .waveform { | |
| flex: 1 1 auto; | |
| position: relative; | |
| min-width: 160px; | |
| background: transparent; | |
| } | |
| /* Reserve consistent row heights so wavesurfer rendering doesn't shift the | |
| layout. Noisy column = mono (single channel); the model output columns = | |
| stereo (two stacked channels). */ | |
| .sample-table td:nth-child(2) .waveform { min-height: 40px; } | |
| .sample-table td:nth-child(3) .waveform, | |
| .sample-table td:nth-child(4) .waveform { min-height: 80px; } | |
| /* Per-channel labels */ | |
| .ch-label { | |
| position: absolute; | |
| left: 4px; | |
| font-family: var(--mono); | |
| font-size: 9px; | |
| font-weight: 600; | |
| letter-spacing: 0.06em; | |
| background: rgba(255, 255, 255, 0.92); | |
| padding: 1px 4px; | |
| border-radius: 2px; | |
| pointer-events: none; | |
| } | |
| .ch-label-1 { top: 1px; color: var(--accent); } | |
| .ch-label-2 { bottom: 1px; color: var(--accent-2); } | |
| .ch-label-mono { top: 50%; transform: translateY(-50%); color: var(--muted); } | |
| .waveform.stereo::after { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 50%; | |
| height: 1px; | |
| background: var(--rule-faint); | |
| pointer-events: none; | |
| } | |
| /* ---------- Citation ---------- */ | |
| .bibtex { | |
| background: var(--shade); | |
| color: var(--text); | |
| padding: 14px 16px; | |
| border: 1px solid var(--rule-faint); | |
| border-radius: 2px; | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| overflow-x: auto; | |
| line-height: 1.55; | |
| margin: 0; | |
| } | |
| .bibtex code { background: transparent; padding: 0; font-family: inherit; } | |
| /* ---------- Footer ---------- */ | |
| footer { | |
| border-top: 1px solid var(--rule-faint); | |
| padding: 22px 0 36px; | |
| text-align: center; | |
| } | |
| footer p { | |
| font-family: var(--sans); | |
| font-size: 12px; | |
| color: var(--muted); | |
| margin: 0; | |
| } | |
| @media (max-width: 720px) { | |
| .hero { padding: 44px 0 28px; } | |
| body { font-size: 16px; } | |
| } | |