/* =========================================== PRODUCT IDEAS DETAIL — Modern AI Studio Token-driven (see static/css/theme/tokens.css): the --pi-* palette maps onto the site-wide studio theme variables. Scoped to body because the theme tokens live on . =========================================== */ body { /* Base surfaces */ --pi-bg: var(--surface); --pi-bg-secondary: var(--surface-2); --pi-bg-gradient: var(--surface); --pi-surface: var(--surface); --pi-surface-elevated: var(--surface-2); --pi-surface-hover: var(--surface-2); --pi-border: var(--line); --pi-border-subtle: color-mix(in srgb, var(--ink) 7%, transparent); --pi-border-light: color-mix(in srgb, var(--ink) 22%, transparent); /* Text colors */ --pi-text-primary: var(--ink); --pi-text-secondary: var(--muted); --pi-text-muted: color-mix(in srgb, var(--muted) 72%, var(--surface)); /* Brand accent (indigo) */ --pi-primary: var(--accent); --pi-primary-hover: var(--accent-strong); --pi-primary-light: color-mix(in srgb, var(--accent) 10%, transparent); --pi-primary-glow: color-mix(in srgb, var(--accent) 12%, transparent); --pi-secondary: var(--accent); --pi-secondary-hover: var(--accent-strong); --pi-secondary-light: color-mix(in srgb, var(--accent) 10%, transparent); --pi-secondary-glow: color-mix(in srgb, var(--accent) 10%, transparent); /* Neutral badge accent */ --pi-tertiary: var(--muted); --pi-tertiary-light: var(--surface-2); --pi-tertiary-glow: color-mix(in srgb, var(--muted) 10%, transparent); /* Semantic (difficulty): readable text + soft tint */ --pi-green: color-mix(in srgb, var(--signal) 55%, var(--ink)); --pi-green-light: color-mix(in srgb, var(--signal) 16%, transparent); --pi-green-glow: color-mix(in srgb, var(--signal) 12%, transparent); --pi-yellow: color-mix(in srgb, var(--warn) 35%, var(--ink)); --pi-yellow-light: color-mix(in srgb, var(--warn) 22%, transparent); --pi-yellow-glow: color-mix(in srgb, var(--warn) 14%, transparent); --pi-red: color-mix(in srgb, var(--danger) 60%, var(--ink)); --pi-red-light: color-mix(in srgb, var(--danger) 14%, transparent); --pi-red-glow: color-mix(in srgb, var(--danger) 12%, transparent); /* Depth + shape */ --pi-shadow-xs: var(--shadow-sm); --pi-shadow-sm: var(--shadow-sm); --pi-shadow: var(--shadow); --pi-shadow-lg: var(--shadow); --pi-shadow-hover: var(--shadow); --pi-radius: var(--radius); --pi-radius-sm: var(--radius-sm); --pi-radius-xs: 6px; } /* =========================================== PAGE CONTAINER =========================================== */ /* Width matches the navbar container (max-w-7xl + lg:px-8) */ .pi-page { max-width: 80rem; margin: 0 auto; padding: 32px 32px 80px; } @media (max-width: 640px) { .pi-page { padding: 20px 16px 60px; } } /* =========================================== PREVIEW BANNER =========================================== */ .pi-preview-banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; background: color-mix(in srgb, var(--warn) 18%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: var(--pi-radius-sm); margin-bottom: 24px; } .pi-preview-banner svg { width: 20px; height: 20px; color: var(--pi-yellow); } .pi-preview-banner p { margin: 0; font-size: 14px; color: var(--pi-yellow); } /* =========================================== TWO COLUMN LAYOUT =========================================== */ .pi-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; } @media (max-width: 960px) { .pi-layout { grid-template-columns: 1fr; } } /* No demand metrics => no sidebar rendered => don't reserve its track. */ .pi-layout-full { grid-template-columns: 1fr; } .pi-main { min-width: 0; } /* =========================================== SIDEBAR =========================================== */ .pi-sidebar { position: relative; /* .pi-layout sets align-items:start, which collapses this column to its own content height. A sticky child can only travel inside its container, so with no spare height it scrolled away immediately and never stuck. Stretch to the grid row height to give it room. */ align-self: stretch; } @media (max-width: 960px) { .pi-sidebar { order: -1; } } /* Plain column that fills the stretched sidebar. Deliberately NOT sticky itself: Market signal + capture is ~660px, and sticking the pair meant capping the height on short viewports, which clipped the capture card's button out of sight. Market signal scrolls away with the article instead. */ .pi-sidebar-sticky { display: flex; flex-direction: column; gap: 20px; height: 100%; } /* Only the capture card follows the scroll. At ~400px it clears the 98px navbar and still fits comfortably on a short laptop screen, so nothing ever needs clipping. */ .pi-sidebar-sticky .lm-promo { position: sticky; top: 110px; } /* Market signal is the only widget left in here — the boxed Quick Info card moved into the article as .pi-facts, which took the shared .pi-widget-title / .pi-tags-* rules (already template-less) down with it. */ /* =========================================== HERO SECTION =========================================== */ .pi-hero { /* No top padding: the page wrapper already spaces the content below the site header, and a top offset here would drop the hero below the sidebar widget. */ padding: 0 0 40px; border-bottom: 1px solid var(--pi-border); margin-bottom: 32px; } /* ------------------------------------------------------------------ * * Verdict strip (engine-owned) — the AI-verification surface * ------------------------------------------------------------------ */ .pi-verdict { margin: 0 0 32px; padding: 20px 24px; background: color-mix(in srgb, var(--accent-color, var(--accent)) 7%, var(--pi-surface)); border: 1px solid color-mix(in srgb, var(--accent-color, var(--accent)) 25%, transparent); border-left: 4px solid var(--accent-color, var(--pi-primary)); border-radius: var(--pi-radius); } .pi-verdict-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .pi-verdict-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pi-text-secondary); } .pi-demand { display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px; font-size: 12.5px; font-weight: 600; border-radius: 100px; } .pi-demand-arrow { font-weight: 800; } .pi-demand-growing { background: var(--pi-green-light); color: var(--pi-green); } .pi-demand-stable { background: var(--pi-tertiary-light); color: var(--pi-tertiary); } .pi-demand-declining, .pi-demand-saturated { background: var(--pi-yellow-light); color: var(--pi-yellow); } .pi-verdict-text { font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--pi-text-primary); margin: 0; } /* "First sales without an audience" — the concrete route, kept visually distinct from the verdict so the two facts stop reading as one sentence. */ .pi-verdict-route { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--accent-color, var(--accent)) 22%, transparent); font-size: 14.5px; line-height: 1.55; color: var(--pi-text-secondary); } .pi-verdict-route-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pi-text-muted); margin-bottom: 3px; } .pi-verdict-verified { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 12.5px; color: var(--pi-green); font-weight: 500; } .pi-verdict-verified svg { flex-shrink: 0; } /* ------------------------------------------------------------------ * * "Selling right now" — verified example listings * ------------------------------------------------------------------ */ .pi-selling { margin: 0 0 40px; } .pi-selling-title { font-size: 20px; font-weight: 700; color: var(--pi-text-primary); margin: 0 0 4px; } .pi-selling-sub { font-size: 14px; color: var(--pi-text-secondary); margin: 0 0 16px; } .pi-selling-table { border: 1px solid var(--pi-border); border-radius: var(--pi-radius); overflow: hidden; } .pi-selling-row { display: grid; grid-template-columns: 1fr auto auto 24px; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; color: var(--pi-text-primary); border-bottom: 1px solid var(--pi-border); transition: background 0.15s ease; } .pi-selling-row:last-child { border-bottom: none; } .pi-selling-row:hover { background: color-mix(in srgb, var(--accent-color, var(--accent)) 6%, transparent); } .pi-selling-name { font-weight: 600; } .pi-selling-market { font-size: 13px; color: var(--pi-text-secondary); padding: 2px 10px; background: var(--pi-surface-elevated); border-radius: 100px; } .pi-selling-price { font-weight: 700; color: var(--accent-color, var(--pi-primary)); white-space: nowrap; } .pi-selling-go { color: var(--pi-text-muted); text-align: right; } @media (max-width: 560px) { .pi-selling-row { grid-template-columns: 1fr auto; } .pi-selling-market { display: none; } } /* Breadcrumb */ .pi-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 13px; } .pi-breadcrumb a { color: var(--pi-text-muted); text-decoration: none; transition: color 0.15s ease; } .pi-breadcrumb a:hover { color: var(--pi-primary); } .pi-breadcrumb-sep { color: var(--pi-text-muted); opacity: 0.5; } /* Badges */ .pi-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .pi-badge { padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 500; } .pi-badge-category { background: var(--pi-secondary-light); color: var(--pi-secondary); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } .pi-badge-subcategory { background: var(--pi-tertiary-light); color: var(--pi-tertiary); border: 1px solid var(--line); } .pi-badge-difficulty { font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .pi-badge-difficulty.pi-difficulty-beginner { background: var(--pi-green-light); color: var(--pi-green); } .pi-badge-difficulty.pi-difficulty-intermediate { background: var(--pi-yellow-light); color: var(--pi-yellow); } .pi-badge-difficulty.pi-difficulty-advanced { background: var(--pi-red-light); color: var(--pi-red); } /* Title */ .pi-hero-title { font-family: var(--font-display); font-size: clamp(28px, 5vw, 40px); font-weight: 600; letter-spacing: -0.02em; color: var(--pi-text-primary); line-height: 1.2; margin-bottom: 16px; } /* Description */ .pi-hero-description { font-size: 18px; color: var(--pi-text-secondary); line-height: 1.6; margin-bottom: 20px; } /* Product Type */ .pi-hero-type { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 14px; } .pi-type-label { color: var(--pi-text-muted); } .pi-type-value { color: var(--pi-primary); font-weight: 500; } /* Meta Row */ .pi-hero-meta { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 20px; } .pi-meta-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pi-text-secondary); } .pi-meta-item svg { color: var(--pi-text-muted); } /* Hero Tags */ .pi-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; } .pi-hero-tag { padding: 4px 12px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: 100px; font-size: 12px; color: var(--pi-text-secondary); text-decoration: none; transition: all 0.15s ease; } .pi-hero-tag:hover { background: var(--pi-secondary-light); border-color: var(--pi-secondary); color: var(--pi-secondary); } /* =========================================== SECTIONS =========================================== */ .pi-section { padding: 32px 0; border-bottom: 1px solid var(--pi-border); } .pi-section:last-of-type { border-bottom: none; } .pi-section-title { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; color: var(--pi-text-primary); margin-bottom: 20px; } .pi-section-title svg { color: var(--pi-primary); } .pi-section-body { color: var(--pi-text-secondary); line-height: 1.7; } .pi-section-body p { margin-bottom: 16px; } .pi-section-body p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ * * Quick Info — inline spec strip closing out the "What it is" section. * Unboxed on purpose: page sections are divided by hairlines, so a * shadowed card here would read as a sidebar widget dropped into the * article. The 1px grid gap over a tinted container paints the cell * dividers, which keeps them correct however many facts wrap onto a * second row (2 of 4 facts are optional per idea). * ------------------------------------------------------------------ */ .pi-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 28px 0 0; padding: 0; background: var(--pi-border-subtle); border: 1px solid var(--pi-border-subtle); border-radius: var(--pi-radius); overflow: hidden; } .pi-fact { padding: 14px 18px; background: var(--pi-bg-secondary); } .pi-fact-label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pi-text-muted); } .pi-fact-label svg { flex-shrink: 0; opacity: 0.75; } .pi-fact-value { /*

ships with a 40px inline start margin — reset it. */ margin: 7px 0 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--pi-text-primary); } .pi-fact-value.pi-difficulty-beginner { color: var(--pi-green); } .pi-fact-value.pi-difficulty-intermediate { color: var(--pi-yellow); } .pi-fact-value.pi-difficulty-advanced { color: var(--pi-red); } /* Sectionless idea: the strip stands alone in the column, so it has to carry its own bottom spacing instead of borrowing a section's padding. */ .pi-main > .pi-facts { margin-bottom: 40px; } @media (max-width: 400px) { .pi-fact { padding: 12px 14px; } } /* =========================================== MOCKUP PREVIEW =========================================== */ .pi-mockup-container { background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius); overflow: hidden; } .pi-mockup-frame { /* Browser frame styling */ } .pi-mockup-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--pi-surface-elevated); border-bottom: 1px solid var(--pi-border); } .pi-mockup-dots { display: flex; gap: 6px; } .pi-mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pi-border); } .pi-mockup-dot:first-child { background: var(--danger); } .pi-mockup-dot:nth-child(2) { background: var(--warn); } .pi-mockup-dot:nth-child(3) { background: var(--signal); } .pi-mockup-url { flex: 1; padding: 6px 12px; background: var(--pi-surface); border-radius: var(--pi-radius-xs); font-size: 12px; color: var(--pi-text-muted); font-family: var(--font-mono); } .pi-mockup-content { padding: 24px; min-height: 200px; background: var(--pi-surface); } /* =========================================== CHECKLIST SECTION =========================================== */ .pi-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .pi-checklist-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius-sm); } .pi-checklist-icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--pi-primary-light); border-radius: 50%; color: var(--pi-primary); } .pi-checklist-text { font-size: 14px; color: var(--pi-text-secondary); line-height: 1.5; } /* =========================================== CHIPS SECTION =========================================== */ .pi-chips { display: flex; flex-wrap: wrap; gap: 10px; } .pi-chip { padding: 8px 16px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: 100px; font-size: 13px; color: var(--pi-text-secondary); } /* =========================================== STEPS SECTION =========================================== */ .pi-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .pi-step { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius-sm); } .pi-step-number { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--pi-secondary); border-radius: 50%; font-size: 13px; font-weight: 700; color: #ffffff; } .pi-step-text { font-size: 14px; color: var(--pi-text-secondary); line-height: 1.6; } /* =========================================== RELATED IDEAS SECTION =========================================== */ .pi-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 768px) { .pi-related-grid { grid-template-columns: 1fr; gap: 16px; } } .pi-related-card { display: flex; flex-direction: column; padding: 20px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius-sm); text-decoration: none; transition: all 0.2s ease; box-shadow: var(--pi-shadow-sm); } .pi-related-card:hover { border-color: var(--pi-border-light); transform: translateY(-3px); box-shadow: var(--pi-shadow-hover); } .pi-related-badges { display: flex; gap: 8px; margin-bottom: 12px; } .pi-badge-small { padding: 2px 8px; font-size: 10px; background: var(--pi-surface-elevated); color: var(--pi-text-muted); border: none; } .pi-related-title { font-size: 15px; font-weight: 600; color: var(--pi-text-primary); margin-bottom: 8px; line-height: 1.35; } .pi-related-desc { font-size: 13px; color: var(--pi-text-secondary); line-height: 1.5; flex: 1; margin-bottom: 12px; } .pi-related-meta { display: flex; gap: 16px; } .pi-related-meta-item { font-size: 12px; color: var(--pi-text-muted); } /* ------------------------------------------------------------------ */ /* Market signal panel (demand evidence) — sidebar widget */ /* Reuses the widget shell + --pi-demand tokens, so light/dark and the */ /* theme toggle are handled by the existing variables. */ /* ------------------------------------------------------------------ */ .pi-market { padding: 20px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius); box-shadow: var(--pi-shadow-sm); margin-bottom: 20px; } .pi-market-title { font-size: 14px; font-weight: 600; color: var(--pi-text-primary); margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.03em; } .pi-market-headline { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .pi-market-figure { display: flex; flex-direction: column; line-height: 1.05; } .pi-market-number { font-size: 28px; font-weight: 800; color: var(--pi-text-primary); } .pi-market-unit { font-size: 12px; color: var(--pi-text-muted); margin-top: 2px; } .pi-market-dir { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .pi-market-spark { display: block; margin: 14px 0 4px; overflow: visible; } .pi-market-spark polyline { stroke: var(--pi-tertiary); } .pi-market-spark circle { fill: var(--pi-tertiary); } .pi-market-spark.is-up polyline { stroke: var(--pi-green); } .pi-market-spark.is-up circle { fill: var(--pi-green); } .pi-market-spark.is-down polyline { stroke: var(--pi-yellow); } .pi-market-spark.is-down circle { fill: var(--pi-yellow); } .pi-market-span { display: block; font-size: 11px; color: var(--pi-text-muted); } .pi-market-source { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--pi-border-subtle); font-size: 11px; color: var(--pi-text-muted); }