/* ============================================================ FLAPP CMS / CRM — Shared theme + design system Tokens are HSL channels (no hsl() wrap) so that opacity can be applied at the use site: color: hsl(var(--text) / .6) Three themes via class: .light | .dark | .reading. ============================================================ */ /* ---------- DEFAULT (= .dark — preserves current FLAPP feel) ---------- */ :root, html.dark { /* surfaces */ --bg: 222 50% 4%; /* page bg — #030509 */ --bg-elev-1: 217 35% 8%; /* panels / cards */ --bg-elev-2: 218 30% 12%; /* popovers / inputs */ --bg-glass: 220 32% 9%; /* glass background pre-blur */ /* text */ --text: 50 11% 97%; /* hot-white #FAFAF7 */ --text-muted: 30 9% 83%; /* concrete #D9D5CE */ --text-faint: 220 8% 56%; /* slate-500-ish */ /* lines */ --border: 220 15% 22%; /* subtle */ --border-strong:220 18% 32%; /* defined */ /* brand (FLAPP red — kept across themes for brand consistency) */ --accent: 4 70% 39%; /* #A8281F */ --accent-fg: 50 11% 97%; --accent-glow: 4 80% 50%; /* slightly brighter for glow halo */ --accent-soft: 4 70% 39%; /* same hue — opacity tuned at use */ /* status */ --ok: 142 70% 45%; --warn: 38 92% 50%; --err: 0 78% 60%; --info: 213 94% 68%; /* effects */ --shadow-1: 0 1px 2px hsl(220 50% 4% / .50), 0 8px 24px hsl(220 50% 4% / .35); --shadow-2: 0 20px 60px hsl(220 50% 4% / .55), 0 4px 12px hsl(220 50% 4% / .35); --shadow-glow: 0 0 24px hsl(var(--accent-glow) / .28); /* radii (industrial Tamken-style) */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; /* type */ --font-body: 'Inter', system-ui, sans-serif; --font-display: 'Cairo', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-size-base: 15px; --line-height-body: 1.55; /* scroll-reveal motion */ --reveal-distance: 14px; --reveal-duration: .75s; --reveal-ease: cubic-bezier(.2, .8, .2, 1); } /* ---------- LIGHT ---------- */ html.light { --bg: 0 0% 100%; --bg-elev-1: 30 30% 98%; --bg-elev-2: 0 0% 100%; --bg-glass: 0 0% 100%; --text: 220 25% 10%; --text-muted: 220 10% 38%; --text-faint: 220 8% 56%; --border: 220 15% 88%; --border-strong:220 18% 76%; --accent: 4 70% 39%; --accent-fg: 0 0% 100%; --accent-glow: 4 75% 48%; --accent-soft: 4 70% 39%; --shadow-1: 0 1px 2px hsl(220 10% 20% / .07), 0 8px 24px hsl(220 10% 20% / .07); --shadow-2: 0 20px 60px hsl(220 10% 20% / .12), 0 4px 12px hsl(220 10% 20% / .08); --shadow-glow: 0 0 30px hsl(var(--accent-glow) / .18); } /* ---------- READING (warm sepia) ---------- */ html.reading { --bg: 38 38% 92%; /* ≈ #F5EEDF */ --bg-elev-1: 38 45% 95%; --bg-elev-2: 38 30% 88%; --bg-glass: 38 38% 92%; --text: 30 25% 14%; /* dark espresso, not pure black */ --text-muted: 30 12% 38%; --text-faint: 30 10% 50%; --border: 35 22% 78%; --border-strong:35 22% 66%; --accent: 0 55% 36%; /* desaturated red — easier on warm bg */ --accent-fg: 38 45% 95%; --accent-glow: 0 55% 42%; --accent-soft: 0 55% 36%; --shadow-1: 0 1px 2px hsl(30 20% 25% / .07), 0 6px 18px hsl(30 20% 25% / .05); --shadow-2: 0 14px 40px hsl(30 20% 25% / .12); --shadow-glow: 0 0 14px hsl(var(--accent-glow) / .14); --font-size-base: 16.5px; --line-height-body: 1.72; } /* ============================================================ BASE / RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html, body { height: 100%; } html { -webkit-text-size-adjust: 100%; background: hsl(var(--bg)); color: hsl(var(--text)); transition: background-color .3s ease, color .3s ease; } body { font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-body); background: hsl(var(--bg)); color: hsl(var(--text)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: .005em; min-height: 100vh; } /* Subtle atmospherics on the page background — light enough to keep light/reading themes clean */ html.dark body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 70% 50% at 20% 10%, hsl(var(--accent) / .10) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 80% 90%, hsl(213 30% 30% / .20) 0%, transparent 60%); } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } img, svg { display: block; max-width: 100%; } /* ============================================================ TYPOGRAPHY DEFAULTS ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.018em; color: hsl(var(--text)); line-height: 1.15; } h1 { font-size: clamp(28px, 3vw, 36px); } h2 { font-size: clamp(22px, 2.4vw, 28px); } h3 { font-size: 18px; font-weight: 700; } h4 { font-size: 15px; font-weight: 700; } p { color: hsl(var(--text-muted)); } code, kbd, samp { font-family: var(--font-mono); font-size: .92em; } ::selection { background: hsl(var(--accent) / .85); color: hsl(var(--accent-fg)); } /* ============================================================ FOCUS RING ============================================================ */ :focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 2px; border-radius: 4px; } button:focus-visible, .btn:focus-visible { outline-offset: 3px; } /* ============================================================ SCROLLBARS ============================================================ */ * { scrollbar-width: thin; scrollbar-color: hsl(var(--border-strong)) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: hsl(var(--border-strong)); border-radius: 999px; border: 2px solid hsl(var(--bg)); } *::-webkit-scrollbar-thumb:hover { background: hsl(var(--accent) / .7); } /* ============================================================ UTILITY CLASSES ============================================================ */ /* Container */ .container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 24px; position: relative; z-index: 2; } /* Surfaces */ .elev-1 { background: hsl(var(--bg-elev-1)); border: 1px solid hsl(var(--border) / .7); border-radius: var(--radius-lg); } .elev-2 { background: hsl(var(--bg-elev-2)); border: 1px solid hsl(var(--border) / .8); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } /* Glass panel (Tamken signature) */ .glass { background: hsl(var(--bg-glass) / .72); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid hsl(var(--border) / .6); border-radius: var(--radius-lg); } html.light .glass, html.reading .glass { background: hsl(var(--bg-elev-1) / .82); } /* Glow halo around interactive elements */ .glow { box-shadow: var(--shadow-glow); } .glow-hover { transition: box-shadow .25s ease, transform .25s ease; } .glow-hover:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); } /* Subtle SVG noise overlay (data-URI to avoid an extra request) */ .noise { position: relative; } .noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .025; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; } /* Text helpers */ .text-muted { color: hsl(var(--text-muted)); } .text-faint { color: hsl(var(--text-faint)); } .text-accent { color: hsl(var(--accent)); } .text-mono { font-family: var(--font-mono); letter-spacing: .04em; } .text-display { font-family: var(--font-display); } .text-uppercase { text-transform: uppercase; letter-spacing: .14em; } /* Eyebrow / label chip */ .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--accent)); padding: 5px 10px; border: 1px solid hsl(var(--accent) / .35); background: hsl(var(--accent) / .08); border-radius: 999px; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--accent)); box-shadow: 0 0 8px hsl(var(--accent-glow) / .8); } /* Status pills (shared across CMS + CRM) */ .pill { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--bg-elev-2)); color: hsl(var(--text-muted)); line-height: 1.4; } .pill.ok { color: hsl(var(--ok)); border-color: hsl(var(--ok) / .35); background: hsl(var(--ok) / .10); } .pill.warn { color: hsl(var(--warn)); border-color: hsl(var(--warn) / .35); background: hsl(var(--warn) / .10); } .pill.err { color: hsl(var(--err)); border-color: hsl(var(--err) / .35); background: hsl(var(--err) / .10); } .pill.info { color: hsl(var(--info)); border-color: hsl(var(--info) / .35); background: hsl(var(--info) / .10); } .pill.accent { color: hsl(var(--accent)); border-color: hsl(var(--accent) / .35); background: hsl(var(--accent) / .08); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .01em; padding: 9px 16px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: hsl(var(--text)); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; user-select: none; } .btn svg { width: 14px; height: 14px; } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .btn-ghost { color: hsl(var(--text-muted)); border-color: hsl(var(--border-strong)); } .btn-ghost:hover { color: hsl(var(--text)); border-color: hsl(var(--text) / .6); background: hsl(var(--bg-elev-2) / .5); } .btn-quiet { color: hsl(var(--text-muted)); background: hsl(var(--bg-elev-2) / .55); border-color: hsl(var(--border)); } .btn-quiet:hover { color: hsl(var(--text)); background: hsl(var(--bg-elev-2)); border-color: hsl(var(--border-strong)); } .btn-primary, .btn-red { background: hsl(var(--accent)); color: hsl(var(--accent-fg)); border-color: hsl(var(--accent)); box-shadow: 0 6px 16px hsl(var(--accent) / .35); } .btn-primary:hover, .btn-red:hover { transform: translateY(-1px); box-shadow: 0 12px 26px hsl(var(--accent) / .50), var(--shadow-glow); } .btn-white { background: hsl(var(--text)); color: hsl(var(--bg)); border-color: hsl(var(--text)); } .btn-white:hover { transform: translateY(-1px); box-shadow: 0 12px 26px hsl(var(--text) / .25); } .btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 10px; background: hsl(var(--bg-elev-2) / .55); border: 1px solid hsl(var(--border)); color: hsl(var(--text-muted)); } .btn-icon:hover { color: hsl(var(--text)); border-color: hsl(var(--border-strong)); background: hsl(var(--bg-elev-2)); } .btn-icon svg { width: 16px; height: 16px; } /* ============================================================ FORM CONTROLS ============================================================ */ .input { width: 100%; background: hsl(var(--bg-elev-2)); border: 1px solid hsl(var(--border-strong)); border-radius: var(--radius-sm); color: hsl(var(--text)); font-size: 14px; padding: 10px 14px; outline: none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .input::placeholder { color: hsl(var(--text-faint)); } .input:focus { border-color: hsl(var(--accent)); box-shadow: 0 0 0 3px hsl(var(--accent) / .18); } .input--ghost { background: transparent; border-color: hsl(var(--border)); } .input--ghost:focus { background: hsl(var(--bg-elev-2) / .5); } .select { width: 100%; background: hsl(var(--bg-elev-2)); border: 1px solid hsl(var(--border-strong)); border-radius: var(--radius-sm); color: hsl(var(--text)); font-size: 14px; padding: 9px 36px 9px 12px; outline: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, hsl(var(--text-muted)) 50%), linear-gradient(135deg, hsl(var(--text-muted)) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 12px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; cursor: pointer; } html[dir="rtl"] .select { padding: 9px 12px 9px 36px; background-position: 16px 50%, 12px 50%; } .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: hsl(var(--text)); letter-spacing: .015em; } .field-hint { font-size: 11px; color: hsl(var(--text-faint)); } .field-err { font-size: 11.5px; font-weight: 600; color: hsl(var(--err)); min-height: 16px; } /* ============================================================ SEGMENTED CONTROL (used by theme toggle + stage pickers + tabs) ============================================================ */ .seg { display: inline-flex; background: hsl(var(--bg-elev-2) / .55); border: 1px solid hsl(var(--border)); padding: 3px; border-radius: 999px; gap: 2px; } .seg-item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--text-muted)); border-radius: 999px; cursor: pointer; transition: color .2s ease, background .2s ease, box-shadow .2s ease; } .seg-item:hover { color: hsl(var(--text)); } .seg-item svg { width: 13px; height: 13px; } .seg-item.is-active { background: hsl(var(--accent)); color: hsl(var(--accent-fg)); box-shadow: 0 0 0 1px hsl(var(--accent)), 0 4px 12px hsl(var(--accent) / .35); } .seg--lg .seg-item { padding: 8px 16px; font-size: 11px; } /* ============================================================ THEME TOGGLE (specific 3-state) ============================================================ */ .theme-seg .seg-item[data-theme="reading"].is-active { background: hsl(38 60% 50%); color: #1B130B; box-shadow: 0 0 0 1px hsl(38 60% 50%), 0 4px 12px hsl(38 60% 50% / .35); } /* ============================================================ REVEAL / STAGGER (Tamken pattern) ============================================================ */ .reveal { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } .stagger-children > * { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity .6s var(--reveal-ease), transform .6s var(--reveal-ease); } .stagger-children.is-visible > * { opacity: 1; transform: none; } .stagger-children.is-visible > *:nth-child(1) { transition-delay: 0ms; } .stagger-children.is-visible > *:nth-child(2) { transition-delay: 80ms; } .stagger-children.is-visible > *:nth-child(3) { transition-delay: 160ms; } .stagger-children.is-visible > *:nth-child(4) { transition-delay: 240ms; } .stagger-children.is-visible > *:nth-child(5) { transition-delay: 320ms; } .stagger-children.is-visible > *:nth-child(6) { transition-delay: 400ms; } .stagger-children.is-visible > *:nth-child(7) { transition-delay: 480ms; } .stagger-children.is-visible > *:nth-child(8) { transition-delay: 560ms; } @media (prefers-reduced-motion: reduce) { .reveal, .stagger-children > * { opacity: 1; transform: none; transition: none; } } /* ============================================================ DRAWER (slide-out right panel) ============================================================ */ .drawer-backdrop { position: fixed; inset: 0; z-index: 240; background: hsl(220 50% 4% / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(880px, 100vw); z-index: 250; background: hsl(var(--bg-elev-1)); border-inline-start: 1px solid hsl(var(--border-strong)); box-shadow: -30px 0 60px hsl(220 50% 4% / .35); transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; } html[dir="rtl"] .drawer { transform: translateX(-100%); } .drawer.is-open { transform: translateX(0); } .drawer-head { position: sticky; top: 0; z-index: 2; background: hsl(var(--bg-elev-1)); border-bottom: 1px solid hsl(var(--border)); padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .drawer-head h2 { font-size: 19px; font-weight: 800; color: hsl(var(--text)); letter-spacing: -.012em; } .drawer-head .sub { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--accent)); margin-top: 4px; } .drawer-body { flex: 1; overflow-y: auto; padding: 22px 28px; } .drawer-foot { position: sticky; bottom: 0; z-index: 2; background: hsl(var(--bg-elev-1)); border-top: 1px solid hsl(var(--border)); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .drawer-close { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; background: hsl(var(--bg-elev-2)); border: 1px solid hsl(var(--border)); color: hsl(var(--text-muted)); transition: all .2s ease; } .drawer-close:hover { color: hsl(var(--text)); border-color: hsl(var(--border-strong)); } /* ============================================================ MODAL (smaller — confirms / single-step) ============================================================ */ .modal-backdrop { position: fixed; inset: 0; z-index: 260; background: hsl(220 50% 4% / .65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 20px; } .modal-backdrop.is-open { display: flex; } .modal { width: 100%; max-width: 480px; background: hsl(var(--bg-elev-1)); border: 1px solid hsl(var(--border-strong)); border-radius: var(--radius-xl); padding: 26px 28px 22px; box-shadow: var(--shadow-2); animation: modal-pop .3s cubic-bezier(.2, .8, .2, 1); } @keyframes modal-pop { from { transform: scale(.96) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } /* ============================================================ TOAST ============================================================ */ .toast { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 500; background: hsl(var(--bg-elev-2)); color: hsl(var(--text)); border: 1px solid hsl(var(--border-strong)); border-left: 3px solid hsl(var(--accent)); padding: 12px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-2); font-size: 13.5px; font-weight: 500; opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s ease; max-width: 360px; } html[dir="rtl"] .toast { border-left: 1px solid hsl(var(--border-strong)); border-right: 3px solid hsl(var(--accent)); } .toast.is-show { opacity: 1; transform: translateY(0); } .toast.is-ok { border-inline-start-color: hsl(var(--ok)); } .toast.is-err { border-inline-start-color: hsl(var(--err)); } .toast.is-info{ border-inline-start-color: hsl(var(--info)); } /* ============================================================ COMMAND PALETTE ============================================================ */ .palette-backdrop { position: fixed; inset: 0; z-index: 270; background: hsl(220 50% 4% / .60); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; } .palette-backdrop.is-open { display: flex; } .palette { width: 100%; max-width: 640px; background: hsl(var(--bg-elev-1) / .96); backdrop-filter: blur(20px) saturate(160%); border: 1px solid hsl(var(--border-strong)); border-radius: var(--radius-md); box-shadow: var(--shadow-2); overflow: hidden; animation: modal-pop .25s cubic-bezier(.2, .8, .2, 1); } .palette-input { width: 100%; background: transparent; border: none; outline: none; color: hsl(var(--text)); font-size: 16px; padding: 16px 20px; border-bottom: 1px solid hsl(var(--border)); } .palette-input::placeholder { color: hsl(var(--text-faint)); } .palette-list { max-height: 50vh; overflow-y: auto; padding: 6px; } .palette-group { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--text-faint)); padding: 12px 14px 6px; } .palette-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; color: hsl(var(--text-muted)); } .palette-item .ic { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: hsl(var(--bg-elev-2)); border: 1px solid hsl(var(--border)); color: hsl(var(--text-muted)); flex-shrink: 0; } .palette-item .ic svg { width: 14px; height: 14px; } .palette-item .label { flex: 1; min-width: 0; color: hsl(var(--text)); font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .palette-item .meta { color: hsl(var(--text-faint)); font-size: 11px; font-family: var(--font-mono); letter-spacing: .04em; } .palette-item.is-active, .palette-item:hover { background: hsl(var(--accent) / .12); color: hsl(var(--text)); } .palette-empty { text-align: center; padding: 24px; color: hsl(var(--text-faint)); font-size: 13px; } /* ============================================================ POWER TABLE (Attio-inspired filterable list) ============================================================ */ .power-table-wrap { background: hsl(var(--bg-elev-1)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; } .power-table-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--bg-elev-1)); flex-wrap: wrap; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; font-weight: 500; color: hsl(var(--text-muted)); background: hsl(var(--bg-elev-2)); border: 1px solid hsl(var(--border)); border-radius: 999px; cursor: pointer; transition: all .2s ease; } .filter-chip:hover { color: hsl(var(--text)); border-color: hsl(var(--border-strong)); } .filter-chip.is-active { background: hsl(var(--accent) / .12); border-color: hsl(var(--accent) / .35); color: hsl(var(--accent)); } .filter-chip .x { font-size: 14px; opacity: .55; margin-inline-start: 2px; } .filter-chip .x:hover { opacity: 1; } .power-table { width: 100%; border-collapse: collapse; min-width: 720px; } .power-table thead th { position: sticky; top: 0; background: hsl(var(--bg-elev-1)); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--text-faint)); text-align: start; padding: 12px 16px; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; } .power-table tbody td { padding: 12px 16px; border-bottom: 1px solid hsl(var(--border) / .55); font-size: 13.5px; color: hsl(var(--text-muted)); vertical-align: middle; } .power-table tbody tr { cursor: pointer; transition: background .15s ease; } .power-table tbody tr:hover td { background: hsl(var(--accent) / .04); } .power-table tbody tr.is-selected td { background: hsl(var(--accent) / .08); } .power-table tbody tr:last-child td { border-bottom: none; } .power-table .cell-title { color: hsl(var(--text)); font-weight: 600; display: block; } .power-table .cell-sub { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: hsl(var(--text-faint)); letter-spacing: .04em; } .power-table-foot { padding: 10px 16px; border-top: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: hsl(var(--text-faint)); letter-spacing: .06em; } /* Bulk-select bottom toolbar */ .bulk-bar { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 220; display: inline-flex; align-items: center; gap: 12px; background: hsl(var(--bg-elev-2)); border: 1px solid hsl(var(--border-strong)); border-radius: 999px; padding: 6px 8px 6px 18px; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .bulk-bar.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .bulk-bar .count { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: hsl(var(--text)); letter-spacing: .04em; } .bulk-bar .sep { width: 1px; height: 20px; background: hsl(var(--border-strong)); } .bulk-bar .btn { padding: 7px 12px; font-size: 12px; } /* ============================================================ EMPTY STATE (CSS-only concentric-ring illustration) ============================================================ */ .empty-state { text-align: center; padding: 60px 20px 70px; } .empty-illu { width: 120px; height: 120px; margin: 0 auto 20px; position: relative; } .empty-illu::before, .empty-illu::after { content: ""; position: absolute; inset: 0; border: 1px solid hsl(var(--border-strong)); border-radius: 50%; opacity: .35; } .empty-illu::after { inset: 16px; border: 1px dashed hsl(var(--border-strong)); opacity: .6; } .empty-illu .core { position: absolute; inset: 32px; border-radius: 50%; background: hsl(var(--bg-elev-2)); border: 1px solid hsl(var(--border-strong)); display: flex; align-items: center; justify-content: center; color: hsl(var(--accent)); } .empty-illu .core svg { width: 26px; height: 26px; } .empty-state h3 { color: hsl(var(--text)); font-size: 17px; margin-bottom: 6px; } .empty-state p { color: hsl(var(--text-muted)); font-size: 13.5px; margin-bottom: 20px; max-width: 380px; margin-inline: auto; } /* ============================================================ KEYBOARD SHORTCUT HINT (kbd pills) ============================================================ */ .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: hsl(var(--bg-elev-2)); border: 1px solid hsl(var(--border-strong)); border-bottom-width: 2px; border-radius: 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: hsl(var(--text-muted)); } /* ============================================================ READING MODE — typographic refinements for long-form (applied wherever a .cms-body element wraps article content) ============================================================ */ .cms-body { font-size: var(--font-size-base); line-height: var(--line-height-body); color: hsl(var(--text)); max-width: 68ch; margin-inline: auto; } .cms-body h1, .cms-body h2, .cms-body h3 { margin-top: 1.6em; margin-bottom: .55em; } .cms-body p, .cms-body ul, .cms-body ol, .cms-body blockquote { margin-bottom: 1em; } .cms-body ul, .cms-body ol { padding-inline-start: 1.4em; } .cms-body a { color: hsl(var(--accent)); text-decoration: underline; text-underline-offset: 3px; } .cms-body blockquote { border-inline-start: 3px solid hsl(var(--accent)); padding: .25em 0 .25em 1em; color: hsl(var(--text-muted)); font-style: italic; } .cms-body img { border-radius: var(--radius-md); margin: 1.2em 0; } .cms-body code { background: hsl(var(--bg-elev-2)); padding: 1px 6px; border-radius: 4px; } html.reading .cms-body p { letter-spacing: .002em; }