/* =========================================== 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); /* Vote accent: violet */ --pi-vote: var(--accent-2); --pi-vote-light: color-mix(in srgb, var(--accent-2) 14%, transparent); --pi-vote-glow: color-mix(in srgb, var(--accent-2) 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; } } .pi-main { min-width: 0; } /* =========================================== SIDEBAR =========================================== */ .pi-sidebar { position: relative; } @media (max-width: 960px) { .pi-sidebar { order: -1; } } .pi-sidebar-sticky { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; } /* Info Widget */ .pi-info-widget, .pi-tags-widget { padding: 20px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius); box-shadow: var(--pi-shadow-sm); } .pi-widget-title { font-size: 14px; font-weight: 600; color: var(--pi-text-primary); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.03em; } .pi-info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .pi-info-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .pi-info-label { color: var(--pi-text-muted); } .pi-info-value { color: var(--pi-text-primary); font-weight: 500; } .pi-info-value.pi-difficulty-beginner { color: var(--pi-green); } .pi-info-value.pi-difficulty-intermediate { color: var(--pi-yellow); } .pi-info-value.pi-difficulty-advanced { color: var(--pi-red); } /* Tags Widget */ .pi-tags-list { display: flex; flex-wrap: wrap; gap: 8px; } .pi-tag { padding: 4px 12px; background: var(--pi-surface-elevated); border: 1px solid var(--pi-border-subtle); border-radius: 100px; font-size: 12px; color: var(--pi-text-secondary); text-decoration: none; transition: all 0.15s ease; } .pi-tag:hover { background: var(--pi-secondary-light); border-color: var(--pi-secondary); color: var(--pi-secondary); } /* =========================================== HERO SECTION =========================================== */ .pi-hero { padding: 32px 0 40px; border-bottom: 1px solid var(--pi-border); margin-bottom: 32px; } /* 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; } /* =========================================== 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; } /* =========================================== GUIDE VOTING SECTION =========================================== */ .pi-guide-section { border-bottom: none; } .pi-guide-card { padding: 32px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius); text-align: center; box-shadow: var(--pi-shadow-sm); } .pi-guide-voting, .pi-guide-published { display: flex; flex-direction: column; align-items: center; } .pi-guide-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--pi-vote-light); border-radius: 50%; color: var(--pi-vote); margin-bottom: 20px; } .pi-guide-icon-published { background: var(--pi-primary-light); color: var(--pi-primary); } .pi-guide-title { font-size: 20px; font-weight: 600; color: var(--pi-text-primary); margin-bottom: 10px; } .pi-guide-desc { font-size: 14px; color: var(--pi-text-secondary); max-width: 400px; margin-bottom: 24px; line-height: 1.6; } .pi-guide-vote-row { display: flex; align-items: center; gap: 16px; } .pi-guide-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: none; border-radius: var(--pi-radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; text-decoration: none; } .pi-guide-btn-vote { background: var(--pi-vote); color: #ffffff; } .pi-guide-btn-vote:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); } .pi-guide-btn-vote.voted, .pi-guide-btn-vote:disabled { background: var(--pi-surface-elevated); color: var(--pi-text-muted); cursor: default; } .pi-guide-btn-view { background: var(--pi-primary); color: #ffffff; } .pi-guide-btn-view:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .pi-guide-vote-count { font-size: 14px; color: var(--pi-text-muted); } .pi-guide-vote-count strong { color: var(--pi-text-primary); } /* =========================================== 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); }