Repository Public
1@import "tailwindcss";23/* CLIP design tokens. Light is the default theme; dark is opt-in (data-theme="dark" on <html>). */4@theme {5 --color-ink: #f5f4f1;6 --color-stage: #ffffff;7 --color-panel: #ffffff;8 --color-raised: #efede8;9 --color-line: #d9d6cf;10 --color-line-soft: #e8e5de;11 --color-text: #101014;12 --color-muted: #4f4d57;13 --color-faint: #6d6a76;14 --color-lamp: #e23d1b;15 --color-lamp-hover: #c93212;16 --color-on-lamp: #ffffff;17 --color-accent: #c6300f;18 --color-ok: #17804a;19 --color-warn: #9a5b06;20 --color-bad: #c22d1a;21 --font-display: var(--font-display-face), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;22 --font-sans: var(--font-sans-face), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;23 --font-mono: ui-monospace, "SF Mono", Menlo, monospace;24 --radius-frame: 22px;25 --ease-film: cubic-bezier(0.22, 0.7, 0.2, 1);26}2728:root {29 color-scheme: light;30 --shadow-card: 0 1px 2px rgba(16, 16, 20, 0.04), 0 8px 24px -12px rgba(16, 16, 20, 0.12);31 --shadow-frame: 0 2px 4px rgba(16, 16, 20, 0.06), 0 30px 70px -30px rgba(16, 16, 20, 0.35);32 --glass: rgba(245, 244, 241, 0.78);33 --tabbar-h: 64px;34}35[data-theme="dark"] {36 color-scheme: dark;37 --color-ink: #09090b;38 --color-stage: #0f0f12;39 --color-panel: #151519;40 --color-raised: #1d1d23;41 --color-line: #2c2c35;42 --color-line-soft: #202027;43 --color-text: #f3f1ec;44 --color-muted: #aaa6b0;45 --color-faint: #8a8692;46 --color-lamp: #ff6a45;47 --color-lamp-hover: #ff8261;48 --color-on-lamp: #16090a;49 --color-accent: #ff8a66;50 --color-ok: #7fd3a2;51 --color-warn: #e9b862;52 --color-bad: #f08a78;53 --shadow-card: 0 0 0 1px var(--color-line-soft);54 --shadow-frame: 0 0 0 1px var(--color-line-soft), 0 40px 110px -40px #000;55 --glass: rgba(9, 9, 11, 0.72);56}5758html { background: var(--color-ink); color: var(--color-text); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }59body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; min-height: 100dvh; background: var(--color-ink); color: var(--color-text); -webkit-tap-highlight-color: transparent; }60::selection { background: color-mix(in srgb, var(--color-lamp) 28%, transparent); }61:focus-visible { outline: 2px solid var(--color-lamp); outline-offset: 3px; border-radius: 6px; }62a { text-underline-offset: 3px; }6364.display { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.035em; line-height: 0.98; }65.kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); }66.label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-faint); }67.prose-film { color: var(--color-muted); line-height: 1.6; max-width: 62ch; }68/* Series colours are pastels: mix them toward the text colour so they stay readable on either theme. */69.accent-text { color: color-mix(in srgb, var(--a, var(--color-accent)) 55%, var(--color-text)); }70.quote { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }7172.frame { border-radius: var(--radius-frame); overflow: hidden; background: #000; box-shadow: var(--shadow-frame); }73.glass { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }7475.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0 1.3rem; border-radius: 999px; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; transition: background 0.2s var(--ease-film), color 0.2s, border-color 0.2s, transform 0.15s; white-space: nowrap; }76.btn:active { transform: scale(0.97); }77.btn-primary { background: var(--color-lamp); color: var(--color-on-lamp); }78.btn-primary:hover { background: var(--color-lamp-hover); }79.btn-ghost { border: 1px solid var(--color-line); color: var(--color-text); background: var(--color-stage); }80.btn-ghost:hover { border-color: var(--color-muted); background: var(--color-raised); }81.btn-danger { background: color-mix(in srgb, var(--color-bad) 10%, var(--color-stage)); color: var(--color-bad); border: 1px solid color-mix(in srgb, var(--color-bad) 45%, transparent); }82.btn-sm { min-height: 36px; padding: 0 0.9rem; font-size: 0.82rem; }83.btn:disabled { opacity: 0.45; cursor: not-allowed; }84.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.9rem; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-stage); font-size: 0.82rem; font-weight: 500; color: var(--color-muted); transition: color 0.15s, border-color 0.15s, background 0.15s; }85.chip:hover { color: var(--color-text); border-color: var(--color-muted); }86.chip[aria-current="true"], .chip-on { color: var(--color-on-lamp); background: var(--color-text); border-color: var(--color-text); }87[data-theme="dark"] .chip[aria-current="true"], [data-theme="dark"] .chip-on { color: #101014; }88.field { width: 100%; min-height: 48px; padding: 0.65rem 0.9rem; border-radius: 14px; background: var(--color-stage); border: 1px solid var(--color-line); color: var(--color-text); font-size: 1rem; }89.field::placeholder { color: var(--color-faint); }90textarea.field { line-height: 1.5; }91.card { background: var(--color-panel); border: 1px solid var(--color-line-soft); border-radius: 20px; box-shadow: var(--shadow-card); }92.poster { border-radius: 18px; overflow: hidden; background: var(--color-raised); box-shadow: var(--shadow-card); }9394/* app-like bottom tab bar on phones */95.tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--color-line-soft); }96.tabbar-dark { background: rgba(9, 9, 11, 0.72); border-top-color: rgba(255, 255, 255, 0.08); color: #fff; }97.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--tabbar-h); font-size: 0.66rem; font-weight: 600; color: var(--color-faint); }98.tab[aria-current="page"] { color: var(--color-text); }99.tabbar-dark .tab { color: rgba(255, 255, 255, 0.6); }100.tabbar-dark .tab[aria-current="page"] { color: #fff; }101.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); }102@media (min-width: 768px) { .tabbar { display: none; } .has-tabbar { padding-bottom: 0; } }103104/* vertical feed: always a dark, immersive stage */105.feed { height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; background: #000; color: #f3f1ec; }106.feed::-webkit-scrollbar { display: none; }107.feed-item { height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }108@media (min-width: 768px) { .feed-item { padding-bottom: 0; } }109@media (min-width: 1024px) { .feed { background: var(--color-ink); color: var(--color-text); } }110.caption-line { background: rgba(8, 8, 10, 0.72); padding: 0.18em 0.5em; border-radius: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; line-height: 1.7; }111.rail { display: flex; gap: 0.85rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.5rem; }112.rail::-webkit-scrollbar { display: none; }113.rail > * { scroll-snap-align: start; flex: none; }114115@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }116.rise { animation: rise 0.7s var(--ease-film) both; }117@keyframes spin { to { transform: rotate(360deg); } }118.spinner { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid rgba(128, 128, 128, 0.35); border-top-color: var(--color-lamp); animation: spin 0.9s linear infinite; }119120@media (prefers-reduced-motion: reduce) {121 *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }122 .spinner { animation: none; }123}124125/* studio */126.studio-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }127.studio-table th { text-align: left; font-weight: 600; color: var(--color-faint); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-line); white-space: nowrap; }128.studio-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--color-line-soft); vertical-align: top; }129.status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 600; padding: 0.18rem 0.6rem; border-radius: 999px; border: 1px solid var(--color-line); color: var(--color-muted); white-space: nowrap; background: var(--color-stage); }130.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }131.status-ok { color: var(--color-ok); border-color: color-mix(in srgb, var(--color-ok) 40%, transparent); }132.status-warn { color: var(--color-warn); border-color: color-mix(in srgb, var(--color-warn) 40%, transparent); }133.status-bad { color: var(--color-bad); border-color: color-mix(in srgb, var(--color-bad) 40%, transparent); }134.status-run { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); }135.mono { font-family: var(--font-mono); font-size: 0.8em; }136.notice-ok { border: 1px solid color-mix(in srgb, var(--color-ok) 45%, transparent); background: color-mix(in srgb, var(--color-ok) 9%, var(--color-stage)); color: var(--color-text); }137.notice-err { border: 1px solid color-mix(in srgb, var(--color-bad) 50%, transparent); background: color-mix(in srgb, var(--color-bad) 9%, var(--color-stage)); color: var(--color-text); }138