| :root { |
| color-scheme: dark; |
| --bg-base: #000000; |
| --bg-surface: #0f0f0f; |
| --bg-elevated: #1a1a1a; |
| --bg-input: #111111; |
| |
| --border-subtle: rgba(255, 255, 255, 0.05); |
| --border-default: rgba(255, 255, 255, 0.1); |
| --border-strong: rgba(255, 255, 255, 0.2); |
| |
| --text-primary: #ffffff; |
| --text-secondary: rgba(255, 255, 255, 0.7); |
| --text-muted: rgba(255, 255, 255, 0.45); |
| |
| --accent: #e8001d; |
| --accent-dim: rgba(232, 0, 29, 0.1); |
| |
| --tag-bg: #1e1e1e; |
| --tag-text: #999999; |
|
|
| |
| --radius-sm: 8px; |
| --radius-md: 12px; |
| --radius-lg: 16px; |
| --radius-full: 999px; |
|
|
| --space-section: 112px; |
| --space-group: 64px; |
| --space-element: 24px; |
|
|
| --space-1: 4px; |
| --space-2: 8px; |
| --space-3: 12px; |
| --space-4: 16px; |
| --space-5: 24px; |
| --space-6: 32px; |
| --space-7: 48px; |
| --space-8: 64px; |
|
|
| --font-size-base: 16px; |
| --font-size-ui: 12px; |
| --font-size-title: 48px; |
| --font-size-section: 24px; |
|
|
| font-family: "Inter", system-ui, -apple-system, sans-serif; |
| background: var(--bg-base); |
| color: var(--text-primary); |
| line-height: 1.6; |
| } |
|
|
| [data-theme="light"] { |
| color-scheme: light; |
| --bg-base: #f7f7f7; |
| --bg-surface: #ffffff; |
| --bg-elevated: #efefef; |
| --bg-input: #ffffff; |
| |
| --border-subtle: rgba(0, 0, 0, 0.04); |
| --border-default: rgba(0, 0, 0, 0.08); |
| --border-strong: rgba(0, 0, 0, 0.15); |
| |
| --text-primary: #000000; |
| --text-secondary: rgba(0, 0, 0, 0.6); |
| --text-muted: rgba(0, 0, 0, 0.4); |
| |
| --accent: #e8001d; |
| --accent-dim: rgba(232, 0, 29, 0.05); |
| } |
|
|
| [data-font-size="small"] { |
| --font-size-base: 14px; |
| --font-size-ui: 11px; |
| --font-size-title: 36px; |
| --font-size-section: 20px; |
| } |
|
|
| [data-font-size="large"] { |
| --font-size-base: 18px; |
| --font-size-ui: 14px; |
| --font-size-title: 64px; |
| --font-size-section: 32px; |
| } |
|
|
| [data-font-size="extra-large"] { |
| --font-size-base: 20px; |
| --font-size-ui: 16px; |
| --font-size-title: 80px; |
| --font-size-section: 40px; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| html, body, #root { |
| min-height: 100%; |
| } |
|
|
| body { |
| margin: 0; |
| background: var(--bg-base); |
| color: var(--text-primary); |
| font-size: var(--font-size-base); |
| } |
|
|
| |
| .text-hero { |
| font-family: "Barlow Condensed", "Oswald", sans-serif; |
| font-size: var(--font-size-title); |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| line-height: 1.1; |
| } |
|
|
| .text-section { |
| font-family: "Barlow Condensed", "Oswald", sans-serif; |
| font-size: var(--font-size-section); |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| } |
|
|
| .text-headline { |
| font-size: 1.25rem; |
| font-weight: 600; |
| letter-spacing: -0.01em; |
| } |
|
|
| .text-subhead { |
| font-size: 1.125rem; |
| color: var(--text-secondary); |
| } |
|
|
| a { |
| color: inherit; |
| text-decoration: none; |
| transition: opacity 0.2s ease; |
| } |
|
|
| a:hover { |
| opacity: 0.8; |
| } |
|
|
| button, input, textarea { |
| font: inherit; |
| } |
|
|
| button, input, textarea, .tree-link, .entry-question-button { |
| transition: all 0.2s ease; |
| } |
|
|
| input, textarea { |
| width: 100%; |
| padding: 12px 16px; |
| border: 1px solid var(--border-default); |
| border-radius: var(--radius-md); |
| background: var(--bg-input); |
| color: var(--text-primary); |
| font-size: var(--font-size-base); |
| } |
|
|
| input:focus, textarea:focus { |
| outline: none; |
| border-color: var(--text-muted); |
| background: var(--bg-elevated); |
| } |
|
|
| .button-primary { |
| background: #ffffff; |
| color: #000000; |
| padding: 12px 24px; |
| font-weight: 600; |
| border-radius: var(--radius-md); |
| border: none; |
| cursor: pointer; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| font-size: var(--font-size-ui); |
| } |
|
|
| .button-primary:hover { |
| background: rgba(255, 255, 255, 0.9); |
| transform: translateY(-1px); |
| } |
|
|
| .button-primary:disabled { |
| background: var(--bg-elevated); |
| color: var(--text-muted); |
| cursor: not-allowed; |
| transform: none; |
| } |
|
|
| .button-ghost { |
| background: transparent; |
| color: var(--text-primary); |
| border: 1px solid var(--border-default); |
| padding: 12px 24px; |
| border-radius: var(--radius-md); |
| cursor: pointer; |
| } |
|
|
| .button-ghost:hover { |
| background: var(--bg-surface); |
| border-color: var(--border-strong); |
| } |
|
|
| .icon-button { |
| width: 44px; |
| height: 44px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: transparent; |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-full); |
| color: var(--text-secondary); |
| cursor: pointer; |
| flex-shrink: 0; |
| } |
|
|
| .icon-button:hover { |
| background: var(--bg-elevated); |
| color: var(--text-primary); |
| border-color: var(--border-default); |
| } |
|
|
| .top-nav { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 72px; |
| background: rgba(0, 0, 0, 0.8); |
| backdrop-filter: blur(20px); |
| border-bottom: 1px solid var(--border-subtle); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0 32px; |
| z-index: 100; |
| } |
|
|
| .top-nav-left, .top-nav-right { |
| display: flex; |
| align-items: center; |
| flex: 1; |
| } |
|
|
| .top-nav-center { |
| flex: 1; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
|
|
| .top-nav-right { |
| justify-content: flex-end; |
| } |
|
|
| .sidebar { |
| position: fixed; |
| top: 72px; |
| left: 0; |
| bottom: 0; |
| width: 260px; |
| background: var(--bg-base); |
| border-right: 1px solid var(--border-subtle); |
| z-index: 90; |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| overflow-y: auto; |
| scrollbar-width: thin; |
| scrollbar-color: var(--border-strong) transparent; |
| } |
|
|
| .sidebar-closed .sidebar { |
| transform: translateX(-100%); |
| } |
|
|
| .sidebar-open .sidebar { |
| transform: translateX(0); |
| } |
|
|
| .app-main { |
| padding-top: 72px; |
| transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
|
|
| .sidebar-open .app-main { |
| padding-left: 260px; |
| } |
|
|
| .sidebar-closed .app-main { |
| padding-left: 0; |
| } |
|
|
| .sidebar-backdrop { |
| position: fixed; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.5); |
| backdrop-filter: blur(4px); |
| z-index: 85; |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity 0.3s ease; |
| } |
|
|
| .sidebar-backdrop.open { |
| opacity: 1; |
| pointer-events: auto; |
| } |
|
|
| @media (max-width: 960px) { |
| .sidebar-open .app-main { |
| padding-left: 0; |
| } |
| |
| .sidebar { |
| z-index: 1000; |
| top: 0; |
| height: 100%; |
| } |
|
|
| .top-nav { |
| padding: 0 16px; |
| height: 64px; |
| } |
|
|
| .app-main { |
| padding-top: 64px; |
| } |
| } |
|
|
| @media (max-width: 720px) { |
| :root { |
| --space-section: 64px; |
| --space-group: 32px; |
| --space-element: 16px; |
| --font-size-title: 36px; |
| --font-size-section: 20px; |
| } |
|
|
| .content-wrap { |
| padding: var(--space-group) 16px var(--space-section); |
| } |
|
|
| .card-header-row { |
| flex-direction: column; |
| align-items: stretch !important; |
| gap: 24px; |
| } |
|
|
| .card-header-actions { |
| margin-left: 0 !important; |
| display: grid !important; |
| grid-template-columns: 1fr 1fr; |
| gap: 12px; |
| } |
|
|
| .text-hero { |
| font-size: var(--font-size-title) !important; |
| } |
|
|
| .card-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .button-primary, .button-ghost { |
| min-height: 44px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .mobile-modal-full { |
| position: fixed !important; |
| inset: 0 !important; |
| width: 100% !important; |
| height: 100% !important; |
| max-width: none !important; |
| max-height: none !important; |
| border-radius: 0 !important; |
| padding: 0 !important; |
| } |
| } |
|
|
| .content-wrap { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: var(--space-group) 32px var(--space-section); |
| } |
|
|
| .section-block { |
| margin-bottom: var(--space-section); |
| } |
|
|
| .section-title { |
| composes: text-section; |
| margin-bottom: var(--space-element); |
| } |
|
|
| |
| .card-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: var(--space-element); |
| } |
|
|
| .subject-card { |
| background: var(--bg-surface); |
| border-radius: var(--radius-lg); |
| overflow: hidden; |
| border: 1px solid var(--border-subtle); |
| transition: all 0.3s ease; |
| height: 100%; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .subject-card:hover { |
| border-color: var(--border-strong); |
| transform: translateY(-4px); |
| background: var(--bg-elevated); |
| } |
|
|
| .subject-card-header { |
| padding: 24px; |
| border-bottom: 1px solid var(--border-subtle); |
| } |
|
|
| .subject-card-header span { |
| font-family: "Barlow Condensed", sans-serif; |
| font-size: 1.5rem; |
| font-weight: 700; |
| text-transform: uppercase; |
| letter-spacing: 0.02em; |
| } |
|
|
| .subject-card-body { |
| padding: 24px; |
| color: var(--text-secondary); |
| font-size: 0.875rem; |
| flex-grow: 1; |
| } |
|
|
| |
| .entry-row { |
| border-bottom: 1px solid var(--border-subtle); |
| padding: 24px 0; |
| } |
|
|
| .entry-question-row { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| } |
|
|
| .entry-question-button { |
| flex: 1; |
| font-size: calc(var(--font-size-base) * 1.125); |
| font-weight: 500; |
| color: var(--text-primary); |
| text-align: left; |
| } |
|
|
| .entry-answer { |
| margin-top: 24px; |
| color: var(--text-secondary); |
| line-height: 1.8; |
| display: none; |
| font-size: var(--font-size-base); |
| } |
|
|
| .entry-answer.expanded { |
| display: block; |
| } |
|
|
| |
| .search-box input { |
| background: var(--bg-surface); |
| border: 1px solid var(--border-subtle); |
| height: 44px; |
| border-radius: var(--radius-full); |
| padding: 0 20px; |
| } |
|
|
| .search-box input:focus { |
| border-color: var(--border-strong); |
| width: 100%; |
| } |
|
|
| |
| .tree-list { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .tree-link { |
| display: block; |
| padding: 10px 24px; |
| font-size: var(--font-size-ui); |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| color: var(--text-secondary); |
| border-left: 2px solid transparent; |
| transition: all 0.2s ease; |
| } |
|
|
| .tree-link:hover { |
| background: var(--bg-surface); |
| color: var(--text-primary); |
| } |
|
|
| .tree-link.active { |
| color: var(--accent); |
| border-left-color: var(--accent); |
| background: var(--accent-dim); |
| } |
|
|
| .tree-link.drop-target { |
| background: var(--accent-dim); |
| border-left-color: var(--accent); |
| } |
|
|
| .sidebar-header { |
| padding: 24px; |
| font-family: "Barlow Condensed", sans-serif; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| color: var(--text-muted); |
| font-size: 0.75rem; |
| } |
|
|
| |
| .settings-dropdown { |
| position: absolute; |
| top: calc(100% + 12px); |
| right: 0; |
| width: 280px; |
| background: var(--bg-surface); |
| border: 1px solid var(--border-default); |
| border-radius: var(--radius-lg); |
| box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); |
| padding: 24px; |
| z-index: 150; |
| } |
|
|
| .settings-section { |
| margin-bottom: 24px; |
| } |
|
|
| .settings-label { |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| color: var(--text-muted); |
| margin-bottom: 12px; |
| } |
|
|
| .settings-row { |
| display: flex; |
| gap: 8px; |
| } |
|
|
| .settings-row button { |
| flex: 1; |
| padding: 8px; |
| font-size: 0.75rem; |
| border-radius: var(--radius-sm); |
| border: 1px solid var(--border-default); |
| background: var(--bg-input); |
| color: var(--text-muted); |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
|
|
| .settings-row button.active { |
| background: var(--accent); |
| color: #ffffff; |
| border-color: var(--accent); |
| box-shadow: 0 4px 12px var(--accent-dim); |
| } |
|
|
| .mode-toggle { |
| display: flex; |
| background: var(--bg-input); |
| padding: 4px; |
| border-radius: var(--radius-md); |
| border: 1px solid var(--border-subtle); |
| } |
|
|
| .mode-toggle button { |
| border: 0; |
| background: transparent; |
| color: var(--text-muted); |
| padding: 8px 16px; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| font-size: 11px; |
| font-weight: 600; |
| cursor: pointer; |
| border-radius: calc(var(--radius-md) - 2px); |
| transition: all 0.2s ease; |
| } |
|
|
| .mode-toggle button.active { |
| background: var(--accent); |
| color: #ffffff; |
| box-shadow: 0 4px 12px var(--accent-dim); |
| } |
|
|
| .is-hidden { |
| display: none !important; |
| } |
|
|
| |
| .settings-menu-container { |
| position: relative; |
| } |
|
|
| .settings-dropdown { |
| position: absolute; |
| top: calc(100% + 12px); |
| right: 0; |
| width: 280px; |
| background: var(--bg-surface); |
| border: 1px solid var(--border-strong); |
| border-radius: var(--radius-lg); |
| box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6); |
| padding: 24px; |
| z-index: 1000; |
| pointer-events: auto; |
| } |
|
|
|
|
