/* ⚖️ --bp-ink — the colour the PROMPT itself is written in (owner 2026-08-18, the same "Text colour" control classic-wheel and the chalkboard use). ⚠️ Deliberately NOT given a value here. The pad's handwriting and the typewriter shipped with slightly different darks (#2f2f38 / #2b2b33), so each keeps its own inside var(--bp-ink, …): unset, both pages render exactly as they always did; set, both follow the picker. The page writes it onto . ⚠️ The PNG export in blank-page-engine.js reads the same variable — a colour that is only applied on screen would save the wrong image. */ /* ============================================================================ blank-page.css — ✏️ The Blank Page engine styling (.bp-*) A warm artist's-desk scene: a spiral sketchpad where a pencil draws the chosen subject as graphite line-art, then writes its name. Self-contained; the paper scene keeps its physical colours on any site theme (like felt on a card table). ============================================================================ */ .bp-stage { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 22px 55px -20px rgba(60, 70, 100, .5); line-height: 0; } .bp-stage svg.bp-scene { display: block; width: 100%; height: auto; } /* the drawing */ .bp-stroke { fill: none; stroke: #34343f; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } .bp-dot { fill: #34343f; transition: opacity .18s ease; } /* pencil */ .bp-pencil-body { fill: url(#bpPencilGrad); } /* the written label (inside the SVG, on the page) */ .bp-name { font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: 40px; font-weight: 700; fill: var(--bp-ink, #2f2f38); opacity: 0; transition: opacity .4s ease; } .bp-kicker { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 3px; fill: #e2603f; opacity: 0; transition: opacity .3s ease .1s; } /* cue chip (HTML, over the stage) */ .bp-cue { position: absolute; top: 4.5%; left: 50%; transform: translateX(-50%); z-index: 4; font-size: 12px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: #33405a; background: rgba(255, 248, 236, .82); padding: 5px 16px; border-radius: 20px; line-height: 1.2; transition: opacity .3s ease; } /* on completion the on-page "DRAW THIS · " label carries the reveal, so hide the top chip */ .bp-stage.bp-done .bp-cue { opacity: 0; } /* draw button + speed knob + effects */ .bp-drawbtn-wrap { text-align: center; } .bp-drawbtn-main { display: inline-flex; align-items: center; gap: 8px; margin: 16px auto 0; font-size: 15px; font-weight: 800; color: #fff; padding: 12px 32px; border-radius: 24px; border: 0; cursor: pointer; letter-spacing: .4px; background: linear-gradient(135deg, var(--bp-grad-a, #f6923f), var(--bp-grad-b, #e2603f)); box-shadow: 0 8px 22px -6px rgba(226, 96, 63, .55); } .bp-speed-row { margin-top: 16px; } .bp-speed-row label { font-size: 13px; font-weight: 600; color: var(--theme-text, #1a1a2e); display: flex; align-items: center; gap: 8px; } .bp-speed-row .bp-speed-val { color: var(--bp-accent, #e2603f); font-weight: 800; } .bp-speed-row input[type=range] { width: 100%; margin-top: 8px; accent-color: var(--bp-accent, #e2603f); } .bp-effects { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 13px; color: var(--theme-text, #1a1a2e); } .bp-effects label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } /* ── TYPE MODE (typewriter) — text lives in an SVG so it scales with the scene ── */ .bp-fo { width: 100%; padding-top: 12px; overflow: visible; } .bp-type-kicker { display: block; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--bp-accent, #0f766e); opacity: 0; margin-bottom: 12px; transition: opacity .3s ease; } .bp-typed-wrap { font-family: 'Courier New', 'Courier', monospace; font-size: 21px; font-weight: 700; line-height: 1.45; color: var(--bp-ink, #2b2b33); word-break: break-word; } .bp-cursor { color: var(--bp-accent, #0f766e); opacity: 0; font-weight: 400; } .bp-stage.bp-typing .bp-type-kicker, .bp-stage.bp-done .bp-type-kicker { opacity: 1; } .bp-stage.bp-typing .bp-cursor, .bp-stage.bp-done .bp-cursor { opacity: 1; animation: bpBlink 1.05s step-end infinite; } @keyframes bpBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* editable prompt list (type mode) */ .bp-items-ta { width: 100%; min-height: 240px; font-family: monospace; font-size: .9rem; line-height: 1.5; border-radius: 10px; border: 1px solid var(--theme-border, #d7dbe0); background: var(--theme-bg, #fff); color: var(--theme-text, #1a1a2e); padding: 10px 12px; resize: vertical; } .bp-items-ta:focus { outline: 2px solid var(--bp-accent, #0f766e); outline-offset: 1px; border-color: transparent; } /* read-only subject pack (preset picker — no user input) */ .bp-chips { display: flex; flex-wrap: wrap; gap: 8px; } .bp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--theme-surface, #f5f2ee); border: 1px solid var(--theme-border, #e4ddd2); color: var(--theme-text, #33343c); } .bp-chip-emoji { font-size: .95rem; line-height: 1; } .page-bp-scope { --wsp-result-accent: #c25a3a; --wsp-result-grad: linear-gradient(135deg, #f6923f, #e2603f); --wsp-result-plate: rgba(226, 96, 63, .10); } /* ── SEO content (.bp-content) — type scale from .content-guide; colour only ── */ .bp-content { color: var(--theme-text, #1a1a2e); background: var(--theme-bg, #fff); padding: 3.25rem 0 3.5rem; margin-top: 1rem; border-top: 1px solid var(--theme-border, #e9ecef); } .bp-inner { max-width: 860px; margin: 0 auto; padding: 0 1rem; } .bp-content h2, .bp-content h3 { color: var(--theme-text, #1a1a2e); } .bp-content p, .bp-content li { color: var(--theme-muted, #5b6470); } .bp-content strong { color: var(--theme-text, #1a1a2e); } .bp-content a { color: #c25a3a; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .bp-kicker-chip { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #f6923f, #e2603f); border-radius: 999px; padding: .3rem .85rem; margin-bottom: .95rem; } .bp-content .bp-lead { font-size: 1.2rem; line-height: 1.7; color: var(--theme-text, #1a1a2e); margin-bottom: 1.25rem; } .bp-section { margin-top: 2.9rem; } .bp-content .table { font-size: 1rem; } .bp-content .table thead th { text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; font-weight: 800; color: #fff; background: #c25a3a; padding: .7rem 1rem; } .bp-content .table tbody td { padding: .6rem 1rem; border-bottom: 1px solid var(--theme-border, #e9ecef); vertical-align: top; } .bp-content .table tbody td:first-child { font-weight: 700; color: var(--theme-text, #1a1a2e); white-space: nowrap; } .bp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; } .bp-pair-card { background: var(--theme-surface, #f8f9fa); border: 1px solid var(--theme-border, #e9ecef); border-radius: 12px; padding: 1rem 1.1rem; border-top: 3px solid #f6923f; } .bp-pair-card h3 { margin-top: 0 !important; font-size: 1.02rem !important; } .bp-pair-card p:last-child { margin-bottom: 0; font-size: .92rem; } .bp-faq { margin-top: 1.4rem; } .bp-faq .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--theme-border, #e9ecef); } .bp-faq .accordion-button { background: transparent; color: var(--theme-text, #1a1a2e); font-weight: 600; padding-left: 0; padding-right: 2.5rem; box-shadow: none; } .bp-faq .accordion-button:not(.collapsed) { color: #c25a3a; background: transparent; } .bp-faq .accordion-button:focus { box-shadow: none; } .bp-faq .accordion-body { padding-left: 0; color: var(--theme-muted, #5b6470); } @media (max-width: 767.98px) { .bp-pair { grid-template-columns: 1fr; } } body[data-theme="high-contrast"] .bp-content p, body[data-theme="high-contrast"] .bp-content li, body[data-theme="high-contrast"] .bp-content .bp-lead { color: rgba(255,255,255,.84); } body[data-theme="high-contrast"] .bp-content h2, body[data-theme="high-contrast"] .bp-content h3 { color: #fff; }