/* ================================================================= soflow - Design System Teal & coral · saturated, confident, light-canvas Light + Dark mode via [data-theme] attribute on ================================================================= */ :root, [data-theme="light"] { /* Backgrounds */ --bg: #FFFFFF; /* page background - pure white */ --bg-elevated: #FFFFFF; /* cards on top of bg */ --bg-soft: #F9FAFA; /* sidebar, soft surfaces, trend strips */ --bg-divider: #EAECEC; /* hairline dividers */ /* Text */ --ink: #0F1F1F; /* primary text - deep teal-tinted ink */ --ink-2: #475656; /* secondary text */ --ink-3: #8A9595; /* tertiary - hints, muted */ --ink-on-dark: #FFFFFF; /* text on dark surfaces */ /* Brand sidebar (light variant) */ --side-bg: #F9FAFA; /* sidebar background */ --side-active-bg-1: #0EA5A5; /* active nav gradient start */ --side-active-bg-2: #075E5E; /* active nav gradient end */ --side-text: #2E3838; /* sidebar nav text */ --side-text-active: #FFFFFF; --side-divider: #8A9595; /* sidebar section labels */ --side-border: #EAECEC; /* Brand colors - teal as primary */ --teal: #0EA5A5; --teal-strong: #075E5E; --teal-soft: #CCF1F1; --teal-ink: #075E5E; /* Coral - secondary brand, used for keywords / hot accents */ --coral: #FF8A65; --coral-strong: #C5341F; --coral-soft: #FFE0D6; --coral-ink: #9C3F1A; /* Mustard - warning / issues */ --mustard: #F4B942; --mustard-strong: #C97D14; --mustard-soft: #FFE3B3; --mustard-ink: #7A4A0A; /* Royal blue - AI / informational */ --royal: #3B82F6; --royal-strong: #1E3A8A; --royal-soft: #DCE8FE; --royal-ink: #1E3A8A; /* Legacy aliases (so existing pages keep working) - mapped to new palette */ --mint: var(--teal-soft); --mint-ink: var(--teal-ink); --butter: var(--mustard-soft); --butter-ink: var(--mustard-ink); --blush: var(--coral-soft); --blush-ink: var(--coral-ink); --lav: var(--royal-soft); --lav-ink: var(--royal-ink); /* Functional/status (semantic) */ --good: var(--teal-soft); --good-ink: var(--teal-ink); --warn: var(--mustard-soft); --warn-ink: var(--mustard-ink); --bad: var(--coral-soft); --bad-ink: var(--coral-ink); --link: var(--royal); --link-strong: var(--royal-strong); /* Borders */ --border: rgba(15, 31, 31, 0.08); --border-strong: rgba(15, 31, 31, 0.16); --focus-ring: rgba(14, 165, 165, 0.2); /* Shape */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px; /* Layout */ --sidebar-w: 232px; /* Shadow */ --lift: 0 1px 2px rgba(15, 31, 31, 0.04); --lift-lg: 0 4px 20px rgba(15, 31, 31, 0.06); --lift-stat: 0 10px 30px rgba(14, 165, 165, 0.18); } [data-theme="dark"] { --bg: #0A1414; --bg-elevated: #0F1F1F; --bg-soft: #14242A; --bg-divider: #1F3030; --ink: #F4F8F8; --ink-2: #A8B4B4; --ink-3: #7A8888; --ink-on-dark: #FFFFFF; --side-bg: #0A1414; --side-active-bg-1: #0EA5A5; --side-active-bg-2: #075E5E; --side-text: #B0BEBE; --side-text-active: #FFFFFF; --side-divider: #5A6868; --side-border: #1F3030; --teal: #2DD4BF; --teal-strong: #0EA5A5; --teal-soft: #14383A; --teal-ink: #5EEAD4; --coral: #FF8A65; --coral-strong: #FF6B4A; --coral-soft: #3A1F18; --coral-ink: #FFB59A; --mustard: #F4B942; --mustard-strong: #F4B942; --mustard-soft: #3A2810; --mustard-ink: #F5C87E; --royal: #60A5FA; --royal-strong: #3B82F6; --royal-soft: #1A2440; --royal-ink: #93B8FA; --mint: var(--teal-soft); --mint-ink: var(--teal-ink); --butter: var(--mustard-soft); --butter-ink: var(--mustard-ink); --blush: var(--coral-soft); --blush-ink: var(--coral-ink); --lav: var(--royal-soft); --lav-ink: var(--royal-ink); --good: var(--teal-soft); --good-ink: var(--teal-ink); --warn: var(--mustard-soft); --warn-ink: var(--mustard-ink); --bad: var(--coral-soft); --bad-ink: var(--coral-ink); --link: var(--royal); --link-strong: var(--royal-strong); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --focus-ring: rgba(45, 212, 191, 0.25); --lift: 0 1px 2px rgba(0, 0, 0, 0.3); --lift-lg: 0 4px 20px rgba(0, 0, 0, 0.35); --lift-stat: 0 10px 30px rgba(0, 0, 0, 0.4); } /* ================================================================= Base ================================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-strong); } p { margin: 0; } /* ================================================================= App shell ================================================================= */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; padding: 14px; gap: 14px; } .app-content { min-width: 0; /* prevents grid overflow */ padding: 0 6px; } /* ================================================================= SIDEBAR — white canvas variant ================================================================= */ .sidebar { background: var(--side-bg); border: 1px solid var(--side-border); border-radius: var(--r-lg); padding: 18px 0; color: var(--side-text); display: flex; flex-direction: column; position: sticky; top: 14px; height: calc(100vh - 28px); overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 18px 18px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--side-border); margin-bottom: 14px; } .sidebar-brand .brand-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--teal) 0%, var(--teal-strong) 100%); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; box-shadow: 0 4px 12px rgba(14, 165, 165, 0.3); flex-shrink: 0; } .sidebar-brand .brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.4px; color: var(--ink); line-height: 1.1; } .sidebar-brand .brand-sub { display: block; font-size: 10px; color: var(--ink-3); font-weight: 500; margin-top: 1px; } .sidebar-section { font-size: 10px; color: var(--side-divider); padding: 14px 22px 8px; letter-spacing: 1.5px; margin: 0; text-transform: uppercase; font-weight: 700; } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 11px 13px; margin: 0 10px 4px; border-radius: 10px; color: var(--side-text); font-size: 14px; text-decoration: none; transition: background 0.12s ease, color 0.12s ease; font-weight: 500; } .sidebar-link:hover { background: rgba(14, 165, 165, 0.06); color: var(--ink); } .sidebar-link.active { background: linear-gradient(90deg, var(--side-active-bg-1) 0%, var(--side-active-bg-2) 100%); color: var(--side-text-active); font-weight: 600; box-shadow: 0 4px 12px rgba(14, 165, 165, 0.28); } .sidebar-link.active .link-icon { color: var(--side-text-active); } /* The .link-dot is now used as a colored ICON TILE (with optional glyph inside) */ .sidebar-link .link-dot { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .sidebar-link .link-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-2); } .sidebar-link.active .link-dot { /* On active, the colored tile becomes semi-transparent white */ background: rgba(255, 255, 255, 0.22) !important; } .sidebar-link .link-meta { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(15, 31, 31, 0.05); color: var(--ink-2); } .sidebar-link.active .link-meta { background: #FFFFFF; color: var(--teal-strong); } .sidebar-link .link-badge { margin-left: auto; font-size: 9px; color: #FFFFFF; background: linear-gradient(90deg, var(--royal), var(--teal)); padding: 2px 7px; border-radius: var(--r-pill); font-weight: 700; letter-spacing: 0.4px; } .sidebar-link .link-pulse { margin-left: auto; width: 7px; height: 7px; background: var(--coral-strong); border-radius: 50%; box-shadow: 0 0 8px rgba(197, 52, 31, 0.5); } .sidebar-spacer { flex: 1; } .sidebar-user { margin: 0 12px; padding: 12px 13px; border-radius: 12px; display: flex; align-items: center; gap: 10px; background: var(--bg-elevated); border: 1px solid var(--side-border); } .sidebar-user .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--teal) 0%, var(--coral) 100%); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 8px rgba(14, 165, 165, 0.25); } .sidebar-user .user-name { font-size: 13px; color: var(--ink); font-weight: 600; letter-spacing: -0.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user .user-role { font-size: 10px; color: var(--ink-3); font-weight: 500; } .sidebar-user .user-actions { margin-left: auto; display: flex; flex-direction: column; gap: 2px; } .sidebar-user .user-actions a, .sidebar-user .user-actions button { color: var(--ink-3); font-size: 10px; cursor: pointer; } .sidebar-user .user-actions a:hover, .sidebar-user .user-actions button:hover { color: var(--ink); } /* ================================================================= Page header ================================================================= */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; gap: 16px; } .page-header h1 { font-size: 38px; font-weight: 700; color: var(--ink); letter-spacing: -1.4px; line-height: 1; margin: 0; } .page-header .eyebrow { font-size: 11px; color: var(--teal); margin-bottom: 6px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; } .page-header .page-sub { font-size: 13px; color: var(--ink-2); margin-top: 8px; font-weight: 500; } /* ================================================================= Stat hero tiles (saturated gradient cards for top-of-page metrics) Use:
...
Variants: -teal / -coral / -mustard / -royal ================================================================= */ .stat-hero-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; } @media (max-width: 980px) { .stat-hero-grid { grid-template-columns: repeat(2, 1fr); } } .stat-hero { border-radius: 16px; padding: 20px 22px; position: relative; overflow: hidden; color: #FFFFFF; } .stat-hero::before { content: ''; position: absolute; top: -25px; right: -25px; width: 90px; height: 90px; background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%); pointer-events: none; } .stat-hero-teal { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-strong) 100%); box-shadow: 0 10px 30px rgba(14, 165, 165, 0.25); } .stat-hero-coral { background: linear-gradient(135deg, #FF8A65 0%, var(--coral-strong) 100%); box-shadow: 0 10px 30px rgba(233, 75, 60, 0.25); } .stat-hero-mustard { background: linear-gradient(135deg, var(--mustard) 0%, var(--mustard-strong) 100%); box-shadow: 0 10px 30px rgba(244, 185, 66, 0.3); } .stat-hero-royal { background: linear-gradient(135deg, var(--royal) 0%, var(--royal-strong) 100%); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.28); } .stat-hero-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; position: relative; } .stat-hero-icon { width: 24px; height: 24px; background: rgba(255, 255, 255, 0.2); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-hero-label { font-size: 12px; color: #FFFFFF; margin: 0; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.95; } .stat-hero-row { display: flex; align-items: baseline; gap: 10px; position: relative; margin-bottom: 12px; } .stat-hero-value { font-size: 56px; font-weight: 700; margin: 0; letter-spacing: -2.5px; color: #FFFFFF; line-height: 0.9; } .stat-hero-value .pct { font-size: 26px; opacity: 0.7; } .stat-hero-quota { font-size: 14px; color: rgba(255, 255, 255, 0.7); font-weight: 500; } .stat-hero-delta { font-size: 12px; font-weight: 700; background: #FFFFFF; padding: 4px 9px; border-radius: 6px; } .stat-hero-teal .stat-hero-delta { color: var(--teal-strong); } .stat-hero-coral .stat-hero-delta { color: var(--coral-strong); } .stat-hero-mustard .stat-hero-delta { color: var(--mustard-strong); } .stat-hero-royal .stat-hero-delta { color: var(--royal-strong); } .stat-hero-foot { font-size: 12px; color: #FFFFFF; margin: 0; font-weight: 500; opacity: 0.92; position: relative; } .stat-hero-progress { height: 6px; background: rgba(255, 255, 255, 0.18); border-radius: var(--r-pill); overflow: hidden; position: relative; } .stat-hero-progress > div { height: 100%; background: #FFFFFF; border-radius: var(--r-pill); } .stat-hero-bars { display: flex; gap: 3px; align-items: flex-end; height: 14px; position: relative; } .stat-hero-bars > div { flex: 1; border-radius: 1px; background: rgba(255, 255, 255, 0.85); } /* ================================================================= Mini stat tiles (used inside site cards as a 2x2 grid of metrics) ================================================================= */ .stat-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .stat-mini { border-radius: 11px; padding: 12px 14px; } .stat-mini-label { font-size: 10px; margin: 0 0 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .stat-mini-value { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -1px; line-height: 1; } .stat-mini-mustard { background: var(--mustard-soft); } .stat-mini-mustard .stat-mini-label, .stat-mini-mustard .stat-mini-value { color: var(--mustard-ink); } .stat-mini-teal { background: var(--teal-soft); } .stat-mini-teal .stat-mini-label, .stat-mini-teal .stat-mini-value { color: var(--teal-ink); } .stat-mini-coral { background: var(--coral-soft); } .stat-mini-coral .stat-mini-label, .stat-mini-coral .stat-mini-value { color: var(--coral-ink); } .stat-mini-royal { background: var(--royal-soft); } .stat-mini-royal .stat-mini-label, .stat-mini-royal .stat-mini-value { color: var(--royal-ink); } /* ================================================================= Site card (used on /Websites) ================================================================= */ .site-card { background: var(--bg-elevated); border-radius: 16px; padding: 20px; position: relative; overflow: hidden; border: 1px solid var(--bg-divider); box-shadow: var(--lift-lg); text-decoration: none; color: inherit; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; } .site-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(15, 31, 31, 0.08); } .site-card-accent { position: absolute; top: 0; left: 0; right: 0; height: 5px; } .site-card-accent-teal { background: linear-gradient(90deg, #2DD4BF 0%, var(--teal-strong) 100%); } .site-card-accent-coral { background: linear-gradient(90deg, #FF8A65 0%, var(--coral-strong) 100%); } .site-card-accent-mustard { background: linear-gradient(90deg, var(--mustard) 0%, var(--mustard-strong) 100%); } .site-card-accent-royal { background: linear-gradient(90deg, #60A5FA 0%, var(--royal-strong) 100%); } .site-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; padding-top: 6px; gap: 8px; } .site-card-id { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .site-card-avatar { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: #FFFFFF; flex-shrink: 0; } .site-card-avatar-teal { background: linear-gradient(135deg, #2DD4BF 0%, var(--teal-strong) 100%); box-shadow: 0 4px 12px rgba(14, 165, 165, 0.4); } .site-card-avatar-coral { background: linear-gradient(135deg, #FF8A65 0%, var(--coral-strong) 100%); box-shadow: 0 4px 12px rgba(233, 75, 60, 0.4); } .site-card-avatar-mustard { background: linear-gradient(135deg, var(--mustard) 0%, var(--mustard-strong) 100%); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); } .site-card-avatar-royal { background: linear-gradient(135deg, #60A5FA 0%, var(--royal-strong) 100%); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); } .site-card-name { font-size: 16px; font-weight: 700; margin: 0; color: var(--ink); letter-spacing: -0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-card-domain { font-size: 12px; color: var(--ink-3); margin: 3px 0 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Status pill (HEALTHY / ATTENTION) */ .status-pill { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; } .status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; } .status-pill-good { background: var(--teal-soft); color: var(--teal-ink); } .status-pill-good::before { background: var(--teal); } .status-pill-warn { background: var(--coral-soft); color: var(--coral-ink); } .status-pill-warn::before { background: var(--coral-strong); } .status-pill-info { background: var(--royal-soft); color: var(--royal-ink); } .status-pill-info::before { background: var(--royal); } /* Trend strip — small horizontal area inside a card, keyword summary + sparkline */ .trend-strip { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--bg-soft); border-radius: 9px; margin-bottom: 14px; border: 1px solid var(--bg-divider); gap: 10px; } .trend-strip-text { min-width: 0; flex: 1; } .trend-strip-text p { font-size: 11px; color: var(--ink-2); margin: 0; font-weight: 600; } .trend-strip-text .trend-delta { font-size: 10px; margin: 1px 0 0; font-weight: 600; } .trend-delta-up { color: var(--teal-strong); } .trend-delta-down { color: var(--coral-strong); } .trend-delta-flat { color: var(--ink-3); } /* Action chip row (under the trend strip in each site card) */ .chip-row { display: flex; gap: 6px; flex-wrap: wrap; } .chip { padding: 7px 12px; font-size: 12px; color: var(--ink); background: var(--bg-soft); border-radius: 8px; font-weight: 500; text-decoration: none; transition: background 0.12s ease, color 0.12s ease; border: 0; cursor: pointer; } .chip:hover { background: var(--bg-divider); color: var(--ink); } .chip-primary { background: var(--ink); color: #FFFFFF; font-weight: 600; } .chip-primary:hover { background: var(--ink); color: #FFFFFF; opacity: 0.9; } /* ================================================================= Filter tabs (used in the "All / Needs attention / Healthy" row) ================================================================= */ .filter-tabs { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; border-bottom: 1px solid var(--bg-divider); } .filter-tabs-list { display: flex; gap: 24px; font-size: 14px; } .filter-tab { color: var(--ink-2); padding-bottom: 10px; font-weight: 500; text-decoration: none; position: relative; } .filter-tab.active { color: var(--ink); font-weight: 700; } .filter-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2.5px; background: var(--teal); border-radius: 2px; } .filter-tab-count { color: var(--ink-3); font-weight: 500; margin-left: 3px; font-size: 12px; } .filter-tab-count-warn { background: var(--coral-soft); color: var(--coral-ink); padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; margin-left: 4px; } .filter-tab-count-good { background: var(--teal-soft); color: var(--teal-ink); padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; margin-left: 4px; } /* ================================================================= Cards ================================================================= */ .card { background: var(--bg-elevated); border-radius: var(--r-lg); padding: 18px 20px; border: 0.5px solid var(--border); } .card.flat { border: 0; box-shadow: none; } .card-soft { background: var(--bg-soft); border-radius: var(--r-lg); padding: 14px 16px; } .section-title { font-weight: 500; font-size: 14px; color: var(--ink); margin: 0 0 4px; } .section-sub { font-size: 11px; color: var(--ink-3); margin: 0 0 12px; } /* ================================================================= Stat cards (pastel tiles) ================================================================= */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 14px; } .stat { border-radius: var(--r-lg); padding: 16px; position: relative; overflow: hidden; } .stat-mint { background: var(--mint); color: var(--mint-ink); } .stat-butter { background: var(--butter); color: var(--butter-ink); } .stat-blush { background: var(--blush); color: var(--blush-ink); } .stat-lav { background: var(--lav); color: var(--lav-ink); } .stat-plain { background: var(--bg-elevated); color: var(--ink); border: 0.5px solid var(--border); } .stat .stat-label { font-size: 11px; opacity: 0.85; margin-bottom: 14px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } .stat .stat-value { font-size: 36px; font-weight: 700; letter-spacing: -1px; line-height: 1; } .stat .stat-trend { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: var(--r-pill); margin-top: 6px; background: rgba(0, 0, 0, 0.08); } .stat-mint .stat-trend { color: var(--mint-ink); } .stat-butter .stat-trend { color: var(--butter-ink); } .stat-blush .stat-trend { color: var(--blush-ink); } .stat-lav .stat-trend { color: var(--lav-ink); } .stat-row { display: flex; justify-content: space-between; align-items: start; margin-bottom: 16px; } /* ================================================================= Buttons ================================================================= */ .btn { display: inline-flex; align-items: center; gap: 8px; border: none; padding: 9px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: opacity 0.1s ease, transform 0.05s ease; line-height: 1.2; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--ink); color: var(--ink-on-dark); } .btn-primary:hover { opacity: 0.9; color: var(--ink-on-dark); } .btn-soft { background: var(--bg-elevated); color: var(--ink); box-shadow: var(--lift); } .btn-soft:hover { background: var(--bg-soft); color: var(--ink); } .btn-ghost { background: transparent; color: var(--ink-2); } .btn-ghost:hover { background: var(--bg-soft); color: var(--ink); } .btn-danger { background: var(--bad); color: var(--bad-ink); } .btn-sm { padding: 5px 12px; font-size: 11px; } .btn-icon { padding: 8px; width: 32px; height: 32px; justify-content: center; } /* ================================================================= Inputs ================================================================= */ .field { margin-bottom: 12px; } .field-label { display: block; font-size: 11px; font-weight: 500; color: var(--ink-2); margin: 0 0 6px 4px; } .input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], select, textarea { display: block; width: 100%; background: var(--bg-soft); border: 1.5px solid transparent; border-radius: var(--r-md); padding: 11px 14px; font-size: 14px; color: var(--ink); font-family: inherit; line-height: 1.4; transition: border-color 0.1s ease, background 0.1s ease; } .input:focus, input:focus, select:focus, textarea:focus { outline: none; background: var(--bg-elevated); border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus-ring); } textarea { resize: vertical; min-height: 80px; } select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%236B6557' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } /* ================================================================= Pills / badges ================================================================= */ .pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 3px 8px; border-radius: var(--r-pill); line-height: 1.4; background: var(--bg-soft); color: var(--ink-2); font-weight: 500; } .pill-good { background: var(--good); color: var(--good-ink); } .pill-warn { background: var(--warn); color: var(--warn-ink); } .pill-bad { background: var(--bad); color: var(--bad-ink); } .pill-mint { background: var(--mint); color: var(--mint-ink); } .pill-butter { background: var(--butter); color: var(--butter-ink); } .pill-blush { background: var(--blush); color: var(--blush-ink); } .pill-lav { background: var(--lav); color: var(--lav-ink); } .pill-ink { background: var(--ink); color: var(--ink-on-dark); } /* ================================================================= Tables ================================================================= */ .table { width: 100%; border-collapse: collapse; font-size: 12px; } .table thead tr { background: var(--bg); } .table thead th { text-align: left; padding: 10px 14px; font-weight: 500; color: var(--ink-2); font-size: 11px; border-bottom: 0.5px solid var(--border); text-transform: lowercase; } .table tbody td { padding: 12px 14px; border-top: 0.5px solid var(--bg-divider); color: var(--ink); } .table tbody tr:hover td { background: var(--bg-soft); } .table tbody tr:first-child td { border-top: 0; } .table-card { background: var(--bg-elevated); border-radius: var(--r-lg); overflow: hidden; border: 0.5px solid var(--border); } .table-card .table-header { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 0.5px solid var(--border); } /* ================================================================= Avatars (site initials) ================================================================= */ .avatar { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 13px; flex-shrink: 0; } .avatar-mint { background: var(--mint); color: var(--mint-ink); } .avatar-butter { background: var(--butter); color: var(--butter-ink); } .avatar-blush { background: var(--blush); color: var(--blush-ink); } .avatar-lav { background: var(--lav); color: var(--lav-ink); } .avatar-lg { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; } /* ================================================================= Tabs (sub-navigation inside per-site pages) ================================================================= */ .tabs { background: var(--bg-elevated); border-radius: var(--r-lg); padding: 0 14px; margin-bottom: 12px; display: flex; gap: 4px; flex-wrap: wrap; border: 0.5px solid var(--border); } .tabs a { padding: 12px 14px; font-size: 13px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a:hover { color: var(--ink); } .tabs a.active { color: var(--teal-strong); font-weight: 600; border-bottom-color: var(--teal); } /* ================================================================= Alerts ================================================================= */ .alert { padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; margin-bottom: 12px; } .alert-success { background: var(--good); color: var(--good-ink); } .alert-warning { background: var(--warn); color: var(--warn-ink); } .alert-danger, .alert-error { background: var(--bad); color: var(--bad-ink); } .alert-info { background: var(--mint); color: var(--mint-ink); } /* ================================================================= Hero card (special highlighted card on dashboard) ================================================================= */ .hero { background: var(--ink); color: var(--ink-on-dark); border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 12px; position: relative; overflow: hidden; } .hero .hero-eyebrow { font-size: 11px; color: var(--lav); margin-bottom: 6px; } .hero .hero-title { font-size: 18px; font-weight: 500; line-height: 1.4; max-width: 380px; margin-bottom: 14px; } .hero .hero-deco { position: absolute; right: -20px; top: -20px; opacity: 0.5; } /* ================================================================= Modal / dialog ================================================================= */ .modal-backdrop { position: fixed; inset: 0; background: rgba(31, 27, 45, 0.45); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-backdrop.show { display: flex; } .modal-card { background: var(--bg-elevated); border-radius: var(--r-lg); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; } .modal-head { padding: 18px 22px 14px; border-bottom: 0.5px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-head h3 { margin: 0; font-size: 18px; font-weight: 500; } .modal-head .modal-close { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--ink-3); padding: 0; width: 32px; height: 32px; line-height: 1; } .modal-body { padding: 18px 22px; } .modal-foot { padding: 14px 22px; border-top: 0.5px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--bg); } /* ================================================================= Login page (full-screen, no app shell) ================================================================= */ .auth-shell { min-height: 100vh; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { width: 100%; max-width: 380px; } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; justify-content: center; } .auth-brand .brand-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: var(--blush); display: flex; align-items: center; justify-content: center; font-size: 16px; } .auth-brand .brand-name { font-weight: 500; font-size: 16px; color: var(--ink); } .auth-card-body { background: var(--bg-elevated); border-radius: 24px; padding: 28px 26px; position: relative; } .auth-foot { text-align: center; font-size: 11px; color: var(--ink-3); margin-top: 18px; } /* ================================================================= Helpers ================================================================= */ .flex { display: flex; } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .items-center { align-items: center; } .text-muted { color: var(--ink-2); } .text-faint { color: var(--ink-3); } .text-danger { color: var(--bad-ink); } .text-success { color: var(--good-ink); } .text-center { text-align: center; } .text-right { text-align: right; } .muted { color: var(--ink-3); } .field-validation-error { color: var(--bad-ink); font-size: 11px; display: block; margin-top: 4px; } /* Old form-related */ .form-control { /* mapped via input rules above */ } .form-label { display: block; font-size: 11px; font-weight: 500; color: var(--ink-2); margin: 0 0 6px 4px; } /* Bootstrap-replacement grid for old views */ .row { display: flex; flex-wrap: wrap; gap: 12px; } .row > * { flex: 1; min-width: 200px; } .mt-0 { margin-top: 0; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .fs-11 { font-size: 11px; } .fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; } .fs-15 { font-size: 15px; } .fs-18 { font-size: 18px; } .fw-500 { font-weight: 500; } .divider { height: 0.5px; background: var(--border); margin: 14px 0; border: 0; } /* ================================================================= Responsive ================================================================= */ @media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; padding: 8px; gap: 8px; } .sidebar { position: relative; top: 0; height: auto; } } /* ================================================================= Bootstrap / FontAwesome legacy compat Some existing views still use bootstrap classes; we override the most common ones to match new theme so views keep working while we redesign them ================================================================= */ /* Old class names mapped to new ones - prevents broken UI on un-redesigned pages */ .btn-primary-modern, .btn-ghost-modern { display: inline-flex; align-items: center; gap: 8px; border: none; padding: 9px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; line-height: 1.2; } .btn-primary-modern { background: var(--ink); color: var(--ink-on-dark); } .btn-primary-modern:hover { opacity: 0.9; color: var(--ink-on-dark); } .btn-ghost-modern { background: var(--bg-elevated); color: var(--ink); box-shadow: var(--lift); } .btn-ghost-modern:hover { background: var(--bg-soft); color: var(--ink); } .card-modern { background: var(--bg-elevated); border-radius: var(--r-lg); padding: 18px 20px; border: 0.5px solid var(--border); margin-bottom: 12px; } .input-modern, .label-modern { /* old form inputs - already styled by global input rules */ } .label-modern { display: block; font-size: 11px; font-weight: 500; color: var(--ink-2); margin: 0 0 6px 4px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 14px; } .stat-card { background: var(--bg-elevated); border-radius: var(--r-lg); padding: 16px; border: 0.5px solid var(--border); } .stat-card .stat-label { font-size: 11px; color: var(--ink-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; } .stat-card .stat-value { font-size: 24px; font-weight: 500; color: var(--ink); } .table-modern { width: 100%; border-collapse: collapse; font-size: 12px; } .table-modern thead th { text-align: left; padding: 10px 14px; font-weight: 500; color: var(--ink-2); font-size: 11px; border-bottom: 0.5px solid var(--border); background: var(--bg); } .table-modern tbody td { padding: 12px 14px; border-top: 0.5px solid var(--bg-divider); color: var(--ink); } .role-badge { display: inline-flex; font-size: 10px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--bg-soft); color: var(--ink-2); font-weight: 500; } /* Variables matched to old names */ :root, [data-theme="light"] { --primary: var(--ink); --primary-dark: var(--ink); --primary-light: var(--lav); --accent: var(--mint-ink); --accent-light: var(--mint); --warning: var(--warn-ink); --warning-light: var(--warn); --danger: var(--bad-ink); --danger-light: var(--bad); --info: var(--link); --info-light: var(--mint); --text: var(--ink); --text-muted: var(--ink-2); --text-light: var(--ink-3); --bg-card: var(--bg-elevated); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --shadow-sm: var(--lift); --shadow: var(--lift); --sidebar-width: var(--sidebar-w); }