@ammduncan/easel 0.2.0

package/dist/client/viewer.css

@@ -0,0 +1,717 @@
+/* ============================================================
+   easel viewer — design tokens (light + dark)
+   Pushed iframes receive the same variable names so authors can
+   reference `var(--ds-ink)` etc. and theme for free.
+   ============================================================ */
+
+/* =========================================================================
+   Design tokens — three presets × two modes.
+   Active = [data-preset][data-theme] on :root, both set by viewer.js bootstrap.
+   ========================================================================= */
+
+/* --- SLATE (light) --- cool neutral, warm putty page */
+:root[data-preset="slate"][data-theme="light"] {
+  --ds-bg: #ecebe5;
+  --ds-bg-elev: #f6f4ee;
+  --ds-surface: #f6f4ee;
+  --ds-surface-soft: #ecebe3;
+  --ds-ink: #1a1916;
+  --ds-ink-soft: #34322d;
+  --ds-muted: #76746c;
+  --ds-line: #d8d5cb;
+  --ds-line-soft: #e1ddd2;
+  --ds-accent: #2f5fd1;
+  --ds-accent-soft: #e4ebfb;
+  --ds-accent-ink: #ffffff;
+  --ds-success: #0f9d6b;
+  --ds-danger: #d64545;
+  --ds-shadow-sm: 0 1px 2px rgba(40, 30, 10, 0.05);
+  --ds-shadow-md: 0 1px 2px rgba(40, 30, 10, 0.05), 0 16px 32px rgba(40, 30, 10, 0.08);
+  --ds-code-bg: #1c1b18;
+  --ds-code-ink: #f1ede1;
+  --ds-topbar-bg: rgba(236, 235, 229, 0.85);
+  --ds-topbar-border: rgba(40, 30, 10, 0.1);
+  --ds-pattern-dot: rgba(40, 30, 10, 0.085);
+  --ds-canvas-bg-image: none;
+  color-scheme: light;
+}
+
+/* --- SLATE (dark) --- cool neutral, cyan accent */
+:root[data-preset="slate"][data-theme="dark"] {
+  --ds-bg: #0c0d10;
+  --ds-bg-elev: #15171c;
+  --ds-surface: #15171c;
+  --ds-surface-soft: #1c1f25;
+  --ds-ink: #f5f5f5;
+  --ds-ink-soft: #d4d4d8;
+  --ds-muted: #9ca3af;
+  --ds-line: #23262d;
+  --ds-line-soft: #1c1f25;
+  --ds-accent: #7dd3fc;
+  --ds-accent-soft: rgba(125, 211, 252, 0.16);
+  --ds-accent-ink: #07242e;
+  --ds-success: #34d399;
+  --ds-danger: #f87171;
+  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --ds-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45);
+  --ds-code-bg: #07080a;
+  --ds-code-ink: #f5f5f5;
+  --ds-topbar-bg: rgba(20, 22, 27, 0.8);
+  --ds-topbar-border: rgba(255, 255, 255, 0.06);
+  --ds-pattern-dot: rgba(255, 255, 255, 0.045);
+  --ds-canvas-bg-image: none;
+  color-scheme: dark;
+}
+
+/* --- PAPER (light) --- pitstop warm cream + deep amber */
+:root[data-preset="paper"][data-theme="light"] {
+  --ds-bg: #f4efe2;
+  --ds-bg-elev: #f8f3e6;
+  --ds-surface: #faf6ee;
+  --ds-surface-soft: #f0ead9;
+  --ds-ink: #2a261e;
+  --ds-ink-soft: #524b3c;
+  --ds-muted: #756c57;
+  --ds-line: #d5cdb6;
+  --ds-line-soft: #e3dcc6;
+  --ds-accent: #c97a1c;
+  --ds-accent-soft: #f7e8c0;
+  --ds-accent-ink: #ffffff;
+  --ds-success: #2d8a4f;
+  --ds-danger: #c43e2f;
+  --ds-shadow-sm: 0 1px 2px rgba(70, 50, 10, 0.06);
+  --ds-shadow-md: 0 1px 2px rgba(70, 50, 10, 0.06), 0 18px 36px rgba(70, 50, 10, 0.1);
+  --ds-code-bg: #2a261e;
+  --ds-code-ink: #eae5d5;
+  --ds-topbar-bg: rgba(244, 239, 226, 0.86);
+  --ds-topbar-border: rgba(70, 50, 10, 0.12);
+  --ds-pattern-dot: rgba(70, 50, 10, 0.085);
+  --ds-canvas-bg-image: none;
+  color-scheme: light;
+}
+
+/* --- PAPER (dark) --- pitstop warm paper, single amber accent, layered depth */
+:root[data-preset="paper"][data-theme="dark"] {
+  --ds-bg: #1c1b18;
+  --ds-bg-elev: #25241f;
+  --ds-surface: #25241f;
+  --ds-surface-soft: #20201c;
+  --ds-ink: #ede9e0;
+  --ds-ink-soft: #bbb5a8;
+  --ds-muted: #888273;
+  --ds-line: #423f37;
+  --ds-line-soft: #312f29;
+  --ds-accent: #f4bf5e;
+  --ds-accent-soft: #3d3322;
+  --ds-accent-ink: #1f1d18;
+  --ds-success: #74ce9a;
+  --ds-danger: #e9836b;
+  --ds-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.5);
+  --ds-shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 1px 2px rgba(0, 0, 0, 0.55), 0 18px 38px rgba(0, 0, 0, 0.45);
+  --ds-code-bg: #161514;
+  --ds-code-ink: #eae5d5;
+  --ds-topbar-bg: rgba(28, 27, 24, 0.85);
+  --ds-topbar-border: rgba(255, 255, 255, 0.06);
+  --ds-pattern-dot: rgba(255, 255, 255, 0.04);
+  --ds-canvas-bg-image: none;
+  color-scheme: dark;
+}
+
+/* --- AURORA (light) --- soft lavender canvas, violet accent */
+:root[data-preset="aurora"][data-theme="light"] {
+  --ds-bg: #f5f3fa;
+  --ds-bg-elev: #fafaff;
+  --ds-surface: #ffffff;
+  --ds-surface-soft: #f0eef7;
+  --ds-ink: #1c1d24;
+  --ds-ink-soft: #4a4d5a;
+  --ds-muted: #7a7d8c;
+  --ds-line: #e1dff0;
+  --ds-line-soft: #ebe9f5;
+  --ds-accent: #6d4eff;
+  --ds-accent-soft: #ebe7ff;
+  --ds-accent-ink: #ffffff;
+  --ds-success: #19a473;
+  --ds-danger: #e25555;
+  --ds-shadow-sm: 0 1px 2px rgba(60, 50, 120, 0.05);
+  --ds-shadow-md: 0 1px 2px rgba(60, 50, 120, 0.05), 0 18px 36px rgba(60, 50, 120, 0.08);
+  --ds-code-bg: #1c1d24;
+  --ds-code-ink: #ebe7ff;
+  --ds-topbar-bg: rgba(245, 243, 250, 0.85);
+  --ds-topbar-border: rgba(60, 50, 120, 0.1);
+  --ds-pattern-dot: rgba(109, 78, 255, 0.07);
+  --ds-canvas-bg-image:
+    radial-gradient(60% 40% at 0% 0%, rgba(109, 78, 255, 0.08), transparent 60%),
+    radial-gradient(60% 40% at 100% 100%, rgba(70, 200, 255, 0.06), transparent 60%);
+  color-scheme: light;
+}
+
+/* --- AURORA (dark) --- deep canvas with violet/blue glow halos */
+:root[data-preset="aurora"][data-theme="dark"] {
+  --ds-bg: #0d0f14;
+  --ds-bg-elev: #14171f;
+  --ds-surface: #161a23;
+  --ds-surface-soft: #11141a;
+  --ds-ink: #e7e9ee;
+  --ds-ink-soft: #b9bdc6;
+  --ds-muted: #8b909a;
+  --ds-line: rgba(143, 160, 200, 0.14);
+  --ds-line-soft: rgba(143, 160, 200, 0.08);
+  --ds-accent: #b8c8ff;
+  --ds-accent-soft: rgba(140, 170, 255, 0.12);
+  --ds-accent-ink: #0d0f14;
+  --ds-success: #6ee7b7;
+  --ds-danger: #ff9d9d;
+  --ds-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.5);
+  --ds-shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 0 0 1px rgba(123, 97, 255, 0.06), 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 80px -20px rgba(123, 97, 255, 0.25);
+  --ds-code-bg: #07080a;
+  --ds-code-ink: #e7e9ee;
+  --ds-topbar-bg: rgba(13, 15, 20, 0.82);
+  --ds-topbar-border: rgba(143, 160, 200, 0.14);
+  --ds-pattern-dot: rgba(140, 170, 255, 0.06);
+  --ds-canvas-bg-image:
+    radial-gradient(60% 40% at 0% 0%, rgba(123, 97, 255, 0.10), transparent 60%),
+    radial-gradient(50% 40% at 100% 100%, rgba(70, 200, 255, 0.06), transparent 60%);
+  color-scheme: dark;
+}
+
+/* Default = paper / dark (when bootstrap hasn't run yet) */
+:root:not([data-preset]):not([data-theme]),
+:root[data-preset="paper"]:not([data-theme]),
+:root:not([data-preset])[data-theme="dark"] {
+  --ds-bg: #1c1b18;
+  --ds-bg-elev: #25241f;
+  --ds-surface: #25241f;
+  --ds-surface-soft: #20201c;
+  --ds-ink: #ede9e0;
+  --ds-ink-soft: #bbb5a8;
+  --ds-muted: #888273;
+  --ds-line: #423f37;
+  --ds-line-soft: #312f29;
+  --ds-accent: #f4bf5e;
+  --ds-accent-soft: #3d3322;
+  --ds-accent-ink: #1f1d18;
+  --ds-shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 1px 2px rgba(0, 0, 0, 0.55), 0 18px 38px rgba(0, 0, 0, 0.45);
+  --ds-topbar-bg: rgba(28, 27, 24, 0.85);
+  --ds-topbar-border: rgba(255, 255, 255, 0.06);
+  --ds-pattern-dot: rgba(255, 255, 255, 0.04);
+  --ds-canvas-bg-image: none;
+  color-scheme: dark;
+}
+
+
+/* ============================================================
+   Reset + page
+   ============================================================ */
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--ds-bg);
+  color: var(--ds-ink);
+  font-family:
+    "Inter",
+    -apple-system,
+    "SF Pro Text",
+    system-ui,
+    sans-serif;
+  font-size: 16px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  transition: background 200ms ease, color 200ms ease;
+}
+
+body {
+  min-height: 100vh;
+  background-image:
+    var(--ds-canvas-bg-image, none),
+    radial-gradient(circle at 1px 1px, var(--ds-pattern-dot) 1px, transparent 0);
+  background-size: auto, 22px 22px;
+  background-attachment: fixed;
+  background-repeat: no-repeat, repeat;
+}
+
+/* ============================================================
+   Topbar
+   ============================================================ */
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 20px;
+  background: var(--ds-topbar-bg);
+  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(140%);
+  border-bottom: 1px solid var(--ds-topbar-border);
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+
+.topbar-left,
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex-wrap: nowrap;
+}
+
+.topbar-left { flex: 1 1 auto; min-width: 0; }
+.topbar-right { flex: 0 0 auto; }
+
+.topbar * {
+  white-space: nowrap;
+}
+
+.session-pill {
+  max-width: clamp(80px, 30vw, 280px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.back-link { flex-shrink: 0; }
+.brand { flex-shrink: 0; }
+.brand > span:last-child { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: clamp(60px, 18vw, 220px); display: inline-block; }
+.count { flex-shrink: 0; }
+.live { flex-shrink: 0; }
+
+/* Progressive collapse for narrow windows */
+@media (max-width: 1100px) {
+  .count { display: none; }
+}
+@media (max-width: 900px) {
+  .session-pill { max-width: 140px; }
+  .live span:not(.live-dot) { display: none; }
+}
+@media (max-width: 740px) {
+  .topbar { padding: 10px 14px; gap: 8px; }
+  .topbar-left, .topbar-right { gap: 8px; }
+  .back-link span { display: none; }
+  .back-link::before { content: "←"; font-size: 14px; }
+  .session-pill { max-width: 100px; font-size: 11px; padding: 4px 8px; }
+}
+@media (max-width: 600px) {
+  .preset-group { display: none; }
+  .brand > span:last-child { display: none; }
+  .session-pill { display: none; }
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--ds-ink);
+}
+
+.brand > span:last-child {
+  cursor: text;
+  padding: 2px 6px;
+  margin: -2px -6px;
+  border-radius: 6px;
+  transition: background 120ms ease;
+}
+.brand > span:last-child:hover {
+  background: var(--ds-surface-soft);
+}
+
+.project-label-input {
+  height: 28px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  background: var(--ds-surface);
+  color: var(--ds-ink);
+  border: 1px solid var(--ds-accent);
+  box-shadow: 0 0 0 3px var(--ds-accent-soft);
+  border-radius: 6px;
+  padding: 0 8px;
+  outline: none;
+  max-width: clamp(80px, 22vw, 260px);
+}
+
+.brand-mark {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: linear-gradient(135deg, var(--ds-accent), color-mix(in srgb, var(--ds-accent) 60%, #ec4899));
+  position: relative;
+  overflow: hidden;
+}
+
+.brand-mark::after {
+  content: "";
+  position: absolute;
+  inset: 30% 30% 30% 30%;
+  border-radius: 999px;
+  background: var(--ds-bg-elev);
+}
+
+.session-pill {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: var(--ds-accent-soft);
+  color: var(--ds-accent);
+  letter-spacing: 0.01em;
+}
+
+.count {
+  font-size: 13px;
+  color: var(--ds-muted);
+}
+
+.live {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--ds-muted);
+}
+
+.live-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--ds-success);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-success) 22%, transparent);
+  transition: background 200ms, box-shadow 200ms;
+}
+
+.live-dot.offline {
+  background: var(--ds-danger);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-danger) 22%, transparent);
+}
+
+/* Theme toggle */
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  border: 1px solid var(--ds-line);
+  background: var(--ds-surface);
+  color: var(--ds-ink-soft);
+  cursor: pointer;
+  transition:
+    background 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease,
+    transform 120ms ease;
+}
+
+.theme-toggle:hover {
+  background: var(--ds-surface-soft);
+  color: var(--ds-ink);
+}
+
+.theme-toggle:active {
+  transform: scale(0.96);
+}
+
+.theme-toggle svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+:root[data-theme="dark"] .icon-sun { display: block; }
+:root[data-theme="dark"] .icon-moon { display: none; }
+:root[data-theme="light"] .icon-sun { display: none; }
+:root[data-theme="light"] .icon-moon { display: block; }
+
+/* ============================================================
+   Feed
+   ============================================================ */
+
+.feed {
+  width: min(94vw, 1600px);
+  margin: 0 auto;
+  padding: 48px 28px 200px;
+}
+
+@media (min-width: 2000px) {
+  .feed { width: min(80vw, 1800px); }
+}
+
+@media (min-width: 2800px) {
+  .feed { width: min(70vw, 2000px); }
+}
+
+.pruned-marker {
+  text-align: center;
+  font-size: 12px;
+  color: var(--ds-muted);
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  padding: 14px 0;
+  border-bottom: 1px dashed var(--ds-line);
+  margin-bottom: 32px;
+}
+
+.empty-state {
+  text-align: center;
+  color: var(--ds-muted);
+  padding: 120px 24px;
+}
+
+.empty-state h2 {
+  font-size: 26px;
+  font-weight: 500;
+  margin: 0 0 10px;
+  color: var(--ds-ink);
+  letter-spacing: -0.015em;
+}
+
+.empty-state p {
+  font-size: 15px;
+  margin: 0;
+  max-width: 420px;
+  margin: 0 auto;
+}
+
+/* ============================================================
+   Push cards
+   ============================================================ */
+
+.push {
+  background: var(--ds-surface);
+  border: 1px solid var(--ds-line);
+  border-radius: 16px;
+  box-shadow: var(--ds-shadow-md);
+  margin-bottom: 28px;
+  scroll-margin-top: 88px;
+}
+
+.push.fresh {
+  animation: pop-in 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+@keyframes pop-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: none; }
+}
+
+.push-meta {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 22px;
+  border-bottom: 1px solid var(--ds-line);
+  background: var(--ds-surface-soft);
+  font-size: 13px;
+  position: sticky;
+  top: 50px;
+  z-index: 5;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.push-index {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  color: var(--ds-muted);
+}
+
+.push-title {
+  flex: 1;
+  font-weight: 600;
+  color: var(--ds-ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: -0.005em;
+}
+
+.push-kind {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--ds-accent-soft);
+  color: var(--ds-accent);
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  letter-spacing: 0.02em;
+  text-transform: lowercase;
+}
+
+.push-time {
+  font-size: 11px;
+  color: var(--ds-muted);
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+}
+
+.push-del,
+.push-export {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  color: var(--ds-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
+}
+.push:hover .push-del,
+.push:hover .push-export {
+  opacity: 0.7;
+}
+.push-del:hover {
+  background: var(--ds-surface-soft);
+  color: var(--ds-danger, #d64545);
+  opacity: 1 !important;
+}
+.push-export:hover {
+  background: var(--ds-surface-soft);
+  color: var(--ds-ink);
+  opacity: 1 !important;
+}
+.push-export[data-loading] {
+  opacity: 1 !important;
+  color: var(--ds-accent);
+  animation: easel-pulse 1.2s ease-in-out infinite;
+}
+@keyframes easel-pulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+.push-del svg,
+.push-export svg {
+  display: block;
+}
+
+.push-body {
+  background: var(--ds-bg-elev);
+  overflow: hidden;
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+
+.push-body iframe {
+  display: block;
+  width: 100%;
+  border: 0;
+  background: var(--ds-bg-elev);
+  overflow: hidden;
+}
+
+/* ============================================================
+   "↓ new" pill
+   ============================================================ */
+
+/* =========================================================================
+   Density: flat — drop card chrome and use whitespace to separate pushes.
+   ========================================================================= */
+:root[data-density="flat"] .push {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  margin-bottom: 0;
+  padding: 0 0 120px;
+  overflow: visible;
+}
+:root[data-density="flat"] .push:first-child { padding-top: 0; }
+:root[data-density="flat"] .push:last-child { padding-bottom: 32px; }
+
+:root[data-density="flat"] .push-meta {
+  position: static;
+  background: transparent;
+  border-bottom: 0;
+  border-radius: 0;
+  padding: 0;
+  margin-bottom: 32px;
+  font-size: 11.5px;
+  color: var(--ds-muted);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+:root[data-density="flat"] .push-title {
+  font-family: "Inter", -apple-system, system-ui, sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ds-ink);
+  letter-spacing: -0.005em;
+}
+
+:root[data-density="flat"] .push-body {
+  background: transparent;
+  overflow: visible;
+  border-radius: 0;
+}
+
+:root[data-density="flat"] .push-body iframe {
+  background: transparent;
+}
+
+.new-pill[hidden] {
+  display: none !important;
+}
+
+.new-pill {
+  position: fixed;
+  right: 32px;
+  bottom: 32px;
+  z-index: 20;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--ds-accent);
+  color: var(--ds-accent-ink);
+  padding: 11px 20px;
+  border: 0;
+  border-radius: 999px;
+  box-shadow:
+    0 6px 24px color-mix(in srgb, var(--ds-accent) 40%, transparent),
+    0 2px 6px rgba(0, 0, 0, 0.25);
+  font-family:
+    -apple-system,
+    "Inter",
+    system-ui,
+    sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 120ms ease, box-shadow 200ms ease;
+}
+
+.new-pill:hover {
+  transform: translateY(-1px);
+}
+
+.new-pill:active {
+  transform: translateY(0);
+}
+
+.new-pill .pulse {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 28%, transparent);
+}
+
+.new-pill .arrow {
+  font-size: 13px;
+  opacity: 0.9;
+}