/* ── Self-hosted webfont ───────────────────────────────────────────── Inter (OFL-licensed), 4 static weights, downloaded once rather than loaded from Google's CDN — matches the rest of this app's zero third-party-request policy. Falls back to the system-font stack below if a file ever fails to load. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/web/Inter-Regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/web/Inter-Medium.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/web/Inter-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/web/Inter-Bold.woff2') format('woff2'); } /* ── Design tokens ────────────────────────────────────────────────── Single source of truth for color/spacing/radius/shadow, replacing what used to be ~15 ad hoc grays, 3 competing blues, and 4 shadow opacities scattered across this file. Every rule below should reference these instead of a literal hex/px value. */ :root { --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --color-brand: #5B4FE8; --color-brand-hover: #4438C7; --color-brand-tint: #EFECFE; --color-brand-light: #C9C2FA; --color-accent: #FF6B57; --color-accent-hover: #E5503C; --gray-900: #171717; --gray-700: #3A3A3A; --gray-600: #5B5B5B; --gray-500: #7A7A7A; --gray-400: #9B9B9B; --gray-200: #E4E2DC; --gray-100: #F5F4F0; --gray-50: #F3F2EF; --color-success-bg: #E6F4EA; --color-success-text: #1E7E34; --color-warning-bg: #FFF3E0; --color-warning-text: #E65100; --color-danger-bg: #FDECEA; --color-danger-text: #C0392B; --color-danger-border: #F3C6C1; --color-info-bg: var(--color-brand-tint); --color-info-text: var(--color-brand); --color-neutral-bg: #F1F0EC; --color-neutral-text: var(--gray-600); --color-purple-bg: #F3E8FF; --color-purple-text: #7B1FA2; /* Card/sidebar/input backgrounds — kept as its own token (rather than literal white) so [data-theme="dark"] below can redefine it in one place instead of hunting down every hardcoded "white"/"#fff". */ --color-surface: #FFFFFF; --color-surface-alt: var(--gray-100); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 14px; --radius-pill: 999px; --shadow-sm: 0 1px 4px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.12); --shadow-lg: 0 4px 24px rgba(0,0,0,0.14); --focus-ring: 0 0 0 3px rgba(91,79,232,0.25); } /* ── Dark theme ────────────────────────────────────────────────────── Every rule in this file reads colors from the tokens above, so a dark theme is just redefining those same custom properties — no rule below this point needs to know which theme is active. includes/layout_top.php sets data-theme="dark"/"light" on from the user's saved preference (api/set_theme.php); when unset (no preference saved yet) the prefers-color-scheme block mirrors the same values so a first visit still respects the OS setting. */ :root[data-theme="dark"] { --color-brand: #8B7FFF; --color-brand-hover: #A79BFF; --color-brand-tint: rgba(91,79,232,0.18); --color-brand-light: #B3A8FA; --color-accent: #FF8A78; --color-accent-hover: #FFA697; --gray-900: #E8EAF0; --gray-700: #C7CAD3; --gray-600: #9CA0AC; --gray-500: #6B7280; --gray-400: #565B66; --gray-200: #2A2D3A; --gray-100: #20232E; --gray-50: #0F1117; --color-success-bg: rgba(16,185,129,0.15); --color-success-text: #34D399; --color-warning-bg: rgba(245,158,11,0.15); --color-warning-text: #FBBF24; --color-danger-bg: rgba(239,68,68,0.15); --color-danger-text: #F87171; --color-danger-border: rgba(239,68,68,0.35); --color-info-bg: var(--color-brand-tint); --color-info-text: #A79BFF; --color-neutral-bg: rgba(255,255,255,0.06); --color-neutral-text: var(--gray-600); --color-purple-bg: rgba(168,85,247,0.15); --color-purple-text: #C084FC; --color-surface: #1A1D27; --color-surface-alt: var(--gray-100); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-brand: #8B7FFF; --color-brand-hover: #A79BFF; --color-brand-tint: rgba(91,79,232,0.18); --color-brand-light: #B3A8FA; --color-accent: #FF8A78; --color-accent-hover: #FFA697; --gray-900: #E8EAF0; --gray-700: #C7CAD3; --gray-600: #9CA0AC; --gray-500: #6B7280; --gray-400: #565B66; --gray-200: #2A2D3A; --gray-100: #20232E; --gray-50: #0F1117; --color-success-bg: rgba(16,185,129,0.15); --color-success-text: #34D399; --color-warning-bg: rgba(245,158,11,0.15); --color-warning-text: #FBBF24; --color-danger-bg: rgba(239,68,68,0.15); --color-danger-text: #F87171; --color-danger-border: rgba(239,68,68,0.35); --color-info-bg: var(--color-brand-tint); --color-info-text: #A79BFF; --color-neutral-bg: rgba(255,255,255,0.06); --color-neutral-text: var(--gray-600); --color-purple-bg: rgba(168,85,247,0.15); --color-purple-text: #C084FC; --color-surface: #1A1D27; --color-surface-alt: var(--gray-100); } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--gray-50); color: var(--gray-900); font-size: 15px; } a { color: var(--color-brand); } /* Visible on every focusable element — the previous version only had :hover states, leaving keyboard users with no indication of focus. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } /* ── Layout ── */ .app { display: flex; height: 100vh; overflow: hidden; } .main { flex: 1; overflow-y: auto; padding: var(--space-7) var(--space-6); } /* ── Sidebar ── */ .sidebar { width: 220px; background: var(--color-surface); border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; flex-shrink: 0; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--gray-200); } .sidebar-brand svg { width: 26px; height: 26px; flex-shrink: 0; } .sidebar-brand span { font-weight: 700; font-size: 15px; color: var(--color-brand); } nav { padding: 12px 0; flex: 1; } nav a { display: flex; align-items: center; gap: 10px; padding: 10px var(--space-5); color: var(--gray-600); text-decoration: none; font-size: 14px; border-right: 3px solid transparent; transition: background 0.12s, color 0.12s; } nav a svg { width: 18px; height: 18px; flex-shrink: 0; } nav a:hover { background: var(--gray-50); color: var(--gray-900); } nav a.active { background: var(--color-brand-tint); color: var(--color-brand); font-weight: 600; border-right-color: var(--color-brand); } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--gray-200); } .avatar { width: 34px; height: 34px; background: var(--color-brand); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .user-name { font-size: 13px; font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .logout-link { font-size: 12px; color: var(--gray-500); text-decoration: none; } .logout-link:hover { color: var(--color-danger-text); } .theme-toggle-btn { flex-shrink: 0; width: 30px; height: 30px; border: 1px solid var(--gray-200); border-radius: 50%; background: var(--color-surface); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0; } .theme-toggle-btn:hover { border-color: var(--color-brand); } /* ── Page header ── */ .page-header { display: flex; align-items: baseline; gap: 14px; margin-bottom: var(--space-6); } .page-header h1 { font-size: 22px; font-weight: 700; color: var(--gray-900); } .date-label { font-size: 14px; color: var(--gray-500); } /* ── Post card ── */ .post-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); } .post-meta-bar { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-5); flex-wrap: wrap; } .badge { padding: 3px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; } .badge-campaign { background: var(--color-info-bg); color: var(--color-info-text); } .badge-single-image { background: var(--color-success-bg); color: var(--color-success-text); } .badge-carousel { background: var(--color-warning-bg); color: var(--color-warning-text); } .badge-text-post { background: var(--color-neutral-bg); color: var(--color-neutral-text); } .badge-poll { background: var(--color-purple-bg); color: var(--color-purple-text); } .post-title-text { font-size: 14px; color: var(--gray-700); font-weight: 500; } .post-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } /* ── Slide preview ── */ .slides-panel { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); background: var(--gray-100); border-radius: var(--radius-md); padding: var(--space-4); } .slide-frame img { max-width: 100%; border-radius: var(--radius-sm); box-shadow: 0 2px 10px rgba(0,0,0,0.12); display: block; } .slide-nav { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--gray-600); } .slide-btn { background: var(--color-surface); border: 1px solid var(--gray-200); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: border-color 0.12s; } .slide-btn:hover { border-color: var(--color-brand); color: var(--color-brand); } .slide-hint { font-size: 12px; color: var(--gray-500); } .no-slides { text-align: center; color: var(--gray-500); padding: 40px 0; } .no-slides .hint { font-size: 12px; margin-top: 6px; } /* ── Editor ── */ .editor-panel { display: flex; flex-direction: column; gap: 10px; } .editor-label { font-size: 13px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.04em; } .toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: var(--space-2) var(--space-3); background: var(--gray-100); border: 1px solid var(--gray-200); border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0; } .tool-btn { padding: 4px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; font-size: 14px; color: var(--gray-700); transition: all 0.12s; } .tool-btn:hover { background: var(--color-brand-tint); border-color: var(--color-brand); color: var(--color-brand); } .bold-btn { font-weight: 900; } .italic-btn { font-style: italic; font-weight: 600; } .clear-btn { font-size: 12px; color: var(--gray-500); } .toolbar-divider { width: 1px; height: 20px; background: var(--gray-200); margin: 0 4px; } .toolbar-spacer { flex: 1; } .char-count { font-size: 12px; color: var(--gray-500); white-space: nowrap; } .toolbar-picker-wrap { position: relative; } .emoji-picker { position: absolute; top: 36px; left: 0; z-index: 20; grid-template-columns: repeat(10, 1fr); gap: 2px; width: 260px; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .mention-picker { grid-template-columns: 1fr; width: 240px; max-height: 220px; overflow-y: auto; } .mention-option { display: block; width: 100%; text-align: left; border: none; background: none; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; } .mention-option:hover { background: var(--color-brand-tint); } .mention-option .mention-type { color: var(--gray-500); font-size: 11px; margin-left: 6px; } .mention-picker-empty { padding: 10px; font-size: 13px; color: var(--gray-500); } .emoji-option { border: none; background: none; font-size: 18px; line-height: 1; padding: 4px; border-radius: var(--radius-sm); cursor: pointer; } .emoji-option:hover { background: var(--color-brand-tint); } .caption-editor { width: 100%; height: 260px; padding: var(--space-4); border: 1px solid var(--gray-200); border-radius: 0 0 var(--radius-md) var(--radius-md); font-family: inherit; font-size: 14px; line-height: 1.65; resize: vertical; outline: none; color: var(--gray-900); background: var(--color-surface); } .caption-editor:focus { border-color: var(--color-brand); box-shadow: var(--focus-ring); } .editor-footer { } .editor-hint { font-size: 12px; color: var(--gray-400); } .post-status { padding: 11px 16px; border-radius: var(--radius-md); font-size: 14px; text-align: center; font-weight: 500; } .post-status.success { background: var(--color-success-bg); color: var(--color-success-text); } .post-status.error { background: var(--color-danger-bg); color: var(--color-danger-text); } /* ── Empty state ── */ .empty-state { text-align: center; padding: 80px 20px; color: var(--gray-500); } .empty-state svg { margin-bottom: 20px; } .empty-state h2 { font-size: 20px; color: var(--gray-700); margin-bottom: 8px; } .empty-state a { color: var(--color-brand); text-decoration: none; } /* ── Calendar ── */ .calendar-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); } .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: var(--space-2); } .cal-weekdays span { text-align: center; font-size: 12px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 0; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-cell { min-height: 84px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--space-2); background: var(--color-surface); display: flex; flex-direction: column; gap: 4px; } .cal-cell.empty { background: transparent; border-color: transparent; } .cal-cell.is-today { border-color: var(--color-brand); border-width: 2px; } .cal-cell.has-post { background: var(--color-brand-tint); overflow-y: auto; } .cal-post-row { display: flex; flex-direction: column; gap: 2px; padding: 3px 4px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; } .cal-post-row:hover { background: var(--color-surface); } .cal-post-row + .cal-post-row { margin-top: 2px; } .cal-day { font-size: 13px; font-weight: 700; color: var(--gray-900); } .is-today .cal-day { color: var(--color-brand); } .cal-fmt { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-pill); align-self: flex-start; text-transform: uppercase; letter-spacing: 0.03em; } .cal-fmt-single-image { background: var(--color-success-bg); color: var(--color-success-text); } .cal-fmt-carousel { background: var(--color-warning-bg); color: var(--color-warning-text); } .cal-fmt-text-post { background: var(--color-neutral-bg); color: var(--color-neutral-text); } .cal-fmt-poll { background: var(--color-purple-bg); color: var(--color-purple-text); } .cal-badges { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .cal-status { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; } .cal-status-draft { background: var(--color-neutral-bg); color: var(--color-neutral-text); } .cal-status-scheduled { background: var(--color-info-bg); color: var(--color-info-text); } .cal-status-posted { background: var(--color-success-bg); color: var(--color-success-text); } .cal-status-failed { background: var(--color-danger-bg); color: var(--color-danger-text); } .cal-title { font-size: 11px; color: var(--gray-600); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cal-legend { display: flex; gap: 20px; margin-top: var(--space-4); padding: 0 4px; } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500); } .dot { width: 10px; height: 10px; border-radius: 50%; } .dot-image { background: var(--color-success-text); } .dot-carousel { background: var(--color-warning-text); } .dot-text-post { background: var(--gray-400); } .dot-poll { background: var(--color-purple-text); } /* ── Auth / Setup pages ── */ body.centered-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--gray-50); } .auth-card { background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-8); width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); text-align: center; } .auth-logo { margin-bottom: var(--space-4); } .auth-card h1 { font-size: 22px; font-weight: 700; margin-bottom: var(--space-2); } .subtitle { color: var(--gray-500); font-size: 14px; margin-bottom: var(--space-7); line-height: 1.5; } .form-group { text-align: left; margin-bottom: var(--space-5); } .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; } .optional { font-weight: 400; color: var(--gray-400); } .hint { font-size: 12px; color: var(--gray-500); margin-top: 4px; } .redirect-notice { background: var(--color-warning-bg); border: 1px solid var(--color-warning-text); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 13px; color: var(--gray-600); text-align: left; margin-bottom: var(--space-6); line-height: 1.6; } .redirect-notice code { display: block; background: var(--color-surface); border: 1px solid var(--color-warning-text); border-radius: var(--radius-sm); padding: 4px 8px; margin-top: 6px; font-size: 12px; color: var(--color-brand); word-break: break-all; } /* ── Buttons ────────────────────────────────────────────────────── .btn-primary / .btn-linkedin / .post-btn were three independent near-identical pill-button definitions — merged into one rule so a "primary action" looks identical everywhere, keeping all 3 class names since dozens of pages already reference them. */ .btn-primary, .btn-linkedin, .post-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--color-brand); color: white; border: none; border-radius: var(--radius-pill); padding: 13px 32px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.15s; } .btn-primary, .post-btn { width: 100%; } .btn-primary:hover, .btn-linkedin:hover, .post-btn:hover:not(:disabled) { background: var(--color-brand-hover); } .post-btn:disabled { background: var(--gray-400); cursor: not-allowed; } .link-muted { color: var(--gray-500); font-size: 13px; text-decoration: none; white-space: nowrap; } .link-muted:hover { color: var(--gray-600); } /* ── Flash messages, cards, forms, accounts, import wizard ── */ .flash { padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-size: 14px; margin-bottom: var(--space-5); } .flash-error { background: var(--color-danger-bg); color: var(--color-danger-text); } .flash-success { background: var(--color-success-bg); color: var(--color-success-text); } /* Shared input styling for every form container in the app (formerly 6 near-duplicate blocks: .form-group, .stacked-form, .field-row, .nickname-input, .mapping-select, .editor-panel — all still work, they just resolve through one rule now). The :not(:where(...)) exclusion keeps this OFF checkbox/radio/color inputs — without it a checkbox nested anywhere in a .stacked-form/.form-group inherited width:100% and 14px padding, stretching the native control into a huge invisible click target with its tiny glyph adrift somewhere inside (every .checkbox-row across Settings/Knowledge Hub/News Studio had this bug), and a color swatch/hex pair (.color-field below) got stretched and squashed the same way. Wrapping the exclusion list in :where(...) keeps its specificity contribution at zero — a plain :not(a):not(b) chain would otherwise outrank .color-field's own dedicated sizing rules further down this file and reintroduce the exact bug it was meant to avoid. max-width keeps a field from stretching edge-to-edge on a wide card — a one-word "Personal" in an ~1100px-wide input read as broken/dated, not just spacious. Textareas get a wider cap since paragraph content needs more room per line than a single value. */ .form-group input:not(:where([type="checkbox"], [type="radio"], [type="color"])), .form-group select, .stacked-form input:not(:where([type="checkbox"], [type="radio"], [type="color"])), .stacked-form select, .stacked-form textarea, .field-row input[type="text"], .field-row textarea, .nickname-input, .mapping-select, .editor-panel input[type=text], .editor-panel input[type=date], .editor-panel input[type=time], .editor-panel select { width: 100%; max-width: 520px; padding: 10px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); font-size: 14px; font-family: inherit; outline: none; color: var(--gray-900); background: var(--color-surface); transition: border-color 0.12s, box-shadow 0.12s; } .stacked-form textarea, .field-row textarea { max-width: 720px; } .form-group input:focus, .form-group select:focus, .stacked-form input:focus, .stacked-form select:focus, .stacked-form textarea:focus, .field-row input[type="text"]:focus, .field-row textarea:focus, .nickname-input:focus, .mapping-select:focus, .editor-panel input:focus, .editor-panel select:focus { border-color: var(--color-brand); box-shadow: var(--focus-ring); } .nickname-input, .mapping-select { width: auto; padding: 5px 10px; border-radius: var(--radius-sm); font-size: 13px; } .mapping-select { min-width: 260px; } /* Groups short fields (Name/Email, three-field rows like Founded/Size/ HQ) side by side instead of .stacked-form's default one-per-row — wrap the relevant