/* ═══════════════════════════════════════════════════════════════════════════ * Community — Editorial Apple design system * * Used by: index, category, profile, discussion_detail, discussion_create, * discussion_edit, notifications, help_formatting * Loaded: each community template via {% block extra_head %} * Theme: light by default, dark mode via `.dark` parent (set on ) * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Hero — editorial heading ─────────────────────────────────────────────── */ .community-eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(8 145 178); } .dark .community-eyebrow { color: rgb(34 211 238); } .community-display { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; color: rgb(17 24 39); line-height: 1.05; margin-top: 1rem; max-width: 48rem; } .dark .community-display { color: white; } @media (min-width: 640px) { .community-display { font-size: 3rem; } } @media (min-width: 1024px) { .community-display { font-size: 3.75rem; } } .community-display-sub { color: rgb(156 163 175); font-weight: 300; } .dark .community-display-sub { color: rgb(107 114 128); } /* ── Buttons — Apple pill ─────────────────────────────────────────────────── */ .community-cta-primary { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; background: rgb(17 24 39); color: white; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 500; transition: background-color 0.2s ease; } .community-cta-primary:hover { background: rgb(31 41 55); } .dark .community-cta-primary { background: white; color: rgb(17 24 39); } .dark .community-cta-primary:hover { background: rgb(243 244 246); } .community-cta-secondary { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; color: rgb(8 145 178); transition: color 0.2s ease; } .community-cta-secondary:hover { color: rgb(6 122 150); } .dark .community-cta-secondary { color: rgb(34 211 238); } .dark .community-cta-secondary:hover { color: rgb(103 232 249); } /* ── Featured (hero) discussion card ──────────────────────────────────────── */ .community-featured { display: block; padding: 2rem 1.75rem; border-radius: 1.5rem; background: linear-gradient(135deg, rgba(8, 145, 178, 0.04) 0%, rgba(34, 211, 238, 0.02) 100%); border: 1px solid rgba(8, 145, 178, 0.12); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; position: relative; overflow: hidden; } .dark .community-featured { background: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(34, 211, 238, 0.04) 100%); border-color: rgba(34, 211, 238, 0.18); } .community-featured:hover { border-color: rgba(8, 145, 178, 0.4); box-shadow: 0 24px 64px rgba(8, 145, 178, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04); transform: translateY(-2px); } @media (min-width: 768px) { .community-featured { padding: 3.5rem 4rem; } } .featured-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(8 145 178); } .dark .featured-eyebrow { color: rgb(34 211 238); } .featured-title { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; color: rgb(17 24 39); line-height: 1.15; margin-top: 1.25rem; } .dark .featured-title { color: white; } @media (min-width: 640px) { .featured-title { font-size: 2rem; } } @media (min-width: 1024px) { .featured-title { font-size: 2.5rem; } } .featured-excerpt { font-size: 0.9375rem; color: rgb(75 85 99); line-height: 1.7; margin-top: 1.25rem; max-width: 56ch; } .dark .featured-excerpt { color: rgb(156 163 175); } @media (min-width: 640px) { .featured-excerpt { font-size: 1.0625rem; } } .featured-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 2rem; font-size: 0.8125rem; color: rgb(107 114 128); } .featured-author { font-weight: 600; color: rgb(31 41 55); } .dark .featured-author { color: rgb(229 231 235); } /* ── Feed card (editorial 2-col) ──────────────────────────────────────────── */ .community-card { display: flex; flex-direction: column; padding: 1.625rem; border-radius: 1.25rem; background: white; border: 1px solid rgba(229, 231, 235, 0.7); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; height: 100%; } .dark .community-card { background: rgba(17, 24, 39, 0.6); border-color: rgba(55, 65, 81, 0.4); } .community-card:hover { border-color: rgba(8, 145, 178, 0.3); box-shadow: 0 12px 36px rgba(8, 145, 178, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04); transform: translateY(-1px); } .card-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(8 145 178); } .dark .card-eyebrow { color: rgb(34 211 238); } .card-eyebrow-pin { font-size: 0.6875rem; color: rgb(156 163 175); margin-left: 0.25rem; } .card-discussion-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; color: rgb(17 24 39); line-height: 1.35; margin-top: 0.875rem; transition: color 0.2s ease; } .dark .card-discussion-title { color: white; } .community-card:hover .card-discussion-title { color: rgb(8 145 178); } .dark .community-card:hover .card-discussion-title { color: rgb(34 211 238); } .card-excerpt { font-size: 0.875rem; color: rgb(107 114 128); line-height: 1.65; margin-top: 0.625rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dark .card-excerpt { color: rgb(156 163 175); } .card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-top: auto; padding-top: 1.25rem; font-size: 0.75rem; color: rgb(107 114 128); } .card-author { font-weight: 600; color: rgb(55 65 81); } .dark .card-author { color: rgb(209 213 219); } .card-meta-dot { color: rgb(209 213 219); } .dark .card-meta-dot { color: rgb(55 65 81); } /* ── Category strip — discrete tab navigation ─────────────────────────────── */ .category-strip { display: flex; gap: 0.125rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; } .category-strip::-webkit-scrollbar { display: none; } .category-link { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; padding: 0.5rem 0.875rem; border-radius: 0.625rem; font-size: 0.8125rem; font-weight: 500; color: rgb(107 114 128); transition: background-color 0.2s ease, color 0.2s ease; white-space: nowrap; } .dark .category-link { color: rgb(156 163 175); } .category-link:hover { background: rgba(243, 244, 246, 0.7); color: rgb(31 41 55); } .dark .category-link:hover { background: rgba(55, 65, 81, 0.35); color: rgb(243 244 246); } .category-link.is-active { background: rgba(243, 244, 246, 0.95); color: rgb(17 24 39); font-weight: 600; } .dark .category-link.is-active { background: rgba(55, 65, 81, 0.6); color: white; } .category-link svg { opacity: 0.55; transition: opacity 0.2s ease, color 0.2s ease; flex-shrink: 0; } .category-link:hover svg { opacity: 0.85; } .category-link.is-active svg { opacity: 1; color: rgb(8 145 178); } .dark .category-link.is-active svg { color: rgb(34 211 238); } .category-count { font-size: 0.6875rem; font-weight: 500; opacity: 0.5; font-variant-numeric: tabular-nums; margin-left: 0.125rem; } /* ── Inline category icon (used in eyebrows, cards) ───────────────────────── */ .category-icon-inline { display: inline-flex; align-items: center; vertical-align: -2px; opacity: 0.8; margin-right: 0.125rem; } .featured-eyebrow .category-icon-inline, .card-eyebrow .category-icon-inline, .community-eyebrow .category-icon-inline { opacity: 1; } /* ── Search bar ───────────────────────────────────────────────────────────── */ .community-search-input { width: 100%; padding: 0.875rem 1rem 0.875rem 3rem; border-radius: 9999px; background: white; border: 1px solid rgba(229, 231, 235, 0.7); font-size: 0.9375rem; color: rgb(17 24 39); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .dark .community-search-input { background: rgba(17, 24, 39, 0.6); border-color: rgba(55, 65, 81, 0.4); color: white; } .community-search-input::placeholder { color: rgb(156 163 175); } .community-search-input:focus { outline: none; border-color: rgb(8 145 178); box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.1); } /* ── Form fields (create / edit) ──────────────────────────────────────────── */ .community-field-label { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: rgb(55 65 81); margin-bottom: 0.5rem; } .dark .community-field-label { color: rgb(209 213 219); } .community-field-hint { font-size: 0.75rem; font-weight: 400; color: rgb(156 163 175); margin-left: 0.375rem; } .community-input, .community-select, .community-textarea { display: block; width: 100%; padding: 0.875rem 1rem; border-radius: 0.875rem; background: white; border: 1px solid rgba(229, 231, 235, 0.9); font-size: 0.9375rem; color: rgb(17 24 39); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .dark .community-input, .dark .community-select, .dark .community-textarea { background: rgba(17, 24, 39, 0.6); border-color: rgba(55, 65, 81, 0.5); color: white; } .community-input::placeholder, .community-textarea::placeholder { color: rgb(156 163 175); } .community-input:focus, .community-select:focus, .community-textarea:focus { outline: none; border-color: rgb(8 145 178); box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.08); } /* ── Profile avatar + stats ───────────────────────────────────────────────── */ .profile-avatar { width: 5rem; height: 5rem; border-radius: 9999px; background: linear-gradient(135deg, rgb(8 145 178) 0%, rgb(34 211 238) 100%); color: white; font-weight: 700; font-size: 2rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(8, 145, 178, 0.18); } @media (min-width: 640px) { .profile-avatar { width: 6rem; height: 6rem; font-size: 2.5rem; } } .profile-stat { text-align: left; } .profile-stat-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(107 114 128); } .dark .profile-stat-label { color: rgb(156 163 175); } .profile-stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: rgb(17 24 39); margin-top: 0.25rem; line-height: 1; } .dark .profile-stat-value { color: white; } .profile-stat-value.is-accent { color: rgb(8 145 178); } .dark .profile-stat-value.is-accent { color: rgb(34 211 238); } .profile-stat-value.is-positive { color: rgb(5 150 105); } .dark .profile-stat-value.is-positive { color: rgb(52 211 153); } /* ── Article (discussion_detail) ──────────────────────────────────────────── */ .community-article { margin-bottom: 4rem; } .community-article-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; color: rgb(17 24 39); line-height: 1.15; margin-top: 1rem; } .dark .community-article-title { color: white; } @media (min-width: 640px) { .community-article-title { font-size: 2.5rem; } } @media (min-width: 1024px) { .community-article-title { font-size: 3rem; } } /* ── Reply card ───────────────────────────────────────────────────────────── */ .reply-card { padding: 1.5rem; border-radius: 1.25rem; background: white; border: 1px solid rgba(229, 231, 235, 0.7); transition: border-color 0.2s ease; } .dark .reply-card { background: rgba(17, 24, 39, 0.5); border-color: rgba(55, 65, 81, 0.4); } .reply-card.is-solution { background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(52, 211, 153, 0.02) 100%); border-color: rgba(16, 185, 129, 0.25); } .dark .reply-card.is-solution { background: linear-gradient(135deg, rgba(16, 185, 129, 0.10) 0%, rgba(52, 211, 153, 0.04) 100%); border-color: rgba(52, 211, 153, 0.3); } /* ── Notification card ────────────────────────────────────────────────────── */ .notification-card { display: block; padding: 1rem 1.25rem; border-radius: 1rem; background: white; border: 1px solid rgba(229, 231, 235, 0.7); transition: border-color 0.2s ease, transform 0.2s ease; } .dark .notification-card { background: rgba(17, 24, 39, 0.5); border-color: rgba(55, 65, 81, 0.4); } .notification-card:hover { border-color: rgba(8, 145, 178, 0.3); transform: translateY(-1px); } .notification-card.is-unread { background: linear-gradient(135deg, rgba(8, 145, 178, 0.04) 0%, rgba(34, 211, 238, 0.02) 100%); border-color: rgba(8, 145, 178, 0.18); } .dark .notification-card.is-unread { background: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(34, 211, 238, 0.04) 100%); border-color: rgba(34, 211, 238, 0.2); } .notification-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: rgb(8 145 178); flex-shrink: 0; } .dark .notification-dot { background: rgb(34 211 238); } /* ── Help docs (help_formatting) ──────────────────────────────────────────── */ .docs-section { padding: 2rem 0; border-top: 1px solid rgba(229, 231, 235, 0.7); } .dark .docs-section { border-color: rgba(55, 65, 81, 0.4); } .docs-section:first-of-type { border-top: none; padding-top: 0; } .docs-section-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(8 145 178); } .dark .docs-section-eyebrow { color: rgb(34 211 238); } .docs-section-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: rgb(17 24 39); margin-top: 0.625rem; margin-bottom: 1.5rem; } .dark .docs-section-title { color: white; } @media (min-width: 640px) { .docs-section-title { font-size: 1.875rem; } } .docs-example { padding: 1rem 1.25rem; border-radius: 0.875rem; background: rgba(243, 244, 246, 0.6); border: 1px solid rgba(229, 231, 235, 0.7); font-size: 0.875rem; } .dark .docs-example { background: rgba(17, 24, 39, 0.5); border-color: rgba(55, 65, 81, 0.4); } .docs-example-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(107 114 128); margin-bottom: 0.625rem; } .docs-example code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8125rem; color: rgb(31 41 55); } .dark .docs-example code { color: rgb(229 231 235); } /* ── Tag pill (inline) ────────────────────────────────────────────────────── */ .tag-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-radius: 9999px; background: rgba(243, 244, 246, 0.7); font-size: 0.75rem; font-weight: 500; color: rgb(75 85 99); } .dark .tag-pill { background: rgba(55, 65, 81, 0.4); color: rgb(209 213 219); } /* ── Inline meta row (author · time · count) ─────────────────────────────── */ .community-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-size: 0.8125rem; color: rgb(107 114 128); } .community-meta-author { font-weight: 600; color: rgb(31 41 55); } .dark .community-meta-author { color: rgb(229 231 235); } /* ── Subtle dividers between sections ─────────────────────────────────────── */ .community-divider { border-top: 1px solid rgba(229, 231, 235, 0.7); margin: 3rem 0; } .dark .community-divider { border-color: rgba(55, 65, 81, 0.4); }