| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CLI Printing Press · Book Impression Engine</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,400&family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500&family=UnifrakturMaguntia&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| 'playfair': ['"Playfair Display"', 'serif'], |
| 'cormorant': ['"Cormorant Garamond"', 'serif'], |
| 'eb-garamond': ['"EB Garamond"', 'serif'], |
| 'newsreader': ['"Newsreader"', 'serif'], |
| 'unifraktur': ['"UnifrakturMaguntia"', 'cursive'], |
| }, |
| colors: { |
| 'parchment-50': '#fdfcf8', |
| 'parchment-100': '#faf6ec', |
| 'parchment-200': '#f5ecd6', |
| 'parchment-300': '#ecd5a8', |
| 'parchment-400': '#e0bf80', |
| 'parchment-500': '#d5a85a', |
| 'parchment-600': '#c08d3e', |
| 'parchment-700': '#a07032', |
| 'parchment-800': '#7a552e', |
| 'parchment-900': '#604628', |
| 'charcoal-50': '#f4f4f4', |
| 'charcoal-100': '#e3e3e3', |
| 'charcoal-200': '#c8c8c8', |
| 'charcoal-300': '#a4a4a4', |
| 'charcoal-400': '#818181', |
| 'charcoal-500': '#666666', |
| 'charcoal-600': '#515151', |
| 'charcoal-700': '#434343', |
| 'charcoal-800': '#383838', |
| 'charcoal-900': '#1a1a1a', |
| 'iron-50': '#f6f5f3', |
| 'iron-100': '#edebe6', |
| 'iron-200': '#ddd9d0', |
| 'iron-300': '#c5bfb2', |
| 'iron-400': '#a9a290', |
| 'iron-500': '#968d7a', |
| 'iron-600': '#847b6c', |
| 'iron-700': '#6d655a', |
| 'iron-800': '#5c554c', |
| 'iron-900': '#4a443e', |
| 'gold-400': '#c4a35a', |
| 'gold-500': '#b8933e', |
| 'gold-600': '#a67f2d', |
| 'gold-700': '#8c6726', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| *, *::before, *::after { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| :root { |
| --paper-hue: 42; |
| --paper-sat: 60%; |
| --paper-light: 96%; |
| --ink-hue: 20; |
| --ink-sat: 15%; |
| --ink-light: 18%; |
| --binding-width: 1.5rem; |
| } |
| |
| html { |
| scroll-behavior: smooth; |
| scrollbar-width: thin; |
| scrollbar-color: #c5bfb2 transparent; |
| } |
| |
| body { |
| font-family: 'EB Garamond', Georgia, serif; |
| background: #edebe6; |
| color: #2c2520; |
| overflow-x: hidden; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: #c5bfb2; |
| border-radius: 3px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: #a9a290; |
| } |
| |
| |
| |
| |
| |
| @keyframes fadeSlideUp { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| @keyframes slideFromLeft { |
| from { opacity: 0; transform: translateX(-30px); } |
| to { opacity: 1; transform: translateX(0); } |
| } |
| |
| @keyframes gentlePulse { |
| 0%, 100% { opacity: 0.6; } |
| 50% { opacity: 1; } |
| } |
| |
| @keyframes inkReveal { |
| from { clip-path: inset(0 100% 0 0); } |
| to { clip-path: inset(0 0% 0 0); } |
| } |
| |
| @keyframes printStroke { |
| 0% { stroke-dashoffset: 100; } |
| 100% { stroke-dashoffset: 0; } |
| } |
| |
| @keyframes pageTurnIn { |
| from { opacity: 0; transform: translateX(40px) rotateY(-8deg); } |
| to { opacity: 1; transform: translateX(0) rotateY(0deg); } |
| } |
| |
| @keyframes pageTurnOut { |
| from { opacity: 1; transform: translateX(0) rotateY(0deg); } |
| to { opacity: 0; transform: translateX(-40px) rotateY(8deg); } |
| } |
| |
| @keyframes ribbonWave { |
| 0%, 100% { transform: translateX(0) scaleY(1); } |
| 50% { transform: translateX(-2px) scaleY(1.03); } |
| } |
| |
| @keyframes featherDrift { |
| 0%, 100% { transform: translate(0, 0) rotate(0deg); } |
| 25% { transform: translate(2px, -3px) rotate(2deg); } |
| 50% { transform: translate(-1px, -5px) rotate(-1deg); } |
| 75% { transform: translate(3px, -2px) rotate(1deg); } |
| } |
| |
| @keyframes buttonPress { |
| 0% { transform: translateY(0); } |
| 50% { transform: translateY(1px); } |
| 100% { transform: translateY(0); } |
| } |
| |
| @keyframes breathing { |
| 0%, 100% { opacity: 0.45; } |
| 50% { opacity: 0.65; } |
| } |
| |
| @keyframes drawLine { |
| from { stroke-dashoffset: 200; } |
| to { stroke-dashoffset: 0; } |
| } |
| |
| @keyframes blotSpread { |
| 0% { transform: scale(0); opacity: 0.8; } |
| 40% { opacity: 0.5; } |
| 100% { transform: scale(3); opacity: 0; } |
| } |
| |
| @keyframes subtileFade { |
| 0%, 100% { opacity: 0.7; } |
| 50% { opacity: 1; } |
| } |
| |
| @keyframes warmGlow { |
| 0%, 100% { box-shadow: 0 0 20px rgba(196, 163, 90, 0.15), 0 0 60px rgba(196, 163, 90, 0.08); } |
| 50% { box-shadow: 0 0 30px rgba(196, 163, 90, 0.2), 0 0 80px rgba(196, 163, 90, 0.1); } |
| } |
| |
| |
| |
| |
| |
| .anim-fade-up { |
| animation: fadeSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; |
| } |
| |
| .anim-fade-in { |
| animation: fadeIn 0.5s ease-out forwards; |
| } |
| |
| .anim-page-turn-in { |
| animation: pageTurnIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; |
| } |
| |
| .anim-ink-reveal { |
| animation: inkReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; |
| } |
| |
| .breathing { |
| animation: breathing 5s ease-in-out infinite; |
| } |
| |
| |
| .app-header { |
| backdrop-filter: blur(16px) saturate(1.2); |
| background: rgba(237, 235, 230, 0.82); |
| border-bottom: 1px solid rgba(180, 172, 156, 0.18); |
| } |
| |
| .header-link { |
| position: relative; |
| color: #7a6b5a; |
| transition: color 0.3s ease; |
| } |
| |
| .header-link::after { |
| content: ''; |
| position: absolute; |
| bottom: -2px; |
| left: 0; |
| width: 0; |
| height: 1px; |
| background: #8c6726; |
| transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); |
| } |
| |
| .header-link:hover { |
| color: #4a443e; |
| } |
| |
| .header-link:hover::after { |
| width: 100%; |
| } |
| |
| .header-link-accent { |
| background: linear-gradient(135deg, #a07032, #8c6726); |
| color: #faf6ec; |
| transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); |
| box-shadow: 0 1px 3px rgba(140, 103, 38, 0.15); |
| } |
| |
| .header-link-accent:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 3px 12px rgba(140, 103, 38, 0.22); |
| } |
| |
| |
| .accordion-section { |
| border: 1px solid rgba(180, 172, 156, 0.2); |
| border-radius: 14px; |
| background: rgba(253, 252, 248, 0.7); |
| overflow: hidden; |
| transition: border-color 0.3s ease, box-shadow 0.3s ease; |
| } |
| |
| .accordion-section:hover { |
| border-color: rgba(196, 163, 90, 0.3); |
| } |
| |
| .accordion-section.open { |
| border-color: rgba(196, 163, 90, 0.4); |
| box-shadow: 0 2px 16px rgba(140, 103, 38, 0.06); |
| } |
| |
| .accordion-header { |
| cursor: pointer; |
| user-select: none; |
| padding: 14px 20px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| transition: background 0.25s ease; |
| } |
| |
| .accordion-header:hover { |
| background: rgba(196, 163, 90, 0.04); |
| } |
| |
| .accordion-icon { |
| transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); |
| } |
| |
| .accordion-section.open .accordion-icon { |
| transform: rotate(180deg); |
| } |
| |
| .accordion-body { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; |
| opacity: 0; |
| } |
| |
| .accordion-section.open .accordion-body { |
| opacity: 1; |
| } |
| |
| |
| .field-label { |
| font-size: 0.6875rem; |
| font-weight: 600; |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| color: #968d7a; |
| margin-bottom: 6px; |
| } |
| |
| .input-underline { |
| width: 100%; |
| padding: 8px 0; |
| font-size: 0.9375rem; |
| font-family: 'EB Garamond', Georgia, serif; |
| color: #2c2520; |
| background: transparent; |
| border: none; |
| border-bottom: 1px solid #c5bfb2; |
| outline: none; |
| transition: border-color 0.3s ease; |
| } |
| |
| .input-underline:focus { |
| border-color: #a07032; |
| } |
| |
| .input-underline::placeholder { |
| color: #a4a4a4; |
| font-style: italic; |
| } |
| |
| textarea.input-underline { |
| resize: vertical; |
| min-height: 80px; |
| } |
| |
| |
| .select-field { |
| width: 100%; |
| padding: 8px 28px 8px 12px; |
| font-size: 0.9375rem; |
| font-family: 'EB Garamond', Georgia, serif; |
| color: #2c2520; |
| background: #fdfcf8; |
| border: 1px solid #c5bfb2; |
| border-radius: 8px; |
| outline: none; |
| appearance: none; |
| cursor: pointer; |
| transition: border-color 0.25s ease, box-shadow 0.25s ease; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23968d7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: right 8px center; |
| background-size: 14px; |
| } |
| |
| .select-field:hover { |
| border-color: #a9a290; |
| } |
| |
| .select-field:focus { |
| border-color: #a07032; |
| box-shadow: 0 0 0 3px rgba(160, 112, 50, 0.08); |
| } |
| |
| |
| .check-pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 7px; |
| padding: 7px 14px; |
| font-size: 0.8125rem; |
| color: #6d655a; |
| background: #f6f5f3; |
| border: 1px solid #ddd9d0; |
| border-radius: 20px; |
| cursor: pointer; |
| transition: all 0.25s ease; |
| user-select: none; |
| } |
| |
| .check-pill:hover { |
| border-color: #c5bfb2; |
| background: #edebe6; |
| } |
| |
| .check-pill.active { |
| background: #4a443e; |
| color: #faf6ec; |
| border-color: #4a443e; |
| } |
| |
| .check-pill input { |
| display: none; |
| } |
| |
| .check-pill .dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: #c5bfb2; |
| transition: background 0.25s ease; |
| } |
| |
| .check-pill.active .dot { |
| background: #c4a35a; |
| } |
| |
| |
| .range-track { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 100%; |
| height: 3px; |
| background: #ddd9d0; |
| border-radius: 2px; |
| outline: none; |
| cursor: pointer; |
| } |
| |
| .range-track::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 16px; |
| height: 16px; |
| background: #a07032; |
| border: 2.5px solid #faf6ec; |
| border-radius: 50%; |
| box-shadow: 0 1px 5px rgba(140, 103, 38, 0.25); |
| cursor: pointer; |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
| |
| .range-track::-webkit-slider-thumb:hover { |
| transform: scale(1.15); |
| box-shadow: 0 2px 10px rgba(140, 103, 38, 0.3); |
| } |
| |
| .range-track::-moz-range-thumb { |
| width: 16px; |
| height: 16px; |
| background: #a07032; |
| border: 2.5px solid #faf6ec; |
| border-radius: 50%; |
| box-shadow: 0 1px 5px rgba(140, 103, 38, 0.25); |
| cursor: pointer; |
| } |
| |
| |
| .file-zone { |
| border: 2px dashed #c5bfb2; |
| border-radius: 12px; |
| padding: 28px 20px; |
| text-align: center; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .file-zone:hover { |
| border-color: #a07032; |
| background: rgba(196, 163, 90, 0.04); |
| } |
| |
| .file-zone.drag-over { |
| border-color: #a07032; |
| background: rgba(196, 163, 90, 0.08); |
| } |
| |
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| padding: 10px 24px; |
| font-size: 0.875rem; |
| font-family: 'EB Garamond', Georgia, serif; |
| font-weight: 500; |
| border-radius: 10px; |
| cursor: pointer; |
| transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); |
| border: none; |
| outline: none; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .btn:active { |
| animation: buttonPress 0.15s ease; |
| } |
| |
| .btn-primary { |
| background: #2c2520; |
| color: #faf6ec; |
| box-shadow: 0 1px 4px rgba(44, 37, 32, 0.2); |
| } |
| |
| .btn-primary:hover { |
| background: #38302a; |
| box-shadow: 0 3px 14px rgba(44, 37, 32, 0.25); |
| transform: translateY(-1px); |
| } |
| |
| .btn-gold { |
| background: linear-gradient(145deg, #b8933e, #a07032); |
| color: #fdfcf8; |
| box-shadow: 0 1px 4px rgba(140, 103, 38, 0.2); |
| } |
| |
| .btn-gold:hover { |
| box-shadow: 0 3px 16px rgba(140, 103, 38, 0.3); |
| transform: translateY(-1px); |
| } |
| |
| .btn-subtle { |
| background: transparent; |
| color: #847b6c; |
| border: 1px solid #c5bfb2; |
| } |
| |
| .btn-subtle:hover { |
| color: #4a443e; |
| border-color: #a9a290; |
| background: #f6f5f3; |
| } |
| |
| .btn-ghost { |
| background: transparent; |
| color: #847b6c; |
| border: none; |
| } |
| |
| .btn-ghost:hover { |
| color: #4a443e; |
| background: #f6f5f3; |
| } |
| |
| |
| |
| |
| |
| .book-spine { |
| position: absolute; |
| left: 50%; |
| top: 0; |
| bottom: 0; |
| width: 2px; |
| background: linear-gradient(180deg, rgba(180, 170, 150, 0.15), rgba(180, 170, 150, 0.35), rgba(180, 170, 150, 0.15)); |
| transform: translateX(-50%); |
| z-index: 5; |
| pointer-events: none; |
| } |
| |
| .page-inner { |
| position: relative; |
| width: 100%; |
| height: 100%; |
| background: hsl(var(--paper-hue), var(--paper-sat), var(--paper-light)); |
| overflow: hidden; |
| } |
| |
| .page-header { |
| border-bottom: 0.75px solid rgba(130, 115, 95, 0.15); |
| padding-bottom: 12px; |
| margin-bottom: 24px; |
| } |
| |
| .page-footer { |
| border-top: 0.75px solid rgba(130, 115, 95, 0.15); |
| padding-top: 10px; |
| margin-top: auto; |
| } |
| |
| .drop-cap { |
| float: left; |
| font-family: 'UnifrakturMaguntia', cursive; |
| font-size: 3.8em; |
| line-height: 0.78; |
| margin-right: 6px; |
| margin-top: 4px; |
| color: #2c2520; |
| user-select: none; |
| } |
| |
| .ornament-rule { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| margin: 20px 0; |
| opacity: 0.3; |
| } |
| |
| .ornament-rule-line { |
| height: 0.5px; |
| background: #968d7a; |
| flex: 1; |
| max-width: 60px; |
| } |
| |
| .ornament-rule-center { |
| width: 10px; |
| height: 10px; |
| border: 0.5px solid #968d7a; |
| transform: rotate(45deg); |
| } |
| |
| |
| .size-paperback .book-surface { |
| max-width: 580px; |
| } |
| |
| .size-hardcover .book-surface { |
| max-width: 620px; |
| } |
| |
| .size-pamphlet .book-surface { |
| max-width: 460px; |
| } |
| |
| .size-folio .book-surface { |
| max-width: 760px; |
| } |
| |
| |
| .text-tiny { font-size: 12.5px; line-height: 1.7; } |
| .text-small { font-size: 14.5px; line-height: 1.75; } |
| .text-medium { font-size: 17px; line-height: 1.8; } |
| .text-large { font-size: 20px; line-height: 1.85; } |
| .text-great { font-size: 24px; line-height: 1.9; } |
| |
| |
| .filter-distress-1 .page-inner { filter: url(#distress1); } |
| .filter-distress-2 .page-inner { filter: url(#distress2); } |
| .filter-sepia .page-inner { filter: sepia(0.15) saturate(0.95); } |
| .filter-warm .page-inner { filter: sepia(0.08) saturate(1.1); } |
| .filter-cool .page-inner { filter: hue-rotate(-8deg) saturate(0.9); } |
| |
| |
| .running-head { |
| font-size: 0.65rem; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| color: rgba(100, 90, 75, 0.5); |
| font-family: 'EB Garamond', serif; |
| } |
| |
| .page-number { |
| font-variant-numeric: oldstyle-nums; |
| font-family: 'EB Garamond', serif; |
| color: rgba(100, 90, 75, 0.5); |
| } |
| |
| |
| |
| |
| |
| .section-separator { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 14px; |
| padding: 2rem 0; |
| opacity: 0.3; |
| } |
| |
| .section-separator .sep-line { |
| height: 0.5px; |
| background: linear-gradient(90deg, transparent, #968d7a, transparent); |
| flex: 1; |
| max-width: 80px; |
| } |
| |
| .section-separator .sep-diamond { |
| width: 6px; |
| height: 6px; |
| border: 0.5px solid #968d7a; |
| transform: rotate(45deg); |
| } |
| |
| |
| |
| |
| |
| .cover-frame { |
| position: relative; |
| border: 1.5px solid rgba(196, 163, 90, 0.35); |
| border-radius: 2px; |
| } |
| |
| .cover-frame::before { |
| content: ''; |
| position: absolute; |
| inset: 6px; |
| border: 0.5px solid rgba(196, 163, 90, 0.18); |
| pointer-events: none; |
| } |
| |
| .cover-frame::after { |
| content: ''; |
| position: absolute; |
| inset: 12px; |
| border: 0.5px solid rgba(196, 163, 90, 0.1); |
| pointer-events: none; |
| } |
| |
| .corner-ornament { |
| position: absolute; |
| width: 18px; |
| height: 18px; |
| border: 0.5px solid rgba(196, 163, 90, 0.3); |
| pointer-events: none; |
| } |
| |
| .corner-ornament.tl { top: 14px; left: 14px; border-right: none; border-bottom: none; } |
| .corner-ornament.tr { top: 14px; right: 14px; border-left: none; border-bottom: none; } |
| .corner-ornament.bl { bottom: 14px; left: 14px; border-right: none; border-top: none; } |
| .corner-ornament.br { bottom: 14px; right: 14px; border-left: none; border-top: none; } |
| |
| |
| |
| |
| |
| .print-overlay { |
| position: fixed; |
| inset: 0; |
| z-index: 200; |
| background: rgba(26, 22, 18, 0.88); |
| backdrop-filter: blur(6px); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity 0.5s ease; |
| } |
| |
| .print-overlay.visible { |
| opacity: 1; |
| pointer-events: all; |
| } |
| |
| .print-drum { |
| width: 280px; |
| height: 4px; |
| background: rgba(180, 170, 156, 0.15); |
| border-radius: 2px; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .print-drum-fill { |
| height: 100%; |
| width: 0; |
| background: linear-gradient(90deg, #c4a35a, #d5a85a); |
| border-radius: 2px; |
| transition: width 0.1s linear; |
| } |
| |
| |
| |
| |
| |
| .digit-roll { |
| display: inline-block; |
| transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); |
| } |
| |
| |
| |
| |
| |
| .hanging-indent { |
| text-indent: -1em; |
| padding-left: 1em; |
| } |
| |
| .oldstyle-nums { |
| font-variant-numeric: oldstyle-nums; |
| } |
| |
| .lining-nums { |
| font-variant-numeric: lining-nums; |
| } |
| |
| .swash { |
| font-feature-settings: "swsh" 1; |
| } |
| |
| .kern { |
| font-feature-settings: "kern" 1; |
| } |
| |
| |
| |
| |
| |
| .noise-overlay { |
| position: fixed; |
| inset: 0; |
| pointer-events: none; |
| z-index: 0; |
| opacity: 0.018; |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); |
| background-size: 200px 200px; |
| } |
| |
| |
| |
| |
| |
| .sidebar-hero { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .sidebar-hero::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| height: 40px; |
| background: linear-gradient(0deg, rgba(253, 252, 248, 0.85), transparent); |
| pointer-events: none; |
| } |
| |
| |
| .quill-deco { |
| animation: featherDrift 8s ease-in-out infinite; |
| } |
| |
| |
| |
| |
| |
| .path-display { |
| font-family: 'EB Garamond', serif; |
| font-size: 0.75rem; |
| color: #a4a4a4; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| letter-spacing: 0.02em; |
| } |
| |
| |
| |
| |
| |
| @media (max-width: 1024px) { |
| .book-surface { max-width: 100% !important; } |
| .page-body { padding: 1.75rem 2rem !important; } |
| } |
| |
| @media (max-width: 640px) { |
| .page-body { padding: 1.25rem 1.5rem !important; } |
| .cover-frame { padding: 1.5rem !important; } |
| } |
| |
| |
| @media print { |
| .app-header, .sidebar-panel, .no-print, .print-overlay { display: none !important; } |
| .book-preview { overflow: visible !important; height: auto !important; } |
| .book-surface { box-shadow: none !important; border: 1px solid #ddd; max-width: 100% !important; } |
| .page-inner { break-inside: avoid; } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <div class="noise-overlay"></div> |
|
|
| |
| <svg style="position:absolute; width:0; height:0; overflow:hidden;"> |
| <defs> |
| <filter id="distress1"> |
| <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="3" result="noise"/> |
| <feDisplacementMap in="SourceGraphic" in2="noise" scale="1.5" xChannelSelector="R" yChannelSelector="G"/> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.97 0"/> |
| </filter> |
| <filter id="distress2"> |
| <feTurbulence type="fractalNoise" baseFrequency="0.06" numOctaves="4" result="noise"/> |
| <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" xChannelSelector="R" yChannelSelector="G"/> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.94 0"/> |
| </filter> |
| <filter id="inkBlot"> |
| <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="5" result="turbulence"/> |
| <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="8" xChannelSelector="R" yChannelSelector="G"/> |
| </filter> |
| <filter id="paperTexture"> |
| <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" result="noise"/> |
| <feBlend in="SourceGraphic" in2="noise" mode="multiply" result="blend"/> |
| </filter> |
| </defs> |
| </svg> |
|
|
| |
| |
| |
| <div id="printOverlay" class="print-overlay"> |
| <div class="text-center"> |
| <div class="mb-8"> |
| <svg class="quill-deco mx-auto" width="48" height="48" viewBox="0 0 48 48" fill="none"> |
| <path d="M12 38C12 38 16 28 20 20C24 12 32 4 38 8C42 10 40 16 36 22C32 28 28 32 24 34C20 36 16 38 12 38Z" fill="#c4a35a" opacity="0.7"/> |
| <path d="M12 38L8 42M12 38L16 42" stroke="#c4a35a" stroke-width="1.5" opacity="0.5"/> |
| </svg> |
| </div> |
| <p class="font-cormorant italic text-xl text-parchment-300 mb-6">The press is inking the type...</p> |
| <div class="print-drum"> |
| <div class="print-drum-fill" id="printDrumFill"></div> |
| </div> |
| <p class="font-eb-garamond text-sm text-parchment-500 mt-4 oldstyle-nums" id="printPercent">0 pages composed</p> |
| </div> |
| </div> |
|
|
| |
| |
| |
| <header class="app-header fixed top-0 left-0 right-0 z-50"> |
| <div class="max-w-[1600px] mx-auto px-6 lg:px-10 h-14 flex items-center justify-between"> |
| |
| <div class="flex items-center gap-3"> |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none" class="flex-shrink-0"> |
| <rect x="4" y="2" width="24" height="28" rx="2" fill="#2c2520"/> |
| <rect x="6" y="4" width="20" height="24" rx="1" fill="#faf6ec"/> |
| <line x1="9" y1="9" x2="23" y2="9" stroke="#2c2520" stroke-width="0.75"/> |
| <line x1="9" y1="12" x2="20" y2="12" stroke="#2c2520" stroke-width="0.5" opacity="0.5"/> |
| <line x1="9" y1="15" x2="21" y2="15" stroke="#2c2520" stroke-width="0.5" opacity="0.5"/> |
| <line x1="9" y1="18" x2="19" y2="18" stroke="#2c2520" stroke-width="0.5" opacity="0.5"/> |
| <rect x="9" y="22" width="8" height="2" rx="1" fill="#a07032"/> |
| </svg> |
| <div> |
| <span class="font-playfair font-bold text-base text-charcoal-900 tracking-tight leading-none block">CLI Printing Press</span> |
| <span class="text-[0.625rem] text-charcoal-400 tracking-[0.2em] uppercase font-medium">Book Impression Engine</span> |
| </div> |
| </div> |
|
|
| |
| <nav class="hidden md:flex items-center gap-8"> |
| <a href="#" class="header-link text-xs tracking-widest uppercase font-medium" onclick="scrollToSection('manuscript')">Manuscript</a> |
| <a href="#" class="header-link text-xs tracking-widest uppercase font-medium" onclick="scrollToSection('typography')">Typography</a> |
| <a href="#" class="header-link text-xs tracking-widest uppercase font-medium" onclick="scrollToSection('print')">Impression</a> |
| </nav> |
|
|
| |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" class="header-link-accent text-[0.65rem] tracking-widest uppercase font-semibold px-4 py-1.5 rounded-full"> |
| Built with anycoder |
| </a> |
| </div> |
| </header> |
|
|
| |
| |
| |
| <div class="pt-14 min-h-screen flex flex-col lg:flex-row"> |
| |
| <aside class="sidebar-panel w-full lg:w-[380px] xl:w-[420px] flex-shrink-0 bg-parchment-50/70 border-r border-iron-200/40 overflow-y-auto" style="max-height: calc(100vh - 3.5rem);"> |
| |
| <div class="sidebar-hero px-7 pt-8 pb-4"> |
| <div class="flex items-center gap-4"> |
| <svg width="56" height="56" viewBox="0 0 56 56" fill="none" class="flex-shrink-0"> |
| |
| <rect x="8" y="6" width="40" height |
