/* ============================================================================ Prompt Placeholder Editor — standalone tool skin. Loaded only by pages/ai_tool_templates/prompt-placeholder-editor.php, standalone (no assets/styles.css dependency). Scoped under .ppe. Aesthetic: a form-builder workbench — cool graphite/slate ground, one warm amber accent marking every placeholder (in the template textarea highlight, its generated input, and the assembled output), a geometric sans display face. Mobile-first: base rules are the small-screen layout; the split two-pane template/fill view only appears from the sm breakpoint up, plus a true fullscreen mode. ========================================================================== */ /* This page is fully standalone (own /, no shared site chrome), so it's safe to set overflow directly on the root elements — belt-and- suspenders against any intrinsically-wide descendant (e.g. a textarea's default cols-based sizing) pushing the layout viewport wider than the visual one on mobile. */ html, body { overflow-x: hidden; } .ppe { --bg: #14171c; --bg-2: #1a1e25; --panel: #1d2129; --field: #22272f; --line: #2b3038; --line-soft: #23272f; --text: #e7eaf0; --text-dim: #939aa8; --text-faint: #676f7f; --accent: #e0a63a; /* placeholder amber */ --accent-2: #c48a22; --accent-soft: rgba(224,166,58,.14); --ok: #5fbf82; --shadow: 0 1px 2px rgba(0,0,0,.25), 0 12px 32px -16px rgba(0,0,0,.55); --font-display: "Lexend", system-ui, -apple-system, sans-serif; --font-sans: "Lexend", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; line-height: 1.6; overflow-x: hidden; } .ppe *, .ppe *::before, .ppe *::after { box-sizing: border-box; min-width: 0; } .ppe-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Faint blueprint dot-grid backdrop ───────────────────────────────── */ .ppe-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 40%, transparent 100%); opacity: .5; } .ppe-wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: clamp(1rem, 5vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 6vw, 3.5rem); } /* ── Masthead — a 3-column grid (back | brand | tag) so it can never wrap to a second line, even on the narrowest phones. ─────────────────────────── */ .ppe-masthead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding-block: .25rem 1.25rem; } .ppe-back { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-dim); text-decoration: none; font-size: .82rem; font-weight: 500; padding: .35rem 0; min-width: 0; } .ppe-back:hover { color: var(--accent); } .ppe-back svg { flex: none; } .ppe-brand { display: flex; align-items: center; justify-content: center; gap: .45rem; min-width: 0; } .ppe-brand__mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); flex: none; } .ppe-brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ppe-tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ok); background: rgba(95,191,130,.12); border: 1px solid rgba(95,191,130,.3); border-radius: 999px; padding: .2rem .55rem; flex: none; white-space: nowrap; } @media (max-width: 380px) { .ppe-back__label { display: none; } } /* ── Hero ─────────────────────────────────────────────────────────────── */ .ppe-hero { padding-block: .5rem 1.75rem; max-width: 640px; } .ppe-kicker { margin: 0 0 .5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .ppe-title { margin: 0 0 .6rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 6vw, 2.75rem); line-height: 1.08; letter-spacing: -.02em; color: var(--text); } .ppe-lede { margin: 0; color: var(--text-dim); font-size: clamp(.95rem, 2.4vw, 1.05rem); line-height: 1.6; } /* ── Console shell ────────────────────────────────────────────────────── */ .ppe-console { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } /* ── Fullscreen mode — works at any width, mobile included. Fixed takeover of the viewport rather than the Fullscreen API (iOS Safari doesn't support requestFullscreen on non-video elements). */ .ppe-console.is-fullscreen { position: fixed; inset: 0; z-index: 40; border-radius: 0; border: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; } .ppe-console.is-fullscreen .ppe-panes { flex: 1 1 auto; min-height: 0; } .ppe-console.is-fullscreen .ppe-pane { min-height: 0; } .ppe-console.is-fullscreen .ppe-editor { height: 100%; max-height: none; } .ppe-console.is-fullscreen .ppe-pane--fill { overflow-y: auto; } body.ppe-scroll-locked { overflow: hidden; height: 100vh; height: 100dvh; } .ppe [data-ppe-fs-icon-collapse] { display: none; } .ppe-console.is-fullscreen [data-ppe-fs-icon-expand] { display: none; } .ppe-console.is-fullscreen [data-ppe-fs-icon-collapse] { display: block; } /* Mobile-first: two stacked rows (tabs+fullscreen / count+buttons), each its own flex line so nothing has to wrap mid-row. From the sm breakpoint up they merge into a single row. */ .ppe-toolbar { display: flex; flex-direction: column; gap: .55rem; padding: .65rem .75rem; border-bottom: 1px solid var(--line-soft); background: var(--bg-2); } .ppe-toolbar__row { display: flex; align-items: center; gap: .5rem; min-width: 0; } .ppe-toolbar__row--tabs { justify-content: space-between; } .ppe-toolbar__row--actions { justify-content: flex-start; } .ppe-toolbar__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .2rem; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: .2rem; flex: 1 1 auto; min-width: 0; } .ppe-toolbar__tab { appearance: none; border: 0; background: transparent; color: var(--text-dim); font-family: var(--font-sans); font-size: .8rem; font-weight: 600; padding: .35rem .5rem; border-radius: 6px; cursor: pointer; line-height: 1.2; white-space: nowrap; } .ppe-toolbar__tab:hover { color: var(--text); } .ppe-toolbar__tab.is-active { background: var(--accent); color: #221703; } .ppe-toolbar__buttons { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 auto; min-width: 0; } .ppe-toolbar__buttons .ppe-btn { flex: 1 1 auto; } .ppe-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border-radius: 7px; font-family: var(--font-sans); font-size: .78rem; font-weight: 600; padding: .4rem .6rem; cursor: pointer; border: 1px solid transparent; line-height: 1.2; white-space: nowrap; } .ppe-btn--ghost { background: var(--field); border-color: var(--line); color: var(--text-dim); } .ppe-btn--ghost:hover { color: var(--text); border-color: var(--text-faint); } .ppe-btn--primary { background: var(--accent); color: #221703; } .ppe-btn--primary:hover { background: #eab54c; } .ppe-btn--primary.is-copied { background: var(--ok); color: #0d1f14; } .ppe-btn--icon { flex: none; padding: .4rem; background: var(--field); border-color: var(--line); color: var(--text-dim); } .ppe-btn--icon:hover { color: var(--text); border-color: var(--text-faint); } .ppe-btn--icon[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); } @media (max-width: 420px) { .ppe-toolbar__buttons { gap: .3rem; } .ppe-btn { padding: .4rem .5rem; font-size: .74rem; } .ppe-btn--paste span:not(.ppe-visually-hidden) { display: none; } } /* ── Panes: mobile-first — stacked, one visible at a time driven by JS ── */ .ppe-panes { display: block; } .ppe-pane { display: none; flex-direction: column; min-height: 0; } .ppe-pane.is-visible { display: flex; } .ppe-divider { display: none; } .ppe-pane__head { display: flex; align-items: center; justify-content: space-between; padding: .55rem .9rem; border-bottom: 1px solid var(--line-soft); gap: .5rem; } .ppe-pane__label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); flex: none; } .ppe-pane__hint { font-family: var(--font-mono); font-size: .7rem; color: var(--text-faint); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ppe-pane__hint--live { display: inline-flex; align-items: center; gap: .35rem; color: var(--ok); flex: none; } .ppe-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: ppe-pulse 2s ease-in-out infinite; } /* ── Template editor ──────────────────────────────────────────────────── */ .ppe-editor { display: block; width: 100%; max-width: 100%; min-height: 260px; height: 40vh; max-height: 560px; resize: vertical; border: 0; outline: 0; background: var(--panel); color: var(--text); font-family: var(--font-mono); font-size: .9rem; line-height: 1.7; padding: 1rem; tab-size: 2; } .ppe-editor::placeholder { color: var(--text-faint); } .ppe-editor:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); } /* ── Fill-in fields ───────────────────────────────────────────────────── */ .ppe-fill { padding: 1rem .9rem; overflow-y: auto; min-height: 140px; max-height: 44vh; display: flex; flex-direction: column; gap: .75rem; } .ppe-fill:empty::after, .ppe-fill[data-ppe-empty]::after { content: "No placeholders yet — wrap a word in [brackets] in the template to see a field here."; display: block; color: var(--text-faint); font-size: .85rem; font-style: italic; } .ppe-field { display: flex; flex-direction: column; gap: .35rem; } .ppe-field__label { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .74rem; color: var(--accent); font-weight: 500; } .ppe-field__label-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .ppe-field__input { width: 100%; max-width: 100%; background: var(--field); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-family: var(--font-sans); font-size: .88rem; padding: .55rem .7rem; line-height: 1.4; } .ppe-field__input::placeholder { color: var(--text-faint); } .ppe-field__input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .ppe-field__input:not(:placeholder-shown) { border-color: rgba(95,191,130,.45); } /* ── Assembled output ─────────────────────────────────────────────────── */ .ppe-output { border-top: 1px solid var(--line-soft); background: var(--bg-2); } .ppe-output__head { padding: .55rem .9rem 0; } .ppe-output__body { margin: .55rem .9rem 1rem; padding: .85rem .9rem; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; font-family: var(--font-mono); font-size: .86rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 30vh; overflow-y: auto; } .ppe-output__body mark { background: var(--accent-soft); color: var(--accent); border-radius: 3px; padding: 0 .15em; font-style: normal; } .ppe-output__body .ppe-empty { color: var(--text-faint); font-style: italic; } /* ── Feature strip ────────────────────────────────────────────────────── */ .ppe-features { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; } .ppe-feature__n { display: block; font-family: var(--font-mono); font-size: .75rem; color: var(--accent); margin-bottom: .35rem; } .ppe-feature h2 { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text); } .ppe-feature p { margin: 0; color: var(--text-dim); font-size: .88rem; line-height: 1.55; } .ppe-feature code { font-family: var(--font-mono); font-size: .84em; background: var(--field); border: 1px solid var(--line); border-radius: 4px; padding: .1em .35em; color: var(--accent); } /* ── Footer ───────────────────────────────────────────────────────────── */ .ppe-footer { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .8rem; color: var(--text-faint); } .ppe-footer a { color: var(--text-dim); } .ppe-footer a:hover { color: var(--accent); } .ppe-footer__sep { opacity: .6; } /* ── Motion ───────────────────────────────────────────────────────────── */ @keyframes ppe-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .ppe-title, .ppe-lede, .ppe-console, .ppe-features { animation: ppe-rise .5s ease both; } .ppe-lede { animation-delay: .06s; } .ppe-console { animation-delay: .12s; } .ppe-features { animation-delay: .18s; } @keyframes ppe-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ppe-title, .ppe-lede, .ppe-console, .ppe-features { animation: none; } .ppe-live-dot { animation: none; } } /* ── Breakpoints ──────────────────────────────────────────────────────── */ @media (min-width: 720px) { .ppe-toolbar { flex-direction: row; align-items: center; flex-wrap: wrap; } .ppe-toolbar__row--tabs { flex: none; width: auto; } .ppe-toolbar__tabs { flex: none; } .ppe-toolbar__row--actions { flex: 1 1 auto; justify-content: flex-end; margin-left: auto; } .ppe-toolbar__buttons { flex: none; flex-wrap: nowrap; } .ppe-toolbar__buttons .ppe-btn { flex: none; } .ppe-btn--paste span:not(.ppe-visually-hidden) { display: inline; } .ppe-panes[data-ppe-mode="split"] { display: flex; align-items: stretch; } .ppe-panes[data-ppe-mode="split"] .ppe-pane { display: flex !important; flex: 1 1 0; min-width: 0; } .ppe-panes[data-ppe-mode="split"] .ppe-divider { display: block; flex: none; width: 1px; background: var(--line); } .ppe-editor { height: 56vh; min-height: 380px; } .ppe-pane--fill { height: 56vh; min-height: 380px; overflow-y: auto; } .ppe-fill { max-height: none; } .ppe-features { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } } @media (min-width: 1000px) { .ppe-wrap { padding-top: 2.5rem; } .ppe-editor { height: 60vh; } .ppe-pane--fill { height: 60vh; } }