/* =========================================== PRODUCT IDEAS HUB — 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; } /* =========================================== HUB PAGE CONTAINER =========================================== */ /* Width matches the navbar container (max-w-7xl + lg:px-8) */ .pi-hub-page { max-width: 80rem; margin: 0 auto; padding: 32px 32px 80px; } @media (max-width: 640px) { .pi-hub-page { padding: 20px 16px 60px; } } /* =========================================== HERO HEADER =========================================== */ .pi-hub-hero { position: relative; padding: 64px 24px 48px; text-align: center; overflow: hidden; margin-bottom: 32px; } .pi-hub-hero::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 800px; height: 500px; background: radial-gradient(ellipse, var(--pi-primary-glow) 0%, var(--pi-secondary-glow) 40%, transparent 70%); pointer-events: none; } .pi-hub-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--pi-border), transparent); } /* Counter Badge */ .pi-hub-counter { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--pi-primary-light); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--pi-primary-hover); margin-bottom: 20px; } .pi-hub-counter-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pi-primary); animation: pi-pulse 2s ease-in-out infinite; } @keyframes pi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .pi-hub-counter-value { font-weight: 700; } /* Title */ .pi-hub-title { font-family: var(--font-display); font-size: clamp(32px, 6vw, 48px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px; color: var(--ink); } /* Subtitle */ .pi-hub-subtitle { font-size: 17px; color: var(--pi-text-secondary); max-width: 560px; margin: 0 auto 32px; line-height: 1.6; } /* Quick Answer Section */ .pi-hub-quick-answer { max-width: 680px; margin: 0 auto 24px; padding: 16px 20px; background: var(--pi-secondary-light); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--pi-radius); text-align: left; } .pi-hub-quick-answer p { font-size: 14px; color: var(--pi-text-secondary); line-height: 1.65; margin: 0; } .pi-hub-quick-answer strong { color: var(--pi-secondary); font-weight: 600; } /* TL;DR Section */ .pi-hub-tldr { max-width: 680px; margin: 0 auto 24px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius); } .pi-hub-tldr summary { padding: 14px 18px; cursor: pointer; color: var(--pi-text-primary); font-size: 14px; } .pi-hub-tldr p { padding: 0 18px 16px; font-size: 14px; color: var(--pi-text-secondary); line-height: 1.65; margin: 0; } /* Insights Section */ .pi-hub-insights { max-width: 680px; margin: 0 auto 32px; padding: 20px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius); text-align: left; } .pi-hub-insights-title { font-size: 14px; font-weight: 600; color: var(--pi-text-primary); margin-bottom: 12px; } .pi-hub-insights-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 640px) { .pi-hub-insights-list { grid-template-columns: 1fr; } } .pi-hub-insights-list li { font-size: 13px; color: var(--pi-text-secondary); padding-left: 16px; position: relative; } .pi-hub-insights-list li::before { content: '→'; position: absolute; left: 0; color: var(--pi-primary); } .pi-hub-insights-list strong { color: var(--pi-text-primary); } /* Stats Row */ .pi-hub-stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; } .pi-hub-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; } .pi-hub-stat-value { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--pi-primary); } .pi-hub-stat-label { font-size: 12px; color: var(--pi-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* =========================================== FILTERS SECTION =========================================== */ .pi-hub-filters { padding: 0 0 32px; } .pi-hub-filters-form { display: flex; flex-direction: column; gap: 20px; } /* Search Row */ .pi-hub-search-row { display: flex; gap: 12px; align-items: center; } @media (max-width: 640px) { .pi-hub-search-row { flex-direction: column; align-items: stretch; } } .pi-hub-search-box { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius-sm); box-shadow: var(--pi-shadow-xs); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .pi-hub-search-box:focus-within { border-color: var(--pi-secondary); box-shadow: 0 0 0 3px var(--pi-secondary-glow); } .pi-hub-search-box svg { color: var(--pi-text-muted); flex-shrink: 0; } .pi-hub-search-input { flex: 1; border: none; background: none; font-size: 14px; color: var(--pi-text-primary); outline: none; } .pi-hub-search-input::placeholder { color: var(--pi-text-muted); } .pi-hub-sort-dropdown { padding: 12px 16px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius-sm); font-size: 13px; color: var(--pi-text-primary); cursor: pointer; } /* Filter Groups */ .pi-hub-filter-groups { display: flex; flex-direction: column; gap: 16px; } .pi-hub-filter-row { display: flex; align-items: flex-start; gap: 12px; } @media (max-width: 640px) { .pi-hub-filter-row { flex-direction: column; gap: 8px; } } .pi-hub-filter-label { flex-shrink: 0; width: 80px; font-size: 12px; font-weight: 500; color: var(--pi-text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 8px; } @media (max-width: 640px) { .pi-hub-filter-label { width: auto; padding-top: 0; } } .pi-hub-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* Chips */ .pi-hub-chip { padding: 6px 14px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: 100px; font-size: 13px; color: var(--pi-text-secondary); text-decoration: none; transition: all 0.15s ease; } .pi-hub-chip:hover { background: var(--pi-surface-hover); color: var(--pi-text-primary); } .pi-hub-chip.active { background: var(--pi-secondary); border-color: var(--pi-secondary); color: #ffffff; } /* Difficulty chip colors */ .pi-hub-chip-difficulty.beginner { border-color: var(--pi-green); color: var(--pi-green); } .pi-hub-chip-difficulty.beginner.active { background: var(--pi-green-light); } .pi-hub-chip-difficulty.intermediate { border-color: var(--pi-yellow); color: var(--pi-yellow); } .pi-hub-chip-difficulty.intermediate.active { background: var(--pi-yellow-light); } .pi-hub-chip-difficulty.advanced { border-color: var(--pi-red); color: var(--pi-red); } .pi-hub-chip-difficulty.advanced.active { background: var(--pi-red-light); } /* Filters Meta */ .pi-hub-filters-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--pi-border-subtle); } .pi-hub-results-count { font-size: 13px; color: var(--pi-text-muted); } .pi-hub-results-count strong { color: var(--pi-text-primary); } .pi-hub-clear-btn { font-size: 13px; color: var(--pi-secondary); text-decoration: none; } .pi-hub-clear-btn:hover { text-decoration: underline; } /* =========================================== IDEAS GRID =========================================== */ .pi-hub-ideas-section { margin-bottom: 48px; } .pi-hub-ideas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 960px) { .pi-hub-ideas-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .pi-hub-ideas-grid { grid-template-columns: 1fr; gap: 16px; } } /* =========================================== IDEA CARD =========================================== */ .pi-hub-idea-card { display: flex; flex-direction: column; padding: 20px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius); text-decoration: none; transition: all 0.2s ease; position: relative; overflow: hidden; box-shadow: var(--pi-shadow-sm); } .pi-hub-idea-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 0; transition: opacity 0.2s ease; } .pi-hub-idea-card:hover { border-color: var(--pi-border-light); transform: translateY(-3px); box-shadow: var(--pi-shadow-hover); } .pi-hub-idea-card:hover::before { opacity: 1; } /* Card Top */ .pi-hub-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .pi-hub-card-badges { display: flex; flex-wrap: wrap; gap: 6px; } .pi-hub-badge { padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 500; } .pi-hub-badge-cat { background: var(--pi-secondary-light); color: var(--pi-secondary); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } .pi-hub-badge-type { background: var(--pi-tertiary-light); color: var(--pi-tertiary); border: 1px solid var(--line); } .pi-hub-card-indicators { display: flex; align-items: center; gap: 8px; } /* Difficulty Badge */ .pi-hub-card-difficulty { padding: 4px 10px; border-radius: var(--pi-radius-xs); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .pi-hub-difficulty-beginner { background: var(--pi-green-light); color: var(--pi-green); } .pi-hub-difficulty-intermediate { background: var(--pi-yellow-light); color: var(--pi-yellow); } .pi-hub-difficulty-advanced { background: var(--pi-red-light); color: var(--pi-red); } /* Vote Count */ .pi-hub-card-votes { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--pi-vote-light); border-radius: var(--pi-radius-xs); font-size: 11px; font-weight: 600; color: var(--pi-vote); } /* Card Title */ .pi-hub-card-title { font-size: 17px; font-weight: 600; color: var(--pi-text-primary); line-height: 1.35; margin-bottom: 8px; } /* Card Description */ .pi-hub-card-desc { font-size: 14px; color: var(--pi-text-secondary); line-height: 1.55; margin-bottom: 12px; flex: 1; } /* Card Tags */ .pi-hub-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .pi-hub-card-tag { padding: 2px 8px; background: var(--pi-surface-elevated); border-radius: var(--pi-radius-xs); font-size: 11px; color: var(--pi-text-muted); } /* Card Footer */ .pi-hub-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--pi-border-subtle); } .pi-hub-card-meta { display: flex; gap: 16px; } .pi-hub-meta-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pi-text-muted); } .pi-hub-meta-item svg { opacity: 0.6; } .pi-hub-meta-value { color: var(--pi-text-secondary); } .pi-hub-card-arrow { color: var(--pi-text-muted); transition: transform 0.2s ease; } .pi-hub-idea-card:hover .pi-hub-card-arrow { transform: translateX(4px); color: var(--pi-primary); } /* =========================================== EMPTY STATE =========================================== */ .pi-hub-empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; } .pi-hub-empty-icon { color: var(--pi-text-muted); margin-bottom: 20px; } .pi-hub-empty-state h3 { font-size: 20px; color: var(--pi-text-primary); margin-bottom: 8px; } .pi-hub-empty-state p { font-size: 14px; color: var(--pi-text-secondary); margin-bottom: 20px; } .pi-hub-empty-btn { padding: 10px 20px; background: var(--pi-primary); color: #ffffff; border-radius: var(--pi-radius-sm); font-size: 14px; font-weight: 500; text-decoration: none; } /* =========================================== PAGINATION =========================================== */ .pi-hub-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; } .pi-hub-page-btn { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius-sm); font-size: 13px; color: var(--pi-text-secondary); text-decoration: none; transition: all 0.15s ease; } .pi-hub-page-btn:hover:not(.disabled):not(.active) { background: var(--pi-surface-hover); color: var(--pi-text-primary); } .pi-hub-page-btn.active { background: var(--pi-secondary); border-color: var(--pi-secondary); color: #ffffff; font-weight: 600; } .pi-hub-page-btn.disabled { opacity: 0.4; cursor: not-allowed; } .pi-hub-page-ellipsis { color: var(--pi-text-muted); padding: 0 4px; } /* =========================================== LISTICLE ARTICLE LAYOUT =========================================== */ /* Two-column wrapper — width matches the navbar container (max-w-7xl + lg:px-8) */ .pi-listicle-wrapper { max-width: 80rem; margin: 0 auto; padding: 48px 32px 80px; display: flex; gap: 48px; } /* Main content - left aligned */ .pi-listicle-article { flex: 1; min-width: 0; } /* Sidebar - right side */ .pi-listicle-sidebar { width: 280px; flex-shrink: 0; } /* Sticky behavior */ .pi-sidebar-sticky { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px; } /* Article Header */ .pi-listicle-header { text-align: left; margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--pi-border); } .pi-listicle-title { font-family: var(--font-display); font-size: clamp(28px, 5vw, 42px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 24px; color: var(--pi-text-primary); } .pi-listicle-meta { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 20px; font-size: 14px; color: var(--pi-text-secondary); } .pi-listicle-author { display: flex; align-items: center; gap: 12px; } .pi-author-avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--pi-border); object-fit: cover; } .pi-author-info { display: flex; flex-direction: column; text-align: left; } .pi-author-name { font-weight: 600; color: var(--pi-text-primary); } .pi-author-role { font-size: 12px; color: var(--pi-text-muted); } .pi-listicle-date { color: var(--pi-text-muted); } .pi-listicle-readtime { color: var(--pi-text-muted); } /* Article Intro */ .pi-listicle-intro { margin-bottom: 48px; font-size: 17px; line-height: 1.7; color: var(--pi-text-secondary); } .pi-listicle-intro p { margin-bottom: 16px; } .pi-listicle-intro p:last-child { margin-bottom: 0; } .pi-intro-lead { font-size: 19px; line-height: 1.6; } .pi-listicle-intro strong { color: var(--pi-text-primary); } .pi-listicle-intro a { color: var(--pi-secondary); text-decoration: none; } .pi-listicle-intro a:hover { text-decoration: underline; } /* Numbered List Items */ .pi-listicle-content { display: flex; flex-direction: column; gap: 24px; } .pi-listicle-item { display: flex; gap: 20px; padding: 24px; background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius); transition: box-shadow 0.2s ease, border-color 0.2s ease; } .pi-listicle-item:hover { box-shadow: var(--pi-shadow); border-color: var(--pi-border-light); } .pi-item-number { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--pi-secondary); color: white; font-family: var(--font-mono); font-size: 18px; font-weight: 700; border-radius: 50%; } .pi-item-content { flex: 1; min-width: 0; } .pi-item-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; line-height: 1.3; } .pi-item-title a { color: var(--pi-text-primary); text-decoration: none; transition: color 0.15s ease; } .pi-item-title a:hover { color: var(--pi-secondary); } .pi-item-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .pi-item-badges span { padding: 4px 10px; font-size: 12px; font-weight: 500; border-radius: 100px; } .pi-badge-cat { background: var(--pi-secondary-light); color: var(--pi-secondary); } .pi-badge-time, .pi-badge-price { background: var(--pi-tertiary-light); color: var(--pi-tertiary); } .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); } .pi-item-description { color: var(--pi-text-secondary); line-height: 1.6; margin-bottom: 12px; } .pi-item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .pi-tag { padding: 2px 8px; background: var(--pi-surface-elevated); color: var(--pi-text-muted); font-size: 11px; border-radius: 4px; } .pi-item-link { color: var(--pi-secondary); font-weight: 500; font-size: 14px; text-decoration: none; transition: color 0.15s ease; } .pi-item-link:hover { text-decoration: underline; } /* Thumbnail mockup - VERTICAL orientation */ .pi-item-thumbnail { flex-shrink: 0; width: 160px; height: 220px; overflow: hidden; border-radius: 8px; border: 1px solid var(--pi-border); } .pi-thumb-frame { background: var(--pi-surface); height: 100%; display: flex; flex-direction: column; } .pi-thumb-header { display: flex; gap: 3px; padding: 4px 6px; background: var(--pi-bg-secondary); border-bottom: 1px solid var(--pi-border); } .pi-thumb-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pi-border); } .pi-thumb-content { flex: 1; overflow: hidden; position: relative; } /* The mockup root renders on a 2.5× virtual canvas scaled back down (0.4 = 1/2.5). Positioned absolutely so flex sizing can't collapse the canvas height — the mockup's own aspect-ratio (3/4) then fills the portrait frame. */ .pi-thumb-content > * { position: absolute; top: 0; left: 0; width: 250%; transform: scale(0.4); transform-origin: top left; } /* Conclusion */ .pi-listicle-conclusion { margin-top: 64px; padding: 32px; background: var(--pi-secondary-light); border-radius: var(--pi-radius); text-align: center; } .pi-listicle-conclusion h2 { font-size: 24px; margin-bottom: 16px; color: var(--pi-text-primary); } .pi-listicle-conclusion p { color: var(--pi-text-secondary); line-height: 1.6; margin-bottom: 12px; } .pi-listicle-conclusion p:last-child { margin-bottom: 0; } /* Tablet Responsive - Hide Sidebar */ @media (max-width: 960px) { .pi-listicle-wrapper { flex-direction: column; } .pi-listicle-sidebar { display: none; } } /* Mobile Responsive - Listicle */ @media (max-width: 640px) { .pi-listicle-wrapper { padding: 24px 16px 60px; } .pi-listicle-header { margin-bottom: 32px; padding-bottom: 24px; } .pi-listicle-meta { flex-direction: column; gap: 12px; } .pi-listicle-intro { font-size: 16px; margin-bottom: 32px; } .pi-intro-lead { font-size: 17px; } .pi-listicle-content { gap: 16px; } .pi-listicle-item { flex-direction: column; gap: 16px; padding: 20px; } .pi-item-number { width: 40px; height: 40px; font-size: 16px; } .pi-item-title { font-size: 18px; } .pi-item-thumbnail { display: none; } .pi-listicle-conclusion { margin-top: 48px; padding: 24px; } }