/* ========================================================================== SOMANOTES — PROGRESS NOTE ONE-SHOT GENERATOR (TERMINAL THEME) ========================================================================== Location: /static/css/progress-oneshot.css Activator: .pn-page class on Design DNA: Same Phosphor Theatre terminal aesthetic as Transfer Center. Two-panel layout: input (40%) + output (60%). Fully isolated with pn- prefix. Font Dependencies (loaded via Google Fonts in template): - JetBrains Mono 300..700 (labels, metadata, code, output) - Outfit 200..600 (headings, buttons) - DM Sans 300..500 (body text, input) ========================================================================== */ /* ========================================================================== S1 RESET & PAGE LAYOUT ========================================================================== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } .pn-page { /* — Palette — */ --pn-bg-void: #0a0a0f; --pn-bg-surface: #12121a; --pn-bg-elevated: #1a1a26; --pn-bg-header: #0e0e16; --pn-bg-input: #15151f; --pn-fg-primary: #e0e0e8; --pn-fg-secondary: #9a9ab0; --pn-fg-muted: #6a6a80; --pn-fg-inverse: #0a0a0f; --pn-border-subtle: #1e1e2e; --pn-border-default: #2a2a3e; --pn-border-strong: #3a3a50; --pn-accent: #00e5ff; --pn-accent-dim: rgba(0, 229, 255, 0.40); --pn-accent-subtle: rgba(0, 229, 255, 0.10); --pn-accent-ghost: rgba(0, 229, 255, 0.05); --pn-magenta: #ff6b9d; --pn-magenta-dim: rgba(255, 107, 157, 0.35); --pn-warning: #ffab40; --pn-success: #4caf50; --pn-error: #ff5252; --pn-glow-accent: 0 0 8px rgba(0, 229, 255, 0.25), 0 0 24px rgba(0, 229, 255, 0.08); --pn-glow-accent-intense: 0 0 12px rgba(0, 229, 255, 0.40), 0 0 36px rgba(0, 229, 255, 0.12); /* — Typography — */ --pn-font-mono: 'JetBrains Mono', 'SF Mono', monospace; --pn-font-display: 'Outfit', 'Inter', sans-serif; --pn-font-body: 'DM Sans', 'Inter', sans-serif; --pn-text-xs: 0.6875rem; --pn-text-sm: 0.8125rem; --pn-text-base: 0.9375rem; --pn-text-lg: 1.125rem; --pn-tracking-wide: 0.05em; --pn-tracking-wider: 0.10em; --pn-tracking-widest: 0.20em; /* — Spacing — */ --pn-space-xs: 4px; --pn-space-sm: 8px; --pn-space-md: 12px; --pn-space-lg: 16px; --pn-space-xl: 24px; --pn-space-2xl: 32px; /* — Motion — */ --pn-duration: 300ms; --pn-easing: cubic-bezier(0.4, 0, 0.2, 1); /* — Grain texture — */ --pn-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.018'/%3E%3C/svg%3E"); background: var(--pn-bg-void); color: var(--pn-fg-primary); font-family: var(--pn-font-body); margin: 0; min-height: 100vh; display: grid; grid-template-rows: auto 1fr; grid-template-columns: 1fr; height: 100vh; position: relative; } /* ========================================================================== S2 FILM GRAIN OVERLAY ========================================================================== */ .pn-page::before { content: ''; position: fixed; inset: 0; background-image: var(--pn-grain); background-size: 512px 512px; pointer-events: none; z-index: 1; } /* ========================================================================== S3 HEADER ========================================================================== */ .pn-header { grid-column: 1 / -1; background: var(--pn-bg-header); border-bottom: 1px solid var(--pn-border-default); padding: var(--pn-space-md) var(--pn-space-xl); display: flex; align-items: center; gap: var(--pn-space-xl); position: relative; z-index: 10; min-height: 52px; } /* Accent line under header */ .pn-header::after { content: ''; position: absolute; bottom: -1px; left: 15%; right: 15%; height: 1px; background: linear-gradient( to right, transparent, var(--pn-accent-dim), transparent ); pointer-events: none; } /* Brand block */ .pn-header-brand { display: flex; align-items: center; gap: var(--pn-space-sm); flex-shrink: 0; } .pn-logo-mark { font-size: 1.25rem; color: var(--pn-accent); text-shadow: var(--pn-glow-accent); } .pn-logo-link { font-family: var(--pn-font-display); font-size: var(--pn-text-lg); font-weight: 300; letter-spacing: 0.04em; color: var(--pn-fg-primary); text-decoration: none; transition: text-shadow var(--pn-duration) var(--pn-easing); } .pn-logo-link:hover { text-shadow: var(--pn-glow-accent); } .pn-logo-accent { color: var(--pn-accent); font-weight: 500; } /* Nav links */ .pn-nav { display: flex; align-items: center; gap: var(--pn-space-xl); margin-left: var(--pn-space-xl); } .pn-nav-link { font-family: var(--pn-font-display); font-size: var(--pn-text-sm); font-weight: 400; letter-spacing: var(--pn-tracking-wider); text-transform: uppercase; text-decoration: none; color: var(--pn-fg-muted); padding: var(--pn-space-sm) 0; border-bottom: 2px solid transparent; transition: color var(--pn-duration) var(--pn-easing), border-color var(--pn-duration) var(--pn-easing), text-shadow var(--pn-duration) var(--pn-easing); } .pn-nav-link:hover { color: var(--pn-fg-secondary); border-bottom-color: var(--pn-border-default); } .pn-nav-link.active { color: var(--pn-fg-primary); border-bottom: 2px solid var(--pn-accent); text-shadow: var(--pn-glow-accent); } .pn-nav-prefix { color: var(--pn-accent); font-family: var(--pn-font-mono); font-weight: 700; text-shadow: 0 0 10px rgba(0, 229, 255, 0.30); margin-right: 2px; } /* ========================================================================== S4 BODY — TWO-PANEL SPLIT ========================================================================== */ .pn-body { display: flex; overflow: hidden; height: 100%; } .pn-input-panel { flex: 0 0 40%; max-width: 40%; display: flex; flex-direction: column; border-right: 1px solid var(--pn-border-default); background: var(--pn-bg-void); overflow-y: auto; padding: var(--pn-space-xl); } .pn-output-panel { flex: 1; display: flex; flex-direction: column; background: var(--pn-bg-surface); overflow: hidden; } /* ========================================================================== S5 INPUT PANEL ========================================================================== */ .pn-section-title { font-family: var(--pn-font-display); font-size: var(--pn-text-sm); font-weight: 300; letter-spacing: 0.20em; text-transform: uppercase; color: var(--pn-accent); padding: 0 0 var(--pn-space-sm); display: flex; align-items: center; gap: var(--pn-space-sm); margin: 0 0 var(--pn-space-lg); } .pn-section-title::before { content: '>'; font-family: var(--pn-font-mono); font-weight: 700; font-size: var(--pn-text-base); color: var(--pn-accent); text-shadow: 0 0 10px rgba(0, 229, 255, 0.30); flex-shrink: 0; } .pn-section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--pn-accent-dim), transparent 80%); margin-left: var(--pn-space-md); } /* Field label */ .pn-field-label { font-family: var(--pn-font-display); font-size: var(--pn-text-xs); font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pn-accent); opacity: 0.6; margin-bottom: var(--pn-space-xs); display: block; } .pn-field-label::before { content: '$ '; font-family: var(--pn-font-mono); color: var(--pn-accent-dim); } /* Field group */ .pn-field-group { margin-bottom: var(--pn-space-lg); } /* Date input */ .pn-date-input { font-family: var(--pn-font-mono); font-size: var(--pn-text-sm); color: var(--pn-fg-primary); background: var(--pn-bg-input); border: none; border-bottom: 1px solid var(--pn-border-default); padding: var(--pn-space-sm) var(--pn-space-md); width: 160px; outline: none; color-scheme: dark; transition: border-color var(--pn-duration) var(--pn-easing), box-shadow var(--pn-duration) var(--pn-easing); } .pn-date-input:focus { border-bottom-color: var(--pn-accent); box-shadow: 0 1px 0 0 var(--pn-accent); } /* Textarea */ .pn-textarea { font-family: var(--pn-font-body); font-size: var(--pn-text-base); line-height: 1.6; color: var(--pn-fg-primary); background: var(--pn-bg-input); border: 1px solid var(--pn-border-default); padding: var(--pn-space-md); width: 100%; min-height: 200px; max-height: 60vh; resize: vertical; outline: none; box-sizing: border-box; transition: border-color var(--pn-duration) var(--pn-easing), box-shadow var(--pn-duration) var(--pn-easing); } .pn-textarea::placeholder { font-family: var(--pn-font-mono); font-size: var(--pn-text-sm); color: var(--pn-fg-muted); opacity: 0.5; line-height: 1.8; } .pn-textarea:focus { border-color: var(--pn-accent); box-shadow: 0 0 0 1px var(--pn-accent-dim); } /* Character count */ .pn-char-count { font-family: var(--pn-font-mono); font-size: var(--pn-text-xs); color: var(--pn-fg-muted); letter-spacing: var(--pn-tracking-wide); text-align: right; margin-top: var(--pn-space-xs); } .pn-char-count.pn-char-warning { color: var(--pn-warning); } /* Keyboard hint */ .pn-keyboard-hint { font-family: var(--pn-font-mono); font-size: var(--pn-text-xs); color: var(--pn-fg-muted); letter-spacing: var(--pn-tracking-wide); margin-top: var(--pn-space-sm); opacity: 0.5; } .pn-keyboard-hint kbd { font-family: var(--pn-font-mono); font-size: var(--pn-text-xs); color: var(--pn-fg-secondary); background: var(--pn-bg-elevated); border: 1px solid var(--pn-border-default); padding: 1px 5px; margin: 0 1px; } /* ========================================================================== S6 GENERATE BUTTON ========================================================================== */ .pn-btn-generate { width: 100%; background: linear-gradient(135deg, var(--pn-accent), #00bcd4); border: none; color: var(--pn-fg-inverse); font-family: var(--pn-font-display); font-size: var(--pn-text-sm); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; padding: var(--pn-space-lg) var(--pn-space-xl); min-height: 48px; cursor: pointer; transition: all var(--pn-duration) var(--pn-easing); margin-top: var(--pn-space-lg); display: flex; align-items: center; justify-content: center; gap: var(--pn-space-sm); } .pn-btn-generate:hover { box-shadow: var(--pn-glow-accent-intense); transform: translateY(-1px); } .pn-btn-generate:active { transform: translateY(0); } .pn-btn-generate:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } /* Spinner inside button */ .pn-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(10, 10, 15, 0.3); border-top-color: var(--pn-fg-inverse); border-radius: 50%; animation: pn-spin 0.8s linear infinite; } .pn-btn-generate.pn-generating .pn-spinner { display: inline-block; } .pn-btn-generate.pn-generating .pn-btn-label { display: none; } @keyframes pn-spin { to { transform: rotate(360deg); } } /* ========================================================================== S7 OUTPUT PANEL ========================================================================== */ /* Output header bar */ .pn-output-header { display: flex; align-items: center; justify-content: space-between; padding: var(--pn-space-md) var(--pn-space-xl); border-bottom: 1px solid var(--pn-border-subtle); min-height: 44px; flex-shrink: 0; } .pn-output-title { font-family: var(--pn-font-display); font-size: var(--pn-text-sm); font-weight: 300; letter-spacing: var(--pn-tracking-widest); text-transform: uppercase; color: var(--pn-fg-muted); margin: 0; } .pn-output-actions { display: flex; align-items: center; gap: var(--pn-space-md); } /* Status indicator (pulsing dot during generation) */ .pn-status-indicator { display: none; align-items: center; gap: var(--pn-space-sm); font-family: var(--pn-font-mono); font-size: var(--pn-text-xs); color: var(--pn-accent); letter-spacing: var(--pn-tracking-wide); } .pn-status-indicator.active { display: flex; } .pn-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pn-accent); animation: pn-pulse 1.5s ease-in-out infinite; } @keyframes pn-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--pn-accent-dim); } 50% { opacity: 0.4; box-shadow: none; } } /* Word count */ .pn-word-count { font-family: var(--pn-font-mono); font-size: var(--pn-text-xs); color: var(--pn-fg-muted); letter-spacing: var(--pn-tracking-wide); } /* Copy button */ .pn-btn-copy { font-family: var(--pn-font-mono); font-size: var(--pn-text-xs); font-weight: 500; letter-spacing: var(--pn-tracking-wider); text-transform: uppercase; color: var(--pn-fg-secondary); background: transparent; border: 1px solid var(--pn-border-default); padding: var(--pn-space-xs) var(--pn-space-lg); cursor: pointer; transition: all var(--pn-duration) var(--pn-easing); white-space: nowrap; } .pn-btn-copy:hover { border-color: var(--pn-accent-dim); color: var(--pn-accent); background: var(--pn-accent-ghost); } .pn-btn-copy.pn-copied { border-color: var(--pn-success); color: var(--pn-success); } .pn-btn-copy:disabled { opacity: 0.3; cursor: not-allowed; } /* Output body / scrollable area */ .pn-output-body { flex: 1; overflow-y: auto; padding: var(--pn-space-xl); position: relative; } /* Empty state */ .pn-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; gap: var(--pn-space-lg); text-align: center; } .pn-empty-icon { font-size: 2.5rem; color: var(--pn-fg-muted); opacity: 0.3; } .pn-empty-text { font-family: var(--pn-font-display); font-size: var(--pn-text-lg); font-weight: 300; letter-spacing: var(--pn-tracking-wide); color: var(--pn-fg-muted); margin: 0; } .pn-empty-subtext { font-family: var(--pn-font-mono); font-size: var(--pn-text-xs); color: var(--pn-fg-muted); opacity: 0.5; letter-spacing: var(--pn-tracking-wide); margin: 0; } /* Output text area */ .pn-output { font-family: var(--pn-font-mono); font-size: var(--pn-text-sm); line-height: 1.7; color: var(--pn-fg-primary); white-space: pre-wrap; word-wrap: break-word; margin: 0; /* Ensure easy select-all */ user-select: text; -webkit-user-select: text; } /* Blinking cursor at end of streaming text */ .pn-output.pn-streaming::after { content: '\2588'; color: var(--pn-accent); animation: pn-blink 0.8s step-end infinite; } @keyframes pn-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ========================================================================== S8 LINT RESULTS ========================================================================== */ .pn-lint-section { margin-top: var(--pn-space-xl); padding-top: var(--pn-space-lg); border-top: 1px solid var(--pn-border-subtle); } .pn-lint-summary { display: flex; align-items: center; gap: var(--pn-space-md); font-family: var(--pn-font-mono); font-size: var(--pn-text-sm); letter-spacing: var(--pn-tracking-wide); } .pn-lint-badge { display: inline-flex; align-items: center; gap: var(--pn-space-xs); padding: 2px 8px; font-size: var(--pn-text-xs); font-weight: 600; letter-spacing: var(--pn-tracking-wider); text-transform: uppercase; border: 1px solid currentColor; } .pn-lint-badge.pn-lint-pass { color: var(--pn-success); border-color: rgba(76, 175, 80, 0.4); } .pn-lint-badge.pn-lint-errors { color: var(--pn-error); border-color: rgba(255, 82, 82, 0.4); } .pn-lint-badge.pn-lint-warnings { color: var(--pn-warning); border-color: rgba(255, 171, 64, 0.4); } /* Expandable lint details */ .pn-lint-details { margin-top: var(--pn-space-md); } .pn-lint-toggle { font-family: var(--pn-font-mono); font-size: var(--pn-text-xs); color: var(--pn-fg-muted); background: transparent; border: none; cursor: pointer; letter-spacing: var(--pn-tracking-wide); padding: var(--pn-space-xs) 0; transition: color var(--pn-duration) var(--pn-easing); } .pn-lint-toggle:hover { color: var(--pn-fg-secondary); } .pn-lint-list { list-style: none; margin: var(--pn-space-sm) 0 0; padding: 0; display: none; } .pn-lint-list.pn-expanded { display: block; max-height: 200px; overflow-y: auto; } .pn-lint-item { font-family: var(--pn-font-mono); font-size: var(--pn-text-xs); line-height: 1.6; padding: var(--pn-space-xs) 0; border-bottom: 1px solid var(--pn-border-subtle); display: flex; align-items: baseline; gap: var(--pn-space-sm); } .pn-lint-item:last-child { border-bottom: none; } .pn-lint-item-type { flex-shrink: 0; font-weight: 600; text-transform: uppercase; font-size: 0.6rem; letter-spacing: var(--pn-tracking-wider); } .pn-lint-item-type.pn-lint-error { color: var(--pn-error); } .pn-lint-item-type.pn-lint-warn { color: var(--pn-warning); } .pn-lint-item-msg { color: var(--pn-fg-secondary); } /* ========================================================================== S9 ERROR STATE ========================================================================== */ .pn-error-box { background: rgba(255, 82, 82, 0.06); border: 1px solid rgba(255, 82, 82, 0.25); border-left: 3px solid var(--pn-error); padding: var(--pn-space-lg); margin-top: var(--pn-space-lg); font-family: var(--pn-font-mono); font-size: var(--pn-text-sm); color: var(--pn-error); line-height: 1.6; } .pn-error-box::before { content: '// ERROR: '; font-weight: 600; opacity: 0.7; } /* ========================================================================== S10 SCROLLBARS ========================================================================== */ .pn-input-panel::-webkit-scrollbar, .pn-output-body::-webkit-scrollbar { width: 6px; } .pn-input-panel::-webkit-scrollbar-track, .pn-output-body::-webkit-scrollbar-track { background: var(--pn-bg-void); } .pn-input-panel::-webkit-scrollbar-thumb, .pn-output-body::-webkit-scrollbar-thumb { background: var(--pn-border-default); border-radius: 3px; } .pn-input-panel::-webkit-scrollbar-thumb:hover, .pn-output-body::-webkit-scrollbar-thumb:hover { background: var(--pn-border-strong); } /* Firefox scrollbar */ .pn-input-panel, .pn-output-body { scrollbar-width: thin; scrollbar-color: var(--pn-border-default) var(--pn-bg-void); } /* ========================================================================== S11 FOCUS STATES ========================================================================== */ .pn-page *:focus-visible { outline: 2px solid var(--pn-accent); outline-offset: 2px; } .pn-textarea:focus-visible, .pn-date-input:focus-visible { outline: none; } /* ========================================================================== S12 REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .pn-status-dot, .pn-output.pn-streaming::after { animation: none; } .pn-btn-generate:hover { transform: none; } .pn-spinner { animation-duration: 2s; } *, *::before, *::after { transition-duration: 0.01ms !important; } }