/* ============================================================ CHAMPs Work Tracker — theming Every color is a token defined per theme in the [data-theme] blocks below. Components never hardcode colors, so adding a theme means adding one block, not touching component CSS. Theme is set on by the picker in the nav. ============================================================ */ :root { --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; /* Status colors are intentionally shared across all themes: green = good, amber = attention, red = bad shouldn't shift meaning with decoration. All are dark enough to carry white text (verified >= 4.5:1). */ --grad-money: linear-gradient(120deg, #2a5e4e, #3c826e); --grad-flag: linear-gradient(120deg, #8a5a1c, #a1542a); --grad-danger: linear-gradient(120deg, #a13d61, #7d2f4c); } /* ---------- 1. Midnight Galaxy (dark) ---------- */ [data-theme="midnight-galaxy"] { color-scheme: dark; --font-head: "FreeSans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "FreeSans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bg: #170f26; --card: #2c2245; --card-2: #362a54; --border: rgba(230,230,250,.12); --text: #e6e6fa; --muted: #a99bc7; --accent: #6b5691; --accent-2: #a490c2; --accent-dark: #383c72; --accent-soft: rgba(74,78,143,.24); --accent-text: #b9a8d6; --nav-bg: #120b20; --nav-text: #9791ac; --nav-hover: rgba(230,230,250,.08); --th-bg: #241a3c; --row-hover: #342a52; --btn-sec-hover: #3d2f5c; --track-bg: #241a3c; --badge-neutral: #574a76; --grad: linear-gradient(135deg, #4a4e8f, #6b5691); --g1: linear-gradient(120deg, #2f2a52, #4a4e8f); --g2: linear-gradient(120deg, #4a3a68, #6b5691); --g3: linear-gradient(120deg, #383c72, #5b4a86); --g4: linear-gradient(120deg, #6b5691, #4a4e8f); --zc-1: #4a4e8f; --zc-2: #a490c2; --zc-3: #2b1e3e; --zc-4: #6b5691; --zone-opacity: .30; --zone-icon-opacity: .06; --login-bg: radial-gradient(800px 460px at 14% -8%, rgba(74,78,143,.35), transparent 58%), radial-gradient(900px 520px at 88% 6%, rgba(164,144,194,.28), transparent 55%), #0b0716; --shadow: 0 1px 2px rgba(6,3,14,.3), 0 1px 3px rgba(6,3,14,.35); --shadow-md: 0 3px 6px rgba(6,3,14,.3), 0 10px 26px rgba(6,3,14,.4); --shadow-lg: 0 18px 44px rgba(4,2,12,.55), 0 6px 16px rgba(4,2,12,.4); } /* ---------- 2. Ocean Depths (dark) ---------- */ [data-theme="ocean-depths"] { color-scheme: dark; --font-head: "DejaVu Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "DejaVu Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bg: #131c28; --card: #1f2b3a; --card-2: #263548; --border: rgba(241,250,238,.13); --text: #f1faee; --muted: #9fb4c2; --accent: #2d8b8b; --accent-2: #a8dadc; --accent-dark: #216a6a; --accent-soft: rgba(45,139,139,.24); --accent-text: #a8dadc; --nav-bg: #101822; --nav-text: #93a7b6; --nav-hover: rgba(241,250,238,.08); --th-bg: #1a2534; --row-hover: #27374a; --btn-sec-hover: #2c3d52; --track-bg: #1a2534; --badge-neutral: #4a5f70; --grad: linear-gradient(135deg, #1f6a6a, #257373); --g1: linear-gradient(120deg, #1a4f5e, #26707f); --g2: linear-gradient(120deg, #1a5e5e, #257373); --g3: linear-gradient(120deg, #24506b, #2f7391); --g4: linear-gradient(120deg, #235a68, #2d7a7a); --zc-1: #2d8b8b; --zc-2: #a8dadc; --zc-3: #1a2332; --zc-4: #3f7d9e; --zone-opacity: .28; --zone-icon-opacity: .06; --login-bg: radial-gradient(800px 460px at 14% -8%, rgba(45,139,139,.32), transparent 58%), radial-gradient(900px 520px at 88% 6%, rgba(168,218,220,.20), transparent 55%), #0c141d; --shadow: 0 1px 2px rgba(3,8,14,.3), 0 1px 3px rgba(3,8,14,.35); --shadow-md: 0 3px 6px rgba(3,8,14,.3), 0 10px 26px rgba(3,8,14,.4); --shadow-lg: 0 18px 44px rgba(2,6,10,.55), 0 6px 16px rgba(2,6,10,.4); } /* ---------- 3. Tech Innovation (dark) ---------- */ [data-theme="tech-innovation"] { color-scheme: dark; --font-head: "DejaVu Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "DejaVu Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bg: #141414; --card: #1e1e1e; --card-2: #262626; --border: rgba(255,255,255,.14); --text: #ffffff; --muted: #a8b0b8; --accent: #0066ff; --accent-2: #35d6e8; --accent-dark: #0052cc; --accent-soft: rgba(0,102,255,.22); --accent-text: #4d9bff; --nav-bg: #0f0f0f; --nav-text: #9aa3ab; --nav-hover: rgba(255,255,255,.09); --th-bg: #232323; --row-hover: #2b2b2b; --btn-sec-hover: #303030; --track-bg: #262626; --badge-neutral: #4a4a4a; --grad: linear-gradient(135deg, #0052cc, #0066ff); --g1: linear-gradient(120deg, #0044aa, #0066ff); --g2: linear-gradient(120deg, #063d6b, #0a6f8f); --g3: linear-gradient(120deg, #0052cc, #0a6f8f); --g4: linear-gradient(120deg, #3b2f8f, #0052cc); --zc-1: #0066ff; --zc-2: #00ffff; --zc-3: #1e1e1e; --zc-4: #6b3df5; --zone-opacity: .22; --zone-icon-opacity: .07; --login-bg: radial-gradient(800px 460px at 14% -8%, rgba(0,102,255,.30), transparent 58%), radial-gradient(900px 520px at 88% 6%, rgba(0,255,255,.16), transparent 55%), #0b0b0b; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.45); --shadow-md: 0 3px 6px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.5); --shadow-lg: 0 18px 44px rgba(0,0,0,.65), 0 6px 16px rgba(0,0,0,.5); } /* ---------- 4. Sunset Boulevard (light) ---------- */ [data-theme="sunset-boulevard"] { color-scheme: light; --font-head: "DejaVu Serif", Georgia, "Times New Roman", serif; --font-body: "DejaVu Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bg: #fdf6f0; --card: #ffffff; --card-2: #fdf3ec; --border: #f0ddd2; --text: #264653; --muted: #5c6d74; --accent: #b34a31; --accent-2: #e76f51; --accent-dark: #93381f; --accent-soft: #fcece5; --accent-text: #b34a31; --nav-bg: #264653; --nav-text: #a9bfc6; --nav-hover: rgba(255,255,255,.11); --th-bg: #fdf1ea; --row-hover: #fdf3ec; --btn-sec-hover: #fbeee6; --track-bg: #f2e2d8; --badge-neutral: #5c6d74; --grad: linear-gradient(135deg, #93381f, #a8412a); --g1: linear-gradient(120deg, #9c3d27, #a8412a); --g2: linear-gradient(120deg, #7d5210, #8f5f14); --g3: linear-gradient(120deg, #1f3b47, #37606f); --g4: linear-gradient(120deg, #93381f, #b34a31); --zc-1: #e76f51; --zc-2: #f4a261; --zc-3: #e9c46a; --zc-4: #264653; --zone-opacity: .20; --zone-icon-opacity: .05; --login-bg: radial-gradient(800px 460px at 14% -8%, rgba(231,111,81,.35), transparent 58%), radial-gradient(900px 520px at 88% 6%, rgba(233,196,106,.30), transparent 55%), #1b333d; --shadow: 0 1px 2px rgba(38,70,83,.05), 0 1px 3px rgba(38,70,83,.07); --shadow-md: 0 3px 6px rgba(38,70,83,.06), 0 10px 24px rgba(38,70,83,.09); --shadow-lg: 0 16px 40px rgba(38,70,83,.16), 0 6px 14px rgba(38,70,83,.08); } /* ---------- 5. Forest Canopy (light) ---------- */ [data-theme="forest-canopy"] { color-scheme: light; --font-head: "FreeSerif", Georgia, "Times New Roman", serif; --font-body: "FreeSans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bg: #f7f8f4; --card: #ffffff; --card-2: #f4f7ef; --border: #e2e6da; --text: #22331f; --muted: #5c6654; --accent: #2d4a2b; --accent-2: #7d8471; --accent-dark: #1e3320; --accent-soft: #eaf0e5; --accent-text: #2d4a2b; --nav-bg: #22331f; --nav-text: #a4b09c; --nav-hover: rgba(255,255,255,.11); --th-bg: #f2f5ee; --row-hover: #f4f7ef; --btn-sec-hover: #eef2e8; --track-bg: #e6ebdf; --badge-neutral: #5c6654; --grad: linear-gradient(135deg, #2d4a2b, #4e6b48); --g1: linear-gradient(120deg, #24401f, #3d5c38); --g2: linear-gradient(120deg, #4e6b48, #667a5b); --g3: linear-gradient(120deg, #33523d, #4a6b55); --g4: linear-gradient(120deg, #525a48, #5b6350); --zc-1: #2d4a2b; --zc-2: #7d8471; --zc-3: #a4ac86; --zc-4: #4e6b48; --zone-opacity: .20; --zone-icon-opacity: .05; --login-bg: radial-gradient(800px 460px at 14% -8%, rgba(45,74,43,.45), transparent 58%), radial-gradient(900px 520px at 88% 6%, rgba(164,172,134,.30), transparent 55%), #1a2718; --shadow: 0 1px 2px rgba(34,51,31,.05), 0 1px 3px rgba(34,51,31,.07); --shadow-md: 0 3px 6px rgba(34,51,31,.06), 0 10px 24px rgba(34,51,31,.09); --shadow-lg: 0 16px 40px rgba(34,51,31,.16), 0 6px 14px rgba(34,51,31,.08); } /* ---------- 6. Modern Minimalist (light) ---------- */ [data-theme="modern-minimalist"] { color-scheme: light; --font-head: "DejaVu Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "DejaVu Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bg: #f5f6f7; --card: #ffffff; --card-2: #f6f7f8; --border: #e2e5e8; --text: #24303a; --muted: #59666f; --accent: #36454f; --accent-2: #708090; --accent-dark: #24303a; --accent-soft: #eceff1; --accent-text: #36454f; --nav-bg: #24303a; --nav-text: #a3aeb6; --nav-hover: rgba(255,255,255,.11); --th-bg: #f2f4f5; --row-hover: #f6f7f8; --btn-sec-hover: #eef0f2; --track-bg: #e6e9ec; --badge-neutral: #59666f; --grad: linear-gradient(135deg, #36454f, #566a78); --g1: linear-gradient(120deg, #2b3841, #46586a); --g2: linear-gradient(120deg, #46586a, #5f6b78); --g3: linear-gradient(120deg, #3a4d5c, #5b7180); --g4: linear-gradient(120deg, #4a5560, #66727e); --zc-1: #36454f; --zc-2: #708090; --zc-3: #a9b4bc; --zc-4: #566a78; --zone-opacity: .18; --zone-icon-opacity: .05; --login-bg: radial-gradient(800px 460px at 14% -8%, rgba(54,69,79,.5), transparent 58%), radial-gradient(900px 520px at 88% 6%, rgba(112,128,144,.35), transparent 55%), #1b242c; --shadow: 0 1px 2px rgba(36,48,58,.05), 0 1px 3px rgba(36,48,58,.07); --shadow-md: 0 3px 6px rgba(36,48,58,.06), 0 10px 24px rgba(36,48,58,.09); --shadow-lg: 0 16px 40px rgba(36,48,58,.16), 0 6px 14px rgba(36,48,58,.08); } /* ---------- 7. Golden Hour (light) ---------- */ [data-theme="golden-hour"] { color-scheme: light; --font-head: "FreeSans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "FreeSans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bg: #faf5ee; --card: #ffffff; --card-2: #f9f3ea; --border: #ece0d0; --text: #4a403a; --muted: #6b6058; --accent: #8f5f14; --accent-2: #c1666b; --accent-dark: #6e480d; --accent-soft: #f7eddc; --accent-text: #8f5f14; --nav-bg: #4a403a; --nav-text: #b3a79c; --nav-hover: rgba(255,255,255,.11); --th-bg: #f7f0e6; --row-hover: #f9f3ea; --btn-sec-hover: #f4ece1; --track-bg: #eadfd0; --badge-neutral: #6b6058; --grad: linear-gradient(135deg, #7d5210, #8f5f14); --g1: linear-gradient(120deg, #6b4a0e, #8a5c08); --g2: linear-gradient(120deg, #94484d, #a3545a); --g3: linear-gradient(120deg, #5f5142, #6b5b48); --g4: linear-gradient(120deg, #5c4f45, #7d7166); --zc-1: #f4a900; --zc-2: #c1666b; --zc-3: #d4b896; --zc-4: #4a403a; --zone-opacity: .20; --zone-icon-opacity: .05; --login-bg: radial-gradient(800px 460px at 14% -8%, rgba(244,169,0,.32), transparent 58%), radial-gradient(900px 520px at 88% 6%, rgba(193,102,107,.32), transparent 55%), #322b26; --shadow: 0 1px 2px rgba(74,64,58,.05), 0 1px 3px rgba(74,64,58,.07); --shadow-md: 0 3px 6px rgba(74,64,58,.06), 0 10px 24px rgba(74,64,58,.09); --shadow-lg: 0 16px 40px rgba(74,64,58,.16), 0 6px 14px rgba(74,64,58,.08); } /* ---------- 8. Arctic Frost (light) ---------- */ [data-theme="arctic-frost"] { color-scheme: light; --font-head: "DejaVu Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "DejaVu Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bg: #f2f7fd; --card: #ffffff; --card-2: #f3f8fd; --border: #dde8f5; --text: #22303f; --muted: #556575; --accent: #3a5a8a; --accent-2: #4a6fa5; --accent-dark: #2c4770; --accent-soft: #e7f0fb; --accent-text: #3a5a8a; --nav-bg: #22303f; --nav-text: #9fb0c2; --nav-hover: rgba(255,255,255,.11); --th-bg: #eef4fb; --row-hover: #f3f8fd; --btn-sec-hover: #e9f1fa; --track-bg: #dfe9f5; --badge-neutral: #5f6b78; --grad: linear-gradient(135deg, #3a5a8a, #4a6fa5); --g1: linear-gradient(120deg, #2c4770, #3f6497); --g2: linear-gradient(120deg, #3a5a8a, #4a6fa5); --g3: linear-gradient(120deg, #2f5f74, #3f7d92); --g4: linear-gradient(120deg, #4a5a6e, #62748a); --zc-1: #4a6fa5; --zc-2: #a8c6e8; --zc-3: #c0c0c0; --zc-4: #2c4770; --zone-opacity: .22; --zone-icon-opacity: .05; --login-bg: radial-gradient(800px 460px at 14% -8%, rgba(74,111,165,.45), transparent 58%), radial-gradient(900px 520px at 88% 6%, rgba(212,228,247,.35), transparent 55%), #18232f; --shadow: 0 1px 2px rgba(34,48,63,.05), 0 1px 3px rgba(34,48,63,.07); --shadow-md: 0 3px 6px rgba(34,48,63,.06), 0 10px 24px rgba(34,48,63,.09); --shadow-lg: 0 16px 40px rgba(34,48,63,.16), 0 6px 14px rgba(34,48,63,.08); } /* ---------- 9. Desert Rose (light) ---------- */ [data-theme="desert-rose"] { color-scheme: light; --font-head: "FreeSans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "FreeSans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bg: #faf4ef; --card: #ffffff; --card-2: #faf2ec; --border: #ecdbcd; --text: #5d2e46; --muted: #775c67; --accent: #7a3a58; --accent-2: #b87d6d; --accent-dark: #5d2e46; --accent-soft: #f7e9ee; --accent-text: #7a3a58; --nav-bg: #5d2e46; --nav-text: #bfa3b0; --nav-hover: rgba(255,255,255,.12); --th-bg: #f8efe7; --row-hover: #faf2ec; --btn-sec-hover: #f5e9e0; --track-bg: #ecdbcd; --badge-neutral: #775c67; --grad: linear-gradient(135deg, #5d2e46, #8f4a63); --g1: linear-gradient(120deg, #5d2e46, #7a3a58); --g2: linear-gradient(120deg, #8a4f3b, #92553f); --g3: linear-gradient(120deg, #7a3a58, #a05470); --g4: linear-gradient(120deg, #6e5560, #8a6d78); --zc-1: #d4a5a5; --zc-2: #b87d6d; --zc-3: #e8d5c4; --zc-4: #5d2e46; --zone-opacity: .22; --zone-icon-opacity: .05; --login-bg: radial-gradient(800px 460px at 14% -8%, rgba(212,165,165,.4), transparent 58%), radial-gradient(900px 520px at 88% 6%, rgba(184,125,109,.35), transparent 55%), #3a1c2c; --shadow: 0 1px 2px rgba(93,46,70,.05), 0 1px 3px rgba(93,46,70,.07); --shadow-md: 0 3px 6px rgba(93,46,70,.06), 0 10px 24px rgba(93,46,70,.09); --shadow-lg: 0 16px 40px rgba(93,46,70,.16), 0 6px 14px rgba(93,46,70,.08); } /* ---------- 10. Botanical Garden (light) ---------- */ [data-theme="botanical-garden"] { color-scheme: light; --font-head: "DejaVu Serif", Georgia, "Times New Roman", serif; --font-body: "DejaVu Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --bg: #f7f6f0; --card: #ffffff; --card-2: #f6f5ee; --border: #e4e2d6; --text: #2b3d31; --muted: #5c6a60; --accent: #3a6446; --accent-2: #b7472a; --accent-dark: #2b4a34; --accent-soft: #e9f0ea; --accent-text: #3a6446; --nav-bg: #2b3d31; --nav-text: #a5b3a9; --nav-hover: rgba(255,255,255,.11); --th-bg: #f3f2ea; --row-hover: #f6f5ee; --btn-sec-hover: #eff0e6; --track-bg: #e6e6da; --badge-neutral: #5c6a60; --grad: linear-gradient(135deg, #3a6446, #4a7c59); --g1: linear-gradient(120deg, #2f5439, #4a7c59); --g2: linear-gradient(120deg, #a13d22, #b7472a); --g3: linear-gradient(120deg, #7a570f, #8a6212); --g4: linear-gradient(120deg, #4a7c59, #6b7a6f); --zc-1: #4a7c59; --zc-2: #f9a620; --zc-3: #b7472a; --zc-4: #2b3d31; --zone-opacity: .20; --zone-icon-opacity: .05; --login-bg: radial-gradient(800px 460px at 14% -8%, rgba(74,124,89,.45), transparent 58%), radial-gradient(900px 520px at 88% 6%, rgba(249,166,32,.28), transparent 55%), #1d2a21; --shadow: 0 1px 2px rgba(43,61,49,.05), 0 1px 3px rgba(43,61,49,.07); --shadow-md: 0 3px 6px rgba(43,61,49,.06), 0 10px 24px rgba(43,61,49,.09); --shadow-lg: 0 16px 40px rgba(43,61,49,.16), 0 6px 14px rgba(43,61,49,.08); } /* Cross-document view transitions: smoothly crossfades between full-page navigations so switching tabs feels like moving to a different "room". Unsupported browsers just navigate instantly — no error. */ @view-transition { navigation: auto; } * { box-sizing: border-box; } /* ---- Per-tab ambient background ("cabins") ---- Two slow-drifting blurred blobs, recolored per module from the active theme's own zone palette (--zc-1..4), so every theme stays coherent. */ .bg-zone { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); view-transition-name: bg-zone; } .bg-zone::before, .bg-zone::after { content: ""; position: absolute; width: 58vw; height: 58vw; min-width: 420px; min-height: 420px; border-radius: 50%; filter: blur(100px); opacity: var(--zone-opacity); } .bg-zone::before { top: -22%; left: -12%; background: var(--zone-1); animation: bgDrift1 26s ease-in-out infinite alternate; } .bg-zone::after { bottom: -26%; right: -14%; background: var(--zone-2); animation: bgDrift2 30s ease-in-out infinite alternate; } .bg-zone-icon { position: absolute; bottom: -6%; right: -3%; width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; color: var(--zone-2); opacity: var(--zone-icon-opacity); } .bg-zone-icon svg { width: 100%; height: 100%; } @keyframes bgDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw, 5vh) scale(1.1); } } @keyframes bgDrift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-5vw, -6vh) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .bg-zone::before, .bg-zone::after { animation: none; } } body[data-zone="dashboard"] { --zone-1: var(--zc-1); --zone-2: var(--zc-2); } body[data-zone="tiktok"] { --zone-1: var(--zc-2); --zone-2: var(--zc-3); } body[data-zone="etsy"] { --zone-1: var(--zc-3); --zone-2: var(--zc-4); } body[data-zone="outreach"] { --zone-1: var(--zc-4); --zone-2: var(--zc-1); } body[data-zone="employees"] { --zone-1: var(--zc-2); --zone-2: var(--zc-4); } body[data-zone="history"] { --zone-1: var(--zc-1); --zone-2: var(--zc-3); } body[data-zone="help"] { --zone-1: var(--zc-3); --zone-2: var(--zc-1); } body { margin: 0; color: var(--text); font-family: var(--font-body); font-size: 15px; -webkit-font-smoothing: antialiased; } .icon { width: 17px; height: 17px; flex-shrink: 0; vertical-align: middle; } /* ---- Top nav ---- */ .topnav { display: flex; align-items: center; gap: 2px; background: var(--nav-bg); padding: 0 22px; height: 62px; box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 20px rgba(0,0,0,.28); position: sticky; top: 0; z-index: 20; border-bottom: 2px solid transparent; border-image: var(--grad) 1; } .topnav .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 16px; color: #fff; margin-right: 20px; letter-spacing: -.015em; white-space: nowrap; } .topnav .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,.35); flex-shrink: 0; } .topnav .brand-mark .icon { width: 17px; height: 17px; color: #fff; } .topnav a { display: inline-flex; align-items: center; gap: 7px; color: var(--nav-text); text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 8px 13px; border-radius: 9px; transition: background .15s ease, color .15s ease, transform .1s ease; } .topnav a:hover { color: #fff; background: var(--nav-hover); transform: translateY(-1px); } .topnav a.active { color: #fff; background: var(--grad); box-shadow: 0 2px 10px rgba(0,0,0,.3); } .topnav .spacer { flex: 1; } .topnav .who-wrap { display: flex; align-items: center; gap: 9px; margin-right: 8px; } .topnav .who-avatar { width: 27px; height: 27px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; flex-shrink: 0; } .topnav .who { color: #fff; opacity: .82; font-size: 13px; font-weight: 600; } .topnav .logout-link { color: var(--nav-text); } .topnav .logout-link .icon { width: 15px; height: 15px; } /* Theme picker */ .theme-select { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; font-weight: 600; font-family: inherit; margin-right: 10px; cursor: pointer; max-width: 160px; } .theme-select:focus { outline: none; border-color: rgba(255,255,255,.45); } .theme-select option { background: var(--card); color: var(--text); } .container { max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; } h1 { font-family: var(--font-head); font-size: 32px; margin: 0 0 5px; letter-spacing: -.025em; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent-text); } h2 { font-family: var(--font-head); font-size: 17px; margin: 34px 0 13px; font-weight: 700; color: var(--text); letter-spacing: -.008em; } .page-sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; font-weight: 500; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow); transition: box-shadow .15s ease; } table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; } th { background: var(--th-bg); color: var(--muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; } tr:last-child td { border-bottom: none; } tbody tr { transition: background .12s ease; } tbody tr:hover { background: var(--row-hover); } .toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; } .toolbar .spacer { flex: 1; } .toolbar select { padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; font-family: inherit; background: var(--card); color: var(--text); } .btn { display: inline-flex; align-items: center; gap: 7px; background: var(--grad); color: #fff; border: none; padding: 10px 17px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; font-family: inherit; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-md); transition: transform .12s ease, box-shadow .15s ease, filter .15s ease; } .btn .icon { width: 16px; height: 16px; } .btn:hover { filter: brightness(1.1); transform: translateY(-2px) scale(1.01); box-shadow: var(--shadow-lg); } .btn:active { transform: translateY(0) scale(1); } .btn.secondary { background: var(--card-2); color: var(--text); border: 1.5px solid var(--border); box-shadow: var(--shadow); } .btn.secondary:hover { background: var(--btn-sec-hover); filter: none; box-shadow: var(--shadow-md); } .btn.danger { background: var(--grad-danger); } .btn.small { padding: 5px 12px; font-size: 12px; border-radius: 8px; } form.inline { display: inline; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #fff; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: .85; } .badge.active, .badge.uploaded, .badge.converted, .badge.responded { background: var(--grad-money); } .badge.banned, .badge.dead, .badge.rejected { background: var(--grad-danger); } .badge.needs_attention, .badge.no_response, .badge.warming { background: var(--grad-flag); } .badge.idle, .badge.draft, .badge.new, .badge.contacted, .badge.submitted { background: var(--badge-neutral); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 8px; } .stat-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; } .stat-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--border); } .stat-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .stat-tile .num { font-family: var(--font-head); font-size: 29px; font-weight: 800; letter-spacing: -.02em; } .stat-tile .label { color: var(--muted); font-size: 12px; margin-top: 3px; font-weight: 600; } .stat-tile.accent::before { background: var(--grad); } .stat-tile.accent .num { color: var(--accent-text); } .stat-tile.warn::before { background: var(--grad-flag); } .stat-tile.warn .num { color: var(--accent-text); } .stat-tile-icon { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; } .stat-tile-icon .icon { width: 17px; height: 17px; } /* Bold gradient KPI tiles — white text, so every --g* stop is kept dark enough. */ .stat-tile.pop { border: none; color: #fff; box-shadow: var(--shadow-md); } .stat-tile.pop::before { display: none; } .stat-tile.pop .num { color: #fff; } .stat-tile.pop .label { color: rgba(255,255,255,.85); } .stat-tile.pop .stat-tile-icon { background: rgba(255,255,255,.2); color: #fff; } .stat-tile.pop.g-tiktok { background: var(--g1); } .stat-tile.pop.g-etsy { background: var(--g2); } .stat-tile.pop.g-outreach { background: var(--g3); } .stat-tile.pop.g-users { background: var(--g4); } .stat-tile.pop.g-money { background: var(--grad-money); } .stat-tile.pop.g-flag { background: var(--grad-flag); } h2 { display: flex; align-items: center; gap: 8px; } h2 .icon { width: 18px; height: 18px; color: var(--accent-text); } h3 { font-family: var(--font-head); display: flex; align-items: center; gap: 7px; } h3 .icon { width: 15px; height: 15px; color: var(--accent-text); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px; box-shadow: var(--shadow); } .stat .num { font-family: var(--font-head); font-size: 22px; font-weight: 800; } .stat .label { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; font-weight: 700; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } @media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } } .emp-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); } .emp-row:last-child { border-bottom: none; } .emp-avatar { width: 37px; height: 37px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; box-shadow: var(--shadow); } .emp-name { font-weight: 700; font-size: 14px; } .emp-role { color: var(--muted); font-size: 12px; font-weight: 500; } .emp-metrics { display: flex; gap: 18px; font-size: 12.5px; color: var(--muted); margin-top: 3px; } .emp-metrics b { color: var(--text); font-weight: 700; } .emp-bar-wrap { flex: 1; min-width: 80px; } .emp-bar-track { background: var(--track-bg); border-radius: 999px; height: 7px; overflow: hidden; } .emp-bar-fill { background: var(--grad); height: 100%; border-radius: 999px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; font-weight: 600; } .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: var(--card-2); color: var(--text); transition: border-color .12s ease, box-shadow .12s ease; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .field textarea { min-height: 70px; resize: vertical; } .field-hint { color: var(--muted); font-size: 12px; margin-top: 4px; } /* ---- Login ---- */ body.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--login-bg); } .login-wrap { width: 100%; max-width: 390px; margin: 24px; } .login-card { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 38px 34px 34px; text-align: center; border-top: 4px solid transparent; border-image: var(--grad) 1; } .login-mark { width: 56px; height: 56px; border-radius: 16px; background: var(--grad); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: var(--shadow-md); } .login-mark .icon { width: 28px; height: 28px; color: #fff; } .login-wrap h1 { font-size: 22px; margin-bottom: 4px; -webkit-text-fill-color: initial; background: none; color: var(--text); } .login-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 28px; font-weight: 500; } .login-wrap form { text-align: left; } .login-wrap .btn { width: 100%; justify-content: center; padding: 12px 15px; font-size: 14.5px; margin-top: 6px; } .login-footer { text-align: center; color: rgba(255,255,255,.6); font-size: 12px; margin-top: 20px; font-weight: 500; } .flash { padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: #fff; } .flash-error { background: var(--grad-danger); } .flash-success { background: var(--grad-money); } .reveal-pass { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .muted { color: var(--muted); font-size: 13px; } a.link { color: var(--accent-text); text-decoration: none; font-weight: 700; } a.link:hover { text-decoration: underline; filter: brightness(1.12); } .empty-state { text-align: center; padding: 44px 20px; color: var(--muted); font-weight: 500; } .help-block { margin-bottom: 24px; } .help-block h3 { font-size: 15.5px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } .help-block h3 .icon { color: var(--accent-text); width: 19px; height: 19px; } .help-block ol, .help-block ul { margin: 0; padding-left: 20px; line-height: 1.7; } .help-block ol li, .help-block ul li { margin-bottom: 4px; } .help-nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .help-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--border); font-size: 13px; text-decoration: none; color: var(--text); font-weight: 700; transition: background .12s ease, color .12s ease, border-color .12s ease, transform .1s ease; } .help-nav a .icon { width: 14px; height: 14px; } .help-nav a:hover { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-1px); } .help-nav a:hover .icon { color: #fff; }