/* ========================================================================== Audio Extractor Engine — orient-luxury design system Dark mode is default; light/parchment mode toggled via [data-theme] on . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Syne:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* -- Dark (default) -- */ --ol-bg: #09080b; --ol-surface: #121016; --ol-surface-raised: #17141b; --ol-ink: #ece7db; --ol-ink-dim: #a89f8f; --ol-gold: #c9a84c; --ol-gold-soft: rgba(201, 168, 76, 0.18); --ol-gold-line: rgba(201, 168, 76, 0.32); --ol-hairline: rgba(236, 231, 219, 0.09); --ol-danger: #b4593f; --ol-danger-soft: rgba(180, 89, 63, 0.16); --ol-grain-opacity: 0.05; --ol-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } html[data-theme='light'] { --ol-bg: #f0ebe0; --ol-surface: #ffffff; --ol-surface-raised: #fbf8f2; --ol-ink: #2a2620; --ol-ink-dim: #6e6555; --ol-gold: #8a6820; --ol-gold-soft: rgba(138, 104, 32, 0.1); --ol-gold-line: rgba(138, 104, 32, 0.28); --ol-hairline: rgba(42, 38, 32, 0.1); --ol-danger: #a14328; --ol-danger-soft: rgba(161, 67, 40, 0.1); --ol-grain-opacity: 0.035; --ol-shadow: 0 20px 50px rgba(42, 38, 32, 0.12); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ol-bg); color: var(--ol-ink); min-height: 100%; } body { font-family: 'Cormorant Garamond', serif; font-size: 19px; line-height: 1.5; position: relative; overflow-x: hidden; transition: background 0.4s ease, color 0.4s ease; } /* Grain overlay */ body::before { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: var(--ol-grain-opacity); mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .ol-toast { position: fixed; z-index: 1000; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--ol-surface-raised); border: 1px solid var(--ol-gold-line); color: var(--ol-ink); padding: 12px 22px; border-radius: 3px; font-family: 'Syne', sans-serif; font-size: 13px; letter-spacing: 0.04em; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; box-shadow: var(--ol-shadow); } .ol-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .ol-toast.is-error { border-color: rgba(180, 89, 63, 0.5); color: #e7b6a6; } a { color: var(--ol-gold); } /* ------------------------------------------------------------------------- Layout shell ------------------------------------------------------------------------- */ .shell { max-width: 760px; margin: 0 auto; padding: 56px 24px 90px; position: relative; z-index: 1; } .masthead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 44px; border-bottom: 1px solid var(--ol-hairline); padding-bottom: 28px; } .masthead-mark { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ol-gold); margin: 0 0 10px; } .masthead h1 { font-family: 'Cinzel', serif; font-weight: 600; font-size: 34px; letter-spacing: 0.01em; margin: 0 0 8px; color: var(--ol-ink); } .masthead p { margin: 0; color: var(--ol-ink-dim); font-size: 17px; max-width: 46ch; } /* Theme toggle — brass switch styled like a tape-deck rocker */ .theme-toggle { flex-shrink: 0; display: flex; align-items: center; gap: 9px; background: var(--ol-surface); border: 1px solid var(--ol-hairline); border-radius: 999px; padding: 5px; cursor: pointer; } .theme-toggle-track { width: 46px; height: 24px; border-radius: 999px; background: var(--ol-surface-raised); border: 1px solid var(--ol-gold-line); position: relative; } .theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ol-gold); transition: transform 0.3s cubic-bezier(.4,0,.2,1); } html[data-theme='light'] .theme-toggle-knob { transform: translateX(22px); } .theme-toggle-label { font-family: 'Syne', sans-serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ol-ink-dim); padding-right: 4px; } /* ------------------------------------------------------------------------- Panel / card ------------------------------------------------------------------------- */ .panel { background: var(--ol-surface); border: 1px solid var(--ol-hairline); border-radius: 6px; box-shadow: var(--ol-shadow); padding: 6px; margin-bottom: 28px; } .tabs { display: flex; gap: 4px; padding: 6px; background: var(--ol-surface-raised); border-radius: 4px; margin-bottom: 0; } .tab-btn { flex: 1; font-family: 'Syne', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 14px; border-radius: 3px; border: none; background: transparent; color: var(--ol-ink-dim); cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .tab-btn.is-active { background: var(--ol-gold-soft); color: var(--ol-gold); } .tab-btn:focus-visible { outline: 2px solid var(--ol-gold); outline-offset: 2px; } .panel-body { padding: 26px 24px 24px; } .mode-pane { display: none; } .mode-pane.is-active { display: block; } /* Drop zone */ .dropzone { border: 1.5px dashed var(--ol-gold-line); border-radius: 5px; padding: 34px 20px; text-align: center; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; background: transparent; } .dropzone:hover, .dropzone.is-dragover { border-color: var(--ol-gold); background: var(--ol-gold-soft); } .dropzone.has-file { border-style: solid; } .dropzone input[type='file'] { display: none; } .dropzone-glyph { width: 34px; height: 34px; margin: 0 auto 12px; color: var(--ol-gold); } .dropzone-title { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 15px; color: var(--ol-ink); margin: 0 0 4px; } .dropzone-sub { font-size: 15px; color: var(--ol-ink-dim); margin: 0; } .dropzone-filename { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ol-gold); margin-top: 10px; word-break: break-all; } /* URL field */ .field { margin-bottom: 18px; } .field label { display: block; font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ol-ink-dim); margin-bottom: 8px; } .field input[type='text'], .field input[type='url'], .field input[type='number'], .field select { width: 100%; background: var(--ol-surface-raised); border: 1px solid var(--ol-hairline); border-radius: 4px; color: var(--ol-ink); font-family: 'IBM Plex Mono', monospace; font-size: 15px; padding: 12px 14px; transition: border-color 0.2s ease; } .field input:focus, .field select:focus { outline: none; border-color: var(--ol-gold); } .field-error { font-size: 13px; color: var(--ol-danger); margin-top: 6px; min-height: 1em; } .field-row { display: flex; gap: 14px; } .field-row .field { flex: 1; } .field-hint { font-size: 14px; color: var(--ol-ink-dim); margin-top: 6px; } .checkbox-field { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-top: 4px; font-size: 15px; color: var(--ol-ink); } .checkbox-field input[type='checkbox'] { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--ol-gold); flex-shrink: 0; } /* Submit */ .submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ol-hairline); } .btn-gold { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--ol-gold); color: #14110a; border: none; border-radius: 4px; padding: 14px 26px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; box-shadow: 0 8px 22px rgba(201, 168, 76, 0.22); } .btn-gold:hover { transform: translateY(-1px); } .btn-gold:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-gold:focus-visible { outline: 2px solid var(--ol-ink); outline-offset: 2px; } .submit-note { font-size: 14px; color: var(--ol-ink-dim); } /* ------------------------------------------------------------------------- SIGNATURE ELEMENT — The VU Ribbon A brass instrument-panel style meter that reports extraction progress through named stages, echoing the analog VU meters on tape decks. ------------------------------------------------------------------------- */ .vu-ribbon { display: none; margin-top: 24px; padding: 22px 22px 18px; border-radius: 5px; background: var(--ol-surface-raised); border: 1px solid var(--ol-gold-line); } .vu-ribbon.is-active { display: block; } .vu-stage-label { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ol-gold); margin: 0 0 14px; display: flex; justify-content: space-between; } .vu-stage-label span:last-child { font-family: 'IBM Plex Mono', monospace; color: var(--ol-ink-dim); letter-spacing: 0; text-transform: none; font-weight: 500; } .vu-plate { position: relative; height: 64px; border-radius: 4px; background: repeating-linear-gradient(90deg, transparent, transparent 11px, var(--ol-hairline) 11px, var(--ol-hairline) 12px), var(--ol-bg); overflow: hidden; } .vu-needle-track { position: absolute; inset: 0; display: flex; align-items: center; } .vu-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--ol-gold-soft), var(--ol-gold)); transition: width 0.5s cubic-bezier(.4,0,.2,1); position: relative; } .vu-fill::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: var(--ol-gold); box-shadow: 0 0 10px 2px var(--ol-gold); } .vu-sweep { position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent); animation: vu-sweep-move 1.6s linear infinite; } @keyframes vu-sweep-move { from { transform: translateX(-100%); } to { transform: translateX(350%); } } .vu-ticks { display: flex; justify-content: space-between; margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ol-ink-dim); letter-spacing: 0.05em; } /* ------------------------------------------------------------------------- Result card ------------------------------------------------------------------------- */ .result-card { display: none; padding: 26px 24px; } .result-card.is-active { display: block; } .result-plaque { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .result-plaque-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ol-gold-line); display: flex; align-items: center; justify-content: center; color: var(--ol-gold); flex-shrink: 0; } .result-plaque h2 { font-family: 'Cinzel', serif; font-size: 19px; font-weight: 600; margin: 0 0 2px; color: var(--ol-ink); } .result-plaque p { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ol-ink-dim); } audio.result-player { width: 100%; margin-bottom: 18px; accent-color: var(--ol-gold); } .result-actions { display: flex; gap: 12px; flex-wrap: wrap; } .btn-ghost { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; background: transparent; border: 1px solid var(--ol-gold-line); color: var(--ol-gold); border-radius: 4px; padding: 11px 20px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: background 0.2s ease; } .btn-ghost:hover { background: var(--ol-gold-soft); } /* Error card */ .error-card { display: none; padding: 20px 24px; border-radius: 6px; background: var(--ol-danger-soft); border: 1px solid rgba(180, 89, 63, 0.4); margin-bottom: 28px; } .error-card.is-active { display: block; } .error-card h3 { font-family: 'Syne', sans-serif; font-size: 14px; letter-spacing: 0.04em; color: var(--ol-danger); margin: 0 0 6px; } .error-card p { margin: 0; color: var(--ol-ink); font-size: 15px; } /* Footer / provenance */ .footnote { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ol-ink-dim); margin-top: 40px; letter-spacing: 0.02em; } .footnote a { color: var(--ol-ink-dim); text-decoration: underline; } @media (max-width: 560px) { .masthead { flex-direction: column; } .field-row { flex-direction: column; } .masthead h1 { font-size: 27px; } } @media (prefers-reduced-motion: reduce) { .vu-sweep { animation: none; } .vu-fill, .theme-toggle-knob { transition: none; } }