/* ════════════════════════════════════════════════════════════════════ RaysHub — Production stylesheet (DISP-014 design refresh by vision) Mobile-first; reading-optimized; iPhone-native feel. Source: _qa/design-source/project/hub.raycowork.com.html (Claude Design). Adapts: - Sharp 1px borders, generous spacing, dark-first cyan accent - 18px body floor, 1.55–1.65 line-height, -0.005em tracking - Drawer sidebar (off-canvas), top bar, ⌘K palette, scroll-spy TOC - 6 RAY-NOTE variants layered on .callout shell (DEC-006 preserved) ════════════════════════════════════════════════════════════════════ */ /* ─── Design tokens (dark default) ──────────────────────────────────── */ :root { /* Color tokens — dark default */ --bg: #0a0a0c; --surface: #131316; --surface-2: #1a1a1f; --surface-3: #232329; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.12); --text: #e8e8eb; --text-2: rgba(232, 232, 235, 0.7); --text-3: rgba(232, 232, 235, 0.45); --text-4: rgba(232, 232, 235, 0.28); /* Accent (single fixed cyan — design's tweaks-panel 4-color OUT of scope) */ --accent: #62d4f5; /* Legacy compatibility tokens (still consumed by some markup) */ --link: var(--accent); --link-hover: color-mix(in oklab, var(--accent) 80%, white); --code-bg: var(--surface-2); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.5); /* RAY-NOTE 6 colors (DEC-006 preserved — parallel system to design's 4 callout types) */ --ray-amber: #f5a162; --ray-indigo: #7c8cf5; --ray-crimson: #f56262; --ray-emerald: #62f5a4; --ray-violet: #b562f5; --ray-orange: #f5a162; /* Touch — DISP-008 D1 hard rule */ --touch-min: 44px; /* Type scale */ --type-size: 18px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 22px; --fs-xl: 30px; /* Radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; /* Spacing scale */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-2xl: 32px; /* Layout */ --drawer-w: 320px; --content-max: 720px; } /* OS-level dark mode: applied only when no manual override (handled by inline FOUC bootstrap) */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } /* Light theme override — set by inline bootstrap or theme toggle */ [data-theme="light"] { --bg: #fafaf9; --surface: #ffffff; --surface-2: #f3f3f1; --surface-3: #e9e9e6; --border: rgba(0, 0, 0, 0.07); --border-strong: rgba(0, 0, 0, 0.13); --text: #18181a; --text-2: rgba(24, 24, 26, 0.65); --text-3: rgba(24, 24, 26, 0.42); --text-4: rgba(24, 24, 26, 0.22); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12); /* RAY-NOTE colors lean a touch darker on light bg for AA contrast */ --ray-amber: #c47010; --ray-indigo: #4f46e5; --ray-crimson: #dc2626; --ray-emerald: #047857; --ray-violet: #7c3aed; --ray-orange: #c2410c; } [data-theme="dark"] { /* explicit dark = default tokens already set above */ color-scheme: dark; } /* ─── Base reset ────────────────────────────────────────────────────── */ * { box-sizing: border-box; } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "IBM Plex Sans Thai", "Sarabun", "Noto Sans Thai", system-ui, sans-serif; font-size: var(--type-size); line-height: 1.55; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; /* Single radial backlight (per design) — body IS the .app */ background: radial-gradient(1200px 600px at 50% -10%, rgba(98, 212, 245, 0.08), transparent 60%), var(--bg); display: flex; flex-direction: column; position: relative; overflow-x: hidden; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .muted { color: var(--text-3); } /* ─── Top bar ───────────────────────────────────────────────────────── */ .topbar { flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-md); padding: calc(env(safe-area-inset-top) + 12px) 14px 12px; background: linear-gradient(to bottom, var(--bg) 70%, transparent); position: sticky; top: 0; z-index: 5; } .iconbtn { appearance: none; border: 0; background: transparent; color: var(--text); width: var(--touch-min); height: var(--touch-min); min-width: var(--touch-min); min-height: var(--touch-min); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.12s; font-family: inherit; font-size: 1rem; line-height: 1; } .iconbtn:hover, .iconbtn:focus-visible, .iconbtn:active { background: var(--surface-2); } .breadcrumb { flex: 1; min-width: 0; font-size: 15px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumb a { color: inherit; text-decoration: none; } .bc-folder { color: var(--text-3); } .bc-sep { margin: 0 6px; color: var(--text-4); } .bc-dim { color: var(--text-3); } /* ─── Scroller (main area) ──────────────────────────────────────────── */ .scroller { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .scroller::-webkit-scrollbar { display: none; } /* ─── Home page ─────────────────────────────────────────────────────── */ .home { padding: 4px 18px 80px; display: flex; flex-direction: column; gap: 22px; max-width: var(--content-max); margin: 0 auto; width: 100%; } .home-hd { padding: 12px 0 4px; } .home-eyebrow { font-size: 13px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .home-title { font-size: 32px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--text); } .home-sub { font-size: 16px; color: var(--text-2); margin: 0; } .home-section { display: flex; flex-direction: column; gap: 10px; } .home-shd { font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px; } /* Folder grid */ .folder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .folder-tile { appearance: none; cursor: pointer; text-align: left; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; font-family: inherit; text-decoration: none; min-height: var(--touch-min); } .folder-tile:hover, .folder-tile:focus-visible { border-color: var(--border-strong); background: var(--surface-2); } .folder-tcount { font-size: 24px; font-weight: 600; color: var(--text-3); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .folder-tlabel { font-size: 14px; color: var(--text); font-weight: 500; } /* Recent list */ .recent-list { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .recent-row { display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; color: var(--text); border-bottom: 1px solid var(--border); font-family: inherit; text-decoration: none; min-height: var(--touch-min); } .recent-row:last-child { border-bottom: 0; } .recent-row:hover, .recent-row:focus-visible { background: var(--surface-2); } .recent-icon { font-size: 18px; color: var(--accent); flex-shrink: 0; width: 24px; text-align: center; } .recent-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .recent-title { font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-sum { font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-date { font-size: 12px; color: var(--text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; } /* Welcome / empty hero (shown when vault has 0–1 files) */ .welcome, .empty-state { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px 24px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; } .welcome__icon, .empty-state__icon { font-size: 2.5rem; display: block; margin-bottom: 4px; } .welcome h2, .empty-state h2 { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.015em; color: var(--text); } .welcome p, .empty-state p { margin: 0; color: var(--text-2); font-size: var(--fs-base); line-height: 1.55; } .welcome__en, .empty-state__en { color: var(--text-3); font-size: var(--fs-sm); } .welcome code, .empty-state code { background: var(--surface-2); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 0.85em; } .welcome a, .empty-state a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); } /* ─── Article ──────────────────────────────────────────────────────── */ .article { padding: 0 20px 100px; max-width: var(--content-max); margin: 0 auto; width: 100%; } .article-hd { padding: 8px 0 18px; } .article-eyebrow { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 6px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 10px; } .article-eyebrow span { letter-spacing: 0.06em; } .article-title { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; text-wrap: pretty; color: var(--text); } .article-sum { font-size: 17px; color: var(--text-2); line-height: 1.5; margin: 0 0 14px; text-wrap: pretty; } .article-meta { font-size: 13px; color: var(--text-3); margin-bottom: 12px; font-variant-numeric: tabular-nums; } .article-tags { display: flex; flex-wrap: wrap; gap: 6px; } /* Tag chips */ .tag { appearance: none; cursor: pointer; font-family: inherit; background: var(--surface-2); color: var(--text-2); padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 1px; text-decoration: none; min-height: 28px; line-height: 1.2; } .tag-hash { color: var(--text-4); margin-right: 1px; } .tag.active, .tag:hover { background: color-mix(in oklab, var(--accent) 22%, var(--surface-2)); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 30%, transparent); } /* Table of Contents */ .toc { margin: 8px 0 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .toc-sum { cursor: pointer; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: 0.04em; text-transform: uppercase; list-style: none; min-height: var(--touch-min); } .toc-sum::-webkit-details-marker { display: none; } .toc-sum::after { content: '›'; font-size: 18px; color: var(--text-3); transition: transform 0.15s; transform: rotate(90deg); margin-left: 8px; } .toc[open] .toc-sum::after { transform: rotate(-90deg); } .toc-count { font-size: 12px; color: var(--text-3); margin-left: 8px; font-variant-numeric: tabular-nums; } .toc-list { list-style: none; margin: 0; padding: 4px 6px 10px; counter-reset: toc; } .toc-list li { counter-increment: toc; } .toc-item { display: block; width: 100%; text-align: left; padding: 10px 8px 10px 36px; font-size: 14px; color: var(--text-2); font-family: inherit; border-radius: 8px; position: relative; line-height: 1.35; text-decoration: none; border: 0; background: transparent; cursor: pointer; min-height: var(--touch-min); } .toc-item::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 8px; top: 10px; font-size: 11px; color: var(--text-4); font-variant-numeric: tabular-nums; } .toc-item:hover { background: var(--surface-2); } .toc-item.active { color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); } .toc-item.active::before { color: var(--accent); } /* Article body / prose */ .article-body, .content { display: flex; flex-direction: column; gap: 14px; } .article-body h1, .content h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px; color: var(--text); } .article-body h2, .content h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 22px 0 0; line-height: 1.25; text-wrap: pretty; scroll-margin-top: 16px; color: var(--text); } .article-body h3, .content h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 14px 0 0; line-height: 1.3; color: var(--text); } .article-body p, .content p { margin: 0; line-height: 1.65; color: var(--text); text-wrap: pretty; font-size: var(--type-size); } .article-body ul, .article-body ol, .content ul, .content ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; line-height: 1.55; font-size: var(--type-size); } .article-body ul li::marker, .content ul li::marker { color: var(--text-4); } .article-body ol li::marker, .content ol li::marker { color: var(--text-3); font-variant-numeric: tabular-nums; } .article-body a, .content a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); transition: border-color 0.12s, color 0.12s; } .article-body a:hover, .content a:hover { color: color-mix(in oklab, var(--accent) 80%, white); border-bottom-color: var(--accent); } .article-body hr, .content hr { border: 0; height: 1px; background: var(--border); margin: 16px 0; } .article-body blockquote, .content blockquote { margin: 0; padding: 8px 16px; border-left: 3px solid var(--text-4); color: var(--text-2); font-style: italic; } .article-body img, .content img { max-width: 100%; height: auto; border-radius: var(--r-md); } .article-body table, .content table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .article-body th, .article-body td, .content th, .content td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; } .article-body th, .content th { background: var(--surface-2); font-weight: 600; color: var(--text); } .article-end { margin-top: 36px; text-align: center; color: var(--text-4); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; } /* Inline code (within prose) */ .content code, .article-body code, .callout code, .ray-note code { background: var(--surface-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 0.9em; color: var(--text); } /* ─── Code blocks ──────────────────────────────────────────────────── */ .code, .content pre, .article-body pre { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 0; } .code-hd { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .code-lang { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; } .code-copy { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--text-3); font-size: 12px; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 6px; min-height: 28px; } .code-copy:hover, .code-copy:focus-visible { color: var(--text); background: var(--surface-3); } .code-copy.is-copied { color: var(--accent); } .code-body, .content pre, .article-body pre { margin: 0; padding: 14px 16px; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 14px; line-height: 1.6; color: var(--text); overflow-x: auto; white-space: pre; scrollbar-width: none; } .code-body::-webkit-scrollbar, .content pre::-webkit-scrollbar, .article-body pre::-webkit-scrollbar { display: none; } .code pre, .code .code-body { border: 0; background: transparent; padding: 14px 16px; } .content pre code, .article-body pre code, .code pre code { background: transparent; border: 0; padding: 0; font-size: inherit; color: inherit; } /* ─── Callouts (Obsidian native — 4 design variants + .callout-other fallback) ─── */ .callout { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; border-left: 3px solid var(--accent); display: flex; flex-direction: column; gap: 6px; margin: 0; } .callout-hd, .callout__title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0; } .callout-glyph { color: var(--accent); display: inline-flex; font-size: 14px; line-height: 1; } .callout-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .callout-body, .callout__body { font-size: 15px; color: var(--text); line-height: 1.55; text-wrap: pretty; } .callout-body p:first-child, .callout__body p:first-child { margin-top: 0; } .callout-body p:last-child, .callout__body p:last-child { margin-bottom: 0; } /* Variant: warning (amber-orange) */ .callout-warning, .callout-failure, .callout-danger, .callout-bug { border-left-color: #f5a162; } .callout-warning .callout-glyph, .callout-warning .callout-label, .callout-warning .callout__title, .callout-failure .callout-glyph, .callout-failure .callout-label, .callout-failure .callout__title, .callout-danger .callout-glyph, .callout-danger .callout-label, .callout-danger .callout__title, .callout-bug .callout-glyph, .callout-bug .callout-label, .callout-bug .callout__title { color: #f5a162; } /* Variant: tip (lime-green) */ .callout-tip, .callout-success, .callout-example { border-left-color: #b4f562; } .callout-tip .callout-glyph, .callout-tip .callout-label, .callout-tip .callout__title, .callout-success .callout-glyph, .callout-success .callout-label, .callout-success .callout__title, .callout-example .callout-glyph, .callout-example .callout-label, .callout-example .callout__title { color: #b4f562; } /* Variant: quote (subdued, italic) */ .callout-quote, .callout-abstract { border-left-color: var(--text-3); background: transparent; } .callout-quote .callout-glyph, .callout-quote .callout-label, .callout-quote .callout__title, .callout-abstract .callout-glyph, .callout-abstract .callout-label, .callout-abstract .callout__title { color: var(--text-3); } .callout-quote .callout-body, .callout-abstract .callout-body { font-style: italic; font-size: 17px; color: var(--text-2); } /* Variant: note / info / question / todo / other → default cyan accent (already set above) */ /* ─── RAY-NOTE 6 variants — DEC-006 (layered on .callout shell) ──────── */ /* Structure: