/* ============================================================================ Markdown Viewer — standalone tool skin. Loaded only by pages/ai_tool_templates/markdown-viewer.php, standalone (no assets/styles.css dependency). Scoped under .mdv. Aesthetic: a writer's desk / editorial manuscript — warm paper ground, a serif display face paired with a humanist sans body, soft grain texture, one ink-red accent. Mobile-first: base rules are the small-screen layout; the split two-pane editor/preview only appears from the sm breakpoint up, plus a true fullscreen mode for the console on any screen size. ========================================================================== */ /* 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; } .mdv { --paper: #f6f1e7; --paper-2: #efe8d8; --panel: #fffdf8; --ink: #2a2420; --ink-dim: #6b6055; --ink-faint: #9a8f80; --line: #e2d8c4; --line-soft: #ece4d2; --accent: #b3492f; /* ink-red */ --accent-2: #8f3a25; --accent-soft: #f1ddd2; --ok: #4c7a52; --shadow: 0 1px 2px rgba(42,36,32,.06), 0 8px 24px -12px rgba(42,36,32,.18); --font-display: "Source Serif 4", Georgia, "Times New Roman", serif; --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; line-height: 1.6; overflow-x: hidden; } .mdv *, .mdv *::before, .mdv *::after { box-sizing: border-box; min-width: 0; } .mdv-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; } /* ── Paper grain texture ─────────────────────────────────────────────── */ .mdv-paper { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(42,36,32,.05) 1px, transparent 0); background-size: 3px 3px; opacity: .55; } .mdv-paper::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(179,73,47,.06), transparent 60%); } .mdv-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 link | brand | tag) so it can never wrap to a second line, even on the narrowest phones: the outer columns size to content and the middle brand column is the only one allowed to shrink/truncate. */ .mdv-masthead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding-block: .25rem 1.25rem; } .mdv-back { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink-dim); text-decoration: none; font-size: .82rem; font-weight: 500; padding: .35rem 0; min-width: 0; } .mdv-back:hover { color: var(--accent); } .mdv-back svg { flex: none; } .mdv-brand { display: flex; align-items: center; justify-content: center; gap: .45rem; min-width: 0; } .mdv-brand__mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-2); flex: none; } .mdv-brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mdv-tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ok); background: #e7f0e6; border: 1px solid #cfe0cc; border-radius: 999px; padding: .2rem .55rem; flex: none; white-space: nowrap; } /* Narrowest phones: keep the back link to an icon so the centered brand name has room to stay on one line without ellipsis-truncating. */ @media (max-width: 380px) { .mdv-back__label { display: none; } } /* ── Hero ─────────────────────────────────────────────────────────────── */ .mdv-hero { padding-block: .5rem 1.75rem; max-width: 640px; } .mdv-kicker { margin: 0 0 .5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); } .mdv-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: -.015em; color: var(--ink); } .mdv-lede { margin: 0; color: var(--ink-dim); font-size: clamp(.95rem, 2.4vw, 1.05rem); line-height: 1.6; } /* ── Console shell ────────────────────────────────────────────────────── */ .mdv-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), toggled by JS adding/removing .is-fullscreen and locking body scroll. Editor/preview get the freed vertical space via the height rule below. */ .mdv-console.is-fullscreen { position: fixed; inset: 0; z-index: 40; border-radius: 0; border: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; } .mdv-console.is-fullscreen .mdv-panes { flex: 1 1 auto; min-height: 0; } .mdv-console.is-fullscreen .mdv-pane { min-height: 0; } .mdv-console.is-fullscreen .mdv-editor, .mdv-console.is-fullscreen .mdv-preview { height: 100%; max-height: none; } body.mdv-scroll-locked { overflow: hidden; height: 100vh; height: 100dvh; } .mdv [data-mdv-fs-icon-collapse] { display: none; } .mdv-console.is-fullscreen [data-mdv-fs-icon-expand] { display: none; } .mdv-console.is-fullscreen [data-mdv-fs-icon-collapse] { display: block; } /* Mobile-first: two stacked rows (tabs+fullscreen / wordcount+buttons), each its own flex line so nothing has to wrap mid-row. From the sm breakpoint up they merge into a single row (see the breakpoint block further down). */ .mdv-toolbar { display: flex; flex-direction: column; gap: .55rem; padding: .65rem .75rem; border-bottom: 1px solid var(--line-soft); background: var(--paper-2); } .mdv-toolbar__row { display: flex; align-items: center; gap: .5rem; min-width: 0; } .mdv-toolbar__row--tabs { justify-content: space-between; } .mdv-toolbar__row--actions { justify-content: flex-start; } .mdv-toolbar__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .2rem; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: .2rem; flex: 1 1 auto; min-width: 0; } .mdv-toolbar__tab { appearance: none; border: 0; background: transparent; color: var(--ink-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; } .mdv-toolbar__tab:hover { color: var(--ink); } .mdv-toolbar__tab.is-active { background: var(--accent); color: #fff; } .mdv-toolbar__buttons { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 auto; min-width: 0; } .mdv-toolbar__buttons .mdv-btn { flex: 1 1 auto; } .mdv-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; } .mdv-btn--ghost { background: var(--panel); border-color: var(--line); color: var(--ink-dim); } .mdv-btn--ghost:hover { color: var(--ink); border-color: var(--ink-faint); } .mdv-btn--primary { background: var(--accent); color: #fff; } .mdv-btn--primary:hover { background: var(--accent-2); } .mdv-btn--primary.is-copied { background: var(--ok); } .mdv-btn--icon { flex: none; padding: .4rem; background: var(--panel); border-color: var(--line); color: var(--ink-dim); } .mdv-btn--icon:hover { color: var(--ink); border-color: var(--ink-faint); } .mdv-btn--icon[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-2); } /* Narrow phones: button labels shrink to icons-only where a glyph exists (Paste), and text-only buttons keep tighter padding — the grid still keeps every button the same row, same height, evenly spaced. */ @media (max-width: 420px) { .mdv-toolbar__buttons { gap: .3rem; } .mdv-btn { padding: .4rem .5rem; font-size: .74rem; } .mdv-btn--paste span:not(.mdv-visually-hidden) { display: none; } } /* ── Panes: mobile-first — stacked, one visible at a time driven by JS ── */ .mdv-panes { display: block; } .mdv-pane { display: none; flex-direction: column; min-height: 0; } .mdv-pane.is-visible { display: flex; } .mdv-divider { display: none; } .mdv-pane__head { display: flex; align-items: center; justify-content: space-between; padding: .55rem .9rem; border-bottom: 1px solid var(--line-soft); } .mdv-pane__label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .mdv-pane__hint { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-faint); } .mdv-pane__hint--live { display: inline-flex; align-items: center; gap: .35rem; color: var(--ok); } .mdv-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: mdv-pulse 2s ease-in-out infinite; } .mdv-editor { display: block; width: 100%; max-width: 100%; min-height: 340px; height: 46vh; max-height: 620px; resize: vertical; border: 0; outline: 0; background: var(--panel); color: var(--ink); font-family: var(--font-mono); font-size: .88rem; line-height: 1.65; padding: 1rem; tab-size: 2; } .mdv-editor::placeholder { color: var(--ink-faint); } .mdv-editor:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); } .mdv-preview { padding: 1.25rem 1.1rem 1.75rem; overflow-y: auto; min-height: 340px; height: 46vh; max-height: 620px; font-family: var(--font-sans); color: var(--ink); } /* ── Rendered markdown typography ────────────────────────────────────── */ .mdv-preview h1, .mdv-preview h2, .mdv-preview h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; } .mdv-preview h1 { font-size: 1.6rem; margin: 0 0 .75rem; } .mdv-preview h2 { font-size: 1.28rem; margin: 1.5rem 0 .6rem; } .mdv-preview h3 { font-size: 1.08rem; margin: 1.25rem 0 .5rem; } .mdv-preview p { margin: 0 0 .9rem; font-size: .95rem; } .mdv-preview strong { color: var(--ink); font-weight: 700; } .mdv-preview em { color: var(--ink); } .mdv-preview a { color: var(--accent-2); text-decoration-color: var(--accent-soft); text-underline-offset: 2px; } .mdv-preview a:hover { color: var(--accent); } .mdv-preview ul, .mdv-preview ol { margin: 0 0 .9rem; padding-left: 1.3rem; font-size: .95rem; } .mdv-preview li { margin-bottom: .3rem; } .mdv-preview blockquote { margin: 0 0 1rem; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--accent); color: var(--ink-dim); font-style: italic; } .mdv-preview code { font-family: var(--font-mono); font-size: .84em; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: .1em .35em; } .mdv-preview pre { margin: 0 0 1.1rem; background: #2a2420; color: #f1e9db; border-radius: 8px; padding: .9rem 1rem; overflow-x: auto; font-size: .82rem; line-height: 1.55; } .mdv-preview pre code { background: none; border: 0; padding: 0; color: inherit; } .mdv-preview hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; } .mdv-preview img { max-width: 100%; border-radius: 8px; } .mdv-preview table { width: 100%; border-collapse: collapse; margin: 0 0 1.1rem; font-size: .88rem; } .mdv-preview th, .mdv-preview td { border: 1px solid var(--line); padding: .45rem .6rem; text-align: left; } .mdv-preview th { background: var(--paper-2); font-weight: 700; font-family: var(--font-sans); } .mdv-preview .mdv-empty { color: var(--ink-faint); font-size: .88rem; font-style: italic; } /* ── Feature strip ────────────────────────────────────────────────────── */ .mdv-features { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; } .mdv-feature__n { display: block; font-family: var(--font-mono); font-size: .75rem; color: var(--accent-2); margin-bottom: .35rem; } .mdv-feature h3 { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; } .mdv-feature p { margin: 0; color: var(--ink-dim); font-size: .88rem; line-height: 1.55; } /* ── Footer ───────────────────────────────────────────────────────────── */ .mdv-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(--ink-faint); } .mdv-footer a { color: var(--ink-dim); } .mdv-footer a:hover { color: var(--accent); } .mdv-footer__sep { opacity: .6; } /* ── Motion ───────────────────────────────────────────────────────────── */ @keyframes mdv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .mdv-title, .mdv-lede, .mdv-console, .mdv-features { animation: mdv-rise .5s ease both; } .mdv-lede { animation-delay: .06s; } .mdv-console { animation-delay: .12s; } .mdv-features { animation-delay: .18s; } @keyframes mdv-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .mdv-title, .mdv-lede, .mdv-console, .mdv-features { animation: none; } .mdv-live-dot { animation: none; } } /* ── Breakpoints ──────────────────────────────────────────────────────── */ /* Small tablet+: show the split view side by side; mobile stays single-pane */ @media (min-width: 720px) { /* Toolbar's two stacked mobile rows merge into one row: tabs + fullscreen on the left, wordcount + action buttons pushed to the right. */ .mdv-toolbar { flex-direction: row; align-items: center; flex-wrap: wrap; } .mdv-toolbar__row--tabs { flex: none; width: auto; } .mdv-toolbar__tabs { flex: none; } .mdv-toolbar__row--actions { flex: 1 1 auto; justify-content: flex-end; margin-left: auto; } .mdv-toolbar__buttons { flex: none; flex-wrap: nowrap; } .mdv-toolbar__buttons .mdv-btn { flex: none; } .mdv-btn--paste span:not(.mdv-visually-hidden) { display: inline; } .mdv-panes[data-mdv-mode="split"] { display: flex; align-items: stretch; } .mdv-panes[data-mdv-mode="split"] .mdv-pane { display: flex !important; flex: 1 1 0; min-width: 0; } .mdv-panes[data-mdv-mode="split"] .mdv-divider { display: block; flex: none; width: 1px; background: var(--line); } .mdv-editor, .mdv-preview { height: 58vh; min-height: 420px; } .mdv-features { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } } @media (min-width: 1000px) { .mdv-wrap { padding-top: 2.5rem; } .mdv-editor, .mdv-preview { height: 62vh; } }