| :root { |
| --paper: #f6efde; |
| --paper2: #efe5cd; |
| --paperEdge: #e4d6b4; |
| --ink: #33271a; |
| --ink2: #5e4d36; |
| --faint: #8a795c; |
| --leather: #73302a; |
| --leather2: #8c3c33; |
| --leatherInk: #f3e2c8; |
| --brass: #b08a44; |
| --brass2: #caa75e; |
| --brassDeep: #876327; |
| --green: #3c5240; |
| --line: rgba(135, 99, 39, 0.25); |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| margin: 0; |
| min-height: 100vh; |
| font-family: "Spectral", Georgia, serif; |
| color: var(--ink); |
| background: |
| radial-gradient(70% 50% at 22% -6%, rgba(255, 234, 176, 0.5), transparent 55%), |
| repeating-linear-gradient(91deg, #5a3f28, #5a3f28 3px, #553a24 3px, #553a24 7px), |
| linear-gradient(160deg, #5e4229, #4a331f); |
| } |
|
|
| a { |
| color: inherit; |
| } |
|
|
| button, |
| input, |
| textarea, |
| select { |
| font: inherit; |
| } |
|
|
| .app-shell { |
| max-width: 1480px; |
| margin: 22px auto; |
| padding: 34px; |
| } |
|
|
| .sheet { |
| min-height: calc(100vh - 44px); |
| border-radius: 8px; |
| background: |
| radial-gradient(90% 60% at 18% 0%, #fbf5e6, transparent 55%), |
| linear-gradient(170deg, #f6efde, #ece0c4); |
| box-shadow: |
| 0 30px 70px rgba(0, 0, 0, 0.5), |
| 0 2px 0 rgba(255, 255, 255, 0.4) inset, |
| 0 0 0 1px rgba(135, 99, 39, 0.25); |
| overflow: hidden; |
| position: relative; |
| } |
|
|
| .sheet::before { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| pointer-events: none; |
| mix-blend-mode: multiply; |
| opacity: 0.45; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.35'/%3E%3C/svg%3E"); |
| } |
|
|
| .page { |
| position: relative; |
| padding: 36px 48px 30px; |
| } |
|
|
| .mast { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 20px; |
| margin-bottom: 24px; |
| } |
|
|
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 18px; |
| } |
|
|
| .plaque { |
| width: 58px; |
| height: 58px; |
| border-radius: 7px; |
| display: grid; |
| place-items: center; |
| color: #fff6e2; |
| background: linear-gradient(150deg, var(--brass2), var(--brassDeep)); |
| border: 1px solid #e9cf92; |
| box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .wordmark { |
| font-family: "Playfair Display", serif; |
| font-size: 38px; |
| font-weight: 800; |
| color: var(--leather); |
| line-height: 0.95; |
| letter-spacing: -0.5px; |
| } |
|
|
| .tagline { |
| color: var(--ink2); |
| font-style: italic; |
| font-size: 16px; |
| margin-top: 4px; |
| } |
|
|
| .steps { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| flex-wrap: wrap; |
| } |
|
|
| .step { |
| color: var(--faint); |
| text-transform: uppercase; |
| letter-spacing: 1.5px; |
| font-size: 12.5px; |
| font-weight: 600; |
| } |
|
|
| .step.done { |
| color: var(--brassDeep); |
| } |
|
|
| .step.now { |
| color: var(--leather); |
| border-bottom: 2px solid var(--leather); |
| padding-bottom: 4px; |
| } |
|
|
| .sep { |
| color: rgba(135, 99, 39, 0.45); |
| } |
|
|
| .card, |
| .panel, |
| .hero, |
| .queue, |
| .player, |
| .voice-panel, |
| .reading-panel, |
| .options, |
| .log { |
| border: 1px solid var(--line); |
| border-radius: 6px; |
| background: linear-gradient(180deg, #fffdf6, #f7efdc); |
| box-shadow: 0 8px 20px rgba(74, 51, 31, 0.1); |
| } |
|
|
| .hero { |
| display: flex; |
| align-items: center; |
| gap: 28px; |
| padding: 20px 26px; |
| margin-bottom: 18px; |
| background: linear-gradient(180deg, #fff, rgba(246, 239, 222, 0.4)); |
| box-shadow: 0 2px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 24px rgba(74, 51, 31, 0.12); |
| } |
|
|
| .cover { |
| width: 124px; |
| height: 182px; |
| flex: 0 0 auto; |
| padding: 16px 12px; |
| position: relative; |
| border-radius: 3px 5px 5px 3px; |
| background: linear-gradient(120deg, #7d342c, #5e241f); |
| box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4), inset -8px 0 14px rgba(0, 0, 0, 0.35); |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| text-align: center; |
| } |
|
|
| .cover::before { |
| content: ""; |
| position: absolute; |
| inset: 0 auto 0 0; |
| width: 11px; |
| border-radius: 3px 0 0 3px; |
| background: linear-gradient(90deg, #4a1b17, #742c25); |
| box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.5); |
| } |
|
|
| .cover-title { |
| font-family: "Playfair Display", serif; |
| font-size: 18px; |
| font-weight: 700; |
| color: #f3dcb0; |
| line-height: 1.05; |
| } |
|
|
| .cover-rule { |
| width: 38px; |
| height: 2px; |
| margin: 11px auto; |
| background: var(--brass2); |
| } |
|
|
| .cover-author { |
| font-size: 13px; |
| font-style: italic; |
| color: #e6c894; |
| } |
|
|
| .cover-corner { |
| position: absolute; |
| width: 18px; |
| height: 18px; |
| border: 2px solid var(--brass2); |
| opacity: 0.85; |
| } |
|
|
| .cover-corner.top { |
| top: 7px; |
| right: 7px; |
| border-left: none; |
| border-bottom: none; |
| } |
|
|
| .cover-corner.bottom { |
| right: 7px; |
| bottom: 7px; |
| border-left: none; |
| border-top: none; |
| } |
|
|
| .hero-meta { |
| flex: 1 1 auto; |
| } |
|
|
| .hero-title, |
| .panel-title, |
| .screen-title { |
| font-family: "Playfair Display", serif; |
| color: var(--ink); |
| } |
|
|
| .hero-title { |
| font-weight: 800; |
| font-size: 38px; |
| line-height: 1.02; |
| letter-spacing: -0.5px; |
| } |
|
|
| .hero-subtitle { |
| margin-top: 5px; |
| color: var(--leather); |
| font-size: 20px; |
| font-style: italic; |
| } |
|
|
| .hero-kicker { |
| margin-top: 8px; |
| color: var(--faint); |
| font-size: 13px; |
| text-transform: uppercase; |
| letter-spacing: 1.6px; |
| } |
|
|
| .hero-tally { |
| text-align: right; |
| padding: 14px 22px; |
| border-radius: 6px; |
| color: #fff6e2; |
| background: linear-gradient(160deg, var(--brass2), var(--brassDeep)); |
| border: 1px solid #e9cf92; |
| box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.4), inset 0 -3px 8px rgba(0, 0, 0, 0.28); |
| } |
|
|
| .hero-big { |
| font-family: "Playfair Display", serif; |
| font-size: 46px; |
| font-weight: 800; |
| line-height: 0.9; |
| } |
|
|
| .hero-big span { |
| font-size: 24px; |
| opacity: 0.75; |
| } |
|
|
| .hero-run, |
| .smallcaps { |
| text-transform: uppercase; |
| letter-spacing: 1.2px; |
| font-size: 12px; |
| } |
|
|
| .hero-run { |
| margin-top: 10px; |
| padding-top: 10px; |
| border-top: 1px solid rgba(255, 255, 255, 0.3); |
| font-size: 16px; |
| text-transform: none; |
| letter-spacing: 0; |
| } |
|
|
| .cols { |
| display: grid; |
| grid-template-columns: 1fr 1.08fr; |
| gap: 24px; |
| } |
|
|
| .panel-head { |
| display: flex; |
| align-items: center; |
| gap: 11px; |
| margin-bottom: 14px; |
| } |
|
|
| .panel-head .right { |
| margin-left: auto; |
| color: var(--brassDeep); |
| font-size: 13px; |
| text-transform: uppercase; |
| letter-spacing: 1.2px; |
| font-weight: 600; |
| } |
|
|
| .panel-title { |
| margin: 0; |
| font-size: 23px; |
| font-weight: 700; |
| } |
|
|
| .queue-head, |
| .list-head { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px 18px; |
| border-bottom: 1px solid rgba(135, 99, 39, 0.22); |
| background: linear-gradient(180deg, #f1e4c6, #e9d9b6); |
| color: var(--ink2); |
| text-transform: uppercase; |
| letter-spacing: 1.3px; |
| font-size: 12.5px; |
| font-weight: 600; |
| } |
|
|
| .queue-head .count, |
| .list-head .count { |
| margin-left: auto; |
| color: var(--leather); |
| } |
|
|
| .chapter-list, |
| .track-list { |
| max-height: 520px; |
| overflow: auto; |
| } |
|
|
| .chapter-row, |
| .track-row, |
| .queue-row { |
| display: grid; |
| grid-template-columns: auto auto 1fr auto; |
| gap: 14px; |
| align-items: center; |
| padding: 12px 18px; |
| border-bottom: 1px solid rgba(135, 99, 39, 0.13); |
| } |
|
|
| .chapter-row:nth-child(even), |
| .track-row:nth-child(even) { |
| background: rgba(135, 99, 39, 0.035); |
| } |
|
|
| .chapter-row.focus, |
| .queue-row.rendering, |
| .track-row.playing { |
| background: rgba(115, 48, 42, 0.08); |
| box-shadow: inset 3px 0 0 var(--leather); |
| } |
|
|
| .checkbox { |
| width: 22px; |
| height: 22px; |
| border: 1.5px solid var(--brass); |
| border-radius: 4px; |
| display: grid; |
| place-items: center; |
| background: #fff; |
| } |
|
|
| .checkbox.checked { |
| background: linear-gradient(180deg, var(--leather2), var(--leather)); |
| border-color: var(--leather); |
| color: white; |
| } |
|
|
| .roman { |
| width: 30px; |
| text-align: center; |
| font-family: "Playfair Display", serif; |
| font-style: italic; |
| color: var(--brassDeep); |
| } |
|
|
| .chapter-main, |
| .track-main, |
| .queue-main { |
| min-width: 0; |
| } |
|
|
| .chapter-name, |
| .track-name, |
| .queue-name { |
| font-size: 17px; |
| font-weight: 500; |
| } |
|
|
| .chapter-meta, |
| .track-meta, |
| .queue-meta { |
| color: var(--faint); |
| font-size: 12.5px; |
| } |
|
|
| .chapter-row.off .chapter-name, |
| .queue-row.skipped .queue-name { |
| color: var(--faint); |
| text-decoration: line-through; |
| text-decoration-color: rgba(138, 121, 92, 0.5); |
| } |
|
|
| .circle-btn, |
| .transport-btn, |
| .pill, |
| .seg button, |
| .ghost-btn, |
| .small-btn { |
| border: 1px solid rgba(135, 99, 39, 0.4); |
| background: #fff; |
| color: var(--ink); |
| cursor: pointer; |
| } |
|
|
| .circle-btn, |
| .transport-btn { |
| width: 34px; |
| height: 34px; |
| border-radius: 50%; |
| } |
|
|
| .circle-btn:hover, |
| .transport-btn:hover, |
| .ghost-btn:hover, |
| .small-btn:hover { |
| background: rgba(176, 138, 68, 0.12); |
| } |
|
|
| .reading-panel, |
| .player { |
| padding: 20px 24px; |
| box-shadow: 0 12px 28px rgba(74, 51, 31, 0.16); |
| } |
|
|
| .reading-panel { |
| position: relative; |
| } |
|
|
| .reading-panel::before { |
| content: ""; |
| position: absolute; |
| left: 54px; |
| top: 0; |
| bottom: 0; |
| width: 1px; |
| background: rgba(176, 80, 70, 0.25); |
| } |
|
|
| .reading-head { |
| display: flex; |
| justify-content: space-between; |
| gap: 12px; |
| border-bottom: 1px solid rgba(135, 99, 39, 0.25); |
| padding-bottom: 14px; |
| margin-bottom: 16px; |
| } |
|
|
| .reading-head h3, |
| .now-title, |
| .player-title { |
| margin: 0; |
| font-family: "Playfair Display", serif; |
| } |
|
|
| .reading-head h3 { |
| font-size: 25px; |
| font-weight: 700; |
| } |
|
|
| .chips { |
| display: flex; |
| gap: 8px; |
| } |
|
|
| .chip, |
| .small-btn, |
| .ghost-btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| padding: 9px 14px; |
| border-radius: 5px; |
| } |
|
|
| .chip.warn, |
| .small-btn.danger { |
| color: var(--leather); |
| } |
|
|
| .verse { |
| padding-left: 14px; |
| font-size: 20px; |
| line-height: 1.6; |
| } |
|
|
| .reading-scroll { |
| max-height: 460px; |
| overflow: auto; |
| padding-right: 14px; |
| scroll-behavior: smooth; |
| } |
|
|
| .reading-scroll p { |
| margin: 0 0 1rem; |
| } |
|
|
| .dropcap { |
| float: left; |
| margin: 4px 14px 0 0; |
| font-family: "Playfair Display", serif; |
| font-size: 88px; |
| font-weight: 800; |
| line-height: 0.74; |
| color: var(--leather); |
| } |
|
|
| .voice-panel, |
| .options { |
| padding: 20px 24px; |
| margin-top: 16px; |
| } |
|
|
| .seg { |
| display: flex; |
| overflow: hidden; |
| border: 1px solid rgba(135, 99, 39, 0.4); |
| border-radius: 5px; |
| background: #f1e4c6; |
| margin-bottom: 18px; |
| } |
|
|
| .seg button { |
| flex: 1; |
| border: 0; |
| border-right: 1px solid rgba(135, 99, 39, 0.25); |
| padding: 12px 8px; |
| color: var(--ink2); |
| text-transform: uppercase; |
| letter-spacing: 1.4px; |
| font-size: 13px; |
| font-weight: 600; |
| } |
|
|
| .seg button:last-child { |
| border-right: 0; |
| } |
|
|
| .seg button.active { |
| color: var(--leatherInk); |
| background: linear-gradient(180deg, var(--leather2), var(--leather)); |
| } |
|
|
| .narrator-grid, |
| .format-grid, |
| .meta-grid { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .narrator-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .narrator-card, |
| .format-card { |
| border: 1px solid rgba(135, 99, 39, 0.28); |
| border-radius: 6px; |
| background: #fff; |
| padding: 12px 14px; |
| cursor: pointer; |
| text-align: left; |
| } |
|
|
| .narrator-card.active, |
| .format-card.active { |
| border-color: var(--leather); |
| background: rgba(115, 48, 42, 0.07); |
| box-shadow: 0 0 0 1px var(--leather) inset; |
| } |
|
|
| .drop-zone { |
| border: 1.5px dashed rgba(135, 99, 39, 0.5); |
| border-radius: 5px; |
| padding: 24px; |
| background: rgba(176, 138, 68, 0.05); |
| } |
|
|
| .drop-zone input[type="file"] { |
| margin-top: 8px; |
| } |
|
|
| .field, |
| .textarea { |
| width: 100%; |
| border: 1px solid rgba(135, 99, 39, 0.35); |
| border-radius: 4px; |
| background: #fff; |
| color: var(--ink); |
| padding: 12px 14px; |
| } |
|
|
| .textarea { |
| min-height: 110px; |
| resize: vertical; |
| } |
|
|
| .design-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 14px; |
| } |
|
|
| .design-preview { |
| margin-top: 16px; |
| } |
|
|
| .design-output { |
| min-height: 48px; |
| display: flex; |
| align-items: center; |
| } |
|
|
| .dial-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 22px; |
| margin-top: 16px; |
| padding-top: 16px; |
| border-top: 1px solid rgba(135, 99, 39, 0.22); |
| } |
|
|
| .dial-head { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 11px; |
| } |
|
|
| .dial-value { |
| color: var(--leather); |
| font-family: "Playfair Display", serif; |
| font-size: 20px; |
| font-weight: 700; |
| } |
|
|
| .range { |
| width: 100%; |
| accent-color: var(--leather); |
| } |
|
|
| .footer { |
| display: flex; |
| align-items: center; |
| gap: 20px; |
| margin-top: 18px; |
| padding-top: 18px; |
| border-top: 1px solid rgba(135, 99, 39, 0.3); |
| } |
|
|
| .footer-note { |
| color: var(--ink2); |
| font-size: 16px; |
| font-style: italic; |
| } |
|
|
| .spacer { |
| flex: 1; |
| } |
|
|
| .btn-ghost, |
| .btn-primary { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| border-radius: 5px; |
| padding: 15px 26px; |
| font-family: "Playfair Display", serif; |
| font-size: 18px; |
| font-weight: 600; |
| cursor: pointer; |
| } |
|
|
| .btn-ghost { |
| background: #fff; |
| color: var(--ink); |
| border: 1px solid rgba(135, 99, 39, 0.5); |
| } |
|
|
| .btn-primary { |
| background: linear-gradient(180deg, var(--leather2), var(--leather) 60%, #5e241f); |
| color: #f6e6cc; |
| border: 1px solid #9c4a40; |
| box-shadow: 0 8px 20px rgba(115, 48, 42, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); |
| } |
|
|
| .btn-primary:disabled, |
| .btn-ghost:disabled, |
| .small-btn:disabled { |
| cursor: not-allowed; |
| opacity: 0.5; |
| filter: grayscale(0.3); |
| } |
|
|
| .status-banner, |
| .error-banner { |
| margin-bottom: 16px; |
| padding: 12px 14px; |
| border-radius: 6px; |
| font-size: 14px; |
| } |
|
|
| .status-banner { |
| background: rgba(176, 138, 68, 0.1); |
| border: 1px solid rgba(176, 138, 68, 0.3); |
| color: var(--ink2); |
| } |
|
|
| .error-banner { |
| background: rgba(115, 48, 42, 0.08); |
| border: 1px solid rgba(115, 48, 42, 0.35); |
| color: var(--leather); |
| } |
|
|
| .progress-bar, |
| .mini-bar, |
| .scrubber { |
| position: relative; |
| overflow: hidden; |
| background: rgba(135, 99, 39, 0.18); |
| } |
|
|
| .progress-bar { |
| height: 14px; |
| border-radius: 8px; |
| border: 1px solid rgba(135, 99, 39, 0.25); |
| } |
|
|
| .mini-bar { |
| height: 5px; |
| border-radius: 3px; |
| margin-top: 7px; |
| } |
|
|
| .progress-fill, |
| .mini-fill, |
| .scrub-fill { |
| position: absolute; |
| inset: 0 auto 0 0; |
| background: linear-gradient(90deg, var(--brassDeep), var(--brass2)); |
| } |
|
|
| .progress-fill::after { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0 10px, transparent 10px 22px); |
| animation: stripe 1s linear infinite; |
| } |
|
|
| .status-dot { |
| width: 11px; |
| height: 11px; |
| border-radius: 50%; |
| background: var(--leather); |
| display: inline-block; |
| box-shadow: 0 0 0 0 rgba(115, 48, 42, 0.5); |
| animation: pulse 1.8s ease-out infinite; |
| } |
|
|
| .queue-status { |
| width: 26px; |
| height: 26px; |
| border-radius: 50%; |
| display: grid; |
| place-items: center; |
| font-size: 13px; |
| } |
|
|
| .queue-status.done { |
| background: linear-gradient(150deg, #4e6b52, #3c5240); |
| color: #eaf3ea; |
| } |
|
|
| .queue-status.rendering { |
| background: var(--leather); |
| color: white; |
| } |
|
|
| .queue-status.queued { |
| border: 1.5px solid rgba(135, 99, 39, 0.4); |
| color: var(--faint); |
| } |
|
|
| .queue-status.skipped { |
| border: 1.5px dashed rgba(138, 121, 92, 0.5); |
| color: var(--faint); |
| } |
|
|
| .stats-hero { |
| display: flex; |
| justify-content: space-between; |
| gap: 20px; |
| margin-top: 9px; |
| color: var(--ink2); |
| font-size: 14px; |
| } |
|
|
| .hero-stats { |
| padding-left: 24px; |
| border-left: 1px solid rgba(135, 99, 39, 0.24); |
| text-align: right; |
| } |
|
|
| .pct { |
| font-family: "Playfair Display", serif; |
| font-size: 52px; |
| line-height: 0.85; |
| color: var(--leather); |
| font-weight: 800; |
| } |
|
|
| .wave { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 3px; |
| height: 72px; |
| margin: 4px 0 16px; |
| } |
|
|
| .wave i { |
| width: 5px; |
| border-radius: 3px; |
| background: linear-gradient(180deg, var(--brass2), var(--leather)); |
| animation: wave 1.1s ease-in-out infinite; |
| } |
|
|
| .spoken { |
| border: 1px solid rgba(135, 99, 39, 0.22); |
| border-radius: 5px; |
| background: #fff; |
| padding: 16px 18px; |
| font-size: 19px; |
| line-height: 1.55; |
| font-style: italic; |
| } |
|
|
| .spoken .lit { |
| color: var(--ink); |
| font-style: normal; |
| background: linear-gradient(180deg, transparent 58%, rgba(202, 167, 94, 0.55) 58%); |
| } |
|
|
| .spoken .dim { |
| color: var(--faint); |
| } |
|
|
| .log { |
| overflow: hidden; |
| } |
|
|
| .log-row { |
| display: flex; |
| gap: 14px; |
| align-items: baseline; |
| padding: 10px 16px; |
| border-bottom: 1px solid rgba(135, 99, 39, 0.12); |
| } |
|
|
| .log-row:last-child { |
| border-bottom: 0; |
| } |
|
|
| .log-row.current { |
| color: var(--leather); |
| } |
|
|
| .completed-row { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); |
| gap: 16px; |
| align-items: center; |
| padding: 12px 16px; |
| border-top: 1px solid rgba(135, 99, 39, 0.12); |
| } |
|
|
| .completed-row:first-of-type { |
| border-top: 0; |
| } |
|
|
| .completed-row audio { |
| width: 100%; |
| } |
|
|
| .time { |
| color: var(--brassDeep); |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| .spec-strip { |
| display: flex; |
| flex-wrap: wrap; |
| width: fit-content; |
| margin-top: 14px; |
| border-radius: 6px; |
| overflow: hidden; |
| border: 1px solid rgba(135, 99, 39, 0.22); |
| background: #fffaf0; |
| } |
|
|
| .spec { |
| padding: 10px 18px; |
| border-right: 1px solid rgba(135, 99, 39, 0.18); |
| } |
|
|
| .spec:last-child { |
| border-right: 0; |
| } |
|
|
| .spec-value { |
| font-family: "Playfair Display", serif; |
| font-size: 19px; |
| font-weight: 700; |
| } |
|
|
| .scrubber { |
| height: 8px; |
| border-radius: 5px; |
| margin: 6px 0; |
| } |
|
|
| .scrub-fill { |
| background: linear-gradient(90deg, var(--leather2), var(--leather)); |
| } |
|
|
| .scrub-head, |
| .scrub-tick { |
| position: absolute; |
| } |
|
|
| .scrub-tick { |
| top: -2px; |
| width: 2px; |
| height: 12px; |
| background: rgba(135, 99, 39, 0.5); |
| } |
|
|
| .scrub-head { |
| top: 50%; |
| width: 16px; |
| height: 16px; |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| background: radial-gradient(circle at 35% 30%, #fff, var(--leather)); |
| border: 1px solid #fff; |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); |
| } |
|
|
| .transport { |
| display: flex; |
| justify-content: center; |
| gap: 18px; |
| margin-top: 10px; |
| } |
|
|
| .transport-btn { |
| width: 46px; |
| height: 46px; |
| } |
|
|
| .transport-btn.main { |
| width: 64px; |
| height: 64px; |
| color: #f6e6cc; |
| border: 1px solid #9c4a40; |
| background: linear-gradient(180deg, var(--leather2), var(--leather) 60%, #5e241f); |
| box-shadow: 0 8px 18px rgba(115, 48, 42, 0.4); |
| } |
|
|
| .meta-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .toggle { |
| width: 42px; |
| height: 24px; |
| border-radius: 13px; |
| position: relative; |
| background: linear-gradient(180deg, var(--leather2), var(--leather)); |
| } |
|
|
| .toggle::after { |
| content: ""; |
| position: absolute; |
| top: 2px; |
| left: 20px; |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: white; |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .hide { |
| display: none !important; |
| } |
|
|
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(115, 48, 42, 0.5); } |
| 70% { box-shadow: 0 0 0 9px rgba(115, 48, 42, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(115, 48, 42, 0); } |
| } |
|
|
| @keyframes stripe { |
| to { background-position: 22px 0; } |
| } |
|
|
| @keyframes wave { |
| 0%, 100% { transform: scaleY(0.32); } |
| 50% { transform: scaleY(1); } |
| } |
|
|
| @media (max-width: 1080px) { |
| .page { |
| padding: 26px 24px 22px; |
| } |
|
|
| .mast, |
| .hero, |
| .footer { |
| flex-direction: column; |
| align-items: flex-start; |
| } |
|
|
| .cols, |
| .dial-grid, |
| .meta-grid, |
| .narrator-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .hero-tally, |
| .hero-stats { |
| text-align: left; |
| padding-left: 0; |
| border-left: 0; |
| } |
| } |
|
|
