/* Jotary styles. Served from static assets (ASSETS binding). * * Theming: a render-blocking classic script (/js/theme.js) sets * * BEFORE first paint. Palette is driven by [data-theme]; the no-JS fallback below * follows the OS via prefers-color-scheme. The toggle icon shown is driven by * [data-theme-pref]. * * Visual reference: the Jotary/Pastefire demo — warm off-white dot-grid canvas, a * white editor card framed by top/bottom toolbars with rounded-full control pills, * sharp brand-orange action buttons, and a sticky translucent header. */ /* ---- self-hosted fonts (served from /fonts via the ASSETS binding) ---- */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-variable.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-mono-variable.woff2') format('woff2'); } /* ---- design tokens ---- */ :root { color-scheme: light; --page-bg: #fffdfa; --bg: #ffffff; --bg-subtle: #faf9f7; --fg: #0a0a0a; --muted: #737373; --border: #d7d7d7; --input-border: #e0e0e0; --code-bg: #f6f7f9; --accent: #1447e6; --brand: #ff5f1f; --brand-hover: #e8501a; --brand-fg: #ffffff; --ring: #1447e6; --dot: rgba(0, 0, 0, 0.14); --ok: #009966; --ok-bg: #ecfdf5; --ok-border: rgba(110, 231, 183, 0.7); --warn: #b45309; --btn-secondary-bg: #f5f5f5; --btn-secondary-fg: #737373; --radius: 3px; --radius-pill: 999px; --maxw: 1120px; --shellw: 1200px; --prosew: 760px; } /* No-JS fallback: follow the OS when the theme script hasn't set data-theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --page-bg: #030303; --bg: #141518; --bg-subtle: #1a1b1f; --fg: #fafafa; --muted: #a1a1a1; --border: #404249; --input-border: #4a4c52; --code-bg: #1c1d21; --accent: #6ea0ff; --brand: #ff7a45; --brand-hover: #ff5f1f; --brand-fg: #1a1a1a; --ring: #6ea0ff; --dot: rgba(255, 255, 255, 0.1); --ok: #34d399; --ok-bg: #052e1f; --ok-border: rgba(52, 211, 153, 0.4); --btn-secondary-bg: #1c1d21; --btn-secondary-fg: #a1a1a1; } } /* JS-resolved dark theme. */ :root[data-theme='dark'] { color-scheme: dark; --page-bg: #030303; --bg: #141518; --bg-subtle: #1a1b1f; --fg: #fafafa; --muted: #a1a1a1; --border: #404249; --input-border: #4a4c52; --code-bg: #1c1d21; --accent: #6ea0ff; --brand: #ff7a45; --brand-hover: #ff5f1f; --brand-fg: #1a1a1a; --ring: #6ea0ff; --dot: rgba(255, 255, 255, 0.1); --ok: #34d399; --ok-bg: #052e1f; --ok-border: rgba(52, 211, 153, 0.4); --btn-secondary-bg: #1c1d21; --btn-secondary-fg: #a1a1a1; } * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--fg); line-height: 1.5; background-color: var(--page-bg); /* Subtle dot-grid canvas; the opaque editor card sits on top of it. */ background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; background-attachment: fixed; } main { flex: 1 0 auto; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 2rem 0; } a { color: var(--accent); } code, pre { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* ---- header (sticky, translucent) ---- */ header.site { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); } .site__inner { max-width: var(--shellw); margin: 0 auto; height: 56px; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .brand__logo { height: 26px; width: auto; display: block; transition: transform 0.15s ease; } .brand:hover .brand__logo { transform: scale(1.04); } .brand__logo--dark { display: none; } :root[data-theme='dark'] .brand__logo--light { display: none; } :root[data-theme='dark'] .brand__logo--dark { display: block; } /* No-JS fallback: when the theme script hasn't set data-theme, follow the OS so the dark wordmark shows on a dark header (otherwise the dark-text logo is unreadable). */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .brand__logo--light { display: none; } :root:not([data-theme]) .brand__logo--dark { display: block; } } .site-nav { display: flex; align-items: center; gap: 0.25rem; } .site-nav a { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 0.875rem; font-weight: 400; line-height: 1.25; transition: color 0.15s, background-color 0.15s; } .site-nav a:hover { color: var(--fg); background: color-mix(in srgb, var(--muted) 18%, transparent); } /* theme toggle — hidden by default; shown only once the head script sets data-theme-pref (i.e. JS ran), so no-JS users don't see a dead control. The attr is set before first paint, so there is no flash of the button appearing. */ .theme-toggle { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--muted); } :root[data-theme-pref] .theme-toggle { display: inline-flex; } .theme-toggle:hover { color: var(--fg); background: color-mix(in srgb, var(--muted) 18%, transparent); } .theme-toggle__icon { width: 18px; height: 18px; display: none; } :root:not([data-theme-pref]) .theme-toggle__icon--system, :root[data-theme-pref='system'] .theme-toggle__icon--system { display: block; } :root[data-theme-pref='light'] .theme-toggle__icon--light { display: block; } :root[data-theme-pref='dark'] .theme-toggle__icon--dark { display: block; } /* ---- footer ---- */ .site-footer { flex-shrink: 0; margin-top: auto; background: transparent; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .site-footer__inner { max-width: var(--shellw); margin: 0 auto; height: 48px; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: 0.75rem; } .site-footer__brand a { color: var(--fg); font-weight: 500; text-decoration: none; } .site-footer__brand a:hover { color: var(--accent); } .site-footer__by { color: var(--muted); } .site-footer__links { display: flex; gap: 1rem; } .site-footer__links a { color: var(--muted); text-decoration: none; } .site-footer__links a:hover { color: var(--accent); } /* ---- buttons (legacy .btn — used by created/reader/me/edit; DO NOT repurpose) ---- */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.95rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--fg); text-decoration: none; font-size: 0.9rem; line-height: 1.1; white-space: nowrap; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn--primary, .btn--primary:hover { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); } .btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); } .btn--ghost { background: transparent; } .btn--toggle[aria-selected='true'] { border-color: var(--accent); color: var(--accent); } [data-copied] { border-color: var(--ok) !important; color: var(--ok) !important; } [data-copy-failed] { border-color: var(--warn) !important; color: var(--warn) !important; } /* On the orange primary copy button, also swap the background so the green/amber feedback text stays legible (green-on-orange would be unreadable). */ .btn--primary[data-copied] { background: var(--ok) !important; color: #fff !important; } .btn--primary[data-copy-failed] { background: var(--warn) !important; color: #fff !important; } /* ---- form fields ---- */ .field-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.03em; } .field--inline { display: inline-flex; align-items: center; gap: 0.4rem; } .field--inline .field-label { display: inline; margin: 0; text-transform: none; letter-spacing: normal; font-size: 0.8rem; } select, .field select { padding: 0.35rem 0.5rem; border: 1px solid var(--input-border); border-radius: var(--radius); background: var(--bg); color: var(--fg); font-size: 0.85rem; } /* ---- create / edit card ---- */ .jot-form { width: 100%; } .jot-card { display: flex; flex-direction: column; border: 1px solid rgba(220, 220, 220, 0.4); border-radius: var(--radius); background: var(--bg); overflow: hidden; box-shadow: 0 1px 4px 0 rgba(15, 23, 42, 0.06), 0 12px 40px -4px rgba(15, 23, 42, 0.11); } .jot-card__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 12px 20px; background: transparent; } .jot-card__bar--top { position: relative; border-bottom: 1px solid var(--border); } .jot-card__bar--bottom { border-top: 1px solid var(--border); } /* control pills */ .pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--fg); font-size: 12px; font-weight: 400; line-height: 1; white-space: nowrap; font-family: inherit; } .pill--mono { font-family: 'Geist Mono', ui-monospace, monospace; } .pill--tight { padding: 6px 10px; } /* language pill = the styled #syntax