/* /gpt-image-2-prompts (+ template detail) — SEO landing pages. * * Aligned with the main platform (desktop.css P5 theme): * - Same red primary (#e63946) + red gradient * - border-radius: 0 everywhere (CLAUDE.md global rule) * - Dual theme support — `data-theme="dark"` attribute on * - P5 token names (--p5-*) match the rest of the codebase so design changes * to the brand propagate here automatically * * Self-contained (no @import of desktop.css) — these pages must stay fast and * bot-friendly. Only the `.lpgi-*` namespace is used so nothing collides with * platform UI when both happen to be loaded. */ /* ── P5 design tokens (light = default, dark = override) ───── */ :root[data-page="lp"] { --p5-red: #e63946; --p5-red-2: #ff6b6b; --p5-red-gradient: linear-gradient(135deg, #e63946, #ff6b6b); /* Light theme defaults */ --p5-bg: #fafafa; --p5-card: #ffffff; --p5-text: #1a1a1a; --p5-text-secondary: #4a5568; --p5-muted: #6b7280; --p5-border: #e5e7eb; --p5-dark: #f0f0f0; --p5-soft-red: rgba(230, 57, 70, 0.08); --p5-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --p5-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } :root[data-page="lp"][data-theme="dark"] { --p5-bg: #0a0a0f; --p5-card: #16161d; --p5-text: #e8e8e8; --p5-text-secondary: #a8a8a8; --p5-muted: #7a7a7a; --p5-border: #2a2a32; --p5-dark: #111118; --p5-soft-red: rgba(230, 57, 70, 0.12); --p5-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --p5-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--p5-bg); color: var(--p5-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 0.2s, color 0.2s; } img { max-width: 100%; display: block; } a { color: var(--p5-red); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Header (sharp, mirrors /login style) ────────────────── */ .lpgi-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; background: var(--p5-card); border-bottom: 1px solid var(--p5-border); } .lpgi-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; } .lpgi-logo img { height: 28px; width: auto; display: block; } .lpgi-logo:hover { text-decoration: none; opacity: 0.85; } .lpgi-nav { display: flex; align-items: center; gap: 18px; } .lpgi-nav > a { color: var(--p5-text-secondary); font-size: 14px; font-weight: 500; } .lpgi-cta-mini { padding: 8px 16px; border-radius: 0; background: var(--p5-red-gradient); color: #fff !important; font-weight: 600; } .lpgi-cta-mini:hover { text-decoration: none; opacity: 0.92; } /* ── Hero ─────────────────────────────────────────────── */ .lpgi-hero { background: var(--p5-card); border-bottom: 1px solid var(--p5-border); padding: 64px 24px 48px; text-align: center; } .lpgi-hero-inner { max-width: 760px; margin: 0 auto; } .lpgi-eyebrow { display: inline-block; padding: 5px 12px; background: var(--p5-soft-red); color: var(--p5-red); font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 16px; } .lpgi-h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin: 0 0 16px; } .lpgi-lede { font-size: 17px; color: var(--p5-text-secondary); margin: 0 auto 28px; max-width: 580px; } .lpgi-stats { display: flex; gap: 36px; justify-content: center; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--p5-border); } .lpgi-stats > div { display: flex; flex-direction: column; align-items: center; } .lpgi-stats strong { font-size: 24px; font-weight: 800; color: var(--p5-text); } .lpgi-stats span { font-size: 12px; color: var(--p5-muted); margin-top: 4px; } /* ── Buttons (matches .dt-btn-* spirit) ──────────────────── */ .lpgi-btn-primary, .lpgi-btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; font-size: 15px; font-weight: 600; border-radius: 0; cursor: pointer; border: none; transition: opacity 0.2s, transform 0.1s; text-decoration: none; } .lpgi-btn-primary { background: var(--p5-red-gradient); color: #fff !important; } .lpgi-btn-primary:hover { text-decoration: none; opacity: 0.9; } .lpgi-btn-ghost { background: transparent; color: var(--p5-text) !important; border: 1px solid var(--p5-border); } .lpgi-btn-ghost:hover { text-decoration: none; border-color: var(--p5-red); color: var(--p5-red) !important; } .lpgi-btn-lg { padding: 14px 32px; font-size: 16px; } /* ── Section shell ────────────────────────────────────── */ .lpgi-section { max-width: 1200px; margin: 0 auto; padding: 64px 24px; } .lpgi-section-head { text-align: center; margin-bottom: 36px; } .lpgi-section-head h2 { font-size: clamp(24px, 3.5vw, 34px); font-weight: 800; letter-spacing: -0.5px; margin: 0 0 8px; color: var(--p5-text); } .lpgi-section-head p { color: var(--p5-text-secondary); margin: 0; font-size: 16px; } /* ── Templates grid ───────────────────────────────────── */ .lpgi-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .lpgi-card { display: flex; flex-direction: column; overflow: hidden; background: var(--p5-card); border: 1px solid var(--p5-border); border-radius: 0; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; text-decoration: none; color: inherit; } .lpgi-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--p5-red); box-shadow: var(--p5-shadow); } .lpgi-card-thumb { aspect-ratio: 4 / 3; background: var(--p5-dark); background-size: cover; background-position: center; position: relative; } .lpgi-card-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.04) 100%); } .lpgi-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; } .lpgi-card-title { font-size: 15px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; color: var(--p5-text); } .lpgi-card-desc { font-size: 13px; color: var(--p5-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lpgi-card-footer { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--p5-muted); } .lpgi-card-tag { padding: 3px 8px; background: var(--p5-soft-red); color: var(--p5-red); font-weight: 500; } .lpgi-empty { text-align: center; padding: 60px 20px; color: var(--p5-muted); background: var(--p5-card); border: 1px dashed var(--p5-border); } /* ── Why (3 columns) ──────────────────────────────────── */ .lpgi-why { background: var(--p5-card); border-top: 1px solid var(--p5-border); border-bottom: 1px solid var(--p5-border); } .lpgi-cards-3 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .lpgi-card-feature { padding: 20px 8px; } .lpgi-feat-icon { width: 44px; height: 44px; background: var(--p5-soft-red); color: var(--p5-red); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .lpgi-feat-icon svg { width: 22px; height: 22px; } .lpgi-card-feature h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--p5-text); } .lpgi-card-feature p { color: var(--p5-text-secondary); margin: 0; font-size: 14px; } /* ── How (3 steps) ────────────────────────────────────── */ .lpgi-how { background: var(--p5-bg); } .lpgi-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .lpgi-steps > li { background: var(--p5-card); padding: 24px; border: 1px solid var(--p5-border); position: relative; } .lpgi-step-num { position: absolute; top: -14px; left: 24px; width: 32px; height: 32px; background: var(--p5-red-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .lpgi-steps h3 { font-size: 17px; font-weight: 700; margin: 6px 0 6px; color: var(--p5-text); } .lpgi-steps p { margin: 0; color: var(--p5-text-secondary); font-size: 14px; } /* ── FAQ ──────────────────────────────────────────────── */ .lpgi-faq { max-width: 760px; } .lpgi-faq-item { background: var(--p5-card); border: 1px solid var(--p5-border); padding: 16px 20px; margin-bottom: 10px; } .lpgi-faq-item summary { font-weight: 600; cursor: pointer; outline: none; list-style: none; display: flex; align-items: center; justify-content: space-between; color: var(--p5-text); } .lpgi-faq-item summary::-webkit-details-marker { display: none; } .lpgi-faq-item summary::after { content: '+'; font-size: 22px; color: var(--p5-muted); font-weight: 400; line-height: 1; } .lpgi-faq-item[open] summary::after { content: '−'; } .lpgi-faq-item p { margin: 12px 0 0; color: var(--p5-text-secondary); font-size: 14px; } /* ── Final CTA ────────────────────────────────────────── */ .lpgi-cta-final { text-align: center; padding: 64px 24px; background: var(--p5-card); border-top: 1px solid var(--p5-border); } .lpgi-cta-final h2 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; letter-spacing: -0.5px; margin: 0 0 8px; color: var(--p5-text); } .lpgi-cta-final p { color: var(--p5-text-secondary); margin: 0 0 22px; } /* ── Footer ───────────────────────────────────────────── */ .lpgi-footer { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 22px 24px; font-size: 13px; color: var(--p5-muted); border-top: 1px solid var(--p5-border); background: var(--p5-bg); } .lpgi-footer a { color: var(--p5-muted); } .lpgi-footer a:hover { color: var(--p5-red); } /* ── Detail page ──────────────────────────────────────── */ .lpgi-crumb { max-width: 1200px; margin: 0 auto; padding: 18px 24px 0; font-size: 13px; } .lpgi-crumb a { color: var(--p5-muted); } .lpgi-crumb a:hover { color: var(--p5-red); } .lpgi-detail-hero { max-width: 1200px; margin: 0 auto; padding: 32px 24px 48px; display: grid; grid-template-columns: 1fr minmax(280px, 460px); gap: 36px; align-items: center; } @media (max-width: 900px) { .lpgi-detail-hero { grid-template-columns: 1fr; } } .lpgi-detail-meta { min-width: 0; } .lpgi-detail-title { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; margin: 12px 0 14px; color: var(--p5-text); } .lpgi-detail-desc { font-size: 16px; color: var(--p5-text-secondary); line-height: 1.65; margin: 0 0 18px; white-space: pre-wrap; } .lpgi-detail-byline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--p5-muted); margin-bottom: 22px; } .lpgi-dot { color: var(--p5-border); } .lpgi-detail-cta { margin-top: 6px; } .lpgi-detail-cover { width: 100%; aspect-ratio: 4 / 3; background: var(--p5-dark); background-size: cover; background-position: center; border: 1px solid var(--p5-border); } /* ── Detail samples gallery ──────────────────────────── */ .lpgi-samples { background: var(--p5-card); border-top: 1px solid var(--p5-border); border-bottom: 1px solid var(--p5-border); } .lpgi-samples-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .lpgi-sample { aspect-ratio: 1 / 1; background: var(--p5-dark); background-size: cover; background-position: center; border: 1px solid var(--p5-border); } /* ── Detail variables list ──────────────────────────── */ .lpgi-vars { background: var(--p5-bg); } .lpgi-vars-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 880px; margin: 0 auto; } .lpgi-var { background: var(--p5-card); border: 1px solid var(--p5-border); padding: 14px 16px; } .lpgi-var-key { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; color: var(--p5-red); font-weight: 600; } .lpgi-var-label { font-size: 14px; font-weight: 600; margin: 4px 0 4px; color: var(--p5-text); } .lpgi-var-desc { font-size: 13px; color: var(--p5-muted); margin: 0; } /* ── /skills SOLO vs COMBO pill (listing card top-right corner) ─── */ .lpgi-skill-pill { position: absolute; top: 10px; right: 10px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 8px; line-height: 1; text-transform: uppercase; pointer-events: none; } .lpgi-skill-pill.is-solo { background: var(--p5-card); color: var(--p5-text); border: 1px solid var(--p5-border); } .lpgi-skill-pill.is-combo { background: var(--p5-red); color: #fff; border: 1px solid var(--p5-red); } .lpgi-card { position: relative; } /* pill anchors here */ /* ── /skills/ pipeline step list ───────────────── */ .lpgi-combo-pipeline .lpgi-section-head { margin-bottom: 24px; } .lpgi-combo-steps { list-style: none; padding: 0; margin: 0 auto; max-width: 820px; display: grid; gap: 14px; } .lpgi-combo-step { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: start; padding: 18px 20px; background: var(--p5-card); border: 1px solid var(--p5-border); } .lpgi-combo-step-num { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; background: var(--p5-red); color: #fff; } .lpgi-combo-step-body h3 { margin: 0 0 6px; font-size: 16px; color: var(--p5-text); } .lpgi-combo-step-body p { margin: 0; font-size: 14px; color: var(--p5-muted); line-height: 1.55; } .lpgi-combo-step-kind { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 8px; align-self: center; text-transform: uppercase; background: var(--p5-bg); color: var(--p5-muted); border: 1px solid var(--p5-border); } .lpgi-combo-step-kind.is-text { color: #d6b13a; border-color: #d6b13a; } .lpgi-combo-step-kind.is-image { color: var(--p5-red); border-color: var(--p5-red); } .lpgi-combo-step-kind.is-video { color: #4a9b8e; border-color: #4a9b8e; } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 600px) { .lpgi-header { padding: 12px 16px; } .lpgi-hero { padding: 40px 16px 32px; } .lpgi-stats { gap: 22px; } .lpgi-section { padding: 44px 16px; } .lpgi-detail-hero { padding: 24px 16px 32px; } .lpgi-combo-step { grid-template-columns: 40px 1fr; padding: 14px 14px; } .lpgi-combo-step-num { width: 32px; height: 32px; font-size: 14px; } .lpgi-combo-step-kind { grid-column: 2; justify-self: start; margin-top: 2px; } }