/* ================================================================ Aurora Content — Design Token System ZumiLabs · Content Hub theme for /content Apply [data-section="content"] to ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@700&display=swap'); /* ── Primitive tokens ── */ :root { --color-neutral-0: #ffffff; --color-neutral-50: #f9fafb; --color-neutral-100: #f3f4f6; --color-neutral-200: #e5e7eb; --color-neutral-300: #d1d5db; --color-neutral-400: #9ca3af; --color-neutral-500: #6b7280; --color-neutral-600: #4b5563; --color-neutral-700: #374151; --color-neutral-800: #1f2937; --color-neutral-900: #111827; --color-brand-blue: #3b6cff; --color-brand-blue-light: #6690ff; --color-brand-blue-dim: rgba(59,108,255,0.15); --color-brand-red: #ff3b3b; --color-brand-teal: #00c9b1; --color-progress-green: #10b981; --color-star-amber: #f59e0b; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --font-display: 'Orbitron', sans-serif; --font-body: 'Inter', sans-serif; --transition-fast: 150ms ease; --transition-base: 200ms ease; } /* ── Content theme semantic tokens ── */ [data-section="content"] { --color-surface-page: #0b1121; --color-surface-raised: #131929; --color-surface-card: #1a2035; --color-surface-overlay: #1e2540; --color-surface-sunken: #080e1a; --color-surface-sidebar: #111827; --color-border-subtle: rgba(255,255,255,0.07); --color-border-default: rgba(255,255,255,0.12); --color-border-strong: rgba(255,255,255,0.2); --color-text-primary: #f9fafb; --color-text-secondary: #9ca3af; --color-text-muted: #6b7280; --color-text-accent: #6690ff; --color-interactive: #3b6cff; --color-interactive-hover: #6690ff; --color-interactive-active: #2952cc; --color-tag-bg: rgba(59,108,255,0.15); --color-tag-text: #6690ff; --color-tag-border: rgba(59,108,255,0.3); /* Media type accent colours */ --color-media-video: #3b82f6; --color-media-podcast: #8b5cf6; --color-media-document: #ef4444; --color-media-slides: #f97316; --color-media-quiz: #10b981; --color-media-mindmap: #06b6d4; --sidebar-width: 280px; --topnav-height: 60px; } /* ── Reset & base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [data-section="content"] { font-family: var(--font-body); background: var(--color-surface-page); color: var(--color-text-primary); min-height: 100vh; line-height: 1.5; } [data-section="content"] a { color: inherit; text-decoration: none; } [data-section="content"] button { cursor: pointer; border: none; background: none; font-family: inherit; } [data-section="content"] img { max-width: 100%; display: block; } /* ── Scrollbar ── */ [data-section="content"] ::-webkit-scrollbar { width: 6px; } [data-section="content"] ::-webkit-scrollbar-track { background: transparent; } [data-section="content"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; } /* ── Layout ── */ .ch-layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: var(--topnav-height) 1fr; min-height: 100vh; } .ch-topnav { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); background: var(--color-surface-sidebar); border-bottom: 1px solid var(--color-border-subtle); position: sticky; top: 0; z-index: 100; } .ch-sidebar { background: var(--color-surface-sidebar); border-right: 1px solid var(--color-border-subtle); padding: var(--space-6) 0; position: sticky; top: var(--topnav-height); height: calc(100vh - var(--topnav-height)); overflow-y: auto; } .ch-main { padding: var(--space-8) var(--space-8); overflow-y: auto; overflow-x: hidden; min-width: 0; } /* ── Nav logo ── */ .ch-logo { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--color-text-primary); display: flex; align-items: center; gap: var(--space-2); } .ch-logo span { color: var(--color-brand-blue); } /* ── Sidebar nav ── */ .ch-nav-section { padding: 0 var(--space-4); margin-bottom: var(--space-6); } .ch-nav-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); padding: 0 var(--space-3); margin-bottom: var(--space-2); } .ch-nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: 0.875rem; font-weight: 500; transition: background var(--transition-fast), color var(--transition-fast); } .ch-nav-item:hover { background: rgba(255,255,255,0.05); color: var(--color-text-primary); } .ch-nav-item.active { background: var(--color-brand-blue-dim); color: var(--color-brand-blue-light); } .ch-nav-item svg { flex-shrink: 0; } /* ── Topic card ── */ .ch-topic-card { background: var(--color-surface-card); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--transition-base), transform var(--transition-base); cursor: pointer; display: flex; flex-direction: column; } .ch-topic-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); } .ch-topic-card__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--color-surface-sunken); } .ch-topic-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .ch-topic-card__thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-surface-overlay) 0%, var(--color-surface-sunken) 100%); } .ch-topic-card__body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); } .ch-topic-card__title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text-primary); line-height: 1.3; } .ch-topic-card__desc { font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ch-topic-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: auto; padding-top: var(--space-2); } .ch-topic-card__footer { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-subtle); } /* ── Media type pills ── */ .ch-media-icons { display: flex; align-items: center; gap: var(--space-3); } .ch-media-icon { display: flex; align-items: center; gap: var(--space-1); font-size: 0.75rem; color: var(--color-text-muted); } .ch-media-icon svg { width: 14px; height: 14px; } .ch-media-icon--video { color: var(--color-media-video); } .ch-media-icon--podcast { color: var(--color-media-podcast); } .ch-media-icon--doc { color: var(--color-media-document); } .ch-media-icon--slides { color: var(--color-media-slides); } /* ── Tag pill ── */ .ch-tag { display: inline-flex; align-items: center; padding: 2px var(--space-2); background: var(--color-tag-bg); color: var(--color-tag-text); border: 1px solid var(--color-tag-border); border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 500; white-space: nowrap; } .ch-tag::before { content: '#'; opacity: 0.6; margin-right: 1px; } /* ── Duration badge ── */ .ch-duration { font-size: 0.75rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 4px; } /* ── Topic grid ── */ .ch-topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); } /* ── Filter bar ── */ .ch-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); } .ch-filter-group { display: flex; align-items: center; gap: var(--space-2); } .ch-filter-label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; } .ch-search-wrap { position: relative; flex: 1; min-width: 220px; max-width: 420px; } .ch-search-wrap svg { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; } .ch-search-input { width: 100%; background: var(--color-surface-card); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4) var(--space-2) 2.4rem; color: var(--color-text-primary); font-size: 0.875rem; font-family: inherit; transition: border-color var(--transition-fast); outline: none; } .ch-search-input::placeholder { color: var(--color-text-muted); } .ch-search-input:focus { border-color: var(--color-brand-blue); } .ch-select { appearance: none; background: var(--color-surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; border: 1px solid var(--color-border-default); border-radius: var(--radius-full); padding: var(--space-2) 2rem var(--space-2) var(--space-4); color: var(--color-text-primary); font-size: 0.8125rem; font-family: inherit; cursor: pointer; outline: none; transition: border-color var(--transition-fast); } .ch-select:focus { border-color: var(--color-brand-blue); } .ch-select option { background: var(--color-surface-overlay); } .ch-filter-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); font-size: 0.8125rem; color: var(--color-text-secondary); background: transparent; transition: all var(--transition-fast); } .ch-filter-chip:hover, .ch-filter-chip.active { background: var(--color-brand-blue-dim); border-color: var(--color-brand-blue); color: var(--color-brand-blue-light); } /* ── Page header ── */ .ch-page-header { margin-bottom: var(--space-6); } .ch-page-title { font-size: 1.75rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: var(--space-1); } .ch-page-subtitle { font-size: 0.875rem; color: var(--color-text-secondary); } /* ── Empty state ── */ .ch-empty { text-align: center; padding: var(--space-16) var(--space-8); color: var(--color-text-muted); } .ch-empty svg { margin: 0 auto var(--space-4); opacity: 0.3; } .ch-empty h3 { font-size: 1rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--space-2); } .ch-empty p { font-size: 0.875rem; } /* ── Results count ── */ .ch-results-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .ch-results-count { font-size: 0.8125rem; color: var(--color-text-muted); } .ch-sort-row { display: flex; align-items: center; gap: var(--space-2); } /* ── Mobile ── */ @media (max-width: 768px) { .ch-layout { grid-template-columns: 1fr; grid-template-rows: var(--topnav-height) 1fr; max-width: 100vw; overflow-x: hidden; } .ch-sidebar { display: none; } .ch-sidebar.open { display: block; position: fixed; top: var(--topnav-height); left: 0; width: 280px; height: calc(100vh - var(--topnav-height)); z-index: 200; } .ch-main { padding: var(--space-4); overflow-x: hidden; } .ch-topics-grid { grid-template-columns: 1fr; } .ch-topnav { padding: 0 var(--space-3); gap: var(--space-2); overflow: hidden; } .ch-nav-search { display: none; } .ch-nav-back { display: none; } .ch-nav-subtitle { display: none; } .ch-filters { flex-direction: column; align-items: stretch; } .ch-search-wrap { max-width: 100%; } .ch-page-title { font-size: 1.25rem; } } .ch-nav-subtitle { font-size: 0.75rem; color: var(--color-text-muted); border-left: 1px solid var(--color-border-subtle); padding-left: var(--space-4); margin-left: var(--space-2); white-space: nowrap; } .ch-nav-back { font-size: 0.8125rem; color: var(--color-text-muted); white-space: nowrap; } @media (min-width: 769px) and (max-width: 1100px) { .ch-topics-grid { grid-template-columns: repeat(2, 1fr); } --sidebar-width: 240px; }